hire-wx-houxuanren/pagesD/xiaoxi.vue

<template>
	<view class="xiaoxi">
		<view class="xiaoxi-item u-flex u-row-between">
			<view class="u-flex-col">
				<text class="text1">聊天消息推送</text>
				<text class="text2">接收聊天消息通知</text>
				<text class="text3">关闭后将不再向您推送聊天消息通知</text>
			</view>
			<u-switch v-model="checked" active-color="#0C66C2"></u-switch>
		</view>
		<view class="xiaoxi-item u-flex u-row-between">
			<view class="u-flex-col">
				<text class="text1">求职推送</text>
				<text class="text2">投递反馈通知</text>
				<text class="text3">投递反馈通知</text>
			</view>
			<u-switch v-model="checked" active-color="#0C66C2"></u-switch>
		</view>
		<view class="xiaoxi-item">
			<view class="text1">互动/资讯推送</view>
			<view class="u-flex u-row-between">
				<text class="text2">资讯推荐</text>
				<u-switch v-model="checked" active-color="#0C66C2"></u-switch>
			</view>
			<view class="text3" style="margin-bottom: 44rpx;">关闭后将不再向您推送最新发布的资讯通知</view>
			<view class="u-flex u-row-between">
				<text class="text2">内容互动</text>
				<u-switch v-model="checked1" active-color="#0C66C2"></u-switch>
			</view>
			<view class="text3">关闭后将不再向您推送点赞、评论和关注您等互动消息的通知</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				checked1:true
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.xiaoxi {
		.xiaoxi-item {
			width: 750rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding: 32rpx 32rpx 28rpx 32rpx;
			box-sizing: border-box;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(34, 34, 34, 0.5);
				margin-bottom: 24rpx;
			}

			.text2 {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin-bottom: 12rpx;
			}

			.text3 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(34, 34, 34, 0.5);
			}
		}
	}

	page {
		background-color: #F3F3F3;
	}
</style>