|
|
@@ -0,0 +1,123 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <PageHeader title="" class="PageHeader">
|
|
|
+ <template slot="center">
|
|
|
+ 青少年模式
|
|
|
+ </template>
|
|
|
+ </PageHeader>
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="umbrella-box">
|
|
|
+ <image class="umbrella" src="../../static/me/qingshaonianmoshi.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="textBox">
|
|
|
+ <view class="teenageMode">
|
|
|
+ <view class="title">
|
|
|
+ 青少年模式
|
|
|
+ <view class="switchMode active" v-if="true">已开启</view>
|
|
|
+ <view class="switchMode " v-else>未开启</view>
|
|
|
+ </view>
|
|
|
+ <view class="prompt">
|
|
|
+ 此模式下部分功能无法使用，且会带来以下限制
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="textList">
|
|
|
+ <view class="textItem">·青少年模式下，将不支持充值、订阅会员功</view>
|
|
|
+ <view class="textItem">·每日22时至次日8时，期间无法使用本应</view>
|
|
|
+ <view class="textItem">·未成年人每日可使用40分</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottm-box">
|
|
|
+ <view class="button">开启青少年模式</view>
|
|
|
+ <view class="button">退出青少年模式</view>
|
|
|
+ <view class="setPassword">修改密码</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background: url("../../static/me/wd_bg_bianjiziliao.png") top center/ 100% auto no-repeat,
|
|
|
+ #f2f6f2;
|
|
|
+}
|
|
|
+
|
|
|
+.PageHeader {
|
|
|
+ background: url("../../static/me/wd_bg_bianjiziliao.png") center top / 100% auto no-repeat,
|
|
|
+ #f2f6f2;
|
|
|
+ background-position-y: var(--status-bar-height);
|
|
|
+}
|
|
|
+
|
|
|
+.content-box {
|
|
|
+ padding-top: calc(210rpx + var(--status-bar-height));
|
|
|
+
|
|
|
+ .umbrella-box {
|
|
|
+ padding-bottom: 96rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .umbrella {
|
|
|
+ width: 364rpx;
|
|
|
+ height: 364rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textBox {
|
|
|
+ padding: 0 40rpx;
|
|
|
+
|
|
|
+ .teenageMode {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: 'PingFang SC-Bold';
|
|
|
+ color: #1F1F1F;
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ .switchMode {
|
|
|
+ position: absolute;
|
|
|
+ right: -95rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 80rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ background: url(../../static/me/text-bg.png) center top / 100% auto no-repeat;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &.active{
|
|
|
+ background: url(../../static/me/text-bg-active.png) center top / 100% auto no-repeat;
|
|
|
+ color: #8BB849;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
