zyronon
4 years ago
12 changed files with 358 additions and 43 deletions
@ -1,14 +1,86 @@
@@ -1,14 +1,86 @@
|
||||
.op0{ |
||||
opacity: 0; |
||||
@import "color"; |
||||
|
||||
.op0 { |
||||
opacity: 0; |
||||
} |
||||
|
||||
.global-notice { |
||||
position: fixed; |
||||
position: fixed; |
||||
color: white; |
||||
background: black; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
padding: .7rem 1rem; |
||||
border-radius: 1px; |
||||
font-size: 1.4rem; |
||||
} |
||||
|
||||
.row { |
||||
padding: 0 1.5rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
height: 5rem; |
||||
font-size: 1.4rem; |
||||
|
||||
&.no-active { |
||||
&:active { |
||||
background: $main-bg; |
||||
} |
||||
} |
||||
|
||||
&:active { |
||||
background: $active-main-bg; |
||||
} |
||||
|
||||
.left { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: white; |
||||
background: black; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
padding: .7rem 1rem; |
||||
border-radius: 1px; |
||||
font-size: 1.4rem; |
||||
|
||||
img { |
||||
margin-right: 1rem; |
||||
width: 1.5rem; |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: $second-text-color; |
||||
|
||||
img { |
||||
margin-left: 1rem; |
||||
width: 1.5rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.button { |
||||
color: white; |
||||
height: 4rem; |
||||
line-height: 4rem; |
||||
text-align: center; |
||||
border-radius: .3rem; |
||||
//width: 100%; |
||||
font-size: 1.4rem; |
||||
|
||||
&.primary { |
||||
background: $primary-btn-color; |
||||
|
||||
&:active { |
||||
background: $disable-primary-btn-color; |
||||
} |
||||
} |
||||
|
||||
&.dark { |
||||
background: $second-btn-color; |
||||
|
||||
&:active { |
||||
background: $second-btn-color-tran; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,107 @@
@@ -0,0 +1,107 @@
|
||||
<template> |
||||
<div class="DetailSetting"> |
||||
<BaseHeader/> |
||||
<div class="content" v-if="type === 0"> |
||||
<div class="notice"> |
||||
<img src="../../../../assets/img/icon/head-image.jpeg" alt=""> |
||||
<span>时间锁已关闭</span> |
||||
</div> |
||||
<div class="row mt1r no-active"> |
||||
<div class="left"> |
||||
<back></back> |
||||
<span>可为时间锁设置一个触发时间</span> |
||||
</div> |
||||
</div> |
||||
<div class="row mt1r no-active"> |
||||
<div class="left"> |
||||
<back></back> |
||||
<span>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span> |
||||
</div> |
||||
</div> |
||||
<div class="row mt1r mb1r no-active"> |
||||
<div class="left"> |
||||
<back></back> |
||||
<span>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span> |
||||
</div> |
||||
</div> |
||||
<div class="row mt1r mb1r" @click="$nav('trigger-time',{triggerTime})"> |
||||
<div class="left"> |
||||
<span>触发时间</span> |
||||
</div> |
||||
<div class="right"> |
||||
<span>{{ triggerTime }}分钟</span> |
||||
<back></back> |
||||
</div> |
||||
</div> |
||||
<div class="button primary "> |
||||
开启时间锁 |
||||
</div> |
||||
</div> |
||||
<div class="content"></div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
|
||||
import enums from "../../../../utils/enums"; |
||||
|
||||
export default { |
||||
name: "DetailSetting", |
||||
data() { |
||||
return { |
||||
type: 0, |
||||
enums, |
||||
triggerTime: enums.TRIGGER_TIME.TIME60 |
||||
} |
||||
}, |
||||
computed: {}, |
||||
created() { |
||||
this.type = this.$route.query.type |
||||
let triggerTime = localStorage.getItem('changeTriggerTime') |
||||
if (triggerTime !== null) this.triggerTime = triggerTime |
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
@import "../../../../assets/scss/index"; |
||||
|
||||
.DetailSetting { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
|
||||
.notice { |
||||
margin: 6rem 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
font-size: 1.6rem; |
||||
color: $second-text-color; |
||||
|
||||
img { |
||||
width: 1.5rem; |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
|
||||
} |
||||
|
||||
.button { |
||||
position: fixed; |
||||
bottom: 1rem; |
||||
left: 1rem; |
||||
right: 1rem; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,63 @@
@@ -0,0 +1,63 @@
|
||||
<template> |
||||
<div class="index"> |
||||
<BaseHeader> |
||||
<template v-slot:center> |
||||
<span class="f16">未成年保护工具</span> |
||||
</template> |
||||
</BaseHeader> |
||||
<div class="content"> |
||||
<div class="row" @click="$nav('detail-setting',{type:0})"> |
||||
<div class="left">时间锁</div> |
||||
<div class="right"> |
||||
<span>未开启</span> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="row" @click="$nav('detail-setting',{type:1})"> |
||||
<div class="left">青少年模式</div> |
||||
<div class="right"> |
||||
<span>未开启</span> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="row" @click="$nav('detail-setting',{type:2})"> |
||||
<div class="left">亲子平台</div> |
||||
<div class="right"> |
||||
<span>未开启</span> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "index", |
||||
data() { |
||||
return {} |
||||
}, |
||||
computed: {}, |
||||
created() { |
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
@import "../../../../assets/scss/index"; |
||||
|
||||
.index { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,74 @@
@@ -0,0 +1,74 @@
|
||||
<template> |
||||
<div class="TriggerTime"> |
||||
<BaseHeader> |
||||
<template v-slot:center> |
||||
<span class="f16">触发时间</span> |
||||
</template> |
||||
</BaseHeader> |
||||
<div class="content"> |
||||
<div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME40)"> |
||||
<div class="left">40分钟</div> |
||||
<div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME40"> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME60)"> |
||||
<div class="left">60分钟</div> |
||||
<div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME60"> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME90)"> |
||||
<div class="left">90分钟</div> |
||||
<div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME90"> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME120)"> |
||||
<div class="left">120分钟</div> |
||||
<div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME120"> |
||||
<img src="../../../../assets/img/icon/back.png" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import enums from "../../../../utils/enums"; |
||||
|
||||
export default { |
||||
name: "TriggerTime", |
||||
data() { |
||||
return { |
||||
enums, |
||||
triggerTime: enums.TRIGGER_TIME.TIME60 |
||||
} |
||||
}, |
||||
created() { |
||||
this.triggerTime = ~~this.$route.query.triggerTime |
||||
}, |
||||
methods: { |
||||
setTriggerTime(type) { |
||||
this.triggerTime = type |
||||
localStorage.setItem('changeTriggerTime', type) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
@import "../../../../assets/scss/index"; |
||||
|
||||
.TriggerTime { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
top: 0; |
||||
color: white; |
||||
|
||||
.content { |
||||
padding-top: 6rem; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue