<template>
	<view class="contenter">
		<view class="mine-title">
			<view class="title-avatar">
				<img src="../../static/mine/avater.png" style="width:180rpx;height: 180rpx;" />
				<view class="title-center">
					<span style="font-weight: 600;">欢迎来到爱摩宝</span>
					<span v-if="false">登录/注册享受更多优质服务</span>
					<view v-else-if="false" class="title-boundVehicle">
						<span class="text">绑定车辆记录骑行</span>
						<span class="title-boundVehicle-icon"></span>
					</view>
					<view v-else class="title-car-info">
						<view class="title-car-info-item">
							<image src="../../static/mine/mine-car-select.png" mode="aspectFit" class="image">
							</image>
							<span>阿普利亚 GPR 125</span>
						</view>
						<view class="title-car-info-item">
							<image src="../../static/mine/lv1.png" mode="aspectFit" class="image">
							</image>
							<span>黑铁骑士</span>
						</view>
					</view>
				</view>
				<view class="title-right" v-if="false">
					<span class="login">注册/登录</span>
				</view>
				<view v-else class="title-right">
					<image src="../../static/mine/icon-right-black.png" mode="aspectFit" class="image"></image>
				</view>
			</view>
			<view class="mine-basicData">
				<view class="mine-basicData-item" v-for="(item,index) in basicData" :key="index">
					<span>{{item.num}}</span>
					<span>{{item.text}}</span>
				</view>
			</view>
		</view>
		<view class="mine-content">
			<view class="equityCard">
				<image src="../../static/mine/mine-bd.png" mode="aspectFit" class="image"></image>
				<view class="equityCard-text">
					<view class="equityCard-text-top">
						<text>爱摩保VIP专属权益</text>
						<view class="equityCard-text-right">
							<text>开通</text>
							<image src="../../static/mine/icon-right.png" mode="aspectFit" class="image"></image>
						</view>
					</view>
					<text>保障齐全 10日赔付 智能精准定位 骑行低功耗自动记录</text>
				</view>
			</view>
			<view class="mine-carData">
				<view class="mine-carData-left">
					<span style="font-size: 28rpx;font-style: normal;" class="mine-carData-left-item">骑行</span>
					<span class="mine-carData-left-item"><text>0</text>km</span>
					<span class="mine-carData-left-item"><text>0</text>h<span><text
								style="padding-left: 4rpx;">0</text>min</span></span>
					<view class="mine-carData-left-item">
						<progress :percent="60" activeColor="rgba(255, 255, 255, 0.60)"
							backgroundColor="rgba(255, 255, 255, 0.33)" stroke-width="3" />
					</view>
					<span class="mine-carData-left-item"
						style="font-style: normal;font-size: 18rpx;opacity: 0.6;">再骑344km可达黄金骑士</span>
				</view>
				<view class="mine-carData-center">
					<span style="font-size: 28rpx;font-style: normal;" class="mine-carData-center-item">车库</span>
					<span class="mine-carData-left-item"><text>0</text>车辆</span>
					<view class="mine-carData-center-bind">
						<text>绑定车辆</text>
					</view>
				</view>
				<view class="mine-carData-right">
					<span style="font-size: 28rpx;font-style: normal;" class="mine-carData-center-item">积分</span>
					<span class="mine-carData-left-item"><text>668</text></span>
					<view class="mine-carData-right-sign">
						<text>签到</text>
					</view>
				</view>
			</view>
			<view class="mine-function">
				<view class="mine-function-item" v-for="(item,index) in feature" :key="index">
					<img :src="item.icon" alt="" class="item-img" />
					<span>{{item.text}}</span>
				</view>
			</view>
			<view class="mine-assist">
				<view class="mine-assist-item" v-for="(item,index) in assist" :key="index">
					<img :src="item.icon" alt="" class="item-img" />
					<span>{{item.text}}</span>
				</view>
			</view>
			<view class="footer">
				<img src="../../static/mine/imb.png" alt="" class="footer-img">
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { userDate } from './hook/user-Data'
	const { feature, assist, basicData } = userDate()
</script>

<style>
	page {
		/* height: 100%; */
	}
