XEH-miniProgram/pages/self/wallet/setting.vue

<template>
	<view class="page-wrap">
		<view class="title-row">安全设置</view>
		<view class="text-row">
			<view class="label">启用钱包</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="text-row">
			<view class="label">支付和提现时需短信验证</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="text-row">
			<view class="label">验证手机</view>
			<view class="text">18863100789</view>
			<image class="arrow" src="../../../static/svg/arrow.svg"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.title-row {
	height: 82.42rpx;
	padding: 27.47rpx 27.47rpx 0;
	box-sizing: border-box;
	font-size: 27.47rpx;
	color: #666;
}
.text-row {
	height: 96.15rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 41.21rpx;
	font-size: 27.47rpx;
	color: #333;
	background: #fff;
	& + .text-row {
		border-top: 1rpx solid #e0e0e0;
	}
	.text {
		flex: 1;
		text-align: right;
		color: #515151;
	}
	.arrow {
		width: 34.34rpx;
		height: 34.34rpx;
	}
	switch{
		margin-right: -13.74rpx;
	}
}
</style>