未成年保护工具

src/App.vue

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

src/assets/scss/custom.scss

@@ -1,6 +1,9 @@
-.op0{
+@import "color";
+
+.op0 {
   opacity: 0;
 }
+
 .global-notice {
   position: fixed;
   color: white;
@@ -12,3 +15,72 @@
   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;
+
+    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;
+    }
+  }
+}

src/components/dialog/ConfirmDialog.vue

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

src/main.js

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

src/pages/me/Me.vue

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

src/pages/me/rightMenu/LookHistory.vue

@@ -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">
+        <SlideItem class="tab1"  style="overflow:auto;">
-
+          <Posters :list="list" v-if="list"></Posters>
-          <Posters :list="list" v-if="list" style="overflow:auto;"></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: {},

src/pages/me/rightMenu/MinorProtection/DetailSetting.vue

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

src/pages/me/rightMenu/MinorProtection/Index.vue

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

src/pages/me/rightMenu/MinorProtection/TriggerTime.vue

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

src/pages/me/userinfo/EditUserInfo.vue

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

src/router/index.js

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

src/utils/enums.js

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