jp-railway/pages/canteenManagement/mine/mine.vue

<template>
	<view>
		<view class="head">
			<view class="photo">
				<img src="../../../assets/img/qrLogo.png" alt="">
			</view>
			<view class="name">
				地方铁路食堂
			</view>
			<view class="switch">
				<view class="img"><img src="../../../assets/img/riLine-exchange-line@1x.png" alt="">
				</view>
				<view class="text">
					切换帐号
				</view>
			</view>
		</view>
		
		
		<!-- 功能 -->
		<view class="function-group group1"     >
			<view class="item">
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-qr-code-line@1x.png" alt="">
					</view>
					<view class="text">
						收款二维码
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
		
			<view class="item" >
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-file-edit-line@1x.png" alt="">
					</view>
					<view class="text">
						意见反馈
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
			
			<view class="item" >
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-customer-service-2-line@1x.png" alt="">
					</view>
					<view class="text">
						联系我们
					</view>
					
				</view>
				<view class="right">
					<text class="tel">
						0716-8888888
					</text>
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
			
			<view class="item" >
				<view class="title">
					<view class="icon">
						<img src="../../../assets/img/riLine-logout-box-r-line@1x.png" alt="">
					</view>
					<view class="text">
						退出账号
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
				</view>
			</view>
		
		</view>
		
		
		<canteenTabbar  ref="mytabbar"
				current="2"></canteenTabbar>
	</view>
	
</template>

<script>
	import canteenTabbar from "../../../components/canteenTabbar.vue"
	export default {
		components: {
			canteenTabbar
		},
		data() {
			
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family: 'PingFang Regular';
		padding-bottom: 100px;
	}
	.head{
		padding: 48rpx 0 48rpx 32rpx;
		display: flex;
		align-items: center;
		.photo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50px;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 8px 0px rgba(35, 72, 75, 15);
			border: 2px solid rgba(255, 255, 255, 1);
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.name{
			color: rgba(51, 51, 51, 1);
			font-size: 40rpx;
			margin-left: 24rpx;
			font-weight: bold;
		}
		.switch{
			width: 216rpx;
			height: 76rpx;
			border-radius: 50px 0px 0px 50px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			box-shadow: 0px 2px 4px 0px rgba(79, 125, 226, 15);
			margin-left: auto;
		   
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   color: rgba(31, 74, 153, 1);
		   .img{
			   
			   margin-right: 8rpx;
			   img{
				   vertical-align: middle;
			   }
		   }
		   }
			
	}

.function-group {
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		padding: 0 0 0 24rpx;
		margin: 0 32rpx;
		margin-top: 24rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
			border-bottom: 1px solid #E6E6E6;

			.title {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 24rpx;

					img {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
					}
				}

				.text {
					color: rgba(119, 119, 119, 1);
					
				}
			}

			.right {
				margin-right: 16rpx;
				margin-left: 8rpx;
				display: flex;
			}
		}
		.tel{
			margin-right: 16rpx;
			color: rgba(119, 119, 119, 1);
		}
	}
</style>