You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.7 KiB
145 lines
4.7 KiB
<template>
|
|
<view class="switch-manage">
|
|
<store-name></store-name>
|
|
<view class="sm-tit">照明管理</view>
|
|
<view class="sm-list">
|
|
<view class="sl-item" v-for="i in 5" :key="i">
|
|
<view class="si-top">
|
|
<image></image>
|
|
<view class="st-right">
|
|
<view class="sr-name">大堂</view>
|
|
<view class="sr-bot">
|
|
<view>
|
|
<text>设备在线</text>
|
|
</view>
|
|
<image></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="si-bottom">
|
|
<view>
|
|
<image></image>
|
|
<view>开</view>
|
|
</view>
|
|
<view>
|
|
<image></image>
|
|
<view>关</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store_name from '../../components/store_name/store_name';
|
|
export default {
|
|
components: {
|
|
'store-name': store_name
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.sm-tit{
|
|
padding-left: 40upx;
|
|
padding-top: 52upx;
|
|
padding-bottom: 30upx;
|
|
line-height: 60upx;
|
|
font-size: 44upx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.sm-list{
|
|
padding: 0 32upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap ;
|
|
.sl-item{
|
|
margin-bottom: 30upx;
|
|
width: 328upx;
|
|
height: 350upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
.si-top{
|
|
padding: 20upx 20upx 30upx;
|
|
border-bottom: 2upx solid #F2F2F7;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
>image{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-right: 20upx;
|
|
width: 80upx;
|
|
height: 80upx;
|
|
background-color: skyblue;
|
|
}
|
|
.st-right{
|
|
flex-grow: 1;
|
|
>.sr-name{
|
|
margin-bottom: 8upx;
|
|
line-height: 44upx;
|
|
font-size: 32upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
.sr-bot{
|
|
display: flex;
|
|
align-items: center;
|
|
>view{
|
|
margin-right: 8upx;
|
|
padding: 0 12upx;
|
|
font-size: 20upx;
|
|
line-height: 28upx;
|
|
border-radius: 28upx;
|
|
border: 2upx solid #9A9A9D;
|
|
&::before{
|
|
content: '';
|
|
margin-right: 12upx;
|
|
margin-top: -4upx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 8upx;
|
|
height: 8upx;
|
|
border-radius: 50%;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
>image{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: 32upx;
|
|
height: 32upx;
|
|
background-color: skyblue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.si-bottom{
|
|
padding-top: 30upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
>view{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: 50%;
|
|
background-color: skyblue;
|
|
>image{
|
|
display: block;
|
|
margin: 0 auto 20upx;
|
|
width: 100upx;
|
|
height: 100upx;
|
|
background-color: red;
|
|
}
|
|
>view{
|
|
font-size: 24upx;
|
|
line-height: 34upx;
|
|
text-align: center;
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|