样式更新

zhaoxing

2023-05-17 d7e647c108f57fc41b89d50ea93e15c60b87b282

样式更新

 pages/vip/vip.vue

@@ -1,72 +1,70 @@
<template>
    <view style="overflow-x: hidden;">
        <view class="bg">
            <image class="bg-img" src="/static/vip/bg.png" mode=""></image>
        </view>
		
        <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
            <image class="nav-back" src="/static/vip/back.png" mode="" @click="back"></image>
            <text class="nav-title">会员中心</text>
            <view class="nav-space"></view>
        </view>
        
        <view class="info" :style="{marginTop: statusBarHeight + 44 + 'px'}">
            <image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>
			
            <view class="info-content">
                <view class="info-avatar">
                    <image style="border-radius: 50%;" class="info-avatar-pic" :src="userInfo.avatar" mode=""></image>
        <view class="box">
		
            <view class="info">
                <image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>
				
                <view class="info-content">
                    <view class="info-avatar">
                        <image style="border-radius: 50%;" class="info-avatar-pic" :src="userInfo.avatar" mode=""></image>
                    </view>
                    <view class="info-name">
                        <text class="info-name">{{ userInfo.nick_name }}</text>
                        <text class="info-level">开通套餐享专属特权</text>
                    </view>
                </view>
                <view class="info-name">
                    <text class="info-name">{{ userInfo.nick_name }}</text>
                    <text class="info-level">开通套餐享专属特权</text>
				
                <view class="info-asset">
                    <view class="info-asset-item">
                        <text class="iai-title">当前剩余对话次数</text>
                        <text class="iai-value">{{num}}</text>
                    </view>
                    <!-- <view class="info-asset-item">
                        <text class="iai-title">金币</text>
                        <text class="iai-value">2563</text>
                    </view>
                    <view class="info-asset-item">
                        <text class="iai-title">优惠券</text>
                        <text class="iai-value">3</text>
                    </view> -->
                </view>
            </view>
            
            <view class="info-asset">
                <view class="info-asset-item">
                    <text class="iai-title">当前剩余对话次数</text>
                    <text class="iai-value">{{num}}</text>
                </view>
                <!-- <view class="info-asset-item">
                    <text class="iai-title">金币</text>
                    <text class="iai-value">2563</text>
                </view>
                <view class="info-asset-item">
                    <text class="iai-title">优惠券</text>
                    <text class="iai-value">3</text>
                </view> -->
            <view class="main-title">
                <text>会员充值</text>
            </view>
        </view>
		
        <view class="main-title">
            <text>会员充值</text>
        </view>
		
        <scroll-view scroll-x>
            <view class="recharge">
                <view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}" @click="rechargeChange(index)">
                    <view class="recharge-tag" >
                        <text class="recharge-tag-text"> {{item.type == 1 ? '按次计费' : '按时计费'}} </text>
            <scroll-view scroll-x>
                <view class="recharge">
                    <view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '0rpx': ''}" @click="rechargeChange(index)">
                        <view class="recharge-tag" >
                            <text class="recharge-tag-text"> {{item.type == 1 ? '按次计费' : '按时计费'}} </text>
                        </view>
                        <text class="recharge-item-duration">{{ item.title }}</text>
                        <view class="recharge-item-price">
                            <text class="rmb">ï¿¥</text>
                            <text class="recharge-item-price-text">{{ item.price }}</text>
                        </view>
                        <text v-if="item.type == 1" class="recharge-item-des">{{ '内含'+item.num+'次对话'}}</text>
                        <text v-else class="recharge-item-des"> æ— é™æ¬¡å¯¹è¯ </text>
                        <text v-if="item.type == 1 && item.days != 0" class="recharge-item-des">{{ item.days+'天内有效'}}</text>
                        <text style="text-decoration: line-through;font-size: 30rpx;" class="recharge-item-des">{{ item.origin_price }}</text>
                    </view>
                    <text class="recharge-item-duration">{{ item.title }}</text>
                    <view class="recharge-item-price">
                        <text class="rmb">ï¿¥</text>
                        <text class="recharge-item-price-text">{{ item.price }}</text>
                    </view>
                    <text v-if="item.type == 1" class="recharge-item-des">{{ '内含'+item.num+'次对话'}}</text>
                    <text v-else class="recharge-item-des"> æ— é™æ¬¡å¯¹è¯ </text>
                    <text v-if="item.type == 1 && item.days != 0" class="recharge-item-des">{{ item.days+'天内有效'}}</text>
                    <text style="text-decoration: line-through;font-size: 30rpx;" class="recharge-item-des">{{ item.origin_price }}</text>
                </view>
            </scroll-view>
            <view class="button update" hover-class="hover" @click="updateNow">
                <text class="button-text">立即支付</text>
            </view>
        </scroll-view>
        
        <view class="button update" hover-class="hover" @click="updateNow">
            <text class="button-text">立即升级</text>
		
        </view>
		
        <text class="tip">专属AI 1秒响应</text>
        <!-- <text class="tip">专属AI 1秒响应</text>
        
        <view class="main-title">
            <text>会员特权</text>
@@ -77,7 +75,7 @@
                <image class="privilege-item-pic" :src="item.pic" mode=""></image>
                <text class="privilege-item-text">{{ item.text }}</text>
            </view>
        </view>
        </view> -->
    </view>
</template>

@@ -217,11 +215,17 @@
    }
</script>

<style scoped>
    page {
      background: #30324f;
    }