</style>
<style lang="scss" scoped>
	.contenter {
		width: 100%;
		// height: 100%;

		.mine-title {
			background-image: url(../../static/mine/mine-title.png);
			background-repeat: no-repeat;
			width: 100%;
			background-size: 100% 100%;
			padding-top: 160rpx;
			box-sizing: border-box;

			.title-avatar {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;

				.title-center {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 120rpx;
					font-size: 32rpx;
					padding: 15rpx 40rpx 15rpx 0;
					// margin-left: -100rpx;
					box-sizing: border-box;
					flex: 1;

					.title-boundVehicle {
						width: 250rpx;
						background: linear-gradient(270deg, #CCD5E5 0%, #B7C6DF 100%);
						border-radius: 8rpx;
						border: 1rpx solid;
						border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
						padding: 3rpx 18rpx;
						box-sizing: border-box;

						.text {
							width: 100%;
							height: 32rpx;
							font-size: 20rpx;
							font-family: AlibabaPuHuiTi_2_65_Medium;
							color: #20529D;
							line-height: 32rpx;
						}

						.title-boundVehicle-icon {
							display: inline-block;
							background-image: url(../../static/mine/icon-right-mini.png);
							width: 22rpx;
							height: 22rpx;
							background-size: 100% 100%;
							background-position: 0 5rpx;
							margin-left: 8rpx;
						}
					}

					// :first-child {
					// 	font-weight: 600;
					// 	width: 100%;
					// 	margin-bottom: -9px
					// }

					:last-child {
						font-weight: normal;
						font-size: 24rpx;
						color: rgba(43, 43, 53, 0.60);
					}
				}

				.title-right {
					height: 120rpx;
					// line-height: 120rpx;
					display: flex;
					align-items: center;

					.image {
						width: 48rpx;
						height: 48rpx;
					}

					.login {
						padding: 10rpx 26rpx;
						box-sizing: border-box;
						width: 176rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						border: 1rpx solid;
						color: rgba(32, 81, 156, 1);
						font-size: 28rpx;
						border-image: linear-gradient(90deg, rgba(30, 80, 153, 1), rgba(60, 109, 198, 1)) 1 1;
					}

				}

				.image {
					background-image: url(../../static/mine/icon-right-black.png);
					background-repeat: no-repeat;
					width: 48rpx;
					height: 48rpx;
					background-size: 100% 100%;
					// margin-top: 35rpx;
				}

				.title-car-info {
					display: flex;
					justify-content: space-between;

					.title-car-info-item {
						display: flex;
						align-items: center;

						.image {
							width: 48rpx;
							height: 48rpx;
							vertical-align: middle;

						}

						&:last-child .image {
							width: 32rpx;
							height: 32rpx;
							vertical-align: middle;
							padding-right: 6rpx;
						}
					}



				}
			}

			.mine-basicData {
				display: flex;
				padding: 32rpx;

				.mine-basicData-item {
					display: flex;
					flex-direction: column;
					flex: 1;
					font-size: 28rpx;
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
					font-weight: 400;
					color: rgba(43, 43, 53, 0.6);
					line-height: 40rpx;
					align-items: center;
					text-align: center;

					:first-child {
						font-size: 32rpx;
						font-family: SFProDisplay, SFProDisplay;
						font-weight: 700;
						color: #08080D;
						line-height: 38rpx;
						// font-style: italic;
					}
				}

			}
		}

		.equityCard {
			position: relative;
			width: 100%;
			background-image: url(../../static/mine/mine-bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 34rpx 16rpx 62rpx 120rpx;
			box-sizing: border-box;

			.equityCard-text {
				width: 100%;

				.equityCard-text-top {
					display: flex;
					width: 100%;
					justify-content: space-between;

					&:first-child {
						font-size: 30rpx;
						color: #FDDCA1;
					}

					.equityCard-text-right {
						display: flex;
						align-items: center;

						.image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				&:last-child {
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
				}
			}

			&>.image {
				position: absolute;
				width: 100%;
				height: 24rpx;
				bottom: 0;
				left: 0;
			}
		}


		.mine-content {
			width: 100%;
			padding: 0 32rpx;
			background: #F8F8FA;
			// height: calc(100% - 140rpx);
			padding-bottom: 160rpx;
			position: relative;
			box-sizing: border-box;

			.mine-carData {
				display: flex;
				padding: 18rpx 0;
				justify-content: space-between;
				margin-bottom: 30rpx;
				box-sizing: border-box;

				.mine-carData-left,
				.mine-carData-center,
				.mine-carData-right {
					width: 294rpx;
					height: 260rpx;
					background: linear-gradient(270deg, #3C6DC6 0%, #1E5099 100%);
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					padding: 24rpx;
					box-sizing: border-box;
					color: #FFFFFF;



					.mine-carData-left-item,
					.mine-carData-center-item {
						font-size: 24rpx;
						font-style: italic;
						// line-height: 48rpx;
						padding-bottom: 16rpx;


						text {
							font-size: 40rpx;
							line-height: 48rpx;
							padding-right: 4rpx;
							font-weight: 550;
						}
					}

					:last-child {
						padding-bottom: 0;
					}
				}

				.mine-carData-center {
					width: 180rpx;
					height: 260rpx;
					background: linear-gradient(270deg, #F9A374 0%, #FF7A38 100%);
					border-radius: 8rpx;

					.mine-carData-center-bind {
						height: 56rpx;
						background: linear-gradient(200deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
						border-radius: 4rpx;
						border: 1rpx solid;
						border-image: linear-gradient(360deg, rgba(243, 243, 243, 0), rgba(236, 238, 241, 1)) 1 1;
						backdrop-filter: blur(2px);
						text-align: center;
						line-height: 56rpx;
						margin-top: 52rpx;

						text {
							width: 96rpx;
							height: 34rpx;
							font-size: 24rpx;
							font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
							font-weight: 400;
							color: #FFFFFF;
							// line-height: 34rpx;

						}
					}
				}

				.mine-carData-right {
					width: 180rpx;
					height: 260rpx;
					background: linear-gradient(270deg, #F2F3F6 0%, #E1E4E9 100%);
					border-radius: 8rpx;
					color: #08080D;

					.mine-carData-right-sign {
						width: 132rpx;
						height: 56rpx;
						background: linear-gradient(90deg, #1D2330 0%, #162135 100%);
						border-radius: 4rpx;
						text-align: center;
						margin-top: 48rpx;

						text {
							width: 48rpx;
							height: 56rpx;
							font-size: 24rpx;
							font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 56rpx;
						}
					}
				}
			}

			.mine-function,
			.mine-assist {
				height: 188rpx;
				width: 100%;
				font-size: 24rpx;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.mine-function-item,
				.mine-assist-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;

					.item-img {
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 16rpx;
					}
				}
			}

			.mine-assist {
				margin-top: 32rpx;
			}
		}

		.footer {
			position: absolute;
			width: 100%;
			bottom: 36rpx;
			left: 0;
			text-align: center;

			.footer-img {
				width: 178rpx;
				height: 42rpx;

			}
		}

	}
</style>