XEH-miniProgram/pages/self/authSetting.vue

<template>
	<view class="page-wrap">
		<view class="header-panel">
			<image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
			<view class="text">
				张无忌 18991397914
				<text class="sub">总经办</text>
			</view>
		</view>
		<view class="title-row">企业服务</view>
		<view class="item-row">
			<view class="label">下单</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">支付</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="title-row">应用中心</view>
		<view class="item-row">
			<view class="label">我的租房</view>
			<switch color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">共享会议室</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">财税管家</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">日常缴费</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">我的门禁 - 门禁授权</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">智慧停车</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">我的监控</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="title-row">我的</view>
		<view class="item-row">
			<view class="label">我的订单</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">我的账单</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">我的发票</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">企业钱包</view>
			<switch checked color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">企业资料</view>
			<switch color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">企业团队</view>
			<switch color="#409eff" style="transform: scale(0.7)" />
		</view>
		<view class="item-row">
			<view class="label">认证信息</view>
			<switch color="#409eff" style="transform: scale(0.7)" />
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
.page-wrap {
	padding-bottom: 41.21rpx;
}
.header-panel {
	display: flex;
	align-items: center;
	padding: 27.47rpx;
	.avatar {
		width: 76.92rpx;
		height: 76.92rpx;
	}
	.text {
		flex: 1;
		font-size: 27.47rpx;
		color: #545e8f;
		margin-left: 13.74rpx;
	}
	.sub {
		display: block;
		font-size: 24.73rpx;
		color: #999999;
	}
}
.title-row {
	font-size: 27.47rpx;
	color: #666666;
	padding: 0 41.21rpx;
	line-height: 82.42rpx;
}
.item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 27.47rpx;
	color: #333333;
	background: #fff;
	height: 96.15rpx;
	padding: 0 41.21rpx;
	position: relative;
	& + &:before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 1rpx;
		background: #e0e0e0;
	}
	switch{
		margin-right: -13.74rpx;
	}
}
</style>