From d7e647c108f57fc41b89d50ea93e15c60b87b282 Mon Sep 17 00:00:00 2001
From: zhaoxing <zhaoxing@shsening.com>
Date: 星期三, 17 五月 2023 17:13:18 +0800
Subject: [PATCH] 样式更新
---
static/img/guwen/聊天.png | 0
static/vip/back.png | 0
static/img/guwen/qinggan.png | 0
static/img/guwen/xiezuo.png | 0
static/vip/card_bg.jpg | 0
static/img/guwen/jinrong.png | 0
pages/vip/vip.vue | 222 +++++++++++++++++++++++++++----------------------------
uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue | 3
8 files changed, 112 insertions(+), 113 deletions(-)
diff --git a/pages/vip/vip.vue b/pages/vip/vip.vue
index 734991c..9071a05 100755
--- a/pages/vip/vip.vue
+++ b/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 {
diff --git a/static/img/guwen/jinrong.png b/static/img/guwen/jinrong.png
new file mode 100644
index 0000000..d9d26a6
--- /dev/null
+++ b/static/img/guwen/jinrong.png
Binary files differ
diff --git a/static/img/guwen/qinggan.png b/static/img/guwen/qinggan.png
new file mode 100644
index 0000000..7615a0d
--- /dev/null
+++ b/static/img/guwen/qinggan.png
Binary files differ
diff --git a/static/img/guwen/xiezuo.png b/static/img/guwen/xiezuo.png
new file mode 100644
index 0000000..9134bd5
--- /dev/null
+++ b/static/img/guwen/xiezuo.png
Binary files differ
diff --git "a/static/img/guwen/\350\201\212\345\244\251.png" "b/static/img/guwen/\350\201\212\345\244\251.png"
new file mode 100644
index 0000000..9eb33f2
--- /dev/null
+++ "b/static/img/guwen/\350\201\212\345\244\251.png"
Binary files differ
diff --git a/static/vip/back.png b/static/vip/back.png
index 5bb7fa9..92ad7f1 100755
--- a/static/vip/back.png
+++ b/static/vip/back.png
Binary files differ
diff --git a/static/vip/card_bg.jpg b/static/vip/card_bg.jpg
new file mode 100644
index 0000000..7deab7f
--- /dev/null
+++ b/static/vip/card_bg.jpg
Binary files differ
diff --git a/uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue b/uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue
index a1a7601..851a8bd 100755
--- a/uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue
+++ b/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;
--
Gitblit v1.9.1