Skip to content

J
jz_Travel
Commit ca694c5a authored by youjie's avatar youjie
Browse files
Options

个人中心

parent ac611249
Expand all Show whitespace changes
Inline Side-by-side
Showing with 747 additions and 203 deletions
pages/user-center/components/userHeader.vue 0 → 100644
View file @ ca694c5a
<template>
<view class="userHeaderBox">
<view class="titlenav" :style="{ paddingTop: nav }">{{ pageTitle }}</view>
<view class="userHeadPic row">
<view class="userHeadPicL">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" mode="widthFix"></image>
</view>
<view class="col column">
<text class="userHeadPicR_title">Ranjunjun</text>
<text class="userHeadPicR_text">销售:李龙飞等3位</text>
</view>
</view>
<view class="userHeadPasBox">
<view class="userHeadPas column">
<view class="userHeadPasTop">
<view class="userHeadPasT_Num row-sbs-n">
<view class="column">
<text style="font-size: 40rpx;color: #C07D45;">60</text>
</view>
<view class="column">
<view class="userHeadPasMoney relative">
<view>¥</view>
<text style="font-size: 36rpx;">66248.2</text>
</view>
</view>
<view class="column">
<text style="color: #4F360D;font-size: 36rpx;">3</text>
</view>
</view>
<view class="userHeadPasT_Text row-sbs-n">
<view class="column">
<text class="userHeadPasTTeT" style="font-size: 28rpx;font-weight: bold;">
幸福存折
</text>
</view>
<view class="column">
<text class="userHeadPasTTeT" style="font-size: 26rpx;font-weight: 100;">累计已省</text>
</view>
<view class="column">
<text class="userHeadPasTTeT" style="font-size: 26rpx;font-weight: 100;">抵扣券</text>
</view>
</view>
</view>
<view class="userHeadPasButtom column">
<view class="userHeadPasButText">
再完成
<text class="userHeadPasButTNum">4单</text>即可成为
<text class="userHeadPasButTVip">VIP</text>享永久折扣！
<img class="userHeadPasButImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528690203686.png"/>
</view>
<view class="jz_LineDetaVipPr">
<view class="jz_LineDetaVPB">
<view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
:key="index">
<view class="jz_LineDetaVPBLine" :style="{'opacity':index==0?'0':1}"></view>
<view class="jz_LineDetaVPBN">{{item.text}}</view>
<view class="jz_LineDetaVPBBoxI" v-if="item.img"><img :src="item.img"/></view>
<view class="jz_LineDetaVPBLine" v-else></view>
</view>
</view>
<view class="jz_LineDetaVPB jz_LineDetaVPBY">
<view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
:key="index"
:class="[item.colorStyle]">
<view class="jz_LineDetaVPBLine" :style="{'opacity':index==0?'0':1}"></view>
<view class="jz_LineDetaVPBN">{{item.text}}</view>
<view class="jz_LineDetaVPBBoxI" v-if="item.img"></view>
<view class="jz_LineDetaVPBLine"
:class="[item.radiusR]" v-else></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: "个人中心",
nav: 0,
progress:[
{
text:'1',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'2',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'3',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'4',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'',
colorStyle: 'active',
radiusL: '',
radiusR: '',
img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'
},
],
};
},
components: {
},
created() {
},
onLoad() {
this.nav = uni.getSystemInfoSync().statusBarHeight + "px";
},
mounted() {
},
onShow() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.userHeaderBox{
width: 750rpx;
height: 622rpx;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748787642081151.png')no-repeat;
background-size: 100% 100%;
padding-top: 118rpx;
}
.titlenav {
width: 100%;
text-align: center;
font-size: 16px;
color: #000;
}
.userHeadPic{
padding: 49rpx 20rpx 25rpx 62rpx;
}
.userHeadPicL{
width: 97rpx;
height: 97rpx;
overflow: hidden;
border-radius: 50%;
margin-right: 27rpx;
}
.userHeadPicL image{
width: 97rpx;
height: 97rpx;
display: block;
}
.userHeadPicR_title{
font-family: PingFang SC;
font-weight: bold;
font-size: 36rpx;
color: #080A09;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.userHeadPicR_text{
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #61462E;
margin-top: 16rpx;
letter-spacing: 1rpx;
}
.jz_LineDetaVipPr{
margin-top: 28rpx;
position: relative;
left: -20rpx;
}
.jz_LineDetaVip{
width: 100%;
height: 120rpx;
background: linear-gradient(90deg, #3F423F, #313131);
border-radius: 18rpx;
display: flex;
flex-direction: column;
padding: 15rpx 0 6rpx 0;
margin-top: 18rpx;
margin-bottom: 18rpx;
}
.jz_LineDetaVipTop{
font-family: PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #E2C27A;
letter-spacing: .1rpx;
display: flex;
align-content: center;
padding: 0 34rpx;
}
.jz_LineDetaVipTop img{
width: 21rpx;
height: 21rpx;
display: inline-block;
margin-left: 5rpx;
}
.jz_LineDetaVPB{
display: flex;
}
.jz_LineDetaVPBBox{
display: flex;
align-items: center;
width: 1px;
flex: 1;
}
.jz_LineDetaVPBN{
width: 30rpx;
height: 30rpx;
background: #2E2E2E;
border-radius: 50%;
text-align: center;
line-height: 28rpx;
font-family: DIN Black;
font-weight: bold;
font-size: 24rpx;
color: #494949;;
}
.jz_LineDetaVPBLine{
flex: 1;
height: 10rpx;
background: #2E2E2E;
}
.jz_LineDetaVPBBoxI{
position: relative;
flex: 1;
}
.jz_LineDetaVPBBoxI img{
width: 87rpx;
height: 99rpx;
position: absolute;
bottom: -35rpx;
right: 8rpx;
z-index: 2;
}
.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
background: linear-gradient(270deg, #C99E59, #FFFFB3);
}
.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
background: #C99E59;
color: #583F2C;
}
.VPBLRadiusL{
border-radius: 20rpx 0 0 20rpx ;
}
.VPBLRadiusR{
border-radius: 0 20rpx 20rpx 0;
}
.jz_LineDetaVPBY{
position: absolute;
left: -29rpx;
right: 0;
top: 0;
}
.userHeadPasBox{
padding: 0 31rpx;
}
.userHeadPas{
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748814839963880.png')no-repeat;
background-size: 100% 100%;
}
.userHeadPasTop{
padding: 41rpx 65rpx 50rpx 65rpx;
}
.userHeadPasTop view{
text-align: center;
}
.userHeadPasTop view text{
font-family: HYYuanLongHei;
font-weight: normal;
font-weight: bold;
}
.userHeadPasT_Text{
color: #4F360D;
padding-top: 14rpx;
}
.userHeadPasMoney view{
font-size: 20rpx;
font-weight: bold;
position: absolute;
top: 15rpx;
left: -20rpx;
}
.userHeadPasButtom{
padding: 21rpx 0 40rpx 39rpx;
}
.userHeadPasButText{
font-family: PingFang SC;
font-weight: bold;
font-size: 24rpx;
color: #F9E5B3;
}
.userHeadPasButTNum{
color: #FF3166;
}
.userHeadPasButTVip{
font-size: 41rpx;
font-style: italic;
margin-right: 15rpx;
}
.userHeadPasButImg{
width: 21rpx;
height: 21rpx;
margin-left: 21rpx;
}
</style>
pages/user-center/components/vipUserHeader.vue 0 → 100644
View file @ ca694c5a
<template>
<view class="userHeaderBox">
<view class="titlenav" :style="{ paddingTop: nav }">{{ pageTitle }}</view>
<view class="userHeadPic row">
<view class="userHeadPicL">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748864186439447.png" mode="widthFix"></image>
</view>
<view class="col column">
<text class="userHeadPicR_title">Ranjunjun</text>
<view class="userHeadPicR_VIP">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/202502111735vip.png"/>
</view>
</view>
</view>
<view class="userHeadInfoBox">
<view class="userHeadInfo">
<view class="userHeadInfo_Name">王蕾钧</view>
<view class="userHeadInfo_text">销售:李龙飞等3位</view>
<img class="userHeadInfo_vip" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/202502111735zk.png" />
<view class="userHeadPasTop">
<view class="userHeadPasT_Num row-sbs-n">
<view class="row col">
<text class="userHeadPasTextb" style="font-size: 40rpx;color: #FF3166;">60</text>
</view>
<view class="userHeadPasT_Nl">
<view class="userHeadPasT_Lin"></view>
</view>
<view class="row col">
<view class="userHeadPasMoney">
<text class="userHeadPasMo">¥</text>
<text style="font-size: 36rpx;">
248.2
</text>
</view>
</view>
<view class="userHeadPasT_Nl">
<view class="userHeadPasT_Lin"></view>
</view>
<view class="row col">
<text class="userHeadPasTextb" style="color: #E2C27A;font-size: 36rpx;">3</text>
</view>
</view>
<view class="userHeadPasT_Text row-sbs-n">
<view class="row col">
<text class="userHeadPasTTeT" style="font-size: 28rpx;font-weight: bold;">
幸福存折
</text>
</view>
<view class="userHeadPasT_Nl">
<view class="userHeadPasT_Lin" style="opacity: 0;"></view>
</view>
<view class="row col">
<text class="userHeadPasTTeT" style="font-size: 26rpx;font-weight: 100;">累计已省</text>
</view>
<view class="userHeadPasT_Nl">
<view class="userHeadPasT_Lin" style="opacity: 0;"></view>
</view>
<view class="row col">
<text class="userHeadPasTTeT" style="font-size: 26rpx;font-weight: 100;">抵扣券</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: "个人中心",
nav: 0,
progress:[
{
text:'1',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'2',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'3',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'4',
colorStyle: 'active',
radiusL: '',
radiusR: '',
},
{
text:'',
colorStyle: 'active',
radiusL: '',
radiusR: '',
img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'
},
],
};
},
components: {
},
created() {
},
onLoad() {
this.nav = uni.getSystemInfoSync().statusBarHeight + "px";
},
mounted() {
},
onShow() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.userHeaderBox{
width: 750rpx;
height: 827rpx;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748788146223914.png')no-repeat;
background-size: 100% 100%;
padding-top: 118rpx;
}
.titlenav {
width: 100%;
text-align: center;
font-size: 16px;
color: #FFF;
}
.userHeadPic{
padding: 37rpx 20rpx 78rpx 54rpx;
}
.userHeadPicL{
width: 70rpx;
height: 70rpx;
overflow: hidden;
border-radius: 50%;
margin-right: 16rpx;
}
.userHeadPicL image{
width: 70rpx;
height: 70rpx;
display: block;
}
.userHeadPicR_title{
font-family: PingFang SC;
font-size: 28rpx;
color: #C4B799;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.userHeadPicR_VIP{
padding-top: 3rpx;
}
.userHeadPicR_VIP img{
width: 81rpx;
height: 26rpx;
display: block;
}
.userHeadInfoBox{
padding: 0 35rpx;
}
.userHeadInfo{
width: 680rpx;
height: 508rpx;
background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/20250211.png')no-repeat;
background-size: 100% 100%;
position: relative;
top: -92rpx;
padding: 78rpx 20rpx 55rpx 44rpx;
}
.userHeadInfo_Name{
font-family: PingFang SC;
font-weight: 800;
font-size: 44rpx;
color: #F1D492;
}
.userHeadInfo_text{
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #AB9D83;
letter-spacing: 1rpx;
padding-top: 16rpx;
}
.userHeadInfo_vip{
width: 385rpx;
height: 49rpx;
display: block;
padding-top: 29rpx;
}
.userHeadPasTop{
padding: 88rpx 0 50rpx 0;
}
.userHeadPasTop view{
text-align: center;
}
.userHeadPasTop view text{
font-family: HYYuanLongHei;
font-weight: normal;
font-weight: bold;
}
.userHeadPasT_Text{
text-align: center;
color: #E2C27A;
padding-top: 14rpx;
}
.userHeadPasMoney{
width: 100%;
text-align: center;
color: #E2C27A;
}
.userHeadPasMo{
font-size: 20rpx;
font-weight: bold;
margin-right: 5rpx;
}
.userHeadPasT_Nl{
position: relative;
}
.userHeadPasT_Nl text{
display: block;
}
.userHeadPasT_Lin{
position: absolute;
right: 0;
top: 3rpx;
width: 1rpx;
height: 39rpx;
background: #E2C27A;
opacity: 0.5;
}
.userHeadPasTextb,.userHeadPasTTeT{
width: 100%;
display: block;
text-align: center;
}
</style>
pages/user-center/user-center.vue
View file @ ca694c5a
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment