Skip to content

飞
飞鹤小程序
Commit 1e4ac7fc authored by 王炽's avatar 王炽
Browse files
Options

积分页面

parent 14bf872f
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 61 deletions
views/Integral.vue
View file @ 1e4ac7fc
...@@ -39,28 +39,55 @@ ...@@ -39,28 +39,55 @@
:key="index" :key="index"
@click="handleVipClick" @click="handleVipClick"
> >
<image class="vip-bg" <image class="vip-bg"
:src="`/static/integral/${tupianBanben}/${item?.vipLvBg}`" :src="`/static/integral/${tupianBanben}/${item?.vipLvBg}`"
mode="aspectFit" mode="aspectFit"
/> />
<image <image
class="vip-icon" class="vip-icon"
:src="`/static/integral/${tupianBanben}/${item?.vipLvIcon}`" :src="`/static/integral/${tupianBanben}/${item?.vipLvIcon}`"
mode="aspectFit" mode="aspectFit"
/> />
<image class="current-tag" <image class="current-tag"
:src="`/static/integral/${tupianBanben}/${item?.currentLvTip}`" :src="`/static/integral/${tupianBanben}/${item?.currentLvTip}`"
mode="aspectFit" mode="aspectFit"
/> />
<text
<button class="chakanshengjigonglueTxt"
v-if="!islogin" :style="{ color: '#794c1f' }"
type="primary" @click="gonglueHandler"
class="phone-button" >
open-type="getPhoneNumber" 查看升级攻略
@getphonenumber="getRealtimePhoneNumber" </text>
/>
<view class="vip-info"> <button
v-if="!islogin"
type="primary"
class="phone-button"
open-type="getPhoneNumber"
@getphonenumber="getRealtimePhoneNumber"
/>
<view class="jifen-progressbar">
<!-- 积分标题和数值 -->
<view class="jifen-header">
<text class="jifen-label">积分</text>
<text class="jifen-value">
<text class="current-points">6000</text>
<text class="separator">/</text>
<text class="total-points">10000</text>
</text>
</view>
<!-- 进度条 -->
<view class="progress-bar-container">
<view class="progress-bar-bg"></view>
<view
class="progress-bar-fill"
:style="{ width: '60%' }"
></view>
</view>
</view>
<!-- <view class="vip-info">
<text class="vip-name" <text class="vip-name"
:style="{ :style="{
color: islogin ? `${item?.nickNameColor}` : '#6f6d67', color: islogin ? `${item?.nickNameColor}` : '#6f6d67',
...@@ -84,7 +111,7 @@ ...@@ -84,7 +111,7 @@
/> />
</view> </view>
</view> </view> -->
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -1908,69 +1935,150 @@ ...@@ -1908,69 +1935,150 @@
width: 692rpx; width: 692rpx;
height: 256rpx; height: 256rpx;
position: absolute; position: absolute;
left:50%;
transform: translateX(-50%);
} }
.vip-icon { .vip-icon {
width: 254rpx; width: 254rpx;
height: 268rpx; height: 268rpx;
left:50%;
transform: translate(-50%);
position: absolute; position: absolute;
right: 20rpx;
} }
.current-tag { .current-tag {
top: 32rpx;
width: 121rpx; width: 121rpx;
height: 40rpx; height: 40rpx;
position: absolute; position: absolute;
} }
.vip-info { .chakanshengjigonglueTxt {
display: flex; font-size: 24rpx;
flex-direction: column; position: absolute;
position: relative; left: 40rpx;
height: 100%; top: 161rpx;
justify-content: center; }
margin-left: 15rpx;
// 积分进度条样式
.vip-name { .jifen-progressbar {
font-size: 25rpx; position: absolute;
margin-bottom: 8rpx; top: 209rpx;
} width: 320rpx;
left: 40rpx;
.title-container{ .jifen-header {
width: 100%;
display: flex; display: flex;
.vip-title1 { align-items: center;
// margin-right: -15rpx;
font-size: 31rpx; .jifen-label {
font-weight: bold; font-size: 21rpx;
color: #1d1e25; color: #1d1e25;
font-weight: 500;
margin-right: 10rpx;
} }
.vip-title{
margin-top: 6rpx; .jifen-value {
width: 174rpx; font-size: 21rpx;
height: 31rpx; font-weight: 500;
display: flex;
align-items: center;
.current-points {
color: #1d1e25;
}
.separator {
color: #b27c1e;
margin: 0 5rpx;
}
.total-points {
color: #b27c1e;
opacity: 0.7;
}
} }
}
.phone-button{
top:82rpx; .progress-bar-container {
position: relative;
width: 100%;
height: 12rpx;
background: #f5f3f0;
border-radius: 6rpx;
overflow: hidden;
margin-top: 10rpx;
.progress-bar-bg {
position: absolute; position: absolute;
width:285rpx; top: 0;
height: 36rpx; left: 0;
opacity: 0; width: 100%;
height: 100%;
background: #f5f3f0;
border-radius: 6rpx;
} }
.rule-icon{ .progress-bar-fill {
margin-top: 14rpx; position: absolute;
margin-left: 10rpx; top: 0;
width: 11rpx; left: 0;
height: 19rpx; height: 100%;
background: #8b4513;
border-radius: 6rpx;
transition: width 0.3s ease;
box-shadow: 0 1rpx 3rpx rgba(139, 69, 19, 0.3);
} }
}
}
// .vip-info {
// display: flex;
// flex-direction: column;
// position: relative;
// height: 100%;
// justify-content: center;
// margin-left: 15rpx;
// .vip-name {
// font-size: 25rpx;
// margin-bottom: 8rpx;
// }
// .title-container{
// width: 100%;
// display: flex;
// .vip-title1 {
// // margin-right: -15rpx;
// font-size: 31rpx;
// font-weight: bold;
// color: #1d1e25;
// }
// .vip-title{
// margin-top: 6rpx;
// width: 174rpx;
// height: 31rpx;
// }
// .phone-button{
// top:82rpx;
// position: absolute;
// width:285rpx;
// height: 36rpx;
// opacity: 0;
// }
// .rule-icon{
// margin-top: 14rpx;
// margin-left: 10rpx;
// width: 11rpx;
// height: 19rpx;
// }
} // }
} // }
} }
} }
...@@ -2384,6 +2492,8 @@ ...@@ -2384,6 +2492,8 @@
height: 180rpx; height: 180rpx;
} }
// 测试注册层按钮样式 // 测试注册层按钮样式
// .test-register-btn { // .test-register-btn {
// width: 300rpx; // width: 300rpx;
......
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