3 changed files with 315 additions and 0 deletions
-
12src/pages.json
-
86src/subpackage/device/pages/lighting_timie/list.vue
-
217src/subpackage/device/pages/lighting_timie/setting.vue
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<view class="lt-list"> |
|||
<view class="ll-title">1号馆照明定时</view> |
|||
<view class="ll-list"> |
|||
<view class="ll-item" v-for="i in 12" :key="i"> |
|||
<view class="li-line"> |
|||
<view class="ll-txt">指令：关闭</view> |
|||
<image class="ll-icon"></image> |
|||
</view> |
|||
<view class="li-line"> |
|||
<view class="ll-txt">时间：08:00</view> |
|||
</view> |
|||
<view class="li-line"> |
|||
<view class="ll-txt">日期：周日、周一、周二、周三、周四、周五、周六</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="ll-fixed-space"></view> |
|||
<view class="ll-fixed"> |
|||
<view class="lf-btn">添加定时任务</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
condition: { |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ll-title{ |
|||
padding: 46upx 40upx 60upx; |
|||
@include flcw(44upx, 60upx, #1a1a1a, 500); |
|||
@include tHide; |
|||
} |
|||
.ll-list{ |
|||
.ll-item{ |
|||
padding: 24upx 30upx; |
|||
background: #fff; |
|||
&+.ll-item{ |
|||
margin-top: 24upx; |
|||
} |
|||
.li-line{ |
|||
@include ctf(space-between); |
|||
align-items: baseline; |
|||
&+.li-line{ |
|||
margin-top: 16upx; |
|||
} |
|||
.ll-txt{ |
|||
@include flcw(28upx, 40upx, #1a1a1a); |
|||
} |
|||
.ll-icon { |
|||
flex-shrink: 0; |
|||
margin-left: 12upx; |
|||
width: 44upx; |
|||
height: 44upx; |
|||
background: skyblue; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ll-fixed-space{ |
|||
padding-bottom: 132upx; |
|||
@include isPd(132upx); |
|||
} |
|||
.ll-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 10upx 24upx; |
|||
width: 100%; |
|||
@include isPd(10upx); |
|||
.lf-btn{ |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(32upx, 112upx, #fff, 500); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,217 @@ |
|||
<template> |
|||
<view class="lt-setting"> |
|||
<view class="ll-title">1号馆照明定时</view> |
|||
|
|||
<view class="ls-container"> |
|||
<view class="lc-select"> |
|||
<view class="lc-name">指令</view> |
|||
<view class="ls-options"> |
|||
<view class="lp-item" @click="condition.instruct = 'open'"> |
|||
<view class="li-txt">开</view> |
|||
<image |
|||
class="li-icon" |
|||
mode="aspectFit" |
|||
:class="{active: condition.instruct === 'open'}" |
|||
:src="condition.instruct === 'open' ? '/subpackage/device/static/images/selected_987.png' : ''" |
|||
></image> |
|||
</view> |
|||
<view class="lp-item" @click="condition.instruct = 'close'"> |
|||
<view class="li-txt">关</view> |
|||
<image |
|||
class="li-icon" |
|||
mode="aspectFit" |
|||
:class="{active: condition.instruct === 'close'}" |
|||
:src="condition.instruct === 'close' ? '/subpackage/device/static/images/selected_987.png' : ''" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lc-picker"> |
|||
<view class="lc-name">时间点</view> |
|||
<picker mode="time" @change="condition.time = $event.detail.value"> |
|||
<view class="lp-box"> |
|||
<input disabled type="text" class="lb-ipt" v-model="condition.time"> |
|||
<image class="lb-icon" mode="aspectFit" src="/subpackage/device/static/images/arrow_b2.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="lc-switch"> |
|||
<view class="lc-name">日期</view> |
|||
<view class="ls-right"> |
|||
<switch class="lr-switch" color="#009874" @change="switchChange"></switch> |
|||
<view class="lr-txt">全选</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lc-week-ls"> |
|||
<view |
|||
class="lwl-item" |
|||
v-for="(e, i) in weeks" |
|||
:key="i" |
|||
:class="{active: condition.weekLs.includes(e)}" |
|||
@click="weekItemClick(e)" |
|||
>{{ e }}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="ll-fixed-space"></view> |
|||
<view class="ll-fixed"> |
|||
<view class="lf-btn">添加定时任务</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
weeks: [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ], |
|||
condition: { |
|||
instruct: 'open', // 指令 open: 开, close: 关 |
|||
time: '', // 时间点 |
|||
weekLs: [], // 日期 |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
switchChange(e){ |
|||
if(e.detail.value){ |
|||
this.condition.weekLs = [ ...this.weeks]; |
|||
}else{ |
|||
this.condition.weekLs = []; |
|||
} |
|||
}, |
|||
weekItemClick(e){ |
|||
let { weekLs } = this.condition; |
|||
if(weekLs.includes(e)){ |
|||
weekLs.splice(weekLs.indexOf(e), 1); |
|||
}else{ |
|||
weekLs.push(e); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.ll-title{ |
|||
padding: 46upx 40upx 60upx; |
|||
@include flcw(44upx, 60upx, #1a1a1a, 500); |
|||
@include tHide; |
|||
} |
|||
.ls-container{ |
|||
margin: 0 auto; |
|||
padding: 50upx 30upx 100upx; |
|||
width: 678upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
.lc-name{ |
|||
flex-shrink: 0; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
.lc-select{ |
|||
@include ctf(space-between); |
|||
.ls-options{ |
|||
width: 480upx; |
|||
@include ctf; |
|||
.lp-item{ |
|||
width: 50%; |
|||
@include ctf; |
|||
.li-txt{ |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
.li-icon{ |
|||
margin-left: 22upx; |
|||
flex-shrink: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 50%; |
|||
&.active{ |
|||
border-width: 0upx; |
|||
border-color: transparent; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.lc-picker{ |
|||
margin-top: 50upx; |
|||
@include ctf(space-between); |
|||
.lp-box{ |
|||
@include ctf(space-between); |
|||
width: 480upx; |
|||
height: 96upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
padding: 0 20upx; |
|||
.lb-ipt{ |
|||
flex-grow: 1; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
.lb-icon{ |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
transform: rotateZ(90deg); |
|||
} |
|||
} |
|||
} |
|||
.lc-switch{ |
|||
margin-top: 50upx; |
|||
@include ctf(space-between); |
|||
.ls-right{ |
|||
width: 480upx; |
|||
@include ctf; |
|||
.lr-switch{ |
|||
transform: scale(.8); |
|||
} |
|||
.lr-txt{ |
|||
margin-left: 20upx; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
} |
|||
} |
|||
.lc-week-ls{ |
|||
margin-top: 60upx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.lwl-item{ |
|||
margin: 0 20upx; |
|||
width: 160upx; |
|||
height: 88upx; |
|||
border-radius: 6upx; |
|||
border: 2upx solid #979797; |
|||
text-align: center; |
|||
@include flcw(32upx, 84upx, #979797); |
|||
&:nth-child(n + 4){ |
|||
margin-top: 40upx; |
|||
} |
|||
&.active{ |
|||
color: $mColor; |
|||
border-color: $mColor; |
|||
background: rgba($color: $mColor, $alpha: .12); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.ll-fixed-space{ |
|||
padding-bottom: 132upx; |
|||
@include isPd(132upx); |
|||
} |
|||
.ll-fixed{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
padding: 10upx 24upx; |
|||
width: 100%; |
|||
@include isPd(10upx); |
|||
.lf-btn{ |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(32upx, 112upx, #fff, 500); |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue