<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>
