3
0
Fork 0
web-store-retail-h5/pages/mine/index.vue

1587 lines
39 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<!-- 上方头部 -->
<view>
<view class="topBox">
<view class="top_inder">
<view class="top_left">
<view class="left_img">
<image
class="headerimg"
:src="
userInfo.headPath
? userInfo.headPath
: userInfo.settleCountryCircularIcon
"
mode=""
>
</image>
</view>
<view class="left_text">
<view class="name_box">
<view class="tTit1">{{ userInfo.memberCode }}</view>
<view
style="margin-left: 20rpx"
class="level_tag level_tag--primary"
>
<u-icon name="level" color="#A77B09" size="14"></u-icon>
<text class="level_label">会员等级</text>
<text class="level_value">{{
userInfo.pkGradeVal || '-'
}}</text>
</view>
</view>
<view class="level_box">
<view style="display: flex; gap: 10rpx">
<view class="level_tag">
<u-icon name="star" color="#005BAC" size="14"></u-icon>
<text class="level_label">荣誉奖衔</text>
<text class="level_value">{{
userInfo.pkMaxAwardsVal || userInfo.pkAwardsVal
}}</text>
</view>
<view class="level_tag">
<u-icon name="star" color="#005BAC" size="14"></u-icon>
<text class="level_label">当月奖衔</text>
<text class="level_value">{{
userInfo.pkAwardsVal || '-'
}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="top_right" @click="goTo('/pages/userData/index')">
<view class="ricon">
<u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
</view>
</view>
</view>
</view>
<!-- <view class="ju_grade" v-if="false">
<view class="jugrade_flex">
<view class="ju_left">
<view v-if="awards.tarAwardsName" class="yestDay">
<view class="yes_t">奖衔晋升</view>
<view class="ju_left_bottom sprint-progress-container">
<view
class="sprint-current-progress"
:style="{ width: sprintProgress.percentageString }"
></view>
<view class="cha sprint-progress-text">
晋升
<span class="award-name">{{ awards.tarAwardsName }}</span>
小区仅需
<span class="award-amount">{{
sprintProgress.achieved
}}</span>
</view>
</view>
</view>
<view class="yestDay">
<view class="yes_t">昨日业绩</view>
<view
:class="
awards.aNewPv != 0 && awards.bNewPv != 0
? 'ju_left_bottom1'
: 'ju_left_bottom'
"
>
<view
class="current-progress"
:style="{
width: yesPercent(awards.aNewPv, awards.bNewPv),
}"
></view>
<view class="cha">
左区 {{ awards.aNewPv || 0 }}/右区 {{ awards.bNewPv || 0 }}
</view>
</view>
</view>
<view class="yestDay">
<view class="yes_t">当月业绩</view>
<view
:class="
awards.aMonthPv != 0 && awards.bMonthPv != 0
? 'ju_left_bottom1'
: 'ju_left_bottom'
"
>
<view
class="current-progress"
:style="{
width: yesPercent(awards.aMonthPv, awards.bMonthPv),
}"
></view>
<view class="cha">
左区 {{ awards.aMonthPv || '0.00' }}/右区
{{ awards.bMonthPv || '0.00' }}
</view>
</view>
</view>
<view class="yestDay">
<view class="yes_t">{{ '历史业绩' }}</view>
<view
:class="
awards.aSumPv != 0 && awards.bSumPv != 0
? 'ju_left_bottom1'
: 'ju_left_bottom'
"
>
<view
class="current-progress"
:style="{
width: yesPercent(awards.aSumPv, awards.bSumPv),
}"
></view>
<view class="cha">
左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}</view
>
</view>
</view>
</view>
</view>
</view> -->
<!-- 新增信息展示 -->
<view
class="extra-info-card"
v-if="
[
MEMBER_SIGN.NORMAL_LEVEL,
MEMBER_SIGN.ZERO_LEVEL,
MEMBER_SIGN.V5_LEVEL,
].includes(Number(userInfo.memberSign))
"
>
<view
class="info-grid"
:class="{
'multiple-items': userInfo.memberSign === MEMBER_SIGN.NORMAL_LEVEL,
}"
>
<view class="info-item">
<text class="info-value">{{ userInfo.pkGradeVal || '-' }}</text>
<text class="info-label">会员等级</text>
</view>
<template v-if="userInfo.memberSign === MEMBER_SIGN.NORMAL_LEVEL">
<view class="info-item">
<text class="info-value">{{ totalBox || '0' }}</text>
<text class="info-label">总盒数</text>
</view>
<view class="info-item">
<text class="info-value">
{{ smallAreaBox || '0' }}
</text>
<text class="info-label">小区盒数</text>
</view>
</template>
</view>
</view>
<view class="my_order">
<view class="my_title">
<text class="thetitle">{{ '我的订单' }}</text>
<view class="findallorder" @click="goTo('/pages/mine/order/index')">
<text>{{ '全部订单' }}</text>
<u-icon name="arrow-right" color="#999999" size="16rpx"></u-icon>
</view>
</view>
<view class="order_flex thepadding" style="justify-content: center">
<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" v-if="regionInfoVisible">
<view class="my_title">
<text class="thetitle">收益区域</text>
</view>
<template
v-if="
regionInfo.provinceVal || regionInfo.cityVal || regionInfo.countyVal
"
>
<view class="region-info-box">
<view class="region-info-item">
<text class="region-info-label">{{ '省' }}</text>
<text class="region-info-value">{{
regionInfo.provinceVal || '-'
}}</text>
</view>
<view class="region-info-item">
<text class="region-info-label">{{ '市' }}</text>
<text class="region-info-value">{{
regionInfo.cityVal || '-'
}}</text>
</view>
<view class="region-info-item">
<text class="region-info-label">{{ '区' }}</text>
<text class="region-info-value">{{
regionInfo.countyVal || '-'
}}</text>
</view>
</view>
</template>
<template v-else>
<view class="region-select-action">
<u-button
@click="openRegionSelect"
color="#005BAC"
shape="circle"
text="选择区域"
></u-button>
</view>
</template>
</view>
<!-- 市场动态 -->
<view class="my_order" v-if="true || marketWrapperVisible">
<view class="my_title">
<text class="thetitle">{{ '市场动态' }}</text>
</view>
<view class="market-stats-container">
<view
class="stat-block primary"
@click="goTo('/pages/mine/marketDynamic/achievement-list')"
>
<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 class="stat-more-arrow">
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
</view>
</view>
<view
class="stat-block secondary"
@click="goTo('/pages/mine/marketDynamic/box-list')"
>
<view class="stat-content">
<view class="stat-item">
<text class="stat-label">总盒数</text>
<view class="stat-value">
<text class="stat-value__integer">{{
formattedTotalBox.integer
}}</text>
<!-- <text class="stat-value__decimal">{{
formattedTotalBox.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">{{
formattedSmallAreaBox.integer
}}</text>
<!-- <text class="stat-value__decimal">{{
formattedSmallAreaBox.decimal
}}</text> -->
</view>
</view>
</view>
<view class="stat-more-arrow">
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
</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
class="theorderflex1"
@click="goTo('/pages/mine/feedBack/feedBack')"
>
<image class="order_img" src="../../static/images/my_icon12.png" />
<view class="order_text">{{ '意见反馈' }}</view>
</view> -->
<!-- <picker
:range="getLanguageList"
:value="index"
range-key="label"
@change="bindPickerChange"
>
<view class="theorderflex1" @click="goTo('')">
<image class="order_img" src="../../static/images/mark6.png" />
<view class="order_text">{{ '多语言切换' }}</view>
</view>
</picker> -->
<!-- <view
class="theorderflex1"
@click="goTo('/pages/mine/branchAddress/branchAddress')"
>
<image class="order_img" src="../../static/images/my_icon9.png" />
<view class="order_text"
>{{ '分公司' }}{{ '地址' }}</view
>
</view> -->
<!-- <view class="theorderflex1" @click="goYear">
<image class='order_img' src="../../static/images/my_icon12.png" />
<view class="order_text">{{ '年度奖衔' }}</view>
</view> -->
<!-- <view class="theorderflex1" @click="goTo('')">
<image class='order_img' src="../../static/images/my_icon12.png" />
<view class="order_text">关于我们</view>
</view> -->
</view>
</view>
<!-- 会员中心 -->
<view class="btnbox">
<u-button
shape="circle"
@click="loginOut()"
color="#005BAC"
:text="'退出登录'"
></u-button>
</view>
</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>
<RegionSelect ref="regionSelect" @success="getRegionSelect" />
<!-- <talentList :drShow="drShow" @closeShow="closeShow"></talentList> -->
</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 { getMarketDynamicBoxCount } from '@/config/mine.js'
import RegionSelect from '@/components/region-select/index.vue'
import {
getRegionSelect,
getMemberBoxCount,
getMemberPerformance,
} 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: true,
},
{
url: '/pages/bonus/menu',
name: '奖金明细',
imgurl: '../../static/images/mark2.png',
menuKey: 'incomeDetail',
ifshow: true,
},
{
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/mine/share/index',
name: '个人推广',
imgurl: '../../static/images/list.svg',
menuKey: 'share',
ifshow: true,
},
{
url: '/pages/userSecure/index',
name: '账号安全',
imgurl: '../../static/images/my_icon8.png',
menuKey: '',
ifshow: true,
},
{
url: '/pages/addressList/index',
name: '地址管理',
imgurl: '../../static/images/my_icon9.png',
menuKey: '',
ifshow: true,
},
{
url: '/pages/mine/directPush/index',
name: '直推列表',
imgurl: '../../static/images/mark5.png',
menuKey: '',
ifshow: true,
},
{
url: '/pages/mine/bindBank/index',
name: '银行信息',
imgurl: '../../static/images/my_icon10.png',
menuKey: '',
ifshow: true,
},
{
url: '/pages/bonus/regional-assessment/index',
name: '区域考核',
imgurl: '../../static/images/mark5.png',
menuKey: '',
ifshow: true,
},
// {
// url: '/pages/mine/addNewPv/index',
// name: '新增业绩',
// imgurl: '../../static/images/mark9.png',
// menuKey: 'iNewAchievement',
// ifshow: false,
// },
],
drShow: false,
actMenu: false,
iHonorAward: false,
ifSpecial: false,
awardsList: '',
regionInfo: {},
smallAreaBox: 0,
totalBox: 0,
// performanceData: {},
marketDynamicBoxInfo: {},
totalSumPv: 0,
smallAreaPv: 0,
}
},
onShow() {
this.getInfo().finally(() => {
this.orderNum()
this.getRegionSelect()
this.getMemberBoxCount()
this.getMarketDynamicBoxCount()
// this.getUserAwardss()
})
},
computed: {
sprintProgress() {
const targetPvStr = this.awards.targetPv
const sumRealPvStr = this.awards.sumRealPv // 这是"小区仅需"的量,即差距
const targetPv = parseFloat(targetPvStr)
const sumRealPv = parseFloat(sumRealPvStr)
let achievedPv = 0
let percentage = 0
const numericTargetPv =
Math.floor((isNaN(targetPv) ? 0 : targetPv) * 100) / 100
if (!isNaN(targetPv) && targetPv > 0) {
// sumRealPv 是差距,所以已完成的是 targetPv - sumRealPv
achievedPv = targetPv - (isNaN(sumRealPv) ? 0 : sumRealPv)
achievedPv = Math.max(0, Math.min(achievedPv, targetPv))
percentage = (sumRealPvStr / targetPv) * 100
} else if (
!isNaN(targetPv) &&
targetPv === 0 &&
!isNaN(sumRealPv) &&
sumRealPv <= 0
) {
// 如果目标是0且差距也是0或负数表示已满足或超越0目标则认为是100%
achievedPv = 0
percentage = 100
}
const clampedPercentage = Math.min(100, Math.max(0, percentage))
return {
percentageString: `${Math.floor(clampedPercentage)}%`,
achieved: (Math.floor(achievedPv * 100) / 100).toFixed(2),
target: numericTargetPv.toFixed(2),
rawPercentage: clampedPercentage,
}
},
marketWrapperVisible() {
return this.userInfo.memberSign == MEMBER_SIGN.V5_LEVEL
},
regionInfoVisible() {
return this.regionInfo?.regionStatus === 0
},
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]}` : '',
}
},
formattedTotalBox() {
const value = String(this.totalBox || '0')
const parts = value.split('.')
return {
integer: parts[0],
decimal: parts.length > 1 ? `.${parts[1]}` : '',
}
},
formattedSmallAreaBox() {
const value = String(this.smallAreaBox || '0')
const parts = value.split('.')
return {
integer: parts[0],
decimal: parts.length > 1 ? `.${parts[1]}` : '',
}
},
},
methods: {
getRegionSelect() {
uni.showLoading({
title: '加载中...',
})
getRegionSelect()
.then(res => {
if (res.code == 200) {
this.regionInfo = res.data
}
})
.finally(() => {
uni.hideLoading()
})
},
openRegionSelect() {
uni.showLoading({
title: '加载中...',
})
this.$refs.regionSelect
?.open()
.then(() => {
uni.hideLoading()
})
.catch(() => {
uni.hideLoading()
})
},
goYear() {
uni.navigateTo({
url: '/pages/mine/yearGift/index',
})
},
closeShow() {
this.drShow = false
},
goHonoray() {
uni.navigateTo({
url: '/pages/mine/honoraryAwards/honoraryAwards',
})
},
//获取用户真实奖衔
getUserAwardss() {
api.getUserAwards().then(res => {
this.awards = res.data || {}
})
},
GetPercent(num, total) {
num = parseFloat(num)
total = parseFloat(total)
if (isNaN(num) || isNaN(total)) {
return '-'
}
if (total == 0) {
return '0%'
} else if (total < 0) {
return 100 + '%'
} else {
return Math.round((num / total) * 10000) / 100.0 + '%'
}
},
yesPercent(left, right) {
left = parseFloat(left)
right = parseFloat(right)
if (isNaN(left) || isNaN(right)) {
return '0%'
}
return right + left == 0
? '0%'
: Math.round((left / (right + left)) * 10000) / 100.0 + '%'
},
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
resolve()
if (this.userInfo.memberCode == 'CN68880628') {
this.ifSpecial = true
} else {
this.ifSpecial = false
}
} else {
reject()
}
})
})
},
goTo(url) {
if (url == 1) {
this.pswShow = true
} else if (url == 2) {
//达人榜单
this.drShow = true
} else {
uni.navigateTo({
url: url,
})
}
},
getMarketDynamicBoxCount() {
getMarketDynamicBoxCount({
pkBigMember: this.userInfo.memberCode,
}).then(res => {
if (res.code == 200) {
this.marketDynamicBoxInfo = res.data
}
})
},
goOrder(index) {
//全部订单
uni.navigateTo({
url: '/pages/mine/order/index?isTab=' + index,
})
},
goRoad(index) {
//1等级2奖衔
if (index == 1) {
uni.navigateTo({
url: '/pages/mine/growthRoad/gradeRoad',
})
} else if (index == 2) {
uni.navigateTo({
url: '/pages/mine/growthRoad/awardRoad',
})
}
},
loginOut() {
uni.setStorageSync('pkCountry', '')
uni.setStorageSync('showInfo', 0)
this.$store.dispatch('LogOut')
uni.reLaunch({
url: '/pages/login/index',
})
},
getMemberBoxCount() {
getMemberBoxCount({
pkBigMember: this.userInfo.memberCode,
}).then(res => {
if (res.code == 200) {
this.totalBox = res.data?.totalBox || 0
this.smallAreaBox = res.data?.smallAreaBox || 0
this.totalSumPv = res.data?.totalSumPv || 0
this.smallAreaPv = res.data?.smallAreaPv || 0
}
})
},
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;
.topBox {
padding: 43rpx 0 20rpx 0;
.top_inder {
display: flex;
justify-content: space-between;
.top_left {
display: flex;
.left_img {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
border: 5rpx solid #ffffff;
margin-right: 18rpx;
.headerimg {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.left_text {
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12rpx;
.name_box {
display: flex;
align-items: center;
.tTit1 {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: bold;
margin-right: 0;
}
.kuang {
background-color: rgba(0, 0, 0, 0.25);
padding: 14rpx 18rpx;
border-radius: 40rpx;
font-size: 20rpx;
}
}
.level_box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10rpx;
}
.level_tag {
background: linear-gradient(145deg, #c5d8e8, #afc8de, #9ab5d0);
border: 1rpx solid #8ca3b8;
padding: 6rpx 18rpx;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 10rpx;
position: relative;
overflow: hidden;
color: #003e7c;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
0 1px 2px rgba(0, 0, 0, 0.15);
}
.level_tag--primary {
background: linear-gradient(145deg, #fde468, #fad02c, #e5b40a);
border: 1rpx solid #c8a000;
color: #5d4203;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.4),
0 1px 2px rgba(0, 0, 0, 0.15);
}
.level_label {
font-size: 20rpx;
opacity: 0.9;
}
.level_value {
font-size: 22rpx;
font-weight: 600;
}
}
}
.top_right {
position: absolute;
top: 40rpx;
right: 3%;
color: #ffffff;
.rtitle {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 400;
}
}
}
.grade_left {
display: flex;
align-items: center;
font-size: 12px;
color: #005bac;
font-weight: 400;
// margin-left: 20rpx;
.gra_left1 {
background: #ffffff;
border: 1rpx solid #ffffff;
border-radius: 20rpx 0 20rpx 20rpx;
// margin-right: 30rpx;
padding: 6rpx 20rpx;
display: flex;
align-items: center;
.gra_icon {
width: 26rpx;
height: 26rpx;
margin-right: 6rpx;
}
}
// .gra_left1:last-child {
// margin-left: 20rpx;
// }
}
.grade_flex {
display: flex;
align-items: center;
color: #ffffff;
}
.btom_inder {
display: flex;
align-items: center; // margin-top: 24rpx;
.jxbox {
width: 65rpx;
height: 65rpx;
margin-right: 26rpx;
.jximg {
width: 100%;
height: 100%;
}
}
}
}
.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;
margin-top: 20rpx;
padding: 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-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;
}
</style>