Skip to content

D
DoorLock
Commit 31c77ca3 by 朱建香
Options

Merge branch 'wangying' of http://192.168.2.91/gitlab/iot-project-js/doorlock into zjx 

# Conflicts:
#	History.md
#	web/lib/js/p.js
#	web/lib/less/addDevice/addDevice.less
#	web/lib/less/device/device.less
#	web/lib/less/public/animation.less
#	web/lib/less/public/core.less
#	web/lib/less/public/public.less
#	web/resources/font/iconfont.ttf
#	web/resources/lang/zh.json
#	web/view/addDevice/addDevice.css
#	web/view/device/device.css
parents 03b7b6ad 972bcb3f
Showing with 2616 additions and 414 deletions
History.md
1.0.4 / 2017-09-20
1.0.6 / 2017-09-25
==================
* 1.修改智能指纹锁页面样式
1.0.5 / 2017-09-22
==================
* 1.修改引导页面样式
1.0.4 / 2017-09-20
==================
* 1.修改生成绑定二维码页面样式
......
dev/src/lang/zh.json
......@@ -81,8 +81,10 @@
"device":{
"opendoorRecord": "开门记录",
"securityAlarm": "安全报警",
"doorlockUser": "门锁用户",
"remoteOpendoor": "远程开门",
"hijackAlarm": "劫持报警",
"doorlockManage": "门锁管理",
"followTitle": "关注服务号",
"followCont1": "关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧",
"followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注",
......
dev/src/view/device/v_index.js
......@@ -19,10 +19,14 @@ function init() {
valueOpendoorRecord: 1,
//安全报警
valueSecurityAlarm: 1,
//门锁用户
valueDoorlockUser: 1,
//远程开门
valueRemoteOpendoor: 1,
//劫持报警
valueHijackAlarm: 1,
//门锁管理
valueDoorlockManage: 1,
activeFlag: true,
followShowFlag: false,
//配置组件
......@@ -74,6 +78,10 @@ function init() {
onSecurityAlarmTap(){
securityAlarmTap();
},
//tap 门锁用户
onDoorlockUserTap(){
doorlockUserTap();
},
//tap 远程开门
onRemoteOpendoorTap(){
remoteOpendoorTap();
......@@ -131,6 +139,13 @@ function initComponentsConfig() {
autoChange: false
}
},
doorlockUserSwitch: {
initParam: {
class: 'custom-switch',
text: Vue.t('device.doorlockUser'),
autoChange: false
}
},
//远程开门switch 参数
remoteOpendoorSwitch: {
initParam: {
......@@ -147,6 +162,13 @@ function initComponentsConfig() {
autoChange: false
}
},
doorlockManageSwitch: {
initParam: {
class: 'custom-switch',
text: Vue.t('device.doorlockManage'),
autoChange: false
}
},
//确定 button 参数
saveQRcodeButton: {
initParam: {
......@@ -191,6 +213,11 @@ function securityAlarmTap(){
});
}
//tap 门锁用户
function doorlockUserTap(){
}
//tap 远程开门
function remoteOpendoorTap(){
iot.navigator.openWindow({
......
web/lib/js/p.js
This source diff could not be displayed because it is too large. You can view the blob instead.
web/lib/less/addDevice/addDevice.less
@import "../public/public.less";
@import "../public/header.less";
.u-text();
.u-button();
.u-commstatus-loading {
height: 100%;
background: rgba(0,0,0,0.7);
//添加设备
.noBottomGradient();
.addDevice li{
margin: 10px;
border: 1px solid;/*no*/
border-radius: 5px;
color: @ADDDEVICE-TEXT-COLOR;
font-size: @ADDDEVICE-TEXT-FONTSIZE;
height: 214px;
line-height: 214px;
padding-left: 58px;
&:nth-child(1) img{
width: 90px;
height: 90px;
margin-right: 40px;
}
&:nth-child(2) img{
width: 135px;
height: 64px;
margin-right: 25px;
}
.tap_row(@ADDDEVICE-ROW-ACTIVE-BG);
}
.u-commstatus-loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.u-commstatus-loading-button {
height: 44px;
width: 80%;
line-height: 44px;
background: #e0dfdf;
text-align: center;
position: absolute;
bottom: 44px;
left: 50%;
transform: translateX(-50%);
//配置Wi-Fi
.wifiAddHelp{
.help();
}
.u-button();
.u-commstatus-loading-status-0 .u-commstatus-loading-button {
display: none;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li{
opacity: 0.2;
-webkit-animation: stretchdelay 1.5s infinite;
animation: stretchdelay 1.5s infinite;
.custom-help-button,
.custom-button{
.button();
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content{
color: #00ffff;
}
//连接Wi-Fi
.inputBox(184px,22px,auto,"connectWifi.png",40px,77px 122px);
.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
font-size: 10px;
margin: 5em auto;
width: 1em;
height: 1em;
border-radius: 50%;
.wifi{
width: 100%;
display: table;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
}
@-webkit-keyframes load4 {
0%,
100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
}
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
margin-top: 17px;
span{
.iconfont(@WIFI-ICON-FONTSIZE);
width: 48px;
padding-left: 9px;
display: table-cell;
vertical-align: text-bottom;
}
p{
padding: 8px 0;
display: table-cell;
color: @WIFI-TEXT-COLOR;
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
}
.u-text();
@keyframes load4 {
0%,
100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
.custom-password-text{
margin-top: 17px;
input{
padding-top: 8px;
padding-bottom: 8px;
padding-right: 70px;
&[type = text] ~ .u-text-see:before{
content: '\e60e';
}
&::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
.u-text-icon{
font-size: @CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE;
width: 48px;
padding-left: 9px;
vertical-align: text-bottom;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
.u-text-clear,
.u-text-see{
&:before{
font-family: iconfont;
color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
font-size: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
//x icon
.u-text-clear{
right: 37px;
&:before{
content: '\e601';
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
//眼睛 icon
.u-text-see{
right: 7px;
&:before{
content: '\e6b2';
}
}
&:after{
.white_gradient_border();
}
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon{
display: none;
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip(22px);
}
.u-commstatus-loading-status-0 .u-commstatus-loading-button{
display: none;
//配置Wi-Fi提醒
.remind{
width: 312px;
margin: 0 auto;
li{
color: @REMIND-TEXT-COLOR;
font-size: @REMIND-TEXT-FONTSIZE;
.transform(scale(0.7));
padding-left: 46px;
margin-bottom: 10px;
line-height: 1;
&:first-child{
padding-left: 0;
}
}
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content{
color: #00ffff;
.custom-button{
.buttonPosition();
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon{
font-family: SDSIconfont;
font-size: 5em;
}
\ No newline at end of file
.u-comm-loading();
.custom-comm-loading();
\ No newline at end of file
web/lib/less/device/device.less
@import "../public/public.less";
@import "../public/header.less";
.u-switch();
//远程开门
.inputBox{
width: 250px;
margin: 145px auto 50px;
padding-bottom: 40px;
}
.u-text();
.custom-text{
.textInput();
}
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip();
}
.u-button();
.custom-marquee-top{
.custom-button{
.button();
}
.u-comm-loading();
.custom-comm-loading();
//智能指纹锁
.u-carousel();
.custom-carousel{
.u-carousel-indicators{
text-align: left;
padding-left: 18px;
bottom: 16px;
li{
width: 8px;
height: 8px;
margin: 0 3px;
&.active{
opacity: 1;
background-color: @CUSTOM-CAROUSEL-COMPONENT-INDICATORS-ACTIVE-BG;
}
}
}
}
.topCpnt{
height: 256px;
position: relative;
padding-top: 34px;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;/*no*/
.white_gradient_border();
}
}
.doorbellBg{
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
.linear-gradient(#00ffff,#fff,#fff,#fff,#00ffff);
background: linear-gradient(#00ffff,#fff,#fff,#fff,#00ffff);
padding: 3px;
position: relative;
.doorbellCircle{
width: 100%;
height: 100%;
background-color: #22313F;
border-radius: 50%;
.doorbell{
.margin_center(106px,106px);
border: 2px solid #00ffff;/*no*/
border-radius: 50%;
.bgImg("gray_door_icon.png");
background-position: center;
background-repeat: no-repeat;
background-color: #242635;
.background-size(80px 80px);
p{
position: absolute;
top: 30px;
left: 0;
right: 0;
margin: 0 auto;
.bgImgSize(40px,40px,"green_doorbell_icon.png",center,cover);
.transform-origin(top center);
}
}
}
.doorbellTip{
position: absolute;
bottom: 17px;
left: 0;
width: 100%;
height: 25px;
overflow: hidden;
text-align: center;
font-size: 12px;
span{
margin-right: 10px;
}
}
}
.custom-marquee-top .u-marquee-text{
display: inline-block;
.batteryState{
text-align: right;
padding-right: 22px;
font-size: 13px;
span{
.iconfont(24px);
color: #00ffff;
vertical-align: middle;
margin-right: 5px;
}
}
line-height: 25px;
.title{
background-repeat: no-repeat;
background-position: 16px center;
.bgImg("white_message_icon.png");
font-size: 13px;
.background-size(20px 20px);
padding-left: 42px;
line-height: 1;
}
.u-marquee();
.custom-marquee{
height: 36px;
text-align: center;
position: relative;
.u-marquee-text{
line-height: 36px;
color: #6B6C73;
}
&:before{
content: '';
position: absolute;
top: 0;
left: 125px;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
}
.marquee(5s,~"0,20px",~"0,-100%");
.active .u-marquee-text{
animation: marqueeTop 5s linear infinite;
.deviceHandle{
position: absolute;
top: 300px;
bottom: 0;
left: 0;
width: 100%;
}
@keyframes marqueeTop{
from{ transform: translateY(25px);}
to{ transform: translateY(-100%);}
.switchGroup{
position: absolute;
top: 50px;
bottom: 0;
left: 0;
width: 100%;
.guoupRow{
height: 33.33333333%;
position: relative;
.col-xs-6{
height: 100%;
padding: 0;
.display-box();
.box-vertical-alignment();
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;/*no*/
.white_gradient_border();
}
}
&:before{
content: '';
position: absolute;
top: 30px;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
width: 1px;/*no*/
.linear-gradient(@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
background: linear-gradient(@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
}
}
.u-carousel();
\ No newline at end of file
.u-switch();
//开门记录
.opendoorRecord .custom-switch .u-switch-handle:before{
.bgImg("opendoorRecord.png");
}
//安全报警
.securityAlarm .custom-switch .u-switch-handle:before{
.bgImg("securityAlarm.png");
}
//门锁用户
.doorlockUser .custom-switch .u-switch-handle:before{
.bgImg("doorlockUser.png");
}
//远程开门
.remoteOpendoor .custom-switch{
.u-switch-handle:before{
.bgImg("remoteOpendoor.png");
}
&.u-switch-on .u-switch-handle{
.animation(aperture 2s linear infinite);
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
.animation(aperture 2s linear -1s infinite);
}
}
}
.keyframes(aperture,{
0%{
.box-shadow(0 0 0 0 rgba(0,255,255,1));
}
100%{
.box-shadow(0 0 0 10px rgba(0,255,255,0));
}
});
//劫持报警
.hijackAlarm .custom-switch .u-switch-handle:before{
.bgImg("hijackAlarm.png");
}
//门锁管理
.doorlockManage .custom-switch .u-switch-handle:before{
.bgImg("doorlockManage.png");
}
.custom-switch{
width: 100%;
height: auto;
text-align: center;
.u-switch-handle{
position: relative;
top: 0;
left: 0;
.transform(none);
width: 55px;
height: 55px;
border-width: 1px;/*no*/
border-radius: 50%;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
&:before{
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 27px;
height: 27px;
border-radius: 0;
background-color: @OPACITY;
.box-shadow(none);
background-repeat: no-repeat;
.background-size(54px 27px);
}
}
.u-switch-text{
font-size: @CUSTOM-SWITCH-COMPONENT-TEXT-FONTSIZE;
text-align: center;
display: inline-block;
vertical-align: middle;
}
&.u-switch-on,
&.u-switch-off{
.u-switch-handle{
border-color: inherit;
.box-shadow(none);
background-color: @CUSTOM-SWITCH-COMPONENT-HANDLE-BG;
&:before{
left: 0;
}
}
}
&.u-switch-on{
color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-COLOR;
.u-switch-handle:before{
background-position: 0 0;
}
}
&.u-switch-off,
&.disabled{
opacity: 1;
color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR;
.u-switch-handle:before{
background-position: -27px 0;
}
}
}
.newMsg .custom-switch:before{
content: '\e681';
position: absolute;
top: 0;
right: 52px;
.iconfont(@NEWMSG-ICON-FONTSIZE);
color: @NEWMSG-ICON-COLOR;
z-index: 3;
}
.followServiceNumber-dialog{
.mask(1051,rgba(0, 0, 0, 0.9));
.followServiceNumber-dialog-box{
ul{
margin: 35px 0 -15px;
li{
font-size: 15px;
text-align: center;
line-height: 18px;
margin-bottom: 40px;
&:first-child{
font-size: 19px;
margin-bottom: 60px;
}
&:nth-child(3){
color: #00ffff;
margin-bottom: 20px;
}
p{
width: 200px;
height: 200px;
border: 1px solid #91929a;/*no*/
margin: 0 auto;
}
span{
color: #FFF54E;
}
}
}
.linkText();
}
}
\ No newline at end of file
web/lib/less/public/animation.less
@import "./variables.less";
@import "./mixins.less";
.marquee(@time,@fromValue,@toValue){
.active .u-marquee-text{
.animation(marquee @time linear infinite);
color: #91929a;
}
.keyframes(marquee,{
from{
.transform(translate(@fromValue));
}
to{
.transform(translate(@toValue));
}
});
}
\ No newline at end of file
web/lib/less/public/core.less
......@@ -101,7 +101,7 @@ p{
line-height: @lineHeight;
}
//0.5px的 top/bottom border
//top/bottom border
.defaultBorder(@positionPro:bottom,@startVal:0,@endVal:0,@borderBg:@DEFAULT-BORDER-COLOR){
content: '';
position: absolute;
......@@ -142,20 +142,20 @@ p{
}
//遮罩蒙版
.mask(@zIndex:1050){
.mask(@zIndex:1051,@bgColor:@BACKDROP-BG-COLOR){
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: @zIndex;
background-color: @BACKDROP-BG-COLOR;
background-color: @bgColor;
}
//自定义按钮组件
.custom-button(@width:275px){
.button(@width:275px){
// .custom-button{
width: @width;
border-radius: 5px;
......@@ -173,106 +173,230 @@ p{
// }
}
.buttonPosition(){
position: absolute;
bottom: 65px;
left: 0;
right: 0;
}
//自定义输入框组件
.custom-text(){
// .custom-text{
// padding-left: 20px;
margin-top: 16px;
.textInput(){
margin-top: 17px;
input{
padding-top: 8px;
padding-bottom: 8px;
padding-right: 38px;
&::-webkit-input-placeholder{
color: #91929a;
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
}
.u-text-icon{
font-size: 24px;
font-size: @CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE;
width: 48px;
padding-left: 9px;
vertical-align: text-bottom;
}
.u-text-clear{
right: 0;
width: 60px;
.u-text-clear,
.u-text-see{
&:before{
font-family: iconfont;
color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
font-size: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE;
}
}
//x icon
.u-text-clear{
right: 7px;
&:before{
content: '\e601';
}
}
&:after{
.white_gradient_border();
}
// }
}
.passwordInput(){
.custom-password-text{
input{
padding-right: 70px;
&[type = text] ~ .u-text-see:before{
content: '\e60e';
}
}
//x icon
.u-text-clear{
right: 37px;
}
//眼睛 icon
.u-text-see{
right: 7px;
&:before{
content: '\e6b2';
}
}
}
}
.custom-loading(){
.custom-loading{
background-color: @CUSTOM-BACKDROP-BG;
.u-loading-box{
color: #00ffff;
.u-loading-icon{
font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
.animation(none);
&:before{
content: '';
.margin_center(0.500em,0.500em);
border-radius: 50%;
.transform(translateZ(0) scale(0.55));
.animation(loading 1.3s infinite linear);
}
}
.u-loading-text{
color: inherit;
font-size: 16px;
margin-top: 20px;
}
}
}
.keyframes(loading,{
0%,
100% {
.box-shadow(0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0);
}
12.5% {
.box-shadow(0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
}
25% {
.box-shadow(0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
}
37.5% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em);
}
50% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em);
}
62.5% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em);
}
75% {
.box-shadow(0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0);
}
87.5% {
.box-shadow(0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em);
}
});
}
.custom-comm-loading(){
.custom-comm-loading{
background-color: @CUSTOM-BACKDROP-BG;
.u-comm-loading-button{
bottom: 134px;
width: 100px;
color: #00ffff;
font-size: 12px;
background-color: transparent;
padding: 18px 0 5px;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
.tap_row(transparent);
&.disabled{
background-color: transparent;
}
}
}
}
//自定义弹出框组件
.custom-dialog(){
.custom-dialog .u-dialog-box{
width: 270px;
height: 150px;
.custom-dialog{
background-color: @CUSTOM-BACKDROP-BG;
.u-dialog-box{
width: 355px;
border-radius: 5px;
background-color: @CUSTOM-DIALOG-COMPONENT-BOX-BG;
border: 1px solid;/*no*/
color: @CUSTOM-DIALOG-COMPONENT-COLOR;
padding-bottom: 35px;
.u-dialog-content{
width: 100%;
height: 100px;
height: 140px;
.display-box();
.box-horizontal-alignment();
.box-vertical-alignment();
font-size: @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE;
line-height: 22px;
padding: 0 15px;
span{
margin-right: 12px;
}
&:after{
height: 0;
display: none;
}
}
.u-dialog-button{
border-spacing: 23px 0;
display: block;
text-align: center;
.u-dialog-cancel,
.u-dialog-confirm{
background-color: @CUSTOM-DIALOG-COMPONENT-BUTTON-BG;
padding: 8px 0;
border-radius: 30px;
//按钮 active
.tap_row(@CUSTOM-DIALOG-COMPONENT-BUTTON-ACTIVE-BG);
.button(135px);
padding: 10px 0;
display: inline-block;
}
//取消 button
.u-dialog-cancel{
color: @CUSTOM-DIALOG-COMPONENT-CANCELBUTTON-COLOR;
&:after{
width: 0;
.u-dialog-cancel:after{
display: none;
}
}
// //确认 button
// .u-dialog-confirm{
// color: @CUSTOM-DIALOG-COMPONENT-CONFIRMBUTTON-COLOR;
// }
}
}
}
//错误提示
.errorTip(){
.errorTip(@height:40px){
color: @ERRORTIP-TEXT-COLOR;
font-size: @ERRORTIP-TEXT-FONTSIZE;
.transform(scale(0.7));
text-align: center;
height: 30px;
line-height: 30px;
height: @height;
line-height: @height;
}
//上拉加载
.listLoad(){
height: 24px;
line-height: 24px;
color: @LIST-LOAD-COLOR;
font-size: @LIST-LOAD-FONTSIZE;
.transform(scale(0.7));
height: 35px;
line-height: 35px;
}
//list 无内容
.listNoCont(){
color: @LIST-NOCONTTIP-COLOR;
.bgImg("noCont.png");
background-position: top center;
background-repeat: no-repeat;
.background-size(100px 100px);
padding-top: 126px;
font-size: @LIST-NOCONTTIP-FONTSIZE;
// .bgImg("noCont.png");
// background-position: top center;
// background-repeat: no-repeat;
// .background-size(100px 100px);
// padding-top: 126px;
}
.white_gradient_border(){
......@@ -280,15 +404,63 @@ p{
background: linear-gradient(to right,@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
}
.blue_gradient_border(){
.linear-gradient(left,@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
background: linear-gradient(to right,@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
}
.noBottomGradient(){
.noBottomGradient{
background-image: none;
}
}
.inputBox(){
.inputBox(@paddingTop,@paddingBottom,@height,@bgImg,@bgYPosition,@bgSize){
.inputBox{
width: 250px;
position: relative;
margin: 0 auto;
padding: @paddingTop 0 @paddingBottom;
.bgImgSize(250px,@height,@bgImg,center @bgYPosition,@bgSize);
}
}
.help(){
margin: 30px 38px 58px;
li{
color: @HELP-TEXT-COLOR;
padding-left: 12px;
text-indent: -12px;
line-height: 16px;
min-height: 60px;
&:first-child{
color: inherit;
font-size: @HELP-TITLE-FONTSIZE;
min-height: auto;
margin-bottom: 34px;
}
}
}
.linkText(){
.linkText{
text-align: center;
span{
position: relative;
color: @LINKTEXT-TEXT-COLOR;
font-size: @LINKTEXT-TEXT-FONTSIZE;
display: inline-block;
min-width: 100px;
padding: 16px 26px 2px;
margin-top: 20px;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
}
}
}
\ No newline at end of file
web/lib/less/public/public.less
......@@ -5,9 +5,10 @@
//loading
.u-loading{
.mask();
.mask(1050);
.u-loading-box{
.transform_center();
.transformV_center(left,0);
right: 0;
.u-loading-icon{
width: 30px;/*no*/
height: 30px;/*no*/
......@@ -16,7 +17,7 @@
.bgImg("white_loading_icon.png");
.background-size(cover);
margin: 0 auto;
.animation(uLoading 1s steps(12, end) infinite);
.animation(loading 1s steps(12, end) infinite);
}
.u-loading-text{
color: @LOADING-COMPONENT-TEXT-COLOR;
......@@ -26,7 +27,7 @@
}
}
.keyframes(uLoading,{
.keyframes(loading,{
0%{
.transform(rotate3d(0,0,1,0deg));
}
......@@ -35,7 +36,7 @@
}
});
//.custom-loading();
.custom-loading();
//弹出框
.u-dialog{
......@@ -235,7 +236,7 @@
}
.u-text-icon{
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
width: 44px;
width: 42px;
padding-left: 17px;
display: table-cell;
vertical-align: middle;
......@@ -696,28 +697,22 @@
//图片轮播
.u-carousel(){
.u-carousel{
width: 250px;
height: 166px;
width: 100%;
height: 250px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.u-carousel .u-carousel-inner{
.u-carousel-inner{
width: 100%;
height: 100%;
white-space: nowrap;
font-size: 0;
}
.u-carousel .u-carousel-inner .u-carousel-item{
.u-carousel-item{
display: inline-block;
}
.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image{
width: 100%;
.u-carousel-image{
width: 100%;
}
}
}
.u-carousel-indicators{
position: absolute;
bottom: 10px;
......@@ -725,22 +720,176 @@
width: 100%;
text-align: center;
font-size: 0;
}
.u-carousel-indicators li{
li{
width: 10px;
height: 10px;
background-color: #fff;
background-color: @CAROUSEL-COMPONENT-INDICATORS-BG;
border-radius: 50%;
opacity: 0.6;
margin: 0 5px;
display: inline-block;
&.active{
opacity: 0.6;
}
}
}
}
}
.u-carousel-indicators li.active{
opacity: 1;
//走马灯
.u-marquee(){
.u-marquee{
width: 100%;
height: 25px;
overflow: hidden;
.u-marquee-text{
display: inline-block;
line-height: 25px;
}
}
}
.u-comm-loading(){
.u-comm-loading{
.mask(1050);
.u-comm-loading-content{
.transformV_center(left,0);
right: 0;
.loader{
font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
&:before{
content: '';
.margin_center(0.500em,0.500em);
border-radius: 50%;
.transform(translateZ(0) scale(0.55));
}
}
.icon{
font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
&:before{
.transform_center();
.iconfont(4.125em);
}
}
.u-comm-loading-text{
font-size: 16px;
margin-top: 20px;
text-align: center;
}
}
.u-comm-loading-button{
position: absolute;
bottom: 65px;
left: 0;
right: 0;
width: 240px;
color: @BUTTON-COMPONENT-COLOR;
font-size: inherit;
background-color: @BUTTON-COMPONENT-BG;
border-radius: 20px;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 10px 0;
.transition(all 0.2s linear);
background-clip: padding-box;
//按钮 active
.tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
//按钮 不可控
&.disabled{
background-color: @BUTTON-COMPONENT-DISABLED-BG;
}
}
//loading
&.u-comm-loading-status-0{
.u-comm-loading-content{
color: #00ffff;
.loader{
display: block;
&:before{
.animation(commLoading 1.3s infinite linear);
}
}
.icon{
display: none;
}
}
.u-comm-loading-button{
display: none;
}
}
//绑定成功
&.u-comm-loading-status-1{
.u-comm-loading-content{
color: #00ffff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e800';
}
}
}
.u-comm-loading-button{
display: block;
}
}
//绑定失败
&.u-comm-loading-status-2{
.u-comm-loading-content{
color: #fff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e646';
}
}
}
.u-comm-loading-button{
display: block;
}
}
}
.keyframes(commLoading,{
0%,
100% {
.box-shadow(0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0);
}
12.5% {
.box-shadow(0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
}
25% {
.box-shadow(0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
}
37.5% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em);
}
50% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em);
}
62.5% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em);
}
75% {
.box-shadow(0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0);
}
87.5% {
.box-shadow(0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em);
}
});
}
.edit-name(){
......
web/resources/lang/zh.json
{"loading":"请耐心等待...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"footer":{"guide":"指纹改变生活","recordList":"记录时间以锁为准"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","followTitle":"关注服务号","followCont1":"关注“i智信”微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面“开始配置Wi-Fi”按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击“l连接”按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1. 请确保Wi-Fi信号良好","remindCont2":"2. 本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}}
\ No newline at end of file
{"loading":"loading...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","guideLogin":"账号/密码登录","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"guide":{"footer":"指纹改变生活"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","doorlockUser":"门锁用户","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","doorlockManage":"门锁管理","followTitle":"关注服务号","followCont1":"关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面 “开始配置Wi-Fi” 按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击 “l连接” 按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1. 请确保Wi-Fi信号良好","remindCont2":"2. 本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}}
\ No newline at end of file
web/view/addDevice/addDevice.css
......@@ -5,7 +5,7 @@
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
html,
......@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-loading .u-loading-box .u-loading-icon {
......@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover;
background-size: cover;
margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
.u-loading .u-loading-box .u-loading-text {
......@@ -75,7 +76,7 @@ p {
text-align: center;
}
@-webkit-keyframes uLoading {
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -87,7 +88,7 @@ p {
}
}
@keyframes uLoading {
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -99,13 +100,139 @@ p {
}
}
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: 50%;
-webkit-transform: translateZ(0) scale(0.55);
transform: translateZ(0) scale(0.55);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes loading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.u-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
z-index: 1051;
background-color: rgba(0, 0, 0, 0.8);
}
......@@ -176,15 +303,22 @@ p {
opacity: 0;
}
.custom-dialog {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-dialog .u-dialog-box {
width: 7.2rem;
height: 4rem;
width: 9.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 2.667rem;
height: 3.733rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
......@@ -199,32 +333,44 @@ p {
padding: 0 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem;
}
.custom-dialog .u-dialog-box .u-dialog-content:after {
height: 0;
display: none;
}
.custom-dialog .u-dialog-box .u-dialog-button {
border-spacing: 0.613rem 0;
display: block;
text-align: center;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
background-color: ;
padding: 0.213rem 0;
border-radius: 0.8rem;
width: 3.6rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
background-color: ;
background-color: #153D4C;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
color: ;
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel.disabled,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm.disabled {
background-color: transparent;
color: #999;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
width: 0;
display: none;
}
.header {
......@@ -284,6 +430,146 @@ p {
padding-top: 1.173rem;
}
.noBottomGradient {
background-image: none;
}
.addDevice li {
margin: 0.267rem;
border: 1px solid;
border-radius: 0.133rem;
color: #00ffff;
font-size: 0.48rem;
height: 5.707rem;
line-height: 5.707rem;
padding-left: 1.547rem;
}
.addDevice li:nth-child(1) img {
width: 2.4rem;
height: 2.4rem;
margin-right: 1.067rem;
}
.addDevice li:nth-child(2) img {
width: 3.6rem;
height: 1.707rem;
margin-right: 0.667rem;
}
.addDevice li:active {
background-color: #153D4C;
}
.wifiAddHelp {
margin: 0.8rem 1.013rem 1.547rem;
}
.wifiAddHelp li {
color: #91929a;
padding-left: 0.32rem;
text-indent: -0.32rem;
line-height: 0.427rem;
min-height: 1.6rem;
}
.wifiAddHelp li:first-child {
color: inherit;
font-size: 0.48rem;
min-height: auto;
margin-bottom: 0.907rem;
}
.u-button {
width: 6.4rem;
color: #fff;
font-size: inherit;
background-color: #007aff;
border-radius: 0.533rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.u-button:active {
background-color: #0065ff;
}
.u-button.disabled {
background-color: #bbb;
}
.custom-help-button,
.custom-button {
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
}
.custom-help-button:active,
.custom-button:active {
background-color: #153D4C;
}
.custom-help-button.disabled,
.custom-button.disabled {
background-color: transparent;
color: #999;
}
.inputBox {
position: relative;
margin: 0 auto;
padding: 4.907rem 0 0.587rem;
width: 6.667rem;
height: auto;
background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem;
-webkit-background-size: 2.053rem 3.253rem;
background-size: 2.053rem 3.253rem;
}
.wifi {
width: 100%;
display: table;
position: relative;
margin-top: 0.453rem;
}
.wifi span {
font-family: iconfont;
font-size: 0.64rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
width: 1.28rem;
padding-left: 0.24rem;
display: table-cell;
vertical-align: text-bottom;
}
.wifi p {
padding: 0.213rem 0;
display: table-cell;
color: #00ffff;
}
.wifi:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.u-text {
width: 100%;
display: table;
......@@ -309,7 +595,7 @@ p {
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
width: 1.173rem;
width: 1.12rem;
padding-left: 0.453rem;
display: table-cell;
vertical-align: middle;
......@@ -384,7 +670,171 @@ p {
}
}
.u-button {
.custom-password-text {
margin-top: 0.453rem;
}
.custom-password-text input {
padding-top: 0.213rem;
padding-bottom: 0.213rem;
padding-right: 1.867rem;
}
.custom-password-text input[type=text] ~ .u-text-see:before {
content: '\e60e';
}
.custom-password-text input::-webkit-input-placeholder {
color: #91929a;
}
.custom-password-text .u-text-icon {
font-size: 0.64rem;
width: 1.28rem;
padding-left: 0.24rem;
vertical-align: text-bottom;
}
.custom-password-text .u-text-clear:before,
.custom-password-text .u-text-see:before {
font-family: iconfont;
color: #00ffff;
font-size: 0.347rem;
}
.custom-password-text .u-text-clear {
right: 0.987rem;
}
.custom-password-text .u-text-clear:before {
content: '\e601';
}
.custom-password-text .u-text-see {
right: 0.187rem;
}
.custom-password-text .u-text-see:before {
content: '\e6b2';
}
.custom-password-text:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
text-align: center;
height: 0.587rem;
line-height: 0.587rem;
}
.remind {
width: 8.32rem;
margin: 0 auto;
}
.remind li {
color: #91929a;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
padding-left: 1.227rem;
margin-bottom: 0.267rem;
line-height: 1;
}
.remind li:first-child {
padding-left: 0;
}
.custom-button {
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
}
.u-comm-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.8);
}
.u-comm-loading .u-comm-loading-content {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-comm-loading .u-comm-loading-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-comm-loading .u-comm-loading-content .loader:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: 50%;
-webkit-transform: translateZ(0) scale(0.55);
transform: translateZ(0) scale(0.55);
}
.u-comm-loading .u-comm-loading-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-comm-loading .u-comm-loading-content .icon:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: iconfont;
font-size: 4.125em;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.u-comm-loading .u-comm-loading-content .u-comm-loading-text {
font-size: 0.427rem;
margin-top: 0.533rem;
text-align: center;
}
.u-comm-loading .u-comm-loading-button {
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
width: 6.4rem;
color: #fff;
font-size: inherit;
......@@ -399,146 +849,187 @@ p {
background-clip: padding-box;
}
.u-button:active {
.u-comm-loading .u-comm-loading-button:active {
background-color: #0065ff;
}
.u-button.disabled {
.u-comm-loading .u-comm-loading-button.disabled {
background-color: #bbb;
}
.u-commstatus-loading {
height: 100%;
background: rgba(0, 0, 0, 0.7);
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content {
color: #00ffff;
}
.u-commstatus-loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader {
display: block;
}
.u-commstatus-loading-button {
height: 1.173rem;
width: 80%;
line-height: 1.173rem;
background: #e0dfdf;
text-align: center;
position: absolute;
bottom: 1.173rem;
left: 50%;
transform: translateX(-50%);
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader:before {
-webkit-animation: commLoading 1.3s infinite linear;
animation: commLoading 1.3s infinite linear;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .icon {
display: none;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li {
opacity: 0.2;
-webkit-animation: stretchdelay 1.5s infinite;
animation: stretchdelay 1.5s infinite;
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-button {
display: none;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content {
color: #00ffff;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
font-size: 0.267rem;
margin: 5em auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .loader {
display: none;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon {
display: block;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon:before {
content: '\e800';
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-button {
display: block;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content {
color: #fff;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .loader {
display: none;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon {
display: block;
}
@-webkit-keyframes load4 {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon:before {
content: '\e646';
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-button {
display: block;
}
@-webkit-keyframes commLoading {
0%, 100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes load4 {
@keyframes commLoading {
0%, 100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon {
display: none;
.custom-comm-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.u-commstatus-loading-status-0 .u-commstatus-loading-button {
display: none;
.custom-comm-loading .u-comm-loading-button {
bottom: 3.573rem;
width: 2.667rem;
color: #00ffff;
font-size: 0.32rem;
background-color: transparent;
padding: 0.48rem 0 0.133rem;
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content {
color: #00ffff;
.custom-comm-loading .u-comm-loading-button:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon {
font-family: SDSIconfont;
font-size: 5em;
.custom-comm-loading .u-comm-loading-button:active {
background-color: transparent;
}
.custom-comm-loading .u-comm-loading-button.disabled {
background-color: transparent;
}
\ No newline at end of file
web/view/device/device.css
......@@ -5,7 +5,7 @@
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
html,
......@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-loading .u-loading-box .u-loading-icon {
......@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover;
background-size: cover;
margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
.u-loading .u-loading-box .u-loading-text {
......@@ -75,7 +76,7 @@ p {
text-align: center;
}
@-webkit-keyframes uLoading {
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -87,7 +88,7 @@ p {
}
}
@keyframes uLoading {
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -99,13 +100,139 @@ p {
}
}
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: 50%;
-webkit-transform: translateZ(0) scale(0.55);
transform: translateZ(0) scale(0.55);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes loading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.u-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
z-index: 1051;
background-color: rgba(0, 0, 0, 0.8);
}
......@@ -176,15 +303,22 @@ p {
opacity: 0;
}
.custom-dialog {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-dialog .u-dialog-box {
width: 7.2rem;
height: 4rem;
width: 9.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 2.667rem;
height: 3.733rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
......@@ -199,32 +333,44 @@ p {
padding: 0 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem;
}
.custom-dialog .u-dialog-box .u-dialog-content:after {
height: 0;
display: none;
}
.custom-dialog .u-dialog-box .u-dialog-button {
border-spacing: 0.613rem 0;
display: block;
text-align: center;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
background-color: ;
padding: 0.213rem 0;
border-radius: 0.8rem;
width: 3.6rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
background-color: ;
background-color: #153D4C;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
color: ;
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel.disabled,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm.disabled {
background-color: transparent;
color: #999;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
width: 0;
display: none;
}
.header {
......@@ -284,69 +430,10 @@ p {
padding-top: 1.173rem;
}
.u-switch {
position: relative;
width: 2.667rem;
height: 1.333rem;
}
.u-switch .u-switch-handle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1.333rem;
height: 0.8rem;
border: 2px solid;
border-radius: 0.533rem;
background-clip: padding-box;
}
.u-switch .u-switch-handle:before {
content: '';
position: absolute;
z-index: 1;
top: -1px;
width: 0.747rem;
height: 0.747rem;
-webkit-transition: left 0.2s ease-in-out;
transition: left 0.2s ease-in-out;
border-radius: 0.427rem;
background-color: #fff;
background-clip: padding-box;
-webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
}
.u-switch.u-switch-on .u-switch-handle {
border-color: #4cd964;
-webkit-box-shadow: inset 0 0 0 0.427rem #4cd964;
box-shadow: inset 0 0 0 0.427rem #4cd964;
background-color: #4cd964;
-webkit-transition: border ease 0.4s, -webkit-box-shadow ease 0.4s, background-color ease 1.2s;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.u-switch.u-switch-on .u-switch-handle:before {
left: 0.48rem;
}
.u-switch.u-switch-off .u-switch-handle {
border-color: #bbb;
-webkit-box-shadow: inset 0 0 0 0 #bbb;
box-shadow: inset 0 0 0 0 #bbb;
background-color: #bbb;
-webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, -webkit-box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.u-switch.u-switch-off .u-switch-handle:before {
left: -1px;
}
.u-switch.disabled {
opacity: 0.3;
.inputBox {
width: 6.667rem;
margin: 3.867rem auto 1.333rem;
padding-bottom: 1.067rem;
}
.u-text {
......@@ -374,7 +461,7 @@ p {
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
width: 1.173rem;
width: 1.12rem;
padding-left: 0.453rem;
display: table-cell;
vertical-align: middle;
......@@ -449,6 +536,60 @@ p {
}
}
.custom-text {
margin-top: 0.453rem;
}
.custom-text input {
padding-top: 0.213rem;
padding-bottom: 0.213rem;
padding-right: 1.013rem;
}
.custom-text input::-webkit-input-placeholder {
color: #91929a;
}
.custom-text .u-text-icon {
font-size: 0.64rem;
width: 1.28rem;
padding-left: 0.24rem;
vertical-align: text-bottom;
}
.custom-text .u-text-clear:before,
.custom-text .u-text-see:before {
font-family: iconfont;
color: #00ffff;
font-size: 0.347rem;
}
.custom-text .u-text-clear {
right: 0.187rem;
}
.custom-text .u-text-clear:before {
content: '\e601';
}
.custom-text:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
text-align: center;
height: 1.067rem;
line-height: 1.067rem;
}
.u-button {
width: 6.4rem;
color: #fff;
......@@ -472,75 +613,878 @@ p {
background-color: #bbb;
}
.custom-marquee-top {
width: 100%;
height: 0.667rem;
overflow: hidden;
text-align: center;
.custom-button {
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
}
.custom-marquee-top .u-marquee-text {
display: inline-block;
line-height: 0.667rem;
text-align: center;
.custom-button:active {
background-color: #153D4C;
}
.active .u-marquee-text {
animation: marqueeTop 5s linear infinite;
.custom-button.disabled {
background-color: transparent;
color: #999;
}
@keyframes marqueeTop {
from {
transform: translateY(0.667rem);
}
.u-comm-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.8);
}
to {
transform: translateY(-100%);
}
.u-comm-loading .u-comm-loading-content {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-carousel {
width: 6.667rem;
height: 4.427rem;
overflow: hidden;
.u-comm-loading .u-comm-loading-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-carousel .u-carousel-inner {
width: 100%;
height: 100%;
white-space: nowrap;
font-size: 0;
.u-comm-loading .u-comm-loading-content .loader:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: 50%;
-webkit-transform: translateZ(0) scale(0.55);
transform: translateZ(0) scale(0.55);
}
.u-carousel .u-carousel-inner .u-carousel-item {
display: inline-block;
.u-comm-loading .u-comm-loading-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image {
width: 100%;
.u-comm-loading .u-comm-loading-content .icon:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: iconfont;
font-size: 4.125em;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.u-carousel-indicators {
.u-comm-loading .u-comm-loading-content .u-comm-loading-text {
font-size: 0.427rem;
margin-top: 0.533rem;
text-align: center;
}
.u-comm-loading .u-comm-loading-button {
position: absolute;
bottom: 0.267rem;
bottom: 1.733rem;
left: 0;
width: 100%;
right: 0;
width: 6.4rem;
color: #fff;
font-size: inherit;
background-color: #007aff;
border-radius: 0.533rem;
text-align: center;
font-size: 0;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.u-carousel-indicators li {
width: 0.267rem;
height: 0.267rem;
background-color: #fff;
border-radius: 50%;
opacity: 0.6;
margin: 0 0.133rem;
display: inline-block;
.u-comm-loading .u-comm-loading-button:active {
background-color: #0065ff;
}
.u-carousel-indicators li.active {
opacity: 1;
.u-comm-loading .u-comm-loading-button.disabled {
background-color: #bbb;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content {
color: #00ffff;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader {
display: block;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader:before {
-webkit-animation: commLoading 1.3s infinite linear;
animation: commLoading 1.3s infinite linear;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .icon {
display: none;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-button {
display: none;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content {
color: #00ffff;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .loader {
display: none;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon {
display: block;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon:before {
content: '\e800';
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-button {
display: block;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content {
color: #fff;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .loader {
display: none;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon {
display: block;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon:before {
content: '\e646';
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-button {
display: block;
}
@-webkit-keyframes commLoading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes commLoading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.custom-comm-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-comm-loading .u-comm-loading-button {
bottom: 3.573rem;
width: 2.667rem;
color: #00ffff;
font-size: 0.32rem;
background-color: transparent;
padding: 0.48rem 0 0.133rem;
}
.custom-comm-loading .u-comm-loading-button:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.custom-comm-loading .u-comm-loading-button:active {
background-color: transparent;
}
.custom-comm-loading .u-comm-loading-button.disabled {
background-color: transparent;
}
.u-carousel {
width: 100%;
height: 6.667rem;
overflow: hidden;
position: relative;
}
.u-carousel .u-carousel-inner {
width: 100%;
white-space: nowrap;
font-size: 0;
}
.u-carousel .u-carousel-inner .u-carousel-item {
display: inline-block;
width: 100%;
}
.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image {
width: 100%;
}
.u-carousel .u-carousel-indicators {
position: absolute;
bottom: 0.267rem;
left: 0;
width: 100%;
text-align: center;
font-size: 0;
}
.u-carousel .u-carousel-indicators li {
width: 0.267rem;
height: 0.267rem;
background-color: #fff;
border-radius: 50%;
margin: 0 0.133rem;
display: inline-block;
}
.u-carousel .u-carousel-indicators li.active {
opacity: 0.6;
}
.custom-carousel .u-carousel-indicators {
text-align: left;
padding-left: 0.48rem;
bottom: 0.427rem;
}
.custom-carousel .u-carousel-indicators li {
width: 0.213rem;
height: 0.213rem;
margin: 0 0.08rem;
}
.custom-carousel .u-carousel-indicators li.active {
opacity: 1;
background-color: #898989;
}
.topCpnt {
height: 6.827rem;
position: relative;
padding-top: 0.907rem;
}
.topCpnt:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.doorbellBg {
width: 5.333rem;
height: 5.333rem;
border-radius: 50%;
margin: 0 auto;
background: -webkit-linear-gradient(#00ffff, #fff, #fff, #fff, #00ffff);
background: linear-gradient(#00ffff, #fff, #fff, #fff, #00ffff);
padding: 0.08rem;
position: relative;
}
.doorbellBg .doorbellCircle {
width: 100%;
height: 100%;
background-color: #22313F;
border-radius: 50%;
}
.doorbellBg .doorbellCircle .doorbell {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 2.827rem;
height: 2.827rem;
margin: auto;
border: 2px solid #00ffff;
border-radius: 50%;
background-image: url("../../resources/image/gray_door_icon.png");
background-position: center;
background-repeat: no-repeat;
background-color: #242635;
-webkit-background-size: 2.133rem 2.133rem;
background-size: 2.133rem 2.133rem;
}
.doorbellBg .doorbellCircle .doorbell p {
position: absolute;
top: 0.8rem;
left: 0;
right: 0;
margin: 0 auto;
width: 1.067rem;
height: 1.067rem;
background: url("../../resources/image/green_doorbell_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
-webkit-transform-origin: top center;
transform-origin: top center;
}
.doorbellBg .doorbellTip {
position: absolute;
bottom: 0.453rem;
left: 0;
width: 100%;
text-align: center;
font-size: 0.32rem;
}
.doorbellBg .doorbellTip span {
margin-right: 0.267rem;
}
.batteryState {
text-align: right;
padding-right: 0.587rem;
font-size: 0.347rem;
}
.batteryState span {
font-family: iconfont;
font-size: 0.64rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
color: #00ffff;
vertical-align: middle;
margin-right: 0.133rem;
}
.title {
background-repeat: no-repeat;
background-position: 0.427rem center;
background-image: url("../../resources/image/white_message_icon.png");
font-size: 0.347rem;
-webkit-background-size: 0.533rem 0.533rem;
background-size: 0.533rem 0.533rem;
padding-left: 1.12rem;
line-height: 1;
}
.u-marquee {
width: 100%;
height: 0.667rem;
overflow: hidden;
}
.u-marquee .u-marquee-text {
display: inline-block;
line-height: 0.667rem;
}
.custom-marquee {
height: 0.96rem;
text-align: center;
position: relative;
}
.custom-marquee .u-marquee-text {
line-height: 0.96rem;
color: #6B6C73;
}
.custom-marquee:before {
content: '';
position: absolute;
top: 0;
left: 3.333rem;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.custom-marquee:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.active .u-marquee-text {
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
color: #91929a;
}
@-webkit-keyframes marquee {
from {
-webkit-transform: translate(0,0.533rem);
transform: translate(0,0.533rem);
}
to {
-webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
}
}
@keyframes marquee {
from {
-webkit-transform: translate(0,0.533rem);
transform: translate(0,0.533rem);
}
to {
-webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
}
}
.deviceHandle {
position: absolute;
top: 8rem;
bottom: 0;
left: 0;
width: 100%;
}
.switchGroup {
position: absolute;
top: 1.333rem;
bottom: 0;
left: 0;
width: 100%;
}
.switchGroup .guoupRow {
height: 33.33333333%;
position: relative;
}
.switchGroup .guoupRow .col-xs-6 {
height: 100%;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.switchGroup .guoupRow:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.switchGroup:before {
content: '';
position: absolute;
top: 0.8rem;
bottom: 0.533rem;
left: 0;
right: 0;
margin: auto;
width: 1px;
background: -webkit-linear-gradient(#242635, #fff, #242635);
background: linear-gradient(#242635, #fff, #242635);
}
.u-switch {
position: relative;
width: 2.667rem;
height: 1.333rem;
}
.u-switch .u-switch-handle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1.333rem;
height: 0.8rem;
border: 2px solid;
border-radius: 0.533rem;
background-clip: padding-box;
}
.u-switch .u-switch-handle:before {
content: '';
position: absolute;
z-index: 1;
top: -1px;
width: 0.747rem;
height: 0.747rem;
-webkit-transition: left 0.2s ease-in-out;
transition: left 0.2s ease-in-out;
border-radius: 0.427rem;
background-color: #fff;
background-clip: padding-box;
-webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
}
.u-switch.u-switch-on .u-switch-handle {
border-color: #4cd964;
-webkit-box-shadow: inset 0 0 0 0.427rem #4cd964;
box-shadow: inset 0 0 0 0.427rem #4cd964;
background-color: #4cd964;
-webkit-transition: border ease 0.4s, -webkit-box-shadow ease 0.4s, background-color ease 1.2s;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.u-switch.u-switch-on .u-switch-handle:before {
left: 0.48rem;
}
.u-switch.u-switch-off .u-switch-handle {
border-color: #bbb;
-webkit-box-shadow: inset 0 0 0 0 #bbb;
box-shadow: inset 0 0 0 0 #bbb;
background-color: #bbb;
-webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, -webkit-box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.u-switch.u-switch-off .u-switch-handle:before {
left: -1px;
}
.u-switch.disabled {
opacity: 0.3;
}
.opendoorRecord .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/opendoorRecord.png");
}
.securityAlarm .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/securityAlarm.png");
}
.doorlockUser .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/doorlockUser.png");
}
.remoteOpendoor .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/remoteOpendoor.png");
}
.remoteOpendoor .custom-switch.u-switch-on .u-switch-handle {
-webkit-animation: aperture 2s linear infinite;
animation: aperture 2s linear infinite;
}
.remoteOpendoor .custom-switch.u-switch-on .u-switch-handle:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-animation: aperture 2s linear -1s infinite;
animation: aperture 2s linear -1s infinite;
}
@-webkit-keyframes aperture {
0% {
-webkit-box-shadow: 0 0 0 0 #00ffff;
box-shadow: 0 0 0 0 #00ffff;
}
100% {
-webkit-box-shadow: 0 0 0 0.267rem rgba(0, 255, 255, 0);
box-shadow: 0 0 0 0.267rem rgba(0, 255, 255, 0);
}
}
@keyframes aperture {
0% {
-webkit-box-shadow: 0 0 0 0 #00ffff;
box-shadow: 0 0 0 0 #00ffff;
}
100% {
-webkit-box-shadow: 0 0 0 0.267rem rgba(0, 255, 255, 0);
box-shadow: 0 0 0 0.267rem rgba(0, 255, 255, 0);
}
}
.hijackAlarm .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/hijackAlarm.png");
}
.doorlockManage .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/doorlockManage.png");
}
.custom-switch {
width: 100%;
height: auto;
text-align: center;
}
.custom-switch .u-switch-handle {
position: relative;
top: 0;
left: 0;
-webkit-transform: none;
transform: none;
width: 1.467rem;
height: 1.467rem;
border-width: 1px;
border-radius: 50%;
margin-right: 0.16rem;
display: inline-block;
vertical-align: middle;
}
.custom-switch .u-switch-handle:before {
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0.72rem;
height: 0.72rem;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
background-repeat: no-repeat;
-webkit-background-size: 1.44rem 0.72rem;
background-size: 1.44rem 0.72rem;
}
.custom-switch .u-switch-text {
font-size: 0.48rem;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.custom-switch.u-switch-on .u-switch-handle,
.custom-switch.u-switch-off .u-switch-handle {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #242635;
}
.custom-switch.u-switch-on .u-switch-handle:before,
.custom-switch.u-switch-off .u-switch-handle:before {
left: 0;
}
.custom-switch.u-switch-on {
color: #00ffff;
}
.custom-switch.u-switch-on .u-switch-handle:before {
background-position: 0 0;
}
.custom-switch.u-switch-off,
.custom-switch.disabled {
opacity: 1;
color: #898989;
}
.custom-switch.u-switch-off .u-switch-handle:before,
.custom-switch.disabled .u-switch-handle:before {
background-position: -0.72rem 0;
}
.newMsg .custom-switch:before {
content: '\e681';
position: absolute;
top: 0;
right: 1.387rem;
font-family: iconfont;
font-size: 0.427rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
color: #fc2168;
z-index: 3;
}
.followServiceNumber-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1051;
background-color: rgba(0, 0, 0, 0.9);
}
.followServiceNumber-dialog .followServiceNumber-dialog-box ul {
margin: 0.933rem 0 -0.4rem;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box ul li {
font-size: 0.4rem;
text-align: center;
line-height: 0.48rem;
margin-bottom: 1.067rem;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box ul li:first-child {
font-size: 0.507rem;
margin-bottom: 1.6rem;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box ul li:nth-child(3) {
color: #00ffff;
margin-bottom: 0.533rem;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box ul li p {
width: 5.333rem;
height: 5.333rem;
border: 1px solid #91929a;
margin: 0 auto;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box ul li span {
color: #FFF54E;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box .linkText {
text-align: center;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box .linkText span {
position: relative;
color: #00ffff;
font-size: 0.32rem;
display: inline-block;
min-width: 2.667rem;
padding: 0.427rem 0.693rem 0.053rem;
margin-top: 0.533rem;
}
.followServiceNumber-dialog .followServiceNumber-dialog-box .linkText span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
\ No newline at end of file
web/view/device/index.html
......@@ -21,31 +21,56 @@
<div id="app" v-cloak>
<div class="header">
<v-touch tag="span" class="header-left icon" v-on:tap="onDoorlockManageTap">&#xe66f;</v-touch>
<p>{{ $t('title.device') }}</p>
<v-touch tag="span" class="header-right icon" v-on:tap="onDoorlockManageTap">&#xe61d;</v-touch>
</div>
<div class="content">
<u-carousel :init-param="componentsConfig.carousel.initParam"></u-carousel>
<div class="topCpnt">
<div class="doorbellBg active">
<div class="doorbellCircle">
<div class="doorbell">
<p></p>
</div>
</div>
<div class="doorbellTip"><span>17:30</span>门铃响了</div>
</div>
<p class="batteryState"><span>&#xe629;</span>100%</p>
</div>
<div class="deviceHandle">
<p class="title">门锁最新消息</p>
<u-marquee :init-param="componentsConfig.marquee.initParam" :active="activeFlag"></u-marquee>
<div class="switchGroup">
<div class="guoupRow">
<!-- 开门记录 -->
<div class="col-xs-6 opendoorRecord newMsg">
<div class="col-xs-6 opendoorRecord">
<u-switch :value="valueOpendoorRecord" :init-param="componentsConfig.opendoorRecordSwitch.initParam" v-on:u-switch-tap="onOpendoorRecordTap"></u-switch>
</div>
<!-- 安全报警 -->
<div class="col-xs-6 securityAlarm newMsg">
<div class="col-xs-6 securityAlarm">
<u-switch :value="valueSecurityAlarm" :init-param="componentsConfig.securityAlarmSwitch.initParam" v-on:u-switch-tap="onSecurityAlarmTap"></u-switch>
</div>
<!-- 远程开门 -->
<div class="col-xs-6 remoteOpendoor newMsg">
<u-switch :value="valueRemoteOpendoor" :init-param="componentsConfig.remoteOpendoorSwitch.initParam" v-on:u-switch-tap="onRemoteOpendoorTap"></u-switch>
</div>
<div class="guoupRow">
<!-- 门锁用户 -->
<div class="col-xs-6 doorlockUser">
<u-switch :value="valueDoorlockUser" :init-param="componentsConfig.doorlockUserSwitch.initParam" v-on:u-switch-tap="onDoorlockUserTap"></u-switch>
</div>
<!-- 劫持报警 -->
<div class="col-xs-6 hijackAlarm newMsg">
<div class="col-xs-6 hijackAlarm">
<u-switch :value="valueHijackAlarm" :init-param="componentsConfig.hijackAlarmSwitch.initParam" v-on:u-switch-tap="onHijackAlarmTap"></u-switch>
</div>
</div>
<div class="guoupRow">
<!-- 远程开门 -->
<div class="col-xs-6 remoteOpendoor">
<u-switch :value="valueRemoteOpendoor" :init-param="componentsConfig.remoteOpendoorSwitch.initParam" v-on:u-switch-tap="onRemoteOpendoorTap"></u-switch>
</div>
<!-- 门锁管理 -->
<div class="col-xs-6 doorlockManage">
<u-switch :value="valueDoorlockManage" :init-param="componentsConfig.doorlockManageSwitch.initParam" v-on:u-switch-tap="onDoorlockManageTap"></u-switch>
</div>
</div>
</div>
</div>
</div>
<transition name="fade">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment