Skip to content

D
DoorLock
Commit 61c5bd7c by wangying
Options

1.0.2 / 2017-09-15 

==================
 * 1.上传设备控制、记录列表、门锁管理、修改名称页面样式
parent cb65abb8
Showing with 1319 additions and 300 deletions
History.md
1.0.1 / 2017-09-15 1.0.2 / 2017-09-15
==================
* 1.上传设备控制、记录列表、门锁管理、修改名称页面样式
1.0.1 / 2017-09-15
================== ==================
* 1.上传项目页面样式 * 1.上传项目页面样式
......
dev/src/lang/zh.json
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
"remoteOpendoor": "远程开门", "remoteOpendoor": "远程开门",
"hijackAlarm": "劫持报警", "hijackAlarm": "劫持报警",
"followTitle": "关注服务号", "followTitle": "关注服务号",
"followCont1": "关注“i智信”微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧", "followCont1": "关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧",
"followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注", "followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注",
"laterFollow": "稍后关注" "laterFollow": "稍后关注"
}, },
......
dev/src/view/c_grid-list.vue
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<p class="grid-list-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p> <p class="grid-list-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
</div> </div>
<span class="grid-list-right-text" v-if="item.rightText">{{ item.rightText }}</span> <span class="grid-list-right-text" v-if="item.rightText">{{ item.rightText }}</span>
<span class="grid-list-right-icon">&#xe67f;</span> <span class="grid-list-right-icon">&#xe611;</span>
</v-touch> </v-touch>
<div class="grid-list-content"> <div class="grid-list-content">
<v-touch tag="div" class="grid-list-button" v-for="(buttonItem, buttonIndex) in item.buttons" v-on:tap="onTapButton(index, buttonIndex)"> <v-touch tag="div" class="grid-list-button" v-for="(buttonItem, buttonIndex) in item.buttons" v-on:tap="onTapButton(index, buttonIndex)">
......
dev/src/view/device/v_index.js
...@@ -24,7 +24,7 @@ function init() { ...@@ -24,7 +24,7 @@ function init() {
//劫持报警 //劫持报警
valueHijackAlarm: 1, valueHijackAlarm: 1,
activeFlag: true, activeFlag: true,
followShowFlag: true, followShowFlag: false,
//配置组件 //配置组件
componentsConfig: initComponentsConfig() componentsConfig: initComponentsConfig()
}, },
...@@ -110,8 +110,8 @@ function initComponentsConfig() { ...@@ -110,8 +110,8 @@ function initComponentsConfig() {
}, },
marquee: { marquee: {
initParam: { initParam: {
class: "custom-marquee-top", class: "custom-marquee",
text: "1234567890dsddgsadytsd<br>fytsfahdghsadgsyuagdh<br>sdfsdfdffgdfgfd12122" text: "2017.08.02 18:45 宝贝指纹开门<br>2017.08.02 18:45 宝贝指纹开门<br>2017.08.02 18:45 宝贝指纹开门"
} }
}, },
//开门记录switch 参数 //开门记录switch 参数
......
dev/src/view/doorlockManage/v_editName.js
...@@ -43,8 +43,8 @@ function initComponentsConfig() { ...@@ -43,8 +43,8 @@ function initComponentsConfig() {
return { return {
nameInput: { nameInput: {
initParam: { initParam: {
class: 'custom-text', class: 'custom-editName-text',
placeholder: Vue.t('login.nameInputTip') placeholder: Vue.t('editName.nameInputTip')
} }
}, },
//保存 button 参数 //保存 button 参数
......
web/lib/js/p.js
...@@ -12638,6 +12638,9 @@ function tapButton(self) { ...@@ -12638,6 +12638,9 @@ function tapButton(self) {
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
value: true value: true
}); });
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// //
// //
// //
...@@ -12680,7 +12683,7 @@ Object.defineProperty(exports, "__esModule", { ...@@ -12680,7 +12683,7 @@ Object.defineProperty(exports, "__esModule", {
exports.default = { exports.default = {
props: ['initParam'], props: ['initParam'],
data: function data() { data: function data() {
return { return _defineProperty({
// 组件初始化样式 // 组件初始化样式
initClass: this.initParam.class, initClass: this.initParam.class,
// 组件初始化图片列表 // 组件初始化图片列表
...@@ -12690,25 +12693,28 @@ exports.default = { ...@@ -12690,25 +12693,28 @@ exports.default = {
move: 0, move: 0,
//触摸结束位置 //触摸结束位置
end: 0, end: 0,
distance: 250, distance: null,
pre: 0,
next: 2,
status: false, status: false,
auto: this.initParam.auto, auto: this.initParam.auto,
autoTime: this.initParam.autoTime, autoTime: this.initParam.autoTime,
loop: this.initParam.loop, loop: this.initParam.loop,
time: null, time: null,
width: null width: null,
}; startTime: null,
endTime: null
}, "status", false);
}, },
mounted: function mounted() { mounted: function mounted() {
var select = this.$refs.carousel; var select = this.$refs.carousel;
//获取单张图片的大小
this.width = select.clientWidth; this.width = select.clientWidth;
//初始化无缝轮播 //初始化移动的位置
if (this.loop) { if (this.loop) {
//循环无缝轮播时因首张图片是复制图片列表最后一张图片，故初始位置需要向右移动单张图片的距离
this.distance = this.width; this.distance = this.width;
setTransform(this.distance, select); setTransform(this.distance, select);
} else { } else {
//不需要循环轮播则初始位置为0
this.distance = 0; this.distance = 0;
setTransform(this.distance, select); setTransform(this.distance, select);
} }
...@@ -12720,7 +12726,7 @@ exports.default = { ...@@ -12720,7 +12726,7 @@ exports.default = {
//鼠标移动三种状态的区分 //鼠标移动三种状态的区分
onPanSelect: function onPanSelect(index, event) { onPanSelect: function onPanSelect(index, event) {
var ulDom = this.$refs.carousel; var ulDom = this.$refs.carousel;
this.auto = false; // this.auto = false;
panSelect(this, event, ulDom, index); panSelect(this, event, ulDom, index);
} }
} }
...@@ -12729,121 +12735,170 @@ exports.default = { ...@@ -12729,121 +12735,170 @@ exports.default = {
}; };
function autoPlay(self, select) { function autoPlay(self, select) {
if (self.auto) { if (self.auto) {
clearInterval(self.time); if (self.loop) {
self.time = setInterval(function () { clearInterval(self.time);
if (self.distance == self.width * (self.list.length + 1)) { self.time = setInterval(function () {
self.distance = self.width; //判断是否超过最后一张图片的距离，是的话需要返回到第一张图片的位置
setTransform(self.distance, select); if (self.distance >= self.width * (self.list.length + 1)) {
setTransition(0, select); self.distance = self.width;
self.distance += self.width;
setTimeout(function () {
setTransform(self.distance, select); setTransform(self.distance, select);
setTransition(.6, select); setTransition(0, select);
setSelectIndex(self); setTimeout(function () {
}, 1000); setTransform(self.distance + self.width, select);
} else { self.distance += self.width;
self.distance += self.width; setTransition(.6, select);
setSelectIndex(self);
}, 1000);
} else {
setTimeout(function () {
setTransform(self.distance + self.width, select);
self.distance += self.width;
setTransition(.6, select);
setSelectIndex(self);
}, 1000);
}
}, self.autoTime);
} else {
clearInterval(self.time);
self.time = setInterval(function () {
setTimeout(function () { setTimeout(function () {
setTransform(self.distance, select); setTransform(self.distance + self.width, select);
self.distance += self.width;
if (self.distance >= self.width * (self.list.length - 1)) {
clearInterval(self.time);
}
setTransition(.6, select); setTransition(.6, select);
setSelectIndex(self); setSelectIndex(self);
}, 1000); }, 1000);
} }, self.autoTime);
}, self.autoTime); }
} }
} }
//自动轮播暂停
function stopAutoPlay(self) {
clearInterval(self.time);
}
function panSelect(self, event, select, index) { function panSelect(self, event, select, index) {
switch (event.type) { switch (event.type) {
case "panstart": case "panstart":
event.preventDefault(); if (self.status) {
self.start = event.center.x; event.preventDefault();
setTransition(0, select); //在开始拖动时停止自动播放
//判断图片是否滑动到两端 stopAutoPlay(self);
if (self.loop) { //记录开始移动的时间
if (self.distance == 0) { self.startTime = new Date() * 1;
setTransform(self.width * self.list.length, select); //记录开始移动的位置
self.distance = self.width * self.list.length; self.start = event.center.x;
} else if (self.distance == (self.list.length + 1) * self.width) { setTransition(0, select);
setTransform(self.width, select); //判断图片是否滑动到两端，在开始点击的时候立即将图片返回开始的位置
self.distance = self.width; if (self.loop) {
self.selectIndex = 0; if (self.distance <= 0) {
//跳转到最后一张图片的位置
setTransform(self.width * self.list.length, select);
self.distance = self.width * self.list.length;
} else if (self.distance >= (self.list.length + 1) * self.width) {
//跳转到第一张图片的位置
setTransform(self.width, select);
self.distance = self.width;
self.selectIndex = 0;
}
} }
} }
break; break;
case "panmove": case "panmove":
event.preventDefault(); event.preventDefault();
//记录正在滑动的点的位置
self.move = event.center.x; self.move = event.center.x;
//记录实时滑动的距离
var offset = self.start - self.move; var offset = self.start - self.move;
console.log(offset); //最多滑动一张图片的长度，超过一张图片的距离不再滑动
setTransform(self.distance + offset, select); if (offset < self.width && offset > -self.width) {
setTransform(self.distance + offset, select);
}
break; break;
case "panend": case "panend":
event.preventDefault(); event.preventDefault();
//记录停止滑动的时间
self.endTime = new Date() * 1;
// console.log(self.endTime);
//记录停止滑动的位置
self.end = event.center.x; self.end = event.center.x;
console.log(self.start - self.end); // console.log(self.start - self.end);
self.distance += self.start - self.end; //最终滑动距离在一张图片的大小以内的正常滑动,大于一张图片距离的以一张图片的大小移动
console.log(self.distance); if (self.start - self.end <= self.width && self.start - self.end >= -self.width) {
self.distance += self.start - self.end;
if (self.loop) { } else if (self.start - self.end < -self.width) {
var distance = calculateDistance(self); self.distance += -self.width;
setTransform(distance, select); } else if (self.start - self.end > self.width) {}
// self.distance += self.width;
// console.log(self.distance);
//正常循环无缝轮播
if (self.distance <= 0) {
self.distance = self.width * self.loop;
setTransform(self.distance, select);
setTransition(.6, select);
} else if (self.distance >= self.width * (self.list.length - 1 + self.loop * 2)) {
self.distance = self.width * (self.list.length - 1 + self.loop * 2);
setTransform(self.distance, select);
setTransition(.6, select); setTransition(.6, select);
self.distance = distance;
} else { } else {
if (self.distance < 0) { var distance = calculateDistance(self, self.endTime - self.startTime);
self.distance = 0; self.distance = distance;
setTransform(self.distance, select); setTransform(distance, select);
setTransition(.6, select); setTransition(.6, select);
} else if (self.distance > self.width * (self.list.length - 1)) {
self.distance = self.width * (self.list.length - 1);
setTransform(self.distance, select);
setTransition(.6, select);
} else {
var _distance = calculateDistance(self);
setTransform(_distance, select);
setTransition(.6, select);
self.distance = _distance;
}
} }
//在停止点击等待1.5s之后再次开始点击
setTimeout(function () {
autoPlay(self, select);
}, 1500);
//设置当前图片的下标
setSelectIndex(self); setSelectIndex(self);
select.addEventListener("transitionend", function () {
self.status = true;
});
select.addEventListener("webkitTransitionEnd", function () {
self.status = true;
});
break; break;
} }
} }
//计算滑动的距离 //计算滑动的距离
function calculateDistance(self) { function calculateDistance(self, time) {
var dis = self.distance; var dis = self.distance;
var remainder = dis % self.width; var remainder = dis % self.width;
if (dis > 0) { var move = self.start - self.end;
if (dis > self.width * (self.list.length + 1)) { if (time > 700) {
return self.width * (self.list.length + 1); if (remainder > self.width / 2) {
if (remainder > self.width / 2) { return dis + (self.width - remainder);
} else {
return dis - remainder;
}
} else {
if (move > 0) {
if (remainder > self.width / 2 || move > 0.25 * time) {
return dis + (self.width - remainder); return dis + (self.width - remainder);
} else { } else {
return dis - remainder; return dis - remainder;
} }
} else { } else {
if (remainder > self.width / 2) { if (remainder > self.width / 2 || move < -0.25 * time) {
return dis + (self.width - remainder);
} else {
return dis - remainder; return dis - remainder;
} else {
return dis + (self.width - remainder);
} }
} }
} else {
return 0;
// if(remainder > -self.width/2 ){
// return dis + remainder
// }else{
// return dis - (self.width-remainder)
// }
} }
} }
//设置当前图片的下标 //设置当前图片的下标
function setSelectIndex(self) { function setSelectIndex(self) {
self.selectIndex = self.distance / self.width; self.selectIndex = self.distance / self.width;
if (self.loop || self.auto) { if (self.loop) {
self.selectIndex -= 1; self.selectIndex -= 1;
if (self.selectIndex == self.list.length) { if (self.selectIndex == self.list.length) {
self.selectIndex = 0; self.selectIndex = 0;
...@@ -12855,8 +12910,8 @@ function setSelectIndex(self) { ...@@ -12855,8 +12910,8 @@ function setSelectIndex(self) {
//transform的通用方法 //transform的通用方法
function setTransform(distance, select) { function setTransform(distance, select) {
select.style.transform = 'translate3d(' + -1 * distance / 37.5 + 'rem, 0, 0)'; select.style.transform = 'translate3d(' + -1 * distance + 'px, 0, 0)';
select.style.webkitTransform = 'translate3d(' + -1 * distance / 37.5 + 'rem, 0, 0)'; select.style.webkitTransform = 'translate3d(' + -1 * distance + 'px, 0, 0)';
} }
//transition的通用方法 //transition的通用方法
function setTransition(time, select) { function setTransition(time, select) {
...@@ -21498,7 +21553,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c ...@@ -21498,7 +21553,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
staticClass: "grid-list-right-text" staticClass: "grid-list-right-text"
}, [_vm._v(_vm._s(item.rightText))]) : _vm._e(), _vm._v(" "), _c('span', { }, [_vm._v(_vm._s(item.rightText))]) : _vm._e(), _vm._v(" "), _c('span', {
staticClass: "grid-list-right-icon" staticClass: "grid-list-right-icon"
}, [_vm._v("")])]), _vm._v(" "), _c('div', { }, [_vm._v("")])]), _vm._v(" "), _c('div', {
staticClass: "grid-list-content" staticClass: "grid-list-content"
}, _vm._l((item.buttons), function(buttonItem, buttonIndex) { }, _vm._l((item.buttons), function(buttonItem, buttonIndex) {
return _c('v-touch', { return _c('v-touch', {
......
web/lib/less/addDevice/addDevice.less
...@@ -145,6 +145,9 @@ ...@@ -145,6 +145,9 @@
.buttonPosition(); .buttonPosition();
} }
.u-commstatus-loading { .u-commstatus-loading {
height: 100%; height: 100%;
background: rgba(0,0,0,0.7); background: rgba(0,0,0,0.7);
......
web/lib/less/device/device.less
@import "../public/public.less"; @import "../public/public.less";
@import "../public/header.less"; @import "../public/header.less";
.u-switch();
//远程开门 //远程开门
.inputBox{ .inputBox{
width: 250px; width: 250px;
...@@ -29,28 +27,253 @@ ...@@ -29,28 +27,253 @@
.button(); .button();
} }
.custom-marquee-top{ //智能指纹锁
width: 100%; .u-carousel();
height: 25px;
overflow: hidden; .custom-carousel{
text-align: center; .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;
}
}
}
} }
.custom-marquee-top .u-marquee-text{ .u-marquee();
display: inline-block;
.custom-marquee{
line-height: 25px; height: 20px;
text-align: center; text-align: center;
position: relative;
.u-marquee-text{
line-height: 20px;
}
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
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{ .deviceHandle{
animation: marqueeTop 5s linear infinite; position: absolute;
top: 294px;
bottom: 0;
left: 0;
width: 100%;
} }
@keyframes marqueeTop{ .switchGroup{
from{ transform: translateY(25px);} position: absolute;
to{ transform: translateY(-100%);} top: 20px;
bottom: 0;
left: 0;
width: 100%;
.col-xs-6{
height: 50%;
padding: 0;
.display-box();
.box-horizontal-alignment();
.box-vertical-alignment();
}
&:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
height: 1px;/*no*/
.blue_gradient_border();
}
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
margin: auto;
width: 1px;/*no*/
.linear-gradient(@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
background: linear-gradient(@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
}
}
.u-switch();
//开门记录
.opendoorRecord .custom-switch .u-switch-handle:before{
.bgImg("opendoorRecord.png");
}
//安全报警
.securityAlarm .custom-switch .u-switch-handle:before{
.bgImg("securityAlarm.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");
}
.custom-switch{
width: 100%;
height: auto;
.u-switch-handle{
position: relative;
top: 0;
left: 0;
.transform(none);
width: 55px;
height: 55px;
border-width: 1px;/*no*/
border-radius: 50%;
margin: 0 auto;
&: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;
margin-top: 15px;
text-align: center;
}
&.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;
} }
.u-carousel(); .followServiceNumber-dialog{
\ No newline at end of file position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1051;
background-color: 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/device/recordList.less
...@@ -8,6 +8,33 @@ ...@@ -8,6 +8,33 @@
top: 44px; top: 44px;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: auto; height: auto;
.u-list-scroll .u-list-row{
height: 75px;
padding: 0 45px 0 48px;
.u-list-left-image{
width: 30px;
height: 30px;
margin-right: 38px;
}
.u-list-title{
font-size: @CUSTOM-LIST-COMPONENT-TITLE-FONTSIZE;
line-height: 20px;
}
.u-list-right-text{
font-size: @CUSTOM-LIST-COMPONENT-RIGHTTEXT-FONTSIZE;
word-wrap: break-word;
width: 65px;
line-height: 14px;
}
&:after{
.white_gradient_border();
}
}
.u-list-load{
.listLoad();
}
.u-list-tip{
.listNoCont();
}
} }
\ No newline at end of file
web/lib/less/doorlockManage/doorlockManage.less
...@@ -25,11 +25,135 @@ ...@@ -25,11 +25,135 @@
} }
} }
.u-text();
.u-button(); .u-button();
.custom-button{ .custom-button{
.button(); .button();
.buttonPosition(); .buttonPosition();
}
//门锁管理
.grid-list{
position: absolute;
top: 44px;
bottom: 138px;
left: 0;
width: 100%;
overflow: auto;
}
.grid-list-scroll{
.grid-list-row{
margin: 10px;
border: 1px solid @GRIDLIST-COMPONENT-ROW-BORDER;/*no*/
border-radius: 5px;
.grid-list-handle{
height: 56px;
position: relative;
.display-box();
.box-vertical-alignment();
padding: 0 12px;
.grid-list-left-image{
width: 26px;
height: 26px;
margin-right: 5px;
}
div{
.flex();
min-width: 0;
}
.grid-list-title{
font-size: @GRIDLIST-COMPONENT-TITLE-FONTSIZE;
.text_oneRow_ellipsis();
}
.grid-list-right-icon{
.iconfont(@GRIDLIST-COMPONENT-DEFAULTICON-FONTSIZE);
.transform(rotate(180deg));
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
}
.grid-list-content{
height: 42px;
display: table;
width: 100%;
table-layout: fixed;
.grid-list-button{
display: table-cell;
vertical-align: middle;
.grid-list-button-bg{
width: 30px;
height: 30px;
text-align: center;
color: @GRIDLIST-COMPONENT-BUTTON-ICON-COLOR;
border: 1px solid;/*no*/
border-radius: 50%;
.iconfont(@GRIDLIST-COMPONENT-BUTTON-ICON-FONTSIZE,30px);
display: inline-block;
}
&:nth-child(1){
padding-left: 16px;
}
&:nth-child(2){
padding-left: 25px;
}
&:nth-child(3){
padding-left: 34px;
}
&:nth-child(4){
text-align: right;
padding-right: 16px;
}
}
}
}
}
.grid-list-load{
.listLoad();
text-align: center;
}
.grid-list-tip{
.transformV_center(left,0);
width: 100%;
text-align: center;
.listNoCont();
}
//修改名称
.u-text();
.custom-editName-text{
input{
font-size: @CUSTOM-EDITNAMETEXT-COMPONENT-INPUT-FONTSIZE;
padding-left: 46px;
&::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
}
//x icon
.u-text-clear{
right: 41px;
&:before{
content: '\e601';
font-family: iconfont;
color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
font-size: @CUSTOM-EDITNAMETEXT-COMPONENT-DEFAULTICON-FONTSIZE;
}
}
&:after{
.white_gradient_border();
}
}
.errorTip{
.errorTip();
} }
\ No newline at end of file
web/lib/less/public/animation.less
@import "./variables.less"; @import "./variables.less";
@import "./mixins.less"; @import "./mixins.less";
\ No newline at end of file
.marquee(@time,@fromValue,@toValue){
.active .u-marquee-text{
.animation(marquee @time linear infinite);
}
.keyframes(marquee,{
from{
.transform(translate(@fromValue));
}
to{
.transform(translate(@toValue));
}
});
}
\ No newline at end of file
web/lib/less/public/core.less
...@@ -296,19 +296,22 @@ p{ ...@@ -296,19 +296,22 @@ p{
//上拉加载 //上拉加载
.listLoad(){ .listLoad(){
height: 24px; color: @LIST-LOAD-COLOR;
line-height: 24px;
font-size: @LIST-LOAD-FONTSIZE; font-size: @LIST-LOAD-FONTSIZE;
.transform(scale(0.7));
height: 35px;
line-height: 35px;
} }
//list 无内容 //list 无内容
.listNoCont(){ .listNoCont(){
color: @LIST-NOCONTTIP-COLOR; color: @LIST-NOCONTTIP-COLOR;
.bgImg("noCont.png"); font-size: @LIST-NOCONTTIP-FONTSIZE;
background-position: top center; // .bgImg("noCont.png");
background-repeat: no-repeat; // background-position: top center;
.background-size(100px 100px); // background-repeat: no-repeat;
padding-top: 126px; // .background-size(100px 100px);
// padding-top: 126px;
} }
.white_gradient_border(){ .white_gradient_border(){
......
web/lib/less/public/public.less
...@@ -696,51 +696,54 @@ ...@@ -696,51 +696,54 @@
//图片轮播 //图片轮播
.u-carousel(){ .u-carousel(){
.u-carousel{ .u-carousel{
width: 250px; width: 100%;
height: 166px; height: 250px;
overflow: hidden; overflow: hidden;
margin: 0 auto;
position: relative; position: relative;
} .u-carousel-inner{
width: 100%;
.u-carousel .u-carousel-inner{
width: 100%;
height: 100%;
white-space: nowrap; white-space: nowrap;
font-size: 0; font-size: 0;
.u-carousel-item{
display: inline-block;
width: 100%;
.u-carousel-image{
width: 100%;
}
}
}
.u-carousel-indicators{
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
font-size: 0;
li{
width: 10px;
height: 10px;
background-color: @CAROUSEL-COMPONENT-INDICATORS-BG;
border-radius: 50%;
margin: 0 5px;
display: inline-block;
&.active{
opacity: 0.6;
}
}
}
} }
}
.u-carousel .u-carousel-inner .u-carousel-item{ .u-marquee(){
display: inline-block; .u-marquee{
}
.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image{
width: 100%; width: 100%;
height: 25px;
overflow: hidden;
.u-marquee-text{
display: inline-block;
line-height: 25px;
}
} }
.u-carousel-indicators{
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
font-size: 0;
}
.u-carousel-indicators li{
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
opacity: 0.6;
margin: 0 5px;
display: inline-block;
}
.u-carousel-indicators li.active{
opacity: 1;
}
} }
.edit-name(){ .edit-name(){
......
web/lib/less/public/variables.less
...@@ -15,8 +15,7 @@ ...@@ -15,8 +15,7 @@
//项目iconfont //项目iconfont
@font-face{ @font-face{
font-family: 'iconfont'; font-family: 'iconfont';
//src: url('@{ICONFONT_PATH}/iconfont.ttf') format('truetype'); src: url('@{ICONFONT_PATH}/iconfont.ttf') format('truetype');
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype');
} }
@BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif; @BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif;
...@@ -40,6 +39,7 @@ ...@@ -40,6 +39,7 @@
@C_GRAY_2: #999; @C_GRAY_2: #999;
@C_GRAY_3: #91929a; @C_GRAY_3: #91929a;
@C_GRAY_4: #959595; @C_GRAY_4: #959595;
@C_GRAY_5: #898989;
@OPACITY: transparent; @OPACITY: transparent;
@BLACK_OPACITY: fade(@C_BLACK,80%); @BLACK_OPACITY: fade(@C_BLACK,80%);
@BLACK_OPACITY_1: fade(@C_BLACK,40%); @BLACK_OPACITY_1: fade(@C_BLACK,40%);
...@@ -130,6 +130,7 @@ ...@@ -130,6 +130,7 @@
@SLIDE-COMPONENT-MINMAXVALUE-FONTSIZE: @F_SIZE_13; @SLIDE-COMPONENT-MINMAXVALUE-FONTSIZE: @F_SIZE_13;
@SLIDE-COMPONENT-DISABLED-COLOR: @C_GRAY; @SLIDE-COMPONENT-DISABLED-COLOR: @C_GRAY;
@SLIDE-COMPONENT-DISABLED-BG: @C_GRAY; @SLIDE-COMPONENT-DISABLED-BG: @C_GRAY;
@CAROUSEL-COMPONENT-INDICATORS-BG: @C_WHITE;
@EDITNAME-COMPONENT-INPUT-BG: @OPACITY; //修改名称 @EDITNAME-COMPONENT-INPUT-BG: @OPACITY; //修改名称
@EDITNAME-COMPONENT-ICON-FONTSIZE: @F_SIZE_20; @EDITNAME-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;
@EDITNAME-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25; @EDITNAME-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
...@@ -173,8 +174,10 @@ ...@@ -173,8 +174,10 @@
@LINKTEXT-TEXT-FONTSIZE: @F_SIZE_12; @LINKTEXT-TEXT-FONTSIZE: @F_SIZE_12;
//list //list
@LIST-LOAD-FONTSIZE: @F_SIZE_13; //上拉加载 @LIST-LOAD-COLOR: @C_BLUE_4; //上拉加载
@LIST-NOCONTTIP-COLOR: ; //list 无内容 @LIST-LOAD-FONTSIZE: @F_SIZE_16;
@LIST-NOCONTTIP-COLOR: @C_BLUE_4; //list 无内容
@LIST-NOCONTTIP-FONTSIZE: @F_SIZE_18;
//引导 //引导
@GUIDE-FOOTER-FONTSIZE: @F_SIZE_16; @GUIDE-FOOTER-FONTSIZE: @F_SIZE_16;
...@@ -198,12 +201,31 @@ ...@@ -198,12 +201,31 @@
@REMIND-TEXT-COLOR: @C_GRAY_3; //配置Wi-Fi提醒 @REMIND-TEXT-COLOR: @C_GRAY_3; //配置Wi-Fi提醒
@REMIND-TEXT-FONTSIZE: @F_SIZE_16; @REMIND-TEXT-FONTSIZE: @F_SIZE_16;
// //开门记录/报警信息/劫持记录
@RECORDLIST-FOOTER-TOPBORDER: @C_WHITE; @CUSTOM-LIST-COMPONENT-TITLE-FONTSIZE: @F_SIZE_16;
@RECORDLIST-FOOTER-COLOR: @C_GRAY_4; @CUSTOM-LIST-COMPONENT-RIGHTTEXT-FONTSIZE: @F_SIZE_12;
@RECORDLIST-FOOTER-FONTSIZE: @F_SIZE_16;
//生成绑定二维码 //生成绑定二维码
@QRCODEHELP-TEXT-COLOR: @C_GRAY_3; @QRCODEHELP-TEXT-COLOR: @C_GRAY_3;
@QRCODEHELP-TEXT-FONTSIZE: @F_SIZE_16; @QRCODEHELP-TEXT-FONTSIZE: @F_SIZE_16;
@QRCODEHELP-TITLE-FONTSIZE: @F_SIZE_18; @QRCODEHELP-TITLE-FONTSIZE: @F_SIZE_18;
\ No newline at end of file
//智能指纹锁
@CUSTOM-CAROUSEL-COMPONENT-INDICATORS-ACTIVE-BG: @C_GRAY_5;
@CUSTOM-SWITCH-COMPONENT-TEXT-FONTSIZE: @F_SIZE_18;
@CUSTOM-SWITCH-COMPONENT-HANDLE-BG: @BODY-BG-COLOR;
@CUSTOM-SWITCH-COMPONENT-ONSTATE-COLOR: @C_BLUE_4;
@CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR: @C_GRAY_5;
@NEWMSG-ICON-FONTSIZE: @F_SIZE_16;
@NEWMSG-ICON-COLOR: @C_RED_1;
//门锁管理
@GRIDLIST-COMPONENT-ROW-BORDER: @C_BLUE_4;
@GRIDLIST-COMPONENT-TITLE-FONTSIZE: @F_SIZE_18;
@GRIDLIST-COMPONENT-DEFAULTICON-FONTSIZE: @DEFAULT_F_SIZE + 8;
@GRIDLIST-COMPONENT-BUTTON-ICON-COLOR: @C_BLUE_4;
@GRIDLIST-COMPONENT-BUTTON-ICON-FONTSIZE: @F_SIZE_16;
//修改名称
@CUSTOM-EDITNAMETEXT-COMPONENT-INPUT-FONTSIZE: @F_SIZE_18;
@CUSTOM-EDITNAMETEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_20;
\ No newline at end of file
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":"用户列表"},"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":"安全报警","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":"绑定失败"}} {"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":"用户列表"},"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":"安全报警","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 \ No newline at end of file
web/view/addDevice/addDevice.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
html, html,
......
web/view/bindUser/bindUser.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
html, html,
......
web/view/device/device.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
html, html,
...@@ -303,71 +303,6 @@ p { ...@@ -303,71 +303,6 @@ p {
padding-top: 1.173rem; 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 { .inputBox {
width: 6.667rem; width: 6.667rem;
margin: 3.867rem auto 1.333rem; margin: 3.867rem auto 1.333rem;
...@@ -569,75 +504,465 @@ p { ...@@ -569,75 +504,465 @@ p {
color: #999; color: #999;
} }
.custom-marquee-top { .u-carousel {
width: 100%; width: 100%;
height: 0.667rem; height: 6.667rem;
overflow: hidden; 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; 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;
} }
.custom-marquee-top .u-marquee-text { .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;
}
.u-marquee {
width: 100%;
height: 0.667rem;
overflow: hidden;
}
.u-marquee .u-marquee-text {
display: inline-block; display: inline-block;
line-height: 0.667rem; line-height: 0.667rem;
}
.custom-marquee {
height: 0.533rem;
text-align: center; text-align: center;
position: relative;
}
.custom-marquee .u-marquee-text {
line-height: 0.533rem;
}
.custom-marquee:before {
content: '';
position: absolute;
top: 0;
left: 0;
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 { .active .u-marquee-text {
animation: marqueeTop 5s linear infinite; -webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
} }
@keyframes marqueeTop { @-webkit-keyframes marquee {
from { from {
transform: translateY(0.667rem); -webkit-transform: translate(0,0.533rem);
transform: translate(0,0.533rem);
} }
to { to {
transform: translateY(-100%); -webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
} }
} }
.u-carousel { @keyframes marquee {
width: 6.667rem; from {
height: 4.427rem; -webkit-transform: translate(0,0.533rem);
overflow: hidden; transform: translate(0,0.533rem);
margin: 0 auto; }
to {
-webkit-transform: translate(0,-100%);
transform: translate(0,-100%);
}
}
.deviceHandle {
position: absolute;
top: 7.84rem;
bottom: 0;
left: 0;
width: 100%;
}
.switchGroup {
position: absolute;
top: 0.533rem;
bottom: 0;
left: 0;
width: 100%;
}
.switchGroup .col-xs-6 {
height: 50%;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.switchGroup:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.switchGroup:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
margin: auto;
width: 1px;
background: -webkit-linear-gradient(#242635, #00ffff, #242635);
background: linear-gradient(#242635, #00ffff, #242635);
}
.u-switch {
position: relative; position: relative;
width: 2.667rem;
height: 1.333rem;
} }
.u-carousel .u-carousel-inner { .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");
}
.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%; width: 100%;
height: 100%; height: 100%;
white-space: nowrap; border-radius: 50%;
font-size: 0; -webkit-animation: aperture 2s linear -1s infinite;
animation: aperture 2s linear -1s infinite;
} }
.u-carousel .u-carousel-inner .u-carousel-item { @-webkit-keyframes aperture {
display: inline-block; 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);
}
} }
.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image { @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");
}
.custom-switch {
width: 100%; width: 100%;
height: auto;
}
.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: 0 auto;
}
.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;
margin-top: 0.4rem;
text-align: center;
}
.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;
} }
.u-carousel-indicators { .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; position: absolute;
bottom: 0.267rem; 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; left: 0;
width: 100%; 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; text-align: center;
font-size: 0; line-height: 0.48rem;
margin-bottom: 1.067rem;
} }
.u-carousel-indicators li { .followServiceNumber-dialog .followServiceNumber-dialog-box ul li:first-child {
width: 0.267rem; font-size: 0.507rem;
height: 0.267rem; margin-bottom: 1.6rem;
background-color: #fff; }
border-radius: 50%;
opacity: 0.6; .followServiceNumber-dialog .followServiceNumber-dialog-box ul li:nth-child(3) {
margin: 0 0.133rem; 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; display: inline-block;
min-width: 2.667rem;
padding: 0.427rem 0.693rem 0.053rem;
margin-top: 0.533rem;
} }
.u-carousel-indicators li.active { .followServiceNumber-dialog .followServiceNumber-dialog-box .linkText span:after {
opacity: 1; 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/recordList.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
html, html,
...@@ -394,4 +394,46 @@ p { ...@@ -394,4 +394,46 @@ p {
bottom: 0; bottom: 0;
left: 0; left: 0;
height: auto; height: auto;
}
.custom-list .u-list-scroll .u-list-row {
height: 2rem;
padding: 0 1.2rem 0 1.28rem;
}
.custom-list .u-list-scroll .u-list-row .u-list-left-image {
width: 0.8rem;
height: 0.8rem;
margin-right: 1.013rem;
}
.custom-list .u-list-scroll .u-list-row .u-list-title {
font-size: 0.427rem;
line-height: 0.533rem;
}
.custom-list .u-list-scroll .u-list-row .u-list-right-text {
font-size: 0.32rem;
word-wrap: break-word;
width: 1.733rem;
line-height: 0.373rem;
}
.custom-list .u-list-scroll .u-list-row:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.custom-list .u-list-load {
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.custom-list .u-list-tip {
color: #00ffff;
font-size: 0.48rem;
} }
\ No newline at end of file
web/view/doorlockManage/doorlockManage.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
html, html,
...@@ -329,6 +329,183 @@ p { ...@@ -329,6 +329,183 @@ p {
border: 1px solid; border: 1px solid;
} }
.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-button {
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
}
.custom-button:active {
background-color: #153D4C;
}
.custom-button.disabled {
background-color: transparent;
color: #999;
}
.grid-list {
position: absolute;
top: 1.173rem;
bottom: 3.68rem;
left: 0;
width: 100%;
overflow: auto;
}
.grid-list-scroll .grid-list-row {
margin: 0.267rem;
border: 1px solid #00ffff;
border-radius: 0.133rem;
}
.grid-list-scroll .grid-list-row .grid-list-handle {
height: 1.493rem;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0 0.32rem;
}
.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-left-image {
width: 0.693rem;
height: 0.693rem;
margin-right: 0.133rem;
}
.grid-list-scroll .grid-list-row .grid-list-handle div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
}
.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-title {
font-size: 0.48rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-right-icon {
font-family: iconfont;
font-size: 0.587rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.grid-list-scroll .grid-list-row .grid-list-handle: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);
}
.grid-list-scroll .grid-list-row .grid-list-content {
height: 1.12rem;
display: table;
width: 100%;
table-layout: fixed;
}
.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button {
display: table-cell;
vertical-align: middle;
}
.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button .grid-list-button-bg {
width: 0.8rem;
height: 0.8rem;
text-align: center;
color: #00ffff;
border: 1px solid;
border-radius: 50%;
font-family: iconfont;
font-size: 0.427rem;
-webkit-font-smoothing: antialiased;
line-height: 0.8rem;
display: inline-block;
}
.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(1) {
padding-left: 0.427rem;
}
.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(2) {
padding-left: 0.667rem;
}
.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(3) {
padding-left: 0.907rem;
}
.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(4) {
text-align: right;
padding-right: 0.427rem;
}
.grid-list-load {
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
text-align: center;
}
.grid-list-tip {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #00ffff;
font-size: 0.48rem;
}
.u-text { .u-text {
width: 100%; width: 100%;
display: table; display: table;
...@@ -429,47 +606,37 @@ p { ...@@ -429,47 +606,37 @@ p {
} }
} }
.u-button { .custom-editName-text input {
width: 6.4rem; font-size: 0.48rem;
color: #fff; padding-left: 1.227rem;
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 { .custom-editName-text input::-webkit-input-placeholder {
background-color: #0065ff; color: #91929a;
} }
.u-button.disabled { .custom-editName-text .u-text-clear {
background-color: #bbb; right: 1.093rem;
} }
.custom-button { .custom-editName-text .u-text-clear:before {
width: 7.333rem; content: '\e601';
border-radius: 0.133rem; font-family: iconfont;
background-color: transparent;
border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.533rem;
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
} }
.custom-button:active { .custom-editName-text:after {
background-color: #153D4C; background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
} }
.custom-button.disabled { .errorTip {
background-color: transparent; color: #fc2168;
color: #999; font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
text-align: center;
height: 1.067rem;
line-height: 1.067rem;
} }
\ No newline at end of file
web/view/login/login.css
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@font-face { @font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_372681_hjaizbm8cxwp14i.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
html, html,
......
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