oil-station/gasStation-uni/pages/my/my.vue

<template>
	<view class="content">
		<view class="container">
			<view class="my-header">
				<view class="my-text">个人中心</view>
			</view>
			<!-- 顶部区域 -->
			<view class="my-top">
				<view class="dis-box">
					<view class="dis">
						<view class="touxiang" @click="gosetup">
							<image src="../../static/imgs/myx.png" mode=""></image>
						</view>
						<view class="">
							<view class="user-tel">135****7106</view>
							<view class="user-name" @click="gorefuel">蓝鲸加油站（总站）<uni-icons type="right" color="#c1c1ff"
									size="12"></uni-icons> </view>
						</view>
					</view>
					<view class="vipnber">会员等级 <uni-icons type="right" color="#ffffff" size="16"></uni-icons></view>
				</view>
				<view class="my-top-box">
					<view class="jg-box" @click="gomony()">
						<view class="jg-box-title">储值余额</view>
						<view class="jg-box-nmb">0.00</view>
					</view>
					<text style="color: #999999;">|</text>
					<view class="jg-box" @click="gooil()">
						<view class="jg-box-title">囤油升数</view>
						<view class="jg-box-nmb">0.00</view>
					</view>

					<text style="color: #999999;">|</text>
					<view class="jg-box">
						<view class="jg-box-title">卡券</view>
						<view class="jg-box-nmb">0</view>
					</view>
					<text style="color: #999999;">|</text>
					<view class="jg-box" style="border: none;" @click="gointegral()">
						<view class="jg-box-title">我的积分</view>
						<view class="jg-box-nmb">0</view>
					</view>
				</view>
			</view>
			<view class="my-top-box" style="margin-top: 45px;">
				<view class="centenr-sx" @click="gomyorder()">
					<view class="centenr-img">
						<image src="../../static/my/dingdan.png" mode=""></image>
					</view>
					<view class="centenr-size">
						我的订单
					</view>
				</view>


				<view class="centenr-sx">
					<view class="centenr-img">
						<image src="../../static/my/dsy.png" mode=""></image>
					</view>
					<view class="centenr-size">
						待使用
					</view>
				</view>

				<view class="centenr-sx">
					<view class="centenr-img">
						<image src="../../static/my/ywc.png" mode=""></image>
					</view>
					<view class="centenr-size">
						已完成
					</view>
				</view>
				<view class="centenr-sx">
					<view class="centenr-img">
						<image src="../../static/my/dpj.png" mode=""></image>
					</view>
					<view class="centenr-size">
						待评价
					</view>
				</view>
			</view>
			<view class="box-centenr">
				<view class="box-centenr-title">我的服务</view>
				<view class="wrap-box">
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/lpk.png"></image>
						</view>
						<view class="centenr-size">
							礼品卡
						</view>
					</view>
					<view class="centenr-sx" @click="gotodaby">
						<view class="centenr-img">
							<image src="../../static/my/jryj.png" mode=""></image>
						</view>
						<view class="centenr-size">
							今日油价
						</view>

					</view>

					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/jl.png" mode=""></image>
						</view>
						<view class="centenr-size">
							核销记录
						</view>

					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/chongzhi.png" style="width: 30px;height: 30px; "></image>
						</view>
						<view class="centenr-size">
							充值记录
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/lp.png" style="width: 30px;height: 30px; "></image>
						</view>
						<view class="centenr-size">
							邀请有礼
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/jfsc.png" style="width: 30px;height: 30px; "></image>
						</view>
						<view class="centenr-size">
							积分商城
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/kb.png"></image>
						</view>
						<view class="centenr-size">
							子卡管理
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="../../static/my/yj.png"></image>
						</view>
						<view class="centenr-size">
							意见反馈
						</view>
					</view>
				</view>

			</view>
			<u-divider text="蓝鲸智慧加油站" :hairline="true"></u-divider>
			<tabbar :msg="msg"></tabbar>
		</view>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		data() {
			return {
				title: '',
				msg: "3",

			}
		},

		components: {
			tabbar
		},
		methods: {
			gomyorder() {
				uni.navigateTo({
					url: '/pagesMy/myorder/myorder'
				})
			},
			gotodaby() {
				uni.navigateTo({
					url: '/pagesMy/today/today'
				})
			},
			gointegral() {
				uni.navigateTo({
					url: '/pagesMy/integral/integral'
				})
			},
			gooil() {
				uni.navigateTo({
					url: '/pagesMy/oilBalance/oilBalance'
				})
			},
			gomony() {
				uni.navigateTo({
					url: '/pagesMy/moneyBalance/moneyBalance'
				})
			},
			gosetup() {
				uni.navigateTo({
					url: '/pagesMy/setup/index'
				})
			},
			gorefuel() {
				uni.navigateTo({
					url: '/pagesRefuel/pagesRefuel/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #304fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;

		.my-text {
			margin-top: 40px
		}

		position: fixed;
		top: 0px;
	}

	.my-top {
		height: 150px;
		width: 100%;
		background: #304fff;
		box-sizing: border-box;
		padding-top: 1px;
	}

	.dis {
		display: flex;
		align-items: center;
	}

	.dis-box {
		width: 90%;
		margin: 20px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.touxiang {
		width: 65px;
		height: 65px;
		border-radius: 50%;
		background-color: #ebf5ff;
		overflow: hidden;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.user-tel {
		font-weight: bold;
		font-size: 20px;
		color: white;
		margin-bottom: 5px;
	}

	.user-name {
		font-size: 12px;
		color: #c1c1ff;
	}

	.vipnber {
		color: white;
	}

	.my-top-box {
		width: 90%;
		height: 80px;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		align-items: center;
		margin: 0 auto;
	}

	.jg-box {
		width: 33%;
		// border-right: 1px solid #999999;
		text-align: center;
	}

	.jg-box-title {
		font-size: 16px;
		color: #999999;
	}

	.jg-box-nmb {
		font-size: 18px;
		font-weight: bold;
	}

	.box-centenr {
		width: 90%;
		box-sizing: border-box;
		padding: 10px;
		background: white;
		margin: 15px auto;
		margin-top: 10px;
		border-radius: 8px;
	}

	.box-gang {
		border-bottom: 1px solid #f4f5f6;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #404041;
	}

	.wrap-box {
		display: flex;
		flex-wrap: wrap;
	}

	.centenr-sx {
		width: 25%;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
	}

	.box-centenr-title {
		font-weight: bold;
		font-size: 18px;
	}

	.centenr-img {

		margin: 2px auto;

		image {
			width: 32px;
			height: 32px;
		}
	}

	.centenr-size {
		font-size: 14px;
	}
</style>