workorder-front/pages/index/center.vue

<template>
	<view class="page">

		<view class="backimg">
			<view class="head-portrait">

			</view>
			<view class="id">
				李晓春
			</view>
		</view>
		
		<view class="box">
			<view class="index"
			@click="$utils.navigateTo('/pages_order/order/memberList')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="account-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						成员列表
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<hr />
			<view class="index" @click="$utils.navigateTo('/pages_order/order/ChangePassword')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="lock-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words" >
						修改密码
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<hr />
			<view class="index"
			@click="$utils.navigateTo('/pages_order/order/FavoriteList')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="star-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words" 	 >
						收藏列表
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<hr />
			<view class="index" @click="$utils.navigateTo('/pages_order/order/HelpCenter')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="question-circle-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						帮助中心
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<hr />
			<view class="index" @click="$utils.navigateTo('/pages_order/order/PrivacyAgreement')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="info-circle-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						隐私协议
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<hr />
		</view>
		
		<tabber select="1" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import {
		mapGetters
	} from 'vuex'
	import userShopCommission from '@/components/userShop/userShopCommission.vue'
	export default {
		components: {
			tabber,
			userShopCommission,
		},
		computed: {
			...mapGetters(['userShop']),
		},
		data() {
			return {}
		},
		methods: {
			headBtn() {
				let self = this
				uni.showModal({
					title: '演示切换角色之后的效果',
					success(res) {
						if (res.confirm) {
							self.$store.state.shop = !self.$store.state.shop
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	hr {
		 width: 80%; /* 设置为视口宽度的一半 */
		  margin: auto; /* 自动边距，实现水平居中 */
		  border: none; /* 移除默认边框 */
		  border-top: 1px solid #ccc; /* 设置顶部边框，可以根据需要更改颜色和大小 */
		  clear: both; /* 如果有浮动元素，清除浮动确保hr在它下方 */
	}

	.page {
		.backimg {

			padding: 0rpx 100rpx;
			height: 600rpx;
			width: 100%;
			background-color: rgb(51, 184, 234);

			display: flex;

			align-items: center;

			.head-portrait {
				height: 150rpx;
				width: 150rpx;
				background-color: greenyellow;
			}

			.id {
				color: #fff;
				margin: 0rpx 20rpx;
			}

		}
		.box{
			margin-top: 80rpx;
			
			.index {
				
				padding: 0rpx 60rpx;
				margin: 30rpx 0rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			
				.indus {
					display: flex;
			
					.words {
						margin: 0rpx 5rpx;
						font-size: 27rpx;
						opacity: 0.8;
					}
			
					.horn {
						margin: 5rpx 10rpx;
					}
				}
			
				.arrow {
					padding: 8rpx;
				}
			
			}
		}



	}
</style>