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