style(commission): 重构收益中心首页为现代简约规范排版
这个提交包含在：
chen
@@ -1,74 +1,89 @@
|
||||
<!-- 账户 -->
|
||||
<!-- 账户信息 Bento 资产卡片 -->
|
||||
<template>
|
||||
<view class="account-card">
|
||||
<view class="account-card-box">
|
||||
<view class="ss-flex ss-row-between card-box-header">
|
||||
<view class="ss-flex">
|
||||
<view class="header-title ss-m-r-16">账户信息</view>
|
||||
<button
|
||||
class="ss-reset-button look-btn ss-flex"
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
>
|
||||
<uni-icons
|
||||
:type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
|
||||
color="#A57A55"
|
||||
size="20"
|
||||
></uni-icons>
|
||||
</button>
|
||||
<!-- 头部：标题与查看明细 -->
|
||||
<view class="card-header ss-flex ss-row-between ss-col-center">
|
||||
<view class="header-left ss-flex ss-col-center">
|
||||
<text class="header-title">账户资产</text>
|
||||
<button
|
||||
class="ss-reset-button eye-btn ss-flex ss-col-center ss-row-center ss-m-l-12"
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
>
|
||||
<uni-icons
|
||||
:type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
|
||||
color="#A57A55"
|
||||
size="18"
|
||||
></uni-icons>
|
||||
</button>
|
||||
</view>
|
||||
<view class="header-right ss-flex ss-col-center" @tap="sheep.$router.go('/pages/commission/rewards')">
|
||||
<text class="detail-link-text">查看明细</text>
|
||||
<uni-icons type="right" size="12" color="#a17545"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2x2 Bento 资产指标大盘 -->
|
||||
<view class="bento-grid">
|
||||
<!-- 第一行 -->
|
||||
<view class="grid-row ss-flex">
|
||||
<!-- 累计收益 -->
|
||||
<view
|
||||
class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/commission/rewards')"
|
||||
>
|
||||
<view class="item-title">累计收益(元)</view>
|
||||
<view class="item-detail text-accent">
|
||||
{{ state.showMoney ? agentInfo?.total_income || userInfo?.total_income || '0.00' : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/rewards')">
|
||||
<view class="header-title ss-m-r-4">查看明细</view>
|
||||
<text class="cicon-play-arrow"></text>
|
||||
|
||||
<view class="grid-v-divider"></view>
|
||||
|
||||
<!-- 商城余额 -->
|
||||
<view
|
||||
class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/user/wallet/money')"
|
||||
>
|
||||
<view class="item-title">商城余额(元)</view>
|
||||
<view class="item-detail text-dark">
|
||||
{{ state.showMoney ? userInfo?.money || '0.00' : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 收益 -->
|
||||
<view class="card-content">
|
||||
<view class="metric-row ss-flex">
|
||||
<view
|
||||
class="ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/commission/rewards')"
|
||||
>
|
||||
<view class="item-title">累计收益(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? agentInfo?.total_income || userInfo?.total_income || '0.00' : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/user/wallet/money')"
|
||||
>
|
||||
<view class="item-title">商城余额(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? userInfo?.money || '0.00' : '***' }}
|
||||
</view>
|
||||
|
||||
<view class="grid-h-divider"></view>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<view class="grid-row ss-flex">
|
||||
<!-- dmepa价值 -->
|
||||
<view
|
||||
class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/commission/madow')"
|
||||
>
|
||||
<view class="item-title">dmepa价值(元)</view>
|
||||
<view class="item-detail text-primary">
|
||||
{{
|
||||
state.showMoney
|
||||
? agentInfo?.madow_value || userInfo?.madow_value || '0.00'
|
||||
: '***'
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="metric-row ss-flex">
|
||||
<view
|
||||
class="ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/commission/madow')"
|
||||
>
|
||||
<view class="item-title">dmepa价值(元)</view>
|
||||
<view class="item-detail">
|
||||
{{
|
||||
state.showMoney
|
||||
? agentInfo?.madow_value || userInfo?.madow_value || '0.00'
|
||||
: '***'
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/commission/voucher')"
|
||||
>
|
||||
<view class="item-title">可用兑换券(个)</view>
|
||||
<view class="item-detail">
|
||||
{{
|
||||
state.showMoney
|
||||
? formatVoucher(agentInfo?.voucher_available || userInfo?.voucher_available)
|
||||
: '***'
|
||||
}}
|
||||
</view>
|
||||
|
||||
<view class="grid-v-divider"></view>
|
||||
|
||||
<!-- 可用兑换券 -->
|
||||
<view
|
||||
class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
|
||||
@tap="sheep.$router.go('/pages/commission/voucher')"
|
||||
>
|
||||
<view class="item-title">可用兑换券(个)</view>
|
||||
<view class="item-detail text-amber">
|
||||
{{
|
||||
state.showMoney
|
||||
? formatVoucher(agentInfo?.voucher_available || userInfo?.voucher_available)
|
||||
: '***'
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -99,54 +114,109 @@
|
||||
.account-card {
|
||||
width: 694rpx;
|
||||
margin: 0 auto;
|
||||
padding: 2rpx;
|
||||
background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid rgba(224, 185, 130, 0.3);
|
||||
box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
.account-card-box {
|
||||
background: #ffefd6;
|
||||
.card-box-header {
|
||||
padding: 0 30rpx;
|
||||
height: 72rpx;
|
||||
box-shadow: 0px 2px 6px #f2debe;
|
||||
.header-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #a17545;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.cicon-play-arrow {
|
||||
color: #a17545;
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.card-header {
|
||||
padding: 22rpx 28rpx 18rpx 28rpx;
|
||||
background: linear-gradient(180deg, #fffcf6 0%, #ffffff 100%);
|
||||
border-bottom: 1rpx solid #f6f0e4;
|
||||
|
||||
.header-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #522703;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.eye-btn {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(165, 122, 85, 0.08);
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.card-content {
|
||||
min-height: 220rpx;
|
||||
background: #fdfae9;
|
||||
padding: 16rpx 0 8rpx;
|
||||
.metric-row {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
.metric-item {
|
||||
padding: 8rpx 0;
|
||||
|
||||
.detail-link-text {
|
||||
font-size: 22rpx;
|
||||
color: #a17545;
|
||||
font-weight: 500;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
padding: 10rpx 0;
|
||||
|
||||
.grid-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bento-cell {
|
||||
padding: 22rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:active {
|
||||
background-color: #faf7f2;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #9c7b60;
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 500;
|
||||
color: #cba67e;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
font-size: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
line-height: 30rpx;
|
||||
font-size: 38rpx;
|
||||
font-family: OPPOSANS, sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 44rpx;
|
||||
letter-spacing: 0.5rpx;
|
||||
|
||||
&.text-accent {
|
||||
color: #ff6000;
|
||||
}
|
||||
|
||||
&.text-dark {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
&.text-primary {
|
||||
color: #692e04;
|
||||
}
|
||||
|
||||
&.text-amber {
|
||||
color: #d97706;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-v-divider {
|
||||
width: 1rpx;
|
||||
height: 64rpx;
|
||||
background: #f4ecdf;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.grid-h-divider {
|
||||
height: 1rpx;
|
||||
width: 638rpx;
|
||||
margin: 0 auto;
|
||||
background: #f4ecdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,15 +2,18 @@
|
||||
<template>
|
||||
<!-- 用户资料 -->
|
||||
<view class="user-card ss-flex ss-col-bottom">
|
||||
<view class="card-top ss-flex ss-row-between">
|
||||
<view class="ss-flex">
|
||||
<view class="card-top ss-flex ss-row-between ss-col-center ss-flex-1">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="head-img-box">
|
||||
<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="ss-flex-col">
|
||||
<view class="user-name">{{ userInfo.nickname }}</view>
|
||||
<view class="ss-flex-col user-detail-col">
|
||||
<view class="name-row ss-flex ss-col-center">
|
||||
<text class="user-name">{{ userInfo.nickname || '分销合伙人' }}</text>
|
||||
<text v-if="userInfo.id" class="user-id-pill">ID: {{ userInfo.id }}</text>
|
||||
</view>
|
||||
<view class="user-info-box ss-flex ss-col-center ss-flex-wrap">
|
||||
<view class="tag-box ss-flex" v-if="agentInfo.level_info">
|
||||
<view class="tag-box ss-flex ss-col-center" v-if="agentInfo.level_info || levelTitle">
|
||||
<image
|
||||
v-if="agentInfo.level_info?.image"
|
||||
class="tag-img"
|
||||
@@ -22,9 +25,7 @@
|
||||
</view>
|
||||
<view v-if="agentInfo.is_venue || agentInfo.identities?.includes('venue')" class="mini-tag">{{ roleNames.venue || '酒道馆' }}</view>
|
||||
<view v-if="agentInfo.is_county || agentInfo.identities?.includes('county')" class="mini-tag">{{ roleNames.county || '区县' }}</view>
|
||||
<view v-if="agentInfo.is_partner || agentInfo.identities?.includes('partner')" class="mini-tag">{{ roleNames.partner || '合伙股东' }}</view>
|
||||
<view class="ss-iconfont uicon-arrow-right" style="color: #fff; font-size: 28rpx">
|
||||
</view>
|
||||
<view v-if="agentInfo.is_partner || agentInfo.identities?.includes('partner')" class="mini-tag">{{ roleNames.partner || '团队成员' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -34,7 +35,7 @@
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
@@ -64,102 +65,115 @@
|
||||
}
|
||||
return rawName || '';
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 用户资料卡片
|
||||
.user-card {
|
||||
width: 690rpx;
|
||||
min-height: 192rpx;
|
||||
width: 694rpx;
|
||||
min-height: 196rpx;
|
||||
height: auto;
|
||||
margin: -88rpx 20rpx 0 20rpx;
|
||||
padding-top: 88rpx;
|
||||
margin: -88rpx auto 0;
|
||||
padding: 92rpx 30rpx 28rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background: v-bind(headerBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.head-img-box {
|
||||
margin-right: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background: #fce0ad;
|
||||
|
||||
.head-img {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
.card-top {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 34rpx;
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 84rpx;
|
||||
height: 42rpx;
|
||||
border: 2rpx solid rgba(#ffffff, 0.33);
|
||||
border-radius: 21rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.head-img-box {
|
||||
margin-right: 22rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background: #fce0ad;
|
||||
box-shadow: 0 4rpx 14rpx rgba(105, 46, 4, 0.15);
|
||||
flex-shrink: 0;
|
||||
|
||||
.look-btn {
|
||||
color: #fff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
.tag-box {
|
||||
background: #ff6000;
|
||||
border-radius: 18rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.tag-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
.head-img {
|
||||
width: 94rpx;
|
||||
height: 94rpx;
|
||||
border-radius: 50%;
|
||||
margin-left: -2rpx;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 24rpx;
|
||||
padding: 0 10rpx;
|
||||
font-weight: 500;
|
||||
line-height: 36rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 2rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tag {
|
||||
margin-left: 8rpx;
|
||||
padding: 0 12rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
font-size: 22rpx;
|
||||
color: #692e04;
|
||||
.user-detail-col {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #522703;
|
||||
line-height: 38rpx;
|
||||
max-width: 360rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-id-pill {
|
||||
margin-left: 14rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: OPPOSANS, sans-serif;
|
||||
color: #8c531b;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 14rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
gap: 8rpx;
|
||||
|
||||
.tag-box {
|
||||
background: linear-gradient(135deg, #ff6b1a 0%, #ff5000 100%);
|
||||
border-radius: 20rpx;
|
||||
height: 36rpx;
|
||||
padding-right: 12rpx;
|
||||
box-shadow: 0 2rpx 6rpx rgba(255, 80, 0, 0.25);
|
||||
|
||||
.tag-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 22rpx;
|
||||
padding: 0 4rpx;
|
||||
font-weight: 600;
|
||||
line-height: 36rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tag {
|
||||
padding: 0 14rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(4px);
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #692e04;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,64 +1,62 @@
|
||||
<!-- 分销明细 -->
|
||||
<!-- 分销明细实时动态 -->
|
||||
<template>
|
||||
<view class="distribution-log-wrap">
|
||||
<view class="header-box">
|
||||
<image
|
||||
class="header-bg"
|
||||
:src="sheep.$url.static('/assets/addons/shopro/uniapp/commission/title2.png')"
|
||||
/>
|
||||
<view class="ss-flex header-title">
|
||||
<view class="title">实时动态</view>
|
||||
<text class="cicon-forward"></text>
|
||||
<!-- 头部栏 -->
|
||||
<view class="log-header ss-flex ss-row-between ss-col-center">
|
||||
<view class="header-left ss-flex ss-col-center">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title">实时动态</text>
|
||||
</view>
|
||||
<text class="sub-hint">团队实时变动</text>
|
||||
</view>
|
||||
|
||||
<!-- 滚动列表 -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadmore"
|
||||
class="scroll-box log-scroll"
|
||||
scroll-with-animation="true"
|
||||
>
|
||||
<view v-if="state.pagination.data">
|
||||
<view v-if="state.pagination.data && state.pagination.data.length > 0">
|
||||
<view
|
||||
class="log-item-box ss-flex ss-row-between"
|
||||
class="log-item-box ss-flex ss-row-between ss-col-center"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="log-item-wrap">
|
||||
<view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
v-if="item.oper_type === 'user'"
|
||||
class="log-img"
|
||||
:src="sheep.$url.cdn(item.oper?.avatar)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else-if="item.oper_type === 'admin'"
|
||||
class="log-img"
|
||||
:src="
|
||||
sheep.$url.static('/assets/addons/shopro/uniapp/avatar/default_user.png')
|
||||
"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/notice.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="log-text ss-ellipsis-1">{{ item.remark }}</view>
|
||||
</view>
|
||||
<view class="log-item-left ss-flex ss-col-center ss-flex-1 ss-line-1">
|
||||
<image
|
||||
v-if="item.oper_type === 'user'"
|
||||
class="log-img"
|
||||
:src="sheep.$url.cdn(item.oper?.avatar)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else-if="item.oper_type === 'admin'"
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/default_user.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/notice.png')"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<text class="log-text ss-line-1">{{ item.remark }}</text>
|
||||
</view>
|
||||
<text class="log-time">{{ dayjs(item.createtime).fromNow() }}</text>
|
||||
<text class="log-time ss-m-l-16">{{ dayjs(item.createtime).fromNow() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-wrap ss-flex ss-row-center ss-col-center">
|
||||
<text class="empty-text">暂无团队实时动态</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
color="#333333"
|
||||
color="#999999"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
@@ -67,7 +65,7 @@
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@@ -98,6 +96,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getLog();
|
||||
|
||||
// 加载更多
|
||||
@@ -110,80 +109,95 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-log-wrap {
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 694rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid rgba(224, 185, 130, 0.3);
|
||||
box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
.header-box {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
position: relative;
|
||||
.header-bg {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
.header-title {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
padding: 22rpx 28rpx 18rpx 28rpx;
|
||||
background: linear-gradient(180deg, #fffcf6 0%, #ffffff 100%);
|
||||
border-bottom: 1rpx solid #f6f0e4;
|
||||
|
||||
.header-left {
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(180deg, #ff6000 0%, #ff9500 100%);
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.cicon-forward {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #522703;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
.log-scroll {
|
||||
height: 600rpx;
|
||||
background: #fdfae9;
|
||||
padding: 10rpx 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
|
||||
.log-item-box {
|
||||
margin-bottom: 20rpx;
|
||||
.log-time {
|
||||
// margin-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
.sub-hint {
|
||||
font-size: 22rpx;
|
||||
color: #b5906a;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.log-scroll {
|
||||
max-height: 520rpx;
|
||||
background: #ffffff;
|
||||
padding: 8rpx 28rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.log-item-box {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #faf6f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.loadmore-wrap {
|
||||
// line-height: 80rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
// background: rgba(#ffffff, 0.2);
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx 20rpx 6rpx 12rpx;
|
||||
|
||||
.log-item-left {
|
||||
.log-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
margin-right: 14rpx;
|
||||
flex-shrink: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.log-text {
|
||||
max-width: 480rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 22rpx;
|
||||
font-family: OPPOSANS, sans-serif;
|
||||
color: #a1a1aa;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
padding: 60rpx 0;
|
||||
|
||||
.empty-text {
|
||||
font-size: 24rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<!-- 分销商菜单栏 -->
|
||||
<!-- 分销商功能专区菜单栏 -->
|
||||
<template>
|
||||
<view class="menu-box ss-flex-col">
|
||||
<view class="header-box">
|
||||
<image class="header-bg" :src="sheep.$url.static('/assets/addons/shopro/uniapp/commission/title1.png')" />
|
||||
<view class="ss-flex header-title">
|
||||
<view class="title">功能专区</view>
|
||||
<text class="cicon-forward"></text>
|
||||
<!-- 头部栏 -->
|
||||
<view class="menu-header ss-flex ss-row-between ss-col-center">
|
||||
<view class="header-left ss-flex ss-col-center">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title">功能专区</text>
|
||||
</view>
|
||||
<text class="sub-hint">快捷业务入口</text>
|
||||
</view>
|
||||
|
||||
<!-- 菜单网格 -->
|
||||
<view class="menu-list ss-flex ss-flex-wrap">
|
||||
<view
|
||||
v-for="(item, index) in menuList"
|
||||
@@ -15,11 +18,13 @@
|
||||
class="item-box ss-flex-col ss-col-center"
|
||||
@tap="sheep.$router.go(item.path)"
|
||||
>
|
||||
<image
|
||||
class="menu-icon ss-m-b-10"
|
||||
:src="sheep.$url.static(item.img)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="icon-wrap ss-flex ss-row-center ss-col-center">
|
||||
<image
|
||||
class="menu-icon"
|
||||
:src="sheep.$url.static(item.img)"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="menu-title">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -32,58 +37,58 @@
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const allMenus = [
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon1.png',
|
||||
title: '我的团队',
|
||||
path: '/pages/commission/team',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
|
||||
title: '收益明细',
|
||||
path: '/pages/commission/rewards',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
|
||||
title: '我的收益',
|
||||
path: '/pages/user/wallet/commission',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
|
||||
title: '我的dmepa',
|
||||
path: '/pages/commission/madow',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
|
||||
title: '兑换券',
|
||||
path: '/pages/commission/voucher',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
|
||||
title: '推广订单',
|
||||
path: '/pages/commission/order',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon7.png',
|
||||
title: '邀请海报',
|
||||
path: 'action:showShareModal',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon8.png',
|
||||
title: '分享记录',
|
||||
path: '/pages/commission/share-log',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
|
||||
title: '我的资料',
|
||||
path: '/pages/commission/apply',
|
||||
isAgentFrom: true,
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon4.png',
|
||||
title: '推广商品',
|
||||
path: '/pages/commission/goods',
|
||||
hideInPartner: true,
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon1.png',
|
||||
title: '我的团队',
|
||||
path: '/pages/commission/team',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
|
||||
title: '收益明细',
|
||||
path: '/pages/commission/rewards',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
|
||||
title: '我的收益',
|
||||
path: '/pages/user/wallet/commission',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
|
||||
title: '我的dmepa',
|
||||
path: '/pages/commission/madow',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
|
||||
title: '兑换券',
|
||||
path: '/pages/commission/voucher',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
|
||||
title: '推广订单',
|
||||
path: '/pages/commission/order',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon7.png',
|
||||
title: '邀请海报',
|
||||
path: 'action:showShareModal',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon8.png',
|
||||
title: '分享记录',
|
||||
path: '/pages/commission/share-log',
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
|
||||
title: '我的资料',
|
||||
path: '/pages/commission/apply',
|
||||
isAgentFrom: true,
|
||||
},
|
||||
{
|
||||
img: '/assets/addons/shopro/uniapp/commission/commission_icon4.png',
|
||||
title: '推广商品',
|
||||
path: '/pages/commission/goods',
|
||||
hideInPartner: true,
|
||||
},
|
||||
];
|
||||
|
||||
const menuList = computed(() =>
|
||||
@@ -97,62 +102,82 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-box {
|
||||
margin: 0 auto;
|
||||
width: 690rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 694rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid rgba(224, 185, 130, 0.3);
|
||||
box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.header-box {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
position: relative;
|
||||
.header-bg {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
|
||||
.menu-header {
|
||||
padding: 22rpx 28rpx 18rpx 28rpx;
|
||||
background: linear-gradient(180deg, #fffcf6 0%, #ffffff 100%);
|
||||
border-bottom: 1rpx solid #f6f0e4;
|
||||
|
||||
.header-left {
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(180deg, #ff6000 0%, #ff9500 100%);
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #522703;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
.header-title {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
|
||||
.sub-hint {
|
||||
font-size: 22rpx;
|
||||
color: #b5906a;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.cicon-forward {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 30rpx 0 10rpx 0;
|
||||
background: #fdfae9;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
padding: 28rpx 12rpx 10rpx 12rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: 25%;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
transition: transform 0.15s ease;
|
||||
|
||||
.menu-icon {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.93);
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #595959;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
.icon-wrap {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: #faf6f0;
|
||||
box-shadow: 0 2rpx 8rpx rgba(105, 46, 4, 0.06);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -278,93 +278,94 @@
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
// 30 天收益保活与预警倒计时看板
|
||||
.active-countdown-card {
|
||||
width: 694rpx;
|
||||
margin: 16rpx auto 0;
|
||||
padding: 24rpx 28rpx;
|
||||
margin: 16rpx auto 20rpx;
|
||||
padding: 22rpx 26rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
|
||||
|
||||
// 正常活跃状态
|
||||
// 正常活跃状态 (翡翠绿主题)
|
||||
&.status-active {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
|
||||
border: 1rpx solid #bbf7d0;
|
||||
box-shadow: 0 4rpx 16rpx rgba(187, 247, 208, 0.35);
|
||||
background: linear-gradient(135deg, #f7fdf9 0%, #ffffff 100%);
|
||||
border: 1rpx solid rgba(16, 185, 129, 0.25);
|
||||
|
||||
.status-icon-box {
|
||||
background: #dcfce7;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
.status-title-text {
|
||||
color: #166534;
|
||||
}
|
||||
.pill-active {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
border: 1rpx solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
.btn-active {
|
||||
background: #059669;
|
||||
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(5, 150, 105, 0.25);
|
||||
}
|
||||
.digit-box {
|
||||
background: #ecfdf5;
|
||||
border: 1rpx solid #a7f3d0;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #bbf7d0;
|
||||
.num {
|
||||
color: #059669;
|
||||
}
|
||||
.unit {
|
||||
color: #047857;
|
||||
}
|
||||
.unit {
|
||||
color: #065f46;
|
||||
}
|
||||
}
|
||||
.colon {
|
||||
color: #059669;
|
||||
color: #10b981;
|
||||
}
|
||||
}
|
||||
|
||||
// 临期预警状态
|
||||
// 临期预警状态 (琥珀橙主题)
|
||||
&.status-expiring {
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
|
||||
border: 1rpx solid #fed7aa;
|
||||
box-shadow: 0 4rpx 18rpx rgba(253, 186, 116, 0.45);
|
||||
background: linear-gradient(135deg, #fffcf5 0%, #ffffff 100%);
|
||||
border: 1rpx solid rgba(245, 158, 11, 0.28);
|
||||
|
||||
.status-icon-box {
|
||||
background: #ffedd5;
|
||||
background: #fef3c7;
|
||||
}
|
||||
.status-title-text {
|
||||
color: #9a3412;
|
||||
color: #92400e;
|
||||
}
|
||||
.pill-expiring {
|
||||
background: #ffedd5;
|
||||
color: #c2410c;
|
||||
font-weight: bold;
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
border: 1rpx solid rgba(245, 158, 11, 0.25);
|
||||
}
|
||||
.btn-expiring {
|
||||
background: linear-gradient(90deg, #ea580c 0%, #f97316 100%);
|
||||
background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(234, 88, 12, 0.3);
|
||||
box-shadow: 0 4rpx 14rpx rgba(234, 88, 12, 0.28);
|
||||
}
|
||||
.digit-box {
|
||||
background: #ffedd5;
|
||||
border: 1rpx solid #fdba74;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #fed7aa;
|
||||
.num {
|
||||
color: #c2410c;
|
||||
color: #ea580c;
|
||||
}
|
||||
.unit {
|
||||
color: #9a3412;
|
||||
color: #c2410c;
|
||||
}
|
||||
}
|
||||
.colon {
|
||||
color: #ea580c;
|
||||
color: #f97316;
|
||||
}
|
||||
}
|
||||
|
||||
// 奖励暂停状态
|
||||
// 奖励暂停状态 (玫瑰红主题)
|
||||
&.status-inactive {
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
|
||||
border: 1rpx solid #fecaca;
|
||||
box-shadow: 0 4rpx 16rpx rgba(254, 202, 202, 0.35);
|
||||
background: linear-gradient(135deg, #fdf8f8 0%, #ffffff 100%);
|
||||
border: 1rpx solid rgba(239, 68, 68, 0.25);
|
||||
|
||||
.status-icon-box {
|
||||
background: #fee2e2;
|
||||
@@ -373,22 +374,24 @@
|
||||
color: #991b1b;
|
||||
}
|
||||
.pill-inactive {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
border: 1rpx solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
.btn-inactive {
|
||||
background: #dc2626;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.status-icon-box {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
.icon-symbol {
|
||||
font-size: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-green { color: #059669; }
|
||||
@@ -397,56 +400,66 @@
|
||||
}
|
||||
|
||||
.status-title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 500;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 600;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 52rpx;
|
||||
height: 50rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 26rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.countdown-row {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 12rpx 16rpx;
|
||||
border-radius: 10rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 12rpx 18rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.03);
|
||||
|
||||
.countdown-label {
|
||||
.label-prefix {
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
.label-days-highlight {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin: 0 2rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-family: OPPOSANS, sans-serif;
|
||||
}
|
||||
.label-days-text {
|
||||
font-size: 22rpx;
|
||||
color: #475569;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.timer-digits {
|
||||
.digit-box {
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
min-width: 52rpx;
|
||||
@@ -455,31 +468,33 @@
|
||||
.num {
|
||||
font-family: OPPOSANS, DIN, monospace;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
.unit {
|
||||
font-size: 18rpx;
|
||||
margin-left: 2rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.colon {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
font-size: 22rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inactive-row {
|
||||
background: rgba(254, 226, 226, 0.4);
|
||||
background: rgba(254, 242, 242, 0.6);
|
||||
padding: 14rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid rgba(239, 68, 68, 0.1);
|
||||
|
||||
.inactive-desc {
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #991b1b;
|
||||
line-height: 34rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -494,44 +509,51 @@
|
||||
}
|
||||
|
||||
.footer-tip-text {
|
||||
font-size: 22rpx;
|
||||
font-size: 20rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.footer-right-time {
|
||||
font-size: 20rpx;
|
||||
color: #94a3b8;
|
||||
font-family: OPPOSANS;
|
||||
font-family: OPPOSANS, sans-serif;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 团队作战快捷看板
|
||||
.team-quick-card {
|
||||
width: 694rpx;
|
||||
margin: 20rpx auto 0;
|
||||
padding: 22rpx 28rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 22rpx 26rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fffbf0 100%);
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #ffe8c2;
|
||||
box-shadow: 0 4rpx 16rpx rgba(247, 213, 152, 0.25);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fffdfa 100%);
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid rgba(224, 185, 130, 0.3);
|
||||
box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:active {
|
||||
background-color: #faf7f2;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
background: #fff0e6;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 96, 0, 0.08);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-quick-info {
|
||||
.title-bold {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
font-weight: 700;
|
||||
color: #522703;
|
||||
}
|
||||
.active-badge {
|
||||
font-size: 20rpx;
|
||||
@@ -539,15 +561,17 @@
|
||||
border-radius: 12rpx;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border: 1rpx solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
.amber-badge {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #ffedd5;
|
||||
color: #c2410c;
|
||||
font-weight: 500;
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
font-weight: 600;
|
||||
border: 1rpx solid rgba(245, 158, 11, 0.25);
|
||||
}
|
||||
.warn-badge {
|
||||
font-size: 20rpx;
|
||||
@@ -555,19 +579,22 @@
|
||||
border-radius: 12rpx;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border: 1rpx solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
.team-sub {
|
||||
font-size: 22rpx;
|
||||
color: #a17545;
|
||||
font-family: OPPOSANS;
|
||||
color: #9c7b60;
|
||||
font-family: OPPOSANS, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.team-quick-right {
|
||||
flex-shrink: 0;
|
||||
|
||||
.manage-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #ff6000;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户