JiangxiMiniProgram/pages/tabbar/mine/index.vue

<template>
	<view class="content pageBg">
		<!-- 学员名字 -->
		<view class="top_row flex-b">
			<view class="flex">
				<view class="userName">Hi，大乔</view>
				<view class="arrowIcon">
					<image src="../../../static/images/userCenter/ic_gengduo.png" mode=""></image>
				</view>
			</view>
			<view class="scanCode">
				<image src="../../../static/images/userCenter/ic_erweima.png" mode=""></image>
			</view>
		</view>
		<view class="pad">
			<!-- 学车进度 -->
			<view class="userProgress">
				<view class="progItme first flex">
					<view class="dianBox">
						<view class="dian"></view>
					</view>
					<view class="rightCon">报名成功</view>
				</view>
				<view class="progItme flex">
					<view class="dianBox">
						<view class="dian active"></view>
					</view>
					<view class="line"></view>
					<view class="rightCon">
						<view class="day">22天</view>
						<view class="flex-b">
							<view class="flex">
								<view class="text">科目一考试通过</view>
								<view class="tag">当前进度</view>
							</view>
							<view class="progBtn">进度查询</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 我的相关入口 -->
			<view class="ul">
				<view class="li"  v-for="(item,index) in myPageEntry" :key="index">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
			<!-- 业务办理 -->
			<view class="business ">
				<view class="h1">业务办理</view>
				<view class="card">
					<view class="item" v-for="(item,index) in businessEntry" :key="index">
						<view class="icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="text">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <UserTab selectedIndex ='2'></UserTab> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myPageEntry: [
					{
						text: '我的预约',
						icon: require('../../../static/images/userCenter/ic_yuyue.png'),
					},
					{
						text: '我的订单',
						icon: require('../../../static/images/userCenter/ic_dingdan.png'),
					},
					{
						text: '学车数据',
						icon: require('../../../static/images/userCenter/ic_shuju.png'),
					},
					{
						text: '我的合同',
						icon: require('../../../static/images/userCenter/ic_hetong.png'),
					},
					{
						text: '我的评价',
						icon: require('../../../static/images/userCenter/ic_pingjia.png'),
					},
					{
						text: '我的收藏',
						icon: require('../../../static/images/userCenter/ic_shoucang.png'),
					},
					{
						text: '本地生活',
						icon: require('../../../static/images/userCenter/ic_shenghuo.png'),
					},
				],
				businessEntry: [
					{
						text: '学时查询',
						icon: require('../../../static/images/userCenter/ic_chaxun.png'),
					},
					{
						text: '同城转校',
						icon: require('../../../static/images/userCenter/tgzhuanxiao.png'),
					},
					{
						text: '车型变更',
						icon: require('../../../static/images/userCenter/biangen.png'),
					},
					{
						text: '申请退学',
						icon: require('../../../static/images/userCenter/shenqingtuixue.png'),
					},
				]
			}
		},
		onLoad() {
			console.log('我的页面')
		},
		onShow() {
			// uni.hideTabBar();
		},
		methods: {
			goPage() {}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		
	}
	
	.content {
		width: 100%;
		width: 100vw;
		min-height: 100vh;
		background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat;
		background-size: 100% 362rpx;
	  .top_row {
		  width: 100%;
		  padding: 180rpx 62rpx 0 32rpx;
	    .flex {
			
	      .userName {
			font-size: 48rpx;
			font-weight: 600;
			color: #FFFFFF;
	      }
	
	      .arrowIcon {
	        margin-left: 24rpx;
			width: 40rpx;
			height: 40rpx;
	      }
	    }
	
	    .scanCode {
	      width: 40rpx;
		  height: 40rpx;
	    }
	  }
	
	  .userProgress {
		  background: rgba(255,255,255,0.65);
		  box-shadow: 2px 2px 8px 0px #C3D6E9, inset 0px 2px 4px 0px rgba(255,255,255,0.5);
		  border-radius: 16rpx;
		  padding: 22rpx 22rpx 22rpx 32rpx;
		  margin-top: 32rpx;
	    .progItme {
			position: relative;
			.dianBox {
				width: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 0rpx;
				bottom: 14rpx;
				z-index: 4;
				.dian {
						width: 12rpx;
						height: 12rpx;
						background: #1989FA;
						border-radius: 50%;
						&.active {
							width: 32rpx;
							height: 32rpx;
							background: rgba(25,137,250,0.11);
							position: relative;
							&::before {
								content: '' ;
								width: 18rpx;
								height: 18rpx;
								position: absolute;
								border-radius: 50%;
								top: 50%;
								left: 50%;
								background: #1989FA;
								transform: translate(-50%, -50%);
							}
						}
				}
			}
			.line {
			  position: absolute;
			  left: 14rpx;
			  bottom: 30rpx;
			  width: 0rpx;
			  height: 90rpx;
			  border: 1rpx dashed rgba(25,137,250,0.7);
			  z-index: 1;
			}
	      .rightCon {
			  flex: 1;
			  padding: 0 0 0 54rpx;
	        .day {
				font-size: 20rpx;
				color: $themC;
				margin: 12rpx 0 0rpx 0;
	        }
	  
	        .flex-b {
				
	          .flex {
	            .text {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
	            }
	  
	            .tag {
					margin-left: 10rpx;
					width: 110rpx;
					height: 44rpx;
					background: #FAF0E4;
					border-radius: 8rpx;
					font-size: 20rpx;
					color: #FA7919;
					line-height: 44rpx;
					text-align: center;
	            }
	          }
	  
	          .progBtn {
				width: 130rpx;
				height: 60rpx;
				background: rgba(25,137,250,0.1);
				border-radius: 8rpx;
				border: 2rpx solid #1989FA;
				font-size: 28rpx;
				color: $themC;
				line-height: 60rpx;
				text-align: center;
	          }
	        }
	      }
	    }
	  }
	
	  .ul {
		  padding: 38rpx 0;
		  display: flex;
		  flex-wrap: wrap;
		  width: 100%;
	    .li {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 24rpx 0;
	      .icon {
	        width: 68rpx;
			height: 68rpx;
	      }
	
	      .text {
			font-size: 28rpx;
			margin-top: 16rpx;
			color: #333;
	      }
	    }
	  }
	
	  .business {
		  padding: 32rpx 0;
	    .h1 {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			position: relative;
			padding: 0 0 0 32rpx;
			margin-bottom: 24rpx;
			&::before {
				position: absolute;
				content: '';
				width: 8rpx;
				height: 32rpx;
				background: #1F6EFA;
				border-radius: 4rpx;
				top: 8rpx;
				left: 0;
			}
	    }
	
	    .card {
			width: 100%;
			height: 390rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 38rpx 0 0 0;
	      .item {
			  width: 33.33%;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  height: 162rpx;
	        .icon {
	          width: 72rpx;
			  height: 72rpx;
			  background: #F6F7F8;
			  border-radius: 50%;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  image {
				  width: 48rpx;
				  height: 48rpx;
			  }
	        }
	
	        .text {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #333;
	        }
	      }
	    }
	  }
	}
</style>