483 lines
11 KiB
Vue
483 lines
11 KiB
Vue
<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> |