gubersail-app/pages/me/index.vue

<template>
	<view>
		<uni-nav-bar title="我的" backgroundColor='#CCEEDB' color="#121816" fixed statusBar @clickRight="inSetting">
			<block slot="right">
				<view>
					<image class="nav-right" src="@/static/images/home/setting.png" />
				</view>
			</block>
		</uni-nav-bar>
		<view class="header">
			<view style="display: flex;align-items: center;">
				<view class="">
					<image style="width: 100rpx;height: 100rpx;" src="@/static/images/me/me (1).png" />
				</view>
				<view style="margin-left: 16rpx;">
					<view style="font-size: 30rpx;color: #363F3F;">
						青岛诚宜轮胎销售有限公司
					</view>
					<view style="display: flex;align-items: center;font-size: 28rpx;color: #7B7B7B;">
						<image style="width: 29rpx;height: 28rpx;" src="@/static/images/me/me (2).png" />北大区
					</view>
				</view>
			</view>
			<uni-grid :column="4" :showBorder="false" :highlight="false" :square="false" style="margin-top: 40rpx;">
				<uni-grid-item>
					<image style="width: 32rpx;height: 33rpx;" src="@/static/images/me/me (3).png" />
					<text style="font-size: 26rpx;line-height: 26rpx;color: #131313;margin-top: 18rpx ;">刘明明</text>
					<text style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin-top: 10rpx ;">工厂经理</text>
				</uni-grid-item>
				<uni-grid-item>
					<image style="width: 32rpx;height: 33rpx;" src="@/static/images/me/me (4).png" />
					<text style="font-size: 26rpx;line-height: 26rpx;color: #131313;margin-top: 18rpx ;">区域查询 </text>
					<text style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin-top: 10rpx ;">签约区域</text>
				</uni-grid-item>
				<uni-grid-item>
					<image style="width: 32rpx;height: 33rpx;" src="@/static/images/me/me (5).png" />
					<text style="font-size: 26rpx;line-height: 26rpx;color: #131313;margin-top: 18rpx ;">库比森</text>
					<text style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin-top: 10rpx ;">签约品牌</text>
				</uni-grid-item>
				<uni-grid-item>
					<image style="width: 32rpx;height: 33rpx;" src="@/static/images/me/me (6).png" />
					<text style="font-size: 26rpx;line-height: 26rpx;color: #131313;margin-top: 18rpx ;">10万条/年 </text>
					<text style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin-top: 10rpx ;">签约任务</text>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view style="background: #fff;padding: 40rpx;32rpx 0 32rpx">
			<view style="font-size: 28rpx;color: #131313;margin: 0 0 20rpx 30rpx;">
				我的钱包
			</view>
			<uni-grid :column="4" :showBorder="false" :highlight="false" :square="false">
				<uni-grid-item>
					<view class="monny-grid">
						<text
							style="font-size: 34rpx;line-height: 34rpx;color: #03803B;margin-top: 30rpx ;">12354</text>
						<text
							style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin:10rpx 0 40rpx 0;">可用返利</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid">
						<text
							style="font-size: 34rpx;line-height: 34rpx;color: #03803B;margin-top: 30rpx ;">12354</text>
						<text
							style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin:10rpx 0 40rpx 0;">冻结返利</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid">
						<text
							style="font-size: 34rpx;line-height: 34rpx;color: #03803B;margin-top: 30rpx ;">12354</text>
						<text
							style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin:10rpx 0 40rpx 0;">代金卷</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid">
						<text
							style="font-size: 34rpx;line-height: 34rpx;color: #03803B;margin-top: 30rpx ;">12354</text>
						<text
							style="font-size: 24rpx;line-height: 24rpx;color: #8B8F91;margin:10rpx 0 40rpx 0;">我的积分</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view
			style="background: #fff;padding:35rpx 100rpx;margin-top: 30rpx;display: flex;justify-content: space-between;align-items: center;">
			<view class="purchase-stock">
				<view style="position: absolute;">
					<view style="font-size: 51rpx;font-weight: 800;color: #2A2A2A;text-align: center;">
						65 <text style="font-size: 28rpx;">%</text>
					</view>
					<view style="font-size: 24rpx;color: #8D8D8D;font-weight: 400;">
						销售任务
					</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: space-around;height: 235rpx;">
				<view class="">
					<view style="font-size: 30rpx;color: #8D8D8D;font-weight: 400;">
						年进货数量
					</view>
					<view style="font-size: 40rpx;color: #2A2A2A;font-weight: bold;">
						116678 <text
							style="font-size: 28rpx;color: #8D8D8D;font-weight: 400;margin-left: 10rpx;">条</text>
					</view>
				</view>
				<view class="">
					<view style="font-size: 30rpx;color: #8D8D8D;font-weight: 400;">
						本月进货数量
					</view>
					<view style="font-size: 40rpx;color: #2A2A2A;font-weight: bold;">
						116678 <text
							style="font-size: 28rpx;color: #8D8D8D;font-weight: 400;margin-left: 10rpx;">条</text>
					</view>
				</view>
			</view>
		</view>
		<view style="background: #fff;padding: 40rpx;32rpx 0 32rpx;margin-top: 30rpx;">
			<uni-grid :column="5" :showBorder="false" :highlight="false" :square="false">
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (8).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">门店订单</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (9).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">出库任务</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (10).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">出库列表</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (11).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">待审客户</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (12).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">订单审批 </text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (13).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">客户分析</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (14).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">销售开单</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (15).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">库存查询</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (16).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">客户信息</text>
				</uni-grid-item>
				<uni-grid-item>
					<view class="monny-grid2">
						<image style="width: 41rpx;height: 41rpx;" src="@/static/images/me/me (17).png" />
					</view>
					<text style="font-size: 26rpx;#color: #2A2A2A;font-weight: 400;">功能名称</text>
				</uni-grid-item>

			</uni-grid>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {},
		methods: {

			inSetting() {
				uni.navigateTo({
					url: '/pages/me/setting'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-navbar--border {
		border-bottom: none !important;
	}

	::v-deep .uni-grid-item__box {
		align-items: center !important;
	}
	
	.nav-right {
		width: 32rpx;
		height: 30rpx;
	}
	
	.header {
		background: linear-gradient(180deg, #CCEEDB, #F3F8F6);
		padding: 60rpx;
	}

	.monny-grid {
		background: linear-gradient(180deg, #F0FFF7, #FCFFFD);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 149rpx;
	}

	.monny-grid2 {
		background: linear-gradient(180deg, #F0FFF7, #FCFFFD);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 85rpx;
	}

	.purchase-stock {
		background: url('@/static/images/me/me (7).png');
		background-size: 100% 100%;
		width: 245rpx;
		height: 235rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>