</style>
<style lang="scss">
    .main-title {
        padding: 30rpx 30rpx;
        font-size: 34rpx;
        color: #1C1C1C;
        padding: 32rpx 0 0;
        font-size: 36rpx;
        font-weight: 600;
        color: #30324f;
    }
    
    .tip {
@@ -234,22 +238,17 @@
    }
    
    .rmb {
        font-size: 26rpx;
        color: #E3BE83;
        font-size: 24rpx;
        font-weight: 600;
    }
    
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 400rpx;
        z-index: -2;
		
        &-img {
            width: 100%;
            height: 100%;
        }
    .box {
        border: 2rpx solid #fff;
        background: url('@/static/vip/card_bg.jpg') #E9EEFA no-repeat;
        background-size: 100% auto;
        margin: 120rpx 32rpx 32rpx;
        padding: 32rpx;
        border-radius: 24rpx;
    }
    
    .hover {
@@ -265,8 +264,6 @@
        width: 750rpx;
        height: 44px;
        padding: 0 30rpx;
        background-image: url('~@/static/vip/nav-bg.png');
        background-size: 100%;
        z-index: 99;
        
        &-back {
@@ -275,8 +272,8 @@
        }
        
        &-title {
            color: #FFFFFF;
            font-size: 42rpx;
            color: #fff;
            font-size: 40rpx;
        }
        
        &-space {
@@ -287,33 +284,29 @@
    
    .info {
        position: relative;
        padding: 0 15rpx;
        width: 730rpx;
        height: 360rpx;
        
        &-bg {
            position: absolute;
            width: 730rpx;
            height: 360rpx;
            width: 100%;
            z-index: -1;
        }
        
        &-content {
            padding: 70rpx 50rpx 0 50rpx;
            margin-bottom: 50rpx;
            margin-bottom: 48rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        
        &-avatar {
            margin-right: 30rpx;
            margin-right: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 85rpx;
            height: 85rpx;
            width: 84rpx;
            height: 84rpx;
            background-color: #fff;
            padding: 1rpx;
            border-radius: 50%;
@@ -327,17 +320,19 @@
        &-name {
            display: flex;
            flex-direction: column;
            color: #FFFFFF;
            font-size: 35rpx;
            color: #30324f;
            font-size: 32rpx;
            font-weight: 600;
        }
        
        &-level {
            margin-top: 15rpx;
            font-size: 24rpx;
            font-size: 32rpx;
            font-weight: 600;
        }
        
        &-asset {
            padding: 0 50rpx;
            padding: 0 8rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
@@ -351,37 +346,36 @@
    
    .iai {
        &-title {
            margin-bottom: 20rpx;
            margin-right: 100rpx;
            font-size: 24rpx;
            color: #CFB386;
            font-size: 28rpx;
            font-weight: 600;
            color: #30324f;
        }
        
        &-value {
            font-size: 35rpx;
            color: #FFFFFF;
            font-size: 36rpx;
            color: #30324f;
        }
    }
    
    .recharge {
        position: relative;
        margin-bottom: 35rpx;
        margin: 36rpx 0 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        
        &-tag {
            position: absolute;
            top: -2rpx;
            top: -24rpx;
            left: -2rpx;
            width: 170rpx;
            height: 36rpx;
            padding: 0 24rpx;
            height: 48rpx;
            border-radius: 100rpx 100rpx 100rpx 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background-image: url('~@/static/vip/tag.png');
            background-size: 100%;
            background: #4D63E4;
            
            &-text {
                font-size: 20rpx;
@@ -393,25 +387,28 @@
        &-item {
            position: relative;
            padding: 40rpx 0;
            margin-left: 15rpx;
            width: 200rpx;
            width: 220rpx;
            height: 230rpx;
            flex-shrink: 0;
            margin-right: 24rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: solid 2rpx #F2F2F3;
            border-radius: 12rpx;
            background: #fff;
            border: 2rpx solid #fff;
            border-radius: 24rpx;
            color: #62491B;
            
            &-active {
                border-color: #EDD2A9;
                background-color: #FBF1E5;
                color: #364089;
                border-color: #C5C9F7;
                background-image: linear-gradient(to right, #F0F2FF, #DBDCFE);
            }
            
            &-duration {
                margin-bottom: 30rpx;
                font-size: 26rpx;
                color: #1C1C1C;
                margin-bottom: 12rpx;
                font-size: 32rpx;
                font-weight: 600;
            }
            
            &-price {
@@ -422,13 +419,12 @@
                
                &-text {
                    font-size: 48rpx;
                    color: #E3BE83;
                    font-weight: 900;
                }
            }
            
            &-des {
                font-size: 22rpx;
                color: #A5A3A2;
            }
        }
    }
@@ -439,17 +435,17 @@
        align-items: center;
        justify-content: center;
        height: 85rpx;
        border-radius: 50rpx;
        background-image: linear-gradient(#EFCF9E, #E4BF85);
        border-radius: 24rpx;
        background: #302cd9;
        
        &-text {
            font-size: 30rpx;
            color: #1C1C1C;
            color: #fff;
        }
    }
    
    .update {
        margin: 35rpx 30rpx 20rpx 30rpx;
        margin-top: 36rpx;
    }
    
    .privilege {

 static/img/guwen/jinrong.png

 static/img/guwen/qinggan.png

 static/img/guwen/xiezuo.png

 static/img/guwen/ÁÄÌì.png

 static/vip/back.png

 static/vip/card_bg.jpg

 uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue

@@ -376,6 +376,9 @@
    .m-tabbar {
        position: relative;
        box-shadow: 0 0 5px rgba(4,7,108,.1);
        background: rgba(255, 255, 255, 0.75) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(8px);

        &.fixed {
            position: fixed;