MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

未成年保护工具

Browse Source
This commit is contained in:
zyronon 2021-07-28 22:58:49 +08:00
parent 0ddc5527b8
commit 2414d94600
12 changed files with 358 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -65,6 +65,9 @@ export default {
'/chat-detail',
'/set-remark',
'/me/right-menu/look-history',
'/me/right-menu/minor-protection/index',
'/me/right-menu/minor-protection/detail-setting',
'/me/right-menu/minor-protection/trigger-time',
'',
];
const toDepth = routeDeep.indexOf(to.path)

92
src/assets/scss/custom.scss
View File

@ -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;
}
}
}

2
src/components/dialog/ConfirmDialog.vue
View File

@ -75,7 +75,7 @@ export default {
.subtitle {
margin-top: 1rem;
color: $second-text-color;
font-size: 1.2rem;
font-size: 1.3rem;
}
}

10
src/main.js
View File

@ -38,6 +38,16 @@ app.component('Video1', Video)
app.component('Footer', Footer)
app.component('Mask', Mask)
app.component('NoMore', NoMore)
app.component('back', {
data(){
return{
src:require('./assets/img/icon/back.png')
}
},
render() {
return <img src={this.src} alt=""/>
},
})
app.mixin(mixin)
app.use(router)
app.use(store)

4
src/pages/me/Me.vue
View File

@ -113,7 +113,7 @@
<img src="../../assets/img/icon/card-gray.png" alt="">
<span>我的二维码</span>
</div>
<div class="li" @click="$nav('MyCard')">
<div class="li" @click="$nav('')">
<img src="../../assets/img/icon/card-gray.png" alt="">
<span>创作者服务中心</span>
</div>
@ -128,7 +128,7 @@
<img src="../../assets/img/icon/card-gray.png" alt="">
<span>抖音公益</span>
</div>
<div class="li" @click="$nav('MyCard')">
<div class="li" @click="$nav('/me/right-menu/minor-protection/index')">
<img src="../../assets/img/icon/umbrella-gray.png" alt="">
<span>未成年保护工具</span>
</div>

9
src/pages/me/rightMenu/LookHistory.vue
View File

@ -4,7 +4,7 @@
<template v-slot:center>
<span class="f16">观看历史</span>
</template>
<template v-slot:right>
<template v-slot:right v-if="list">
<span class="second-text-color f13" @click="clear">清空</span>
</template>
</BaseHeader>
@ -16,9 +16,8 @@
v-model:active-index="currentSlideItemIndex">
</Indicator>
<SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 12rem);">
<SlideItem class="tab1">
<Posters :list="list" v-if="list" style="overflow:auto;"></Posters>
<SlideItem class="tab1" style="overflow:auto;">
<Posters :list="list" v-if="list"></Posters>
<div class="empty" v-else>
<img src="../../../assets/img/icon/head-image.jpeg" alt="">
<div class="title">暂无内容</div>
@ -47,7 +46,7 @@ export default {
data() {
return {
currentSlideItemIndex: 0,
list: 20,
list: 2,
}
},
computed: {},

107
src/pages/me/rightMenu/MinorProtection/DetailSetting.vue Normal file
View File

@ -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>

63
src/pages/me/rightMenu/MinorProtection/Index.vue Normal file
View File

@ -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>

74
src/pages/me/rightMenu/MinorProtection/TriggerTime.vue Normal file
View File

@ -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>

25
src/pages/me/userinfo/EditUserInfo.vue
View File

@ -207,31 +207,6 @@ export default {
}
.row {
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
font-size: 1.4rem;
&:active {
background: $active-main-bg;
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
color: $second-text-color;
img {
margin-left: 1rem;
width: 15px;
}
}
}
}
.change-dialog {

6
src/router/index.js
View File

@ -31,6 +31,9 @@ import Chat from "../pages/message/Chat";
import ChatDetail from "../pages/message/ChatDetail";
import SetRemark from "../pages/message/SetRemark";
import LookHistory from "../pages/me/rightMenu/LookHistory";
import MinorProtectionIndex from "../pages/me/rightMenu/MinorProtection/Index";
import MinorProtectionDetailSetting from "../pages/me/rightMenu/MinorProtection/DetailSetting";
import TriggerTime from "../pages/me/rightMenu/MinorProtection/TriggerTime";
const routes = [
// {path: '', component: Music},
@ -66,6 +69,9 @@ const routes = [
{path: '/chat-detail', component: ChatDetail},
{path: '/set-remark', component: SetRemark},
{path: '/me/right-menu/look-history', component: LookHistory},
{path: '/me/right-menu/minor-protection/index', component: MinorProtectionIndex},
{path: '/me/right-menu/minor-protection/detail-setting', component: MinorProtectionDetailSetting},
{path: '/me/right-menu/minor-protection/trigger-time', component: TriggerTime},
]
export default VueRouter.createRouter({

6
src/utils/enums.js
View File

@ -3,6 +3,12 @@ export default {
ALL: 0,
SCHOOL: 1,
ME: 2,
},
TRIGGER_TIME: {
TIME40: 40,
TIME60: 60,
TIME90: 90,
TIME120: 120,
}
}