Delivery-merchant/pages/Mine.vue

<template>
	<view class="top">
		<view class="head">
			<view>
				<view class="left">
					<view class="title">益禾堂</view>
					<text class="text1">已认证</text>
				</view>
				<text class="text2">南京市**学校江宁学院一楼食堂</text>
			</view>
			<image class="imgBox" src="https://bpic.588ku.com/illus_water_img/21/07/05/ecab6de5a7b2972500459ba95cf97deb.jpg"></image>
		</view>
		<view class="content">
			<u-cell-group :border="false" class="from">
				<view class="list" @click="navigateTo('/pages/Storesettings')">
					<image class="imgBox2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-27-15-13-23CQyDfDRP.png"></image>
					<u-cell-item title="店铺设置" is-link></u-cell-item>
				</view>
				<view class="list" @click="navigateTo('/pages/Applicationshop')">
					<image class="imgBox2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-27-15-13-44aNgKvtbx.png"></image>
					<u-cell-item title="认证信息" is-link></u-cell-item>
				</view>
				<view class="list" @click="navigateTo('/pages/Standard')">
					<image class="imgBox2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-27-15-14-29lqHkdIPq.png"></image>
					<u-cell-item title="交易规范" is-link></u-cell-item>
				</view>
				<view class="list" @click="navigateTo('/pages/Setup')">
					<image class="imgBox2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-27-15-15-07XGsWDCTu.png"></image>
					<u-cell-item title="设置" is-link></u-cell-item>
				</view>
			</u-cell-group>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
		};
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {
	}
};
</script>
<style lang="scss" scoped>
.top {
	background: #214bbe;
	height: 114px;
	.head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 30px 20px;
		.left{
			display: flex;
			align-items: center;
			.title{
				font-size: 22px;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 26px;
			}
			.text1{
				width: 64px;
				height: 20px;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 2px;
				font-size: 13px;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 20px;
				text-align: center;
				margin-left: 10px;
			}
		}
		.text2{
			font-size: 13px;
			font-weight: 400;
			color: #A7BEFF;
			line-height: 24px;
			margin-top: 6px;
		}
		.imgBox{
			width: 70px;
			height: 70px;
			border-radius: 50%;
		}
	}
	.content {
		background: #ffffff;
		border-radius: 16px 16px 0px 0px;
		padding: 20px;
		display: flex;
		align-items: center;
	}
	.from{
		/deep/ .u-iconfont {
			font-size: 14px !important;
		}
		/deep/ .u-cell_title {
			font-size: 14px;
		}
		/deep/ .u-cell {
			padding: 20px 0;
			color: #000000;
			font-weight: bold;
		}
		/deep/ .u-cell__value {
			color: #000000;
			font-weight: 400;
		}
		/deep/ .u-field {
			padding: 23px 0;
			color: #000000;
			font-weight: bold;
			text-align: right;
		}
		/deep/ .uni-input-input {
			text-align: right;
			font-weight: 400;
		}
		/deep/ .u-label {
			span {
				width: 90px;
			}
		}
		/deep/ .u-cell__value{
			height: 27px;
		}
		.list{
			display: flex;
			align-items: center;
			.imgBox2{
				width: 27px;
				height: 24px;
				margin-right: 14px;
			}
		}
	}
}
</style>