sailun-tbr-web/pages/me/index.vue

<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="u-page">
			<view class="head">
				<view class="u-flex u-row-between" style="padding: 50rpx 30rpx">
					<view class="u-flex">
						<view class="">
							<u-image width="130rpx" height="130rpx" :src="src" :lazy-load="true" shape="circle">
								<view slot="error" style="font-size: 24rpx;" :fade="true" duration="450">加载失败</u-icon>
								</view>
							</u-image>
						</view>
						<view class="u-margin-left-10">
							<view style="color: #fff;font-size: 42rpx;" class="u-margin-bottom-20">
								青岛赛轮轮胎零售店
							</view>
							<view style="border: 1rpx solid #E3E3E3;border-radius: 30rpx;font-size:24rpx;color:#fff;padding: 2rpx 20rpx;">
								山东省青岛市城阳区黑龙江北路188
							</view>
						</view>
					</view>
					<view class="">
						<u-icon name="qr" size="80rpx" custom-prefix="van-icon" color="#fff"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-around">
					<view class="u-text-center">
						<view style="font-size:36rpx; font-weight: 500;color: #FFFFFF;">
							张三
						</view>
						<view style="color: #B3DAFF;opacity: 0.9;">
							联系人
						</view>
					</view>
					<view class="u-text-center">
						<view style="font-size:36rpx;font-weight: 500;color: #FFFFFF;">
							市北区
						</view>
						<view style="color: #B3DAFF;opacity: 0.9;">
							区域
						</view>
					</view>
				</view>
			</view>
			<view style="position: relative;top:-110rpx">
				<u-card padding="20" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false" :border="false">
					<view slot="head" class="u-flex u-row-between u-col-bottom">
						<view style="font-weight: 500;font-size: 36rpx;">
							结算中心
						</view>
						<view class="u-col-bottom" style="color: #4B4B4B;font-size: 20rpx;">
							查看全部
						</view>
					</view>
					<view slot="body">
						<view class="u-flex u-row-around">
							<view class="u-text-center">
								<view style="color: #0095FF;font-size: 30rpx;">
									800 <text style="font-size: 14rpx;">万</text>
								</view>
								<view style="color: #333333;">
									我的奖励
								</view>
							</view>
							<view class="u-text-center">
								<view style="color: #0095FF;font-size: 30rpx;">
									800 <text style="font-size: 14rpx;">万</text>
								</view>
								<view style="color: #333333;">
									冻结奖励
								</view>
							</view>
							<view class="u-text-center">
								<view style="color: #0095FF;font-size: 30rpx;">
									800 <text style="font-size: 14rpx;">万</text>
								</view>
								<view style="color: #333333;">
									待核销
								</view>
							</view>
							<view class="u-text-center">
								<view style="color: #0095FF;font-size: 30rpx;">
									800 <text style="font-size: 14rpx;">万个</text>
								</view>
								<view style="color: #333333;">
									可用积分
								</view>
							</view>
						</view>
					</view>
				</u-card>
				<u-card padding="20" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false" :border="false">
					<view slot="head" class="u-flex u-row-between u-col-bottom">
						<view style="font-weight: 500;font-size: 36rpx;">
							结算中心
						</view>
						<view class="u-col-bottom" style="color: #4B4B4B;font-size: 20rpx;">
							查看全部
						</view>
					</view>
					<view slot="body">
						<view class="u-flex u-row-around u-flex-wrap">
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
							<view class="u-flex u-row-centter" style="flex-direction: column;width: 25%;">
								<view>
									<u-image width="80rpx" height="80rpx" :src="src" :lazy-load="true" shape="circle">
									</u-image>
								</view>
								<view style="font-weight: 500;color: #000000;">
									入库明细
								</view>
							</view>
						</view>
					</view>
				</u-card>
				<u-cell-group>
					<u-cell-item  title="核销记录">
						<u-icon slot="icon" size="32" name="balance-o" custom-prefix="van-icon"></u-icon>
					</u-cell-item>
					<u-cell-item  title="兑换记录">
						<u-icon slot="icon" size="32" name="balance-list-o" custom-prefix="van-icon"></u-icon>
					</u-cell-item>
					<u-cell-item icon="setting-fill" title="设置">
						<u-icon slot="icon" size="32" name="setting-o" custom-prefix="van-icon"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		2
		<!-- 与包裹页面所有内容的元素u-page同级， -->
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../static/sailun/fade.jpg',
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/home/index'
					},
					{
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '消息',
						count: 2,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/msg/index'
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						customIcon: false,
						pagePath: '/pages/me/index'
					},
				],
				current: 2
			};
		},
		methods:{
			inStore(){
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #0095FF;
	}

	.head {
		width: 750rpx;
		height: 429rpx;
		background: linear-gradient(50deg, #3F77F6 0%, #66CCFF 100%);
	}
</style>