1237 lines
26 KiB
Vue
1237 lines
26 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 上方头部 -->
|
|
<view class="header-container">
|
|
<view class="user-info-wrapper">
|
|
<view class="avatar-container">
|
|
<image
|
|
class="avatar-image"
|
|
:src="
|
|
userInfo.headPath
|
|
? userInfo.headPath
|
|
: userInfo.settleCountryCircularIcon
|
|
"
|
|
mode="aspectFill"
|
|
>
|
|
</image>
|
|
</view>
|
|
<view class="user-details">
|
|
<view class="user-name-and-level">
|
|
<text class="user-name">{{ userInfo.memberCode }}</text>
|
|
<view
|
|
v-show="userInfo.pkAwardsVal !== '无' && userInfo.pkAwardsVal"
|
|
class="svip-badge"
|
|
>
|
|
<text class="svip-text">{{ userInfo.pkAwardsVal }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="awards-container">
|
|
<view style="display: flex; gap: 10rpx">
|
|
<view class="award-tag">
|
|
<!-- <u-icon name="star-fill" color="#FAD65A" size="14"></u-icon> -->
|
|
<text class="award-label">消费累计:</text>
|
|
<text class="award-value">{{
|
|
personalPointInfo.repPvBalance || 0
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="settings-icon-container"
|
|
@click="goTo('/pages/userData/index')"
|
|
>
|
|
<u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view v-show="userInfo.memberCode !== 'ZK68880628'" class="my_order">
|
|
<view class="my_title">
|
|
<text class="thetitle">{{ '市场动态' }}</text>
|
|
</view>
|
|
<view class="market-stats-container">
|
|
<view class="stat-block primary">
|
|
<view class="stat-content">
|
|
<view class="stat-item">
|
|
<text class="stat-label">总业绩</text>
|
|
<view class="stat-value">
|
|
<text class="stat-value__integer">{{
|
|
formattedTotalSumPv.integer
|
|
}}</text>
|
|
<text class="stat-value__decimal">{{
|
|
formattedTotalSumPv.decimal
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">小区业绩</text>
|
|
<view class="stat-value">
|
|
<text class="stat-value__integer">{{
|
|
formattedSmallAreaPv.integer
|
|
}}</text>
|
|
<text class="stat-value__decimal">{{
|
|
formattedSmallAreaPv.decimal
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-show="userInfo.memberCode !== 'ZK68880628'" class="my_order">
|
|
<view class="my_title">
|
|
<text class="thetitle">阶段列表</text>
|
|
<view
|
|
class="more-btn"
|
|
@click="goTo('/pages/architecture/resettleArchite/resettle2')"
|
|
>
|
|
<span>更多</span>
|
|
<u-icon name="arrow-right" color="#005bac" size="12"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="market-stats-container">
|
|
<view class="stat-block secondary">
|
|
<view class="stat-content">
|
|
<view class="stat-item">
|
|
<text class="stat-label">一阶</text>
|
|
<view class="stat-value">
|
|
<text class="stat-value__integer">{{
|
|
personalPointInfo.firstOrderQuantity || 0
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<view class="stat-item">
|
|
<text class="stat-label">二阶</text>
|
|
<view class="stat-value">
|
|
<text class="stat-value__integer">{{
|
|
personalPointInfo.secondOrderQuantity || 0
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">三阶</text>
|
|
<view class="stat-value">
|
|
<text class="stat-value__integer">{{
|
|
personalPointInfo.threeOrderQuantity || 0
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">赠点</text>
|
|
<view class="stat-value">
|
|
<text class="stat-value__integer">{{
|
|
personalPointInfo.waitPointCount || 0
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="my_order">
|
|
<view class="my_title">
|
|
<text class="thetitle">{{ '我的订单' }}</text>
|
|
</view>
|
|
<view class="order_flex thepadding" style="justify-content: center">
|
|
<view
|
|
class="theorderflex1"
|
|
style="margin-bottom: 0"
|
|
@click="goOrder('')"
|
|
>
|
|
<image class="order_img2" src="../../static/images/myorder_1.png" />
|
|
<view class="order_text">全部订单</view>
|
|
</view>
|
|
<view
|
|
class="theorderflex1"
|
|
style="margin-bottom: 0"
|
|
@click="goOrder(1)"
|
|
>
|
|
<image class="order_img2" src="../../static/images/myorder_2.png" />
|
|
<view class="order_text">{{ '待发货' }}</view>
|
|
<view v-if="payNum" class="qiu">{{ payNum }}</view>
|
|
</view>
|
|
<view
|
|
class="theorderflex1"
|
|
style="margin-bottom: 0"
|
|
@click="goOrder(3)"
|
|
>
|
|
<image class="order_img2" src="../../static/images/myorder_3.png" />
|
|
<view class="order_text">{{ '待收货' }}</view>
|
|
</view>
|
|
<view
|
|
class="theorderflex1"
|
|
style="margin-bottom: 0"
|
|
@click="goOrder(5)"
|
|
>
|
|
<image class="order_img2" src="../../static/images/myorder_4.png" />
|
|
<view class="order_text">{{ '已收货' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="my_order">
|
|
<view class="order_flex">
|
|
<template v-for="(item, index) in otherMenuList">
|
|
<view
|
|
class="theorderflex1"
|
|
v-if="item.ifshow"
|
|
:key="index"
|
|
@click="goTo(item.url)"
|
|
>
|
|
<image class="order_img" :src="item.imgurl" />
|
|
<view class="order_text">{{ item.name }}</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btnbox">
|
|
<u-button
|
|
shape="circle"
|
|
@click="loginOut()"
|
|
color="#005BAC"
|
|
:text="'退出登录'"
|
|
></u-button>
|
|
</view>
|
|
<cl-tabbar :current="4"></cl-tabbar>
|
|
<u-popup
|
|
:show="pswShow"
|
|
class="pspopup"
|
|
mode="center"
|
|
closeable
|
|
@close="pswShow = false"
|
|
>
|
|
<view class="t_tit">{{ '二级密码' }}</view>
|
|
<view class="box">
|
|
<view class="c_tit">{{ '请输入二级密码' }}</view>
|
|
|
|
<u--input
|
|
border="surround"
|
|
type="password"
|
|
v-model="password"
|
|
></u--input>
|
|
<u-button
|
|
type="success"
|
|
class="uBtn"
|
|
shape="circle"
|
|
@tap="surePsw"
|
|
color="#005BAC"
|
|
>{{ '确认' }}
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import clTabbar from '@/components/cl-tabbar.vue'
|
|
import * as min from '@/config/balance.js'
|
|
import * as api from '@/config/login.js'
|
|
import { MEMBER_SIGN } from '@/util/common.js'
|
|
import RegionSelect from '@/components/region-select/index.vue'
|
|
import {
|
|
getRegionSelect,
|
|
getPersonalPointInfo,
|
|
getMemberBoxCount,
|
|
} from '@/config/mine.js'
|
|
// import talentList from "@/components/talentList.vue";
|
|
export default {
|
|
components: {
|
|
'cl-tabbar': clTabbar,
|
|
// talentList,
|
|
RegionSelect,
|
|
},
|
|
data() {
|
|
return {
|
|
MEMBER_SIGN,
|
|
getLanguageList: [],
|
|
index: 0,
|
|
userInfo: {},
|
|
userData: {},
|
|
pswShow: false,
|
|
password: '',
|
|
waitPayNum: '',
|
|
payNum: '',
|
|
awards: {},
|
|
otherMenuList: [
|
|
{
|
|
url: '1',
|
|
name: '我的钱包',
|
|
imgurl: '../../static/images/my_icon1.png',
|
|
menuKey: 'wallet',
|
|
ifshow: false,
|
|
},
|
|
{
|
|
url: '/pages/bonus/index',
|
|
name: '奖金明细',
|
|
imgurl: '../../static/images/mark2.png',
|
|
menuKey: 'incomeDetail',
|
|
ifshow: false,
|
|
},
|
|
{
|
|
url: '/pages/ticket/index',
|
|
name: '自助购票',
|
|
imgurl: '../../static/images/tickets.png',
|
|
menuKey: 'ticket',
|
|
ifshow: true,
|
|
alwaysShow: true,
|
|
},
|
|
{
|
|
url: '/pages/selfService/index',
|
|
name: '自助服务',
|
|
imgurl: '../../static/images/my_icon6.png',
|
|
menuKey: 'selfHelp',
|
|
ifshow: true,
|
|
},
|
|
{
|
|
url: '/pages/userSecure/index',
|
|
name: '账号安全',
|
|
imgurl: '../../static/images/my_icon8.png',
|
|
menuKey: 'userSecure',
|
|
ifshow: true,
|
|
},
|
|
{
|
|
url: '/pages/addressList/index',
|
|
name: '地址管理',
|
|
imgurl: '../../static/images/my_icon9.png',
|
|
menuKey: 'addressList',
|
|
ifshow: true,
|
|
},
|
|
{
|
|
url: '/pages/mine/directPush/index',
|
|
name: '直推列表',
|
|
imgurl: '../../static/images/mark5.png',
|
|
menuKey: 'directPush',
|
|
ifshow: false,
|
|
},
|
|
{
|
|
url: '/pages/mine/bindBank/index',
|
|
name: '银行信息',
|
|
imgurl: '../../static/images/my_icon10.png',
|
|
menuKey: 'bankInfo',
|
|
ifshow: true,
|
|
},
|
|
// {
|
|
// url: '/pages/architecture/architecture',
|
|
// name: '阶段列表',
|
|
// imgurl: '../../static/images/my_icon14.png',
|
|
// menuKey: 'recommend',
|
|
// ifshow: false,
|
|
// },
|
|
],
|
|
drShow: false,
|
|
actMenu: false,
|
|
iHonorAward: false,
|
|
ifSpecial: false,
|
|
awardsList: '',
|
|
regionInfo: {},
|
|
smallAreaBox: 0,
|
|
totalBox: 0,
|
|
// performanceData: {},
|
|
marketDynamicBoxInfo: {},
|
|
totalSumPv: 0,
|
|
smallAreaPv: 0,
|
|
isNormal: false,
|
|
personalPointInfo: {},
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getInfo().then(isNormal => {
|
|
this.orderNum()
|
|
this.getPersonalPointInfo()
|
|
this.getMemberMarket()
|
|
this.isNormal = isNormal
|
|
if (!isNormal) {
|
|
return
|
|
}
|
|
})
|
|
},
|
|
computed: {
|
|
formattedTotalSumPv() {
|
|
const value = String(this.totalSumPv || '0.00')
|
|
const parts = value.split('.')
|
|
return {
|
|
integer: parts[0],
|
|
decimal: parts.length > 1 ? `.${parts[1]}` : '',
|
|
}
|
|
},
|
|
formattedSmallAreaPv() {
|
|
const value = String(this.smallAreaPv || '0.00')
|
|
const parts = value.split('.')
|
|
return {
|
|
integer: parts[0],
|
|
decimal: parts.length > 1 ? `.${parts[1]}` : '',
|
|
}
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
getMemberMarket() {
|
|
getMemberBoxCount({
|
|
pkBigMember: this.userInfo.memberCode,
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
this.totalSumPv = res.data?.totalSumPv || 0
|
|
this.smallAreaPv = res.data?.smallAreaPv || 0
|
|
}
|
|
})
|
|
},
|
|
getPersonalPointInfo() {
|
|
getPersonalPointInfo().then(res => {
|
|
if (res.code == 200) {
|
|
this.personalPointInfo = res.data || {}
|
|
}
|
|
})
|
|
},
|
|
|
|
orderNum() {
|
|
api.orderNum().then(res => {
|
|
this.waitPayNum = res.data.waitPayNum
|
|
this.payNum = res.data.payNum
|
|
})
|
|
},
|
|
getInfo() {
|
|
return new Promise(resolve => {
|
|
api.getInfo().then(res => {
|
|
if (res.code == 200) {
|
|
this.userInfo = res.data
|
|
|
|
if (this.userInfo.memberCode != 'ZK68880628') {
|
|
this.otherMenuList = this.otherMenuList.map(item => {
|
|
item.ifshow = true
|
|
return item
|
|
})
|
|
resolve(true)
|
|
return
|
|
}
|
|
resolve(false)
|
|
} else {
|
|
reject()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
goTo(url) {
|
|
if (url == 1) {
|
|
this.pswShow = true
|
|
} else if (url == 2) {
|
|
//达人榜单
|
|
this.drShow = true
|
|
} else {
|
|
uni.navigateTo({
|
|
url: url,
|
|
})
|
|
}
|
|
},
|
|
goOrder(index) {
|
|
//全部订单
|
|
uni.navigateTo({
|
|
url: '/pages/mine/order/index?isTab=' + index,
|
|
})
|
|
},
|
|
loginOut() {
|
|
uni.setStorageSync('pkCountry', '')
|
|
uni.setStorageSync('showInfo', 0)
|
|
this.$store.dispatch('LogOut')
|
|
uni.reLaunch({
|
|
url: '/pages/login/index',
|
|
})
|
|
},
|
|
surePsw() {
|
|
min
|
|
.checkPwd({
|
|
pwd: this.password,
|
|
})
|
|
.then(res => {
|
|
if (res.code == 200) {
|
|
this.password = ''
|
|
this.pswShow = false
|
|
uni.navigateTo({
|
|
url: '/pages/mine/balance/index',
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'error',
|
|
})
|
|
}
|
|
})
|
|
},
|
|
goSpecialArea() {
|
|
uni.switchTab({
|
|
url: '/pages/specialArea/index',
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ju_grade {
|
|
box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.08);
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
background: #ffffff;
|
|
font-size: 24rpx;
|
|
|
|
.descriptive-text {
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
margin-right: 8rpx;
|
|
}
|
|
.jugrade_flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
// margin-top: 20rpx;
|
|
}
|
|
|
|
.ju_left {
|
|
flex: 1;
|
|
|
|
.ju_left_top {
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.ju_text1 {
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.ju_text2 {
|
|
color: #005bac;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
padding: 0 6rpx;
|
|
}
|
|
}
|
|
|
|
.ju_left_bottom {
|
|
// width: 100%;
|
|
flex: 1;
|
|
height: 34rpx;
|
|
background: #eeeeee;
|
|
border-radius: 20rpx;
|
|
margin: 10rpx;
|
|
// margin-top: 23rpx;
|
|
position: relative;
|
|
}
|
|
.ju_left_bottom1 {
|
|
// width: 100%;
|
|
flex: 1;
|
|
height: 34rpx;
|
|
background: #ffb74d;
|
|
border-radius: 20rpx;
|
|
margin: 10rpx;
|
|
// margin-top: 23rpx;
|
|
position: relative;
|
|
}
|
|
// .current-schedule1 {
|
|
// position: absolute;
|
|
// width: 30%;
|
|
// background: #005BAC;
|
|
// height: 34rpx;
|
|
// border-radius: 20px;
|
|
// }
|
|
// .current-schedule2 {
|
|
// position: absolute;
|
|
// width: 30%;
|
|
// background: #005BAC;
|
|
// height: 34rpx;
|
|
// border-radius: 20px;
|
|
// }
|
|
// .current-schedule3 {
|
|
// position: absolute;
|
|
// width: 30%;
|
|
// background: #005BAC;
|
|
// height: 34rpx;
|
|
// border-radius: 20px;
|
|
// }
|
|
.current-progress {
|
|
position: absolute;
|
|
width: 30%;
|
|
background: #3385d6;
|
|
height: 34rpx;
|
|
border-radius: 20px;
|
|
}
|
|
.cha {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 0;
|
|
transform: translate(0%, -55%);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
.yestDay {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
.yes_t {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.ju_right {
|
|
width: 104rpx;
|
|
height: 94rpx;
|
|
margin-left: 20rpx;
|
|
|
|
.ju_img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my_order {
|
|
background-color: #ffffff;
|
|
box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
|
|
border-radius: 20rpx;
|
|
padding: 0 20rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.my_title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2rpx solid #eeeeee;
|
|
padding: 20rpx 0;
|
|
|
|
.thetitle {
|
|
font-size: 28rpx;
|
|
font-family:
|
|
PingFangSC-Semibold,
|
|
PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.findallorder {
|
|
font-family:
|
|
PingFangSC-Regular,
|
|
PingFang SC;
|
|
color: #999999;
|
|
font-size: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.thepadding {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.order_flex {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.theorderflex1 {
|
|
margin: 18rpx 0;
|
|
width: 165rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
.order_img {
|
|
width: 48rpx;
|
|
height: 46rpx;
|
|
}
|
|
|
|
.order_text {
|
|
margin-top: 15rpx;
|
|
font-size: 20rpx;
|
|
font-family:
|
|
PingFangSC-Semibold,
|
|
PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.order_img2 {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 50%;
|
|
border-bottom: 20rpx;
|
|
}
|
|
|
|
.order_text2 {
|
|
font-size: 28rpx;
|
|
font-family:
|
|
PingFangSC-Regular,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.qiu {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: rgb(249, 48, 38);
|
|
top: -10px;
|
|
right: 10px;
|
|
border-radius: 50%;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order_flex2 {
|
|
justify-content: flex-start;
|
|
|
|
.theorderflex1 {
|
|
width: 120rpx; // flex: 1;
|
|
margin-right: 66rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pspopup {
|
|
.t_tit {
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.c_tit {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.box {
|
|
padding: 40rpx 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.uBtn {
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 0 22rpx;
|
|
padding-bottom: 100rpx; // background-color: #f2f2f2;
|
|
position: relative;
|
|
font-size: 24rpx;
|
|
height: 100vh;
|
|
overflow: scroll;
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
#005bac 25%,
|
|
#f2f2f2 40%
|
|
); // background-position: top;
|
|
}
|
|
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 40rpx 0;
|
|
color: #ffffff;
|
|
position: relative;
|
|
padding-bottom: 0; // Add some bottom padding
|
|
}
|
|
|
|
.user-info-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.avatar-container {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.user-name-and-level {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
|
|
.user-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.svip-badge {
|
|
background: linear-gradient(145deg, #fde468, #fad02c);
|
|
color: #5d4203;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 50px;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
box-shadow:
|
|
inset 0 1px 1px rgba(255, 255, 255, 0.4),
|
|
0 1px 2px rgba(0, 0, 0, 0.15);
|
|
border: 1rpx solid #c8a000;
|
|
}
|
|
}
|
|
|
|
.awards-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.award-tag {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 22rpx;
|
|
|
|
.award-label {
|
|
opacity: 0.8;
|
|
}
|
|
.award-value {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.settings-icon-container {
|
|
padding: 10rpx;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin-top: 10rpx; // Align vertically with user name
|
|
}
|
|
|
|
.jiangxian {
|
|
display: flex;
|
|
color: #ffffff;
|
|
align-items: center;
|
|
margin: 0rpx 0 10rpx 0;
|
|
}
|
|
|
|
.yt1 {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.hisImg {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.jxTit {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.jxTit1 {
|
|
font-weight: 600;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.contentLink {
|
|
.linktitle {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
background-color: #ffffff; // border-radius: 25px;
|
|
border-top-left-radius: 25px;
|
|
border-top-right-radius: 25px;
|
|
padding: 35rpx 25rpx;
|
|
|
|
.my_icon {
|
|
width: 39rpx;
|
|
height: 37rpx;
|
|
}
|
|
|
|
.my_icon2 {
|
|
width: 39rpx;
|
|
height: 43rpx;
|
|
}
|
|
|
|
.my_icon3 {
|
|
width: 43rpx;
|
|
height: 37rpx;
|
|
}
|
|
|
|
.u-cell-text {
|
|
margin-left: 25rpx;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-line {
|
|
border: none !important;
|
|
}
|
|
|
|
.btnbox {
|
|
margin-top: 30rpx;
|
|
padding: 20rpx 22rpx 150rpx 22rpx;
|
|
}
|
|
|
|
.sprint-progress-container {
|
|
flex: 1;
|
|
height: 34rpx;
|
|
background: #eeeeee;
|
|
border-radius: 20rpx;
|
|
margin: 10rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sprint-current-progress {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(135deg, #ed9a38 0%, #fdd05f 50%, #e68a2e 100%);
|
|
transition: width 0.6s ease-in-out;
|
|
box-shadow: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sprint-current-progress::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
100deg,
|
|
rgba(255, 255, 255, 0) 20%,
|
|
rgba(255, 255, 255, 0.4) 50%,
|
|
rgba(255, 255, 255, 0) 80%
|
|
);
|
|
transform: translateX(-100%);
|
|
animation: premium_shimmer_animation 2.5s infinite linear;
|
|
}
|
|
|
|
@keyframes premium_shimmer_animation {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.sprint-progress-text {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sprint-progress-text span {
|
|
margin: 0 3rpx;
|
|
}
|
|
|
|
.sprint-progress-text .award-name {
|
|
font-weight: bold;
|
|
color: #005bac;
|
|
font-size: 26rpx;
|
|
padding: 0 4rpx;
|
|
}
|
|
|
|
.sprint-progress-text .award-amount {
|
|
font-weight: bold;
|
|
color: #d9534f;
|
|
font-size: 24rpx;
|
|
padding: 0 4rpx;
|
|
}
|
|
|
|
.region-info-box {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 30rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.region-info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.region-info-label {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.region-info-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.extra-info-card {
|
|
background: #ffffff;
|
|
box-shadow: 0rpx 6rpx 24rpx rgba(0, 0, 0, 0.06);
|
|
border-radius: 24rpx;
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.info-grid {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.info-grid.multiple-items {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.info-grid.multiple-items .info-item:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.market-stats-container {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.stat-block {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 16rpx;
|
|
color: #fff;
|
|
position: relative;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.stat-block:active {
|
|
transform: scale(0.98);
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.stat-block.primary {
|
|
background: linear-gradient(135deg, #005bac, #007bff);
|
|
box-shadow: 0 6rpx 12rpx rgba(0, 91, 172, 0.3);
|
|
}
|
|
|
|
.stat-block.secondary {
|
|
background: linear-gradient(135deg, #4682b4, #87ceeb);
|
|
box-shadow: 0 6rpx 12rpx rgba(70, 130, 180, 0.3);
|
|
.stat-label {
|
|
margin-bottom: 6rpx;
|
|
}
|
|
}
|
|
|
|
.stat-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
flex-grow: 1;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(255, 255, 255, 0.1),
|
|
rgba(255, 255, 255, 0.5),
|
|
rgba(255, 255, 255, 0.1)
|
|
);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stat-value {
|
|
display: flex;
|
|
align-items: baseline;
|
|
line-height: 1;
|
|
margin-top: 8rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.stat-value__integer {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-value__decimal {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.stat-more-arrow {
|
|
margin-left: 20rpx;
|
|
flex-shrink: 0;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
@keyframes bling_shimmer {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.region-select-action {
|
|
padding: 30rpx 20rpx;
|
|
}
|
|
.more-btn {
|
|
font-size: 24rpx;
|
|
color: #005bac;
|
|
text-align: right;
|
|
margin-right: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 会员点位信息样式 */
|
|
// .member-point-info {
|
|
// background-color: #ffffff;
|
|
// box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
|
|
// border-radius: 20rpx;
|
|
// padding: 0 20rpx;
|
|
// margin-top: 20rpx;
|
|
// }
|
|
|
|
// .point-info-grid {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: space-around;
|
|
// padding: 30rpx 0;
|
|
// }
|
|
|
|
// .point-info-item {
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// flex: 1;
|
|
// text-align: center;
|
|
// }
|
|
|
|
// .point-info-value {
|
|
// font-size: 40rpx;
|
|
// font-weight: 600;
|
|
// color: #005bac;
|
|
// line-height: 1.2;
|
|
// }
|
|
|
|
// .point-info-label {
|
|
// font-size: 24rpx;
|
|
// color: #666666;
|
|
// font-weight: 500;
|
|
// margin-top: 8rpx;
|
|
// }
|
|
|
|
// .point-info-divider {
|
|
// width: 2rpx;
|
|
// height: 60rpx;
|
|
// background: linear-gradient(
|
|
// to bottom,
|
|
// rgba(0, 91, 172, 0.1),
|
|
// rgba(0, 91, 172, 0.3),
|
|
// rgba(0, 91, 172, 0.1)
|
|
// );
|
|
// margin: 0 20rpx;
|
|
// }
|
|
</style>
|