MoeNovaClient/pages/my/adolescent.vue

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