优化小程序报销模块
This commit is contained in:
hero920103 committed
1 parent
1e9666cefd
commit
48f3bd997c
21 files changed
+5738
-1750
No files matched your search
@@ -1,157 +1,150 @@
|
||||
<template>
|
||||
<view class="oa-dash">
|
||||
<!-- 待办概览：今日 / 本周 / 本月 未完成 -->
|
||||
<view class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">待办概览</text>
|
||||
<text v-if="overdue > 0" class="dash-badge">逾期 {{ overdue }}</text>
|
||||
</view>
|
||||
<view class="todo-row">
|
||||
<view class="todo-cell">
|
||||
<text class="todo-value">{{ todayPending }}</text>
|
||||
<text class="todo-label">今日待办</text>
|
||||
<text class="todo-sub">共 {{ num(ss.today_total) }} · 完成 {{ num(ss.today_done) }}</text>
|
||||
</view>
|
||||
<view class="todo-cell">
|
||||
<text class="todo-value">{{ weekPending }}</text>
|
||||
<text class="todo-label">本周待办</text>
|
||||
<text class="todo-sub">共 {{ num(ss.week_total) }} · 完成 {{ num(ss.week_done) }}</text>
|
||||
</view>
|
||||
<view class="todo-cell">
|
||||
<text class="todo-value">{{ monthPending }}</text>
|
||||
<text class="todo-label">本月待办</text>
|
||||
<text class="todo-sub">共 {{ num(ss.month_total) }} · 完成 {{ num(ss.month_done) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的报销：本周 / 本月 / 本年 已打款金额 -->
|
||||
<view class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">我的报销</text>
|
||||
</view>
|
||||
<view class="money-row">
|
||||
<view v-for="item in moneyCards" :key="item.label" class="money-cell">
|
||||
<text class="money-label">{{ item.label }}</text>
|
||||
<view class="money-amount">
|
||||
<text class="currency">¥</text>
|
||||
<text class="number">{{ money(item.data.paid) }}</text>
|
||||
<!-- ============ 上半：公告 + 数据统计 ============ -->
|
||||
<template v-if="part !== 'bottom'">
|
||||
<!-- 通知公告 -->
|
||||
<view class="dash-card">
|
||||
<view class="dash-head">
|
||||
<view class="dash-head-left">
|
||||
<view class="head-icon hi-notice">
|
||||
<FaIcon name="bullhorn" color="#2563eb" :size="12" />
|
||||
</view>
|
||||
<text class="dash-title">公告</text>
|
||||
</view>
|
||||
<text class="money-meta">{{ num(item.data.count) }} 单 · 待报 ¥{{ money(item.data.unpaid) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 近 6 个月报销趋势（CSS 双色堆叠柱，移动端不引 echarts） -->
|
||||
<view v-if="trend.length" class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">近6个月报销趋势</text>
|
||||
<view class="legend">
|
||||
<view class="legend-item"><view class="legend-dot paid" /><text>已报销</text></view>
|
||||
<view class="legend-item"><view class="legend-dot unpaid" /><text>未报销</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="trend-chart">
|
||||
<view v-for="t in trend" :key="t.month" class="trend-col">
|
||||
<view class="trend-bar-wrap">
|
||||
<view class="trend-bar unpaid" :style="{ height: barH(t.unpaid) }" />
|
||||
<view class="trend-bar paid" :style="{ height: barH(t.paid) }" />
|
||||
<view class="dash-more" @tap="emit('view-notices')">
|
||||
<text class="dash-more-text">查看全部</text>
|
||||
<FaIcon name="chevron-right" color="#94a3b8" :size="11" />
|
||||
</view>
|
||||
<text class="trend-month">{{ monthLabel(t.month) }}</text>
|
||||
</view>
|
||||
<view v-if="!notices.length" class="dash-empty">
|
||||
<FaIcon name="bullhorn" color="#c0c4cc" :size="24" />
|
||||
<text class="dash-empty-text">暂无公告</text>
|
||||
</view>
|
||||
<!-- 单行垂直轮播公告 -->
|
||||
<swiper
|
||||
v-else
|
||||
class="notice-swiper"
|
||||
vertical
|
||||
autoplay
|
||||
circular
|
||||
:interval="3000"
|
||||
:duration="500"
|
||||
>
|
||||
<swiper-item v-for="n in notices" :key="n.id" @tap="emit('view-notices')">
|
||||
<view class="notice-line">
|
||||
<view class="notice-main">
|
||||
<text class="notice-tag" :class="'nt-' + (n.notice_type || 0)">
|
||||
{{ noticeTypeLabel(n.notice_type) }}
|
||||
</text>
|
||||
<text v-if="n.is_top === 1" class="notice-top">置顶</text>
|
||||
<text class="notice-title">{{ n.title }}</text>
|
||||
</view>
|
||||
<text class="notice-time">{{ noticeTime(n.publish_time) }}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态分布（CSS 进度条） -->
|
||||
<view v-if="statusList.length" class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">状态分布</text>
|
||||
</view>
|
||||
<view v-for="s in statusList" :key="s.key" class="dist-row">
|
||||
<text class="dist-name" :style="{ color: statusColor(s.key) }">{{ s.name }}</text>
|
||||
<view class="dist-bar-wrap">
|
||||
<view class="dist-bar" :style="{ width: s.pct, background: statusColor(s.key) }" />
|
||||
</view>
|
||||
<text class="dist-count">{{ num(s.count) }}单 / ¥{{ money(s.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 报销类型分析（仅已打款费用明细） -->
|
||||
<view v-if="expenseTypes.length" class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">报销类型分析</text>
|
||||
</view>
|
||||
<view v-for="e in expenseTypesTop" :key="e.name" class="type-row">
|
||||
<text class="type-name">{{ e.name }}</text>
|
||||
<view class="type-bar-wrap">
|
||||
<view class="type-bar" :style="{ width: typePct(e.amount) }" />
|
||||
</view>
|
||||
<text class="type-amount">¥{{ money(e.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通知公告 -->
|
||||
<view class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">通知公告</text>
|
||||
<view class="dash-more" @tap="emit('view-notices')">
|
||||
<text class="dash-more-text">查看全部</text>
|
||||
<FaIcon name="chevron-right" color="#94a3b8" :size="11" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!notices.length" class="dash-empty">
|
||||
<FaIcon name="bullhorn" color="#c0c4cc" :size="24" />
|
||||
<text class="dash-empty-text">暂无公告</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="n in notices"
|
||||
:key="n.id"
|
||||
class="notice-item"
|
||||
@tap="emit('view-notices')"
|
||||
>
|
||||
<view class="notice-main">
|
||||
<text class="notice-tag" :class="'nt-' + (n.notice_type || 0)">
|
||||
{{ noticeTypeLabel(n.notice_type) }}
|
||||
</text>
|
||||
<text v-if="n.is_top === 1" class="notice-top">置顶</text>
|
||||
<text class="notice-title">{{ n.title }}</text>
|
||||
</view>
|
||||
<text class="notice-time">{{ noticeTime(n.publish_time) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 工作日程提醒（今日） -->
|
||||
<view class="dash-card">
|
||||
<view class="dash-head">
|
||||
<text class="dash-title">工作日程提醒</text>
|
||||
<view class="dash-more" @tap="emit('view-schedules')">
|
||||
<text class="dash-more-text">查看全部</text>
|
||||
<FaIcon name="chevron-right" color="#94a3b8" :size="11" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!todaySchedules.length" class="dash-empty">
|
||||
<FaIcon name="calendar-day" color="#c0c4cc" :size="24" />
|
||||
<text class="dash-empty-text">今日暂无日程</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="s in todaySchedules"
|
||||
:key="s.id"
|
||||
class="sched-item"
|
||||
:class="{ done: s.status === 1 }"
|
||||
@tap="emit('view-schedules')"
|
||||
>
|
||||
<view class="sched-dot" :style="{ background: s.status === 1 ? '#cbd5e1' : (s.color || '#2563eb') }" />
|
||||
<view class="sched-main">
|
||||
<view class="sched-title-row">
|
||||
<text class="sched-title" :class="{ done: s.status === 1 }">{{ s.title }}</text>
|
||||
<text v-if="s.priority > 0" class="sched-priority" :class="s.priority === 2 ? 'p-urgent' : 'p-important'">
|
||||
{{ s.priority === 2 ? '紧急' : '重要' }}
|
||||
</text>
|
||||
<!-- 数据统计：待办 + 报销 -->
|
||||
<view class="dash-card">
|
||||
<view class="dash-head">
|
||||
<view class="dash-head-left">
|
||||
<view class="head-icon hi-stat">
|
||||
<FaIcon name="chart-column" color="#2563eb" :size="12" />
|
||||
</view>
|
||||
<text class="dash-title">数据统计</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 待办 -->
|
||||
<view class="stat-tile" @tap="emit('view-schedules')">
|
||||
<view class="stat-tile-head">
|
||||
<view class="tile-icon ti-todo">
|
||||
<FaIcon name="clipboard-list" color="#2563eb" :size="11" />
|
||||
</view>
|
||||
<text class="tile-name">待办</text>
|
||||
<text v-if="overdue > 0" class="dash-badge">逾期 {{ overdue }}</text>
|
||||
<FaIcon name="chevron-right" color="#c0c4cc" :size="10" />
|
||||
</view>
|
||||
<view class="stat-row">
|
||||
<view class="stat-cell">
|
||||
<text class="stat-value primary">{{ todayPending }}</text>
|
||||
<text class="stat-label">今日</text>
|
||||
<text class="stat-sub">共 {{ num(ss.today_total) }} · 完成 {{ num(ss.today_done) }}</text>
|
||||
</view>
|
||||
<view class="stat-cell">
|
||||
<text class="stat-value primary">{{ weekPending }}</text>
|
||||
<text class="stat-label">本周</text>
|
||||
<text class="stat-sub">共 {{ num(ss.week_total) }} · 完成 {{ num(ss.week_done) }}</text>
|
||||
</view>
|
||||
<view class="stat-cell">
|
||||
<text class="stat-value primary">{{ monthPending }}</text>
|
||||
<text class="stat-label">本月</text>
|
||||
<text class="stat-sub">共 {{ num(ss.month_total) }} · 完成 {{ num(ss.month_done) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 报销 -->
|
||||
<view class="stat-tile">
|
||||
<view class="stat-tile-head">
|
||||
<view class="tile-icon ti-money">
|
||||
<FaIcon name="money-bill-wave" color="#10b981" :size="11" />
|
||||
</view>
|
||||
<text class="tile-name">报销</text>
|
||||
</view>
|
||||
<view class="stat-row">
|
||||
<view v-for="item in moneyCards" :key="item.label" class="stat-cell">
|
||||
<view class="stat-amount">
|
||||
<text class="stat-currency">¥</text>
|
||||
<text class="stat-value">{{ money(item.data.paid) }}</text>
|
||||
</view>
|
||||
<text class="stat-label">{{ item.label }}</text>
|
||||
<text class="stat-sub">{{ num(item.data.count) }} 单 · 待报 ¥{{ money(item.data.unpaid) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="sched-time">{{ schedTime(s) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- ============ 下半：报销趋势 + 状态分布 ============ -->
|
||||
<template v-else>
|
||||
<view v-if="trend.length || statusList.length" class="dash-card">
|
||||
<view class="dash-head">
|
||||
<view class="dash-head-left">
|
||||
<view class="head-icon hi-trend">
|
||||
<FaIcon name="chart-column" color="#8b5cf6" :size="12" />
|
||||
</view>
|
||||
<text class="dash-title">近6个月报销趋势</text>
|
||||
</view>
|
||||
<view class="legend">
|
||||
<view class="legend-item"><view class="legend-dot paid" /><text>已报销</text></view>
|
||||
<view class="legend-item"><view class="legend-dot unpaid" /><text>未报销</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="trend.length" class="trend-chart">
|
||||
<view v-for="t in trend" :key="t.month" class="trend-col">
|
||||
<view class="trend-bar-wrap">
|
||||
<view class="trend-bar unpaid" :style="{ height: barH(t.unpaid) }" />
|
||||
<view class="trend-bar paid" :style="{ height: barH(t.paid) }" />
|
||||
</view>
|
||||
<text class="trend-month">{{ monthLabel(t.month) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态分布 -->
|
||||
<view v-if="statusList.length" class="status-block">
|
||||
<text class="status-title">状态分布</text>
|
||||
<view v-for="s in statusList" :key="s.key" class="dist-row">
|
||||
<text class="dist-name" :style="{ color: statusColor(s.key) }">{{ s.name }}</text>
|
||||
<view class="dist-bar-wrap">
|
||||
<view class="dist-bar" :style="{ width: s.pct, background: statusColor(s.key) }" />
|
||||
</view>
|
||||
<text class="dist-count">{{ num(s.count) }}单 / ¥{{ money(s.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -160,7 +153,9 @@ import { computed } from 'vue'
|
||||
import FaIcon from '@/components/FaIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: { type: Object, default: () => ({}) }
|
||||
data: { type: Object, default: () => ({}) },
|
||||
// top：公告 + 数据统计；bottom：报销趋势 + 状态分布（中间由首页插入「常用功能」）
|
||||
part: { type: String, default: 'top' }
|
||||
})
|
||||
const emit = defineEmits(['view-notices', 'view-schedules'])
|
||||
|
||||
@@ -205,19 +200,8 @@ const statusList = computed(() => {
|
||||
.map((x) => ({ ...x, pct: Math.round((num(x.count) / total) * 100) + '%' }))
|
||||
})
|
||||
|
||||
// ---------- 报销类型分析 ----------
|
||||
const expenseTypes = computed(() => rb.value.expense_types || [])
|
||||
const expenseTypesTop = computed(() => expenseTypes.value.slice(0, 6))
|
||||
const expMax = computed(() => {
|
||||
let m = 1
|
||||
expenseTypes.value.forEach((e) => { m = Math.max(m, num(e.amount)) })
|
||||
return m
|
||||
})
|
||||
const typePct = (a) => Math.round((num(a) / expMax.value) * 100) + '%'
|
||||
|
||||
// ---------- 公告 / 日程 ----------
|
||||
// ---------- 公告 ----------
|
||||
const notices = computed(() => props.data?.notices || [])
|
||||
const todaySchedules = computed(() => props.data?.today_schedules || [])
|
||||
|
||||
const noticeTypeLabel = (type) => ({ 1: '公告', 2: '活动' }[type] || '通知')
|
||||
|
||||
@@ -234,12 +218,6 @@ function noticeTime(ts) {
|
||||
return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
|
||||
}
|
||||
|
||||
function schedTime(s) {
|
||||
if (s.all_day === 1) return '全天'
|
||||
if (s.end_time) return `${s.start_time || ''} - ${s.end_time}`
|
||||
return s.start_time || '时间待定'
|
||||
}
|
||||
|
||||
const money = (value) =>
|
||||
Number(value || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
</script>
|
||||
@@ -251,7 +229,6 @@ const money = (value) =>
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.dash-card {
|
||||
@@ -266,6 +243,30 @@ const money = (value) =>
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.dash-head-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.head-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.hi-notice,
|
||||
&.hi-stat {
|
||||
background: $color-primary-bg;
|
||||
}
|
||||
|
||||
&.hi-trend {
|
||||
background: #f3f0ff;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
@@ -304,90 +305,95 @@ const money = (value) =>
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ============ 待办概览 ============ */
|
||||
.todo-row {
|
||||
/* ============ 数据统计：待办 / 报销 双磁贴 ============ */
|
||||
.stat-tile {
|
||||
padding: 20rpx 20rpx 8rpx;
|
||||
border-radius: $radius-md;
|
||||
background: $color-bg-page;
|
||||
|
||||
& + & {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-tile-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.tile-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.ti-todo {
|
||||
background: $color-primary-bg;
|
||||
}
|
||||
|
||||
&.ti-money {
|
||||
background: #ecfdf5;
|
||||
}
|
||||
}
|
||||
|
||||
.tile-name {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.todo-cell {
|
||||
.stat-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
position: relative;
|
||||
|
||||
& + &::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8rpx;
|
||||
bottom: 8rpx;
|
||||
width: 1rpx;
|
||||
background: $color-divider;
|
||||
}
|
||||
gap: 4rpx;
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.todo-value {
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.todo-label {
|
||||
font-size: 24rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.todo-sub {
|
||||
font-size: 20rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ============ 报销统计 ============ */
|
||||
.money-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.money-cell {
|
||||
flex: 1;
|
||||
padding: 20rpx 16rpx;
|
||||
border-radius: $radius-md;
|
||||
background: $color-bg-page;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.money-label {
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.money-amount {
|
||||
.stat-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 22rpx;
|
||||
color: $color-text;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
.stat-currency {
|
||||
font-size: 20rpx;
|
||||
color: $color-text;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
.stat-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
color: $color-text;
|
||||
|
||||
&.primary {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.money-meta {
|
||||
font-size: 20rpx;
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 18rpx;
|
||||
color: $color-text-muted;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -464,9 +470,22 @@ const money = (value) =>
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ============ 分布 / 类型 进度条 ============ */
|
||||
.dist-row,
|
||||
.type-row {
|
||||
/* ============ 状态分布 ============ */
|
||||
.status-block {
|
||||
margin-top: 26rpx;
|
||||
padding-top: 22rpx;
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.dist-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
@@ -482,18 +501,7 @@ const money = (value) =>
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-secondary;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dist-bar-wrap,
|
||||
.type-bar-wrap {
|
||||
.dist-bar-wrap {
|
||||
flex: 1;
|
||||
height: 14rpx;
|
||||
background: $color-divider;
|
||||
@@ -501,35 +509,29 @@ const money = (value) =>
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dist-bar,
|
||||
.type-bar {
|
||||
.dist-bar {
|
||||
height: 100%;
|
||||
border-radius: $radius-full;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.type-bar {
|
||||
background: linear-gradient(90deg, $color-primary, $color-primary-light);
|
||||
}
|
||||
|
||||
.dist-count,
|
||||
.type-amount {
|
||||
.dist-count {
|
||||
flex-shrink: 0;
|
||||
font-size: 20rpx;
|
||||
color: $color-text-muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ============ 公告 ============ */
|
||||
.notice-item {
|
||||
/* ============ 公告（单行垂直轮播） ============ */
|
||||
.notice-swiper {
|
||||
height: 68rpx;
|
||||
}
|
||||
|
||||
.notice-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 18rpx 0;
|
||||
|
||||
& + & {
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
height: 68rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
@@ -579,78 +581,4 @@ const money = (value) =>
|
||||
font-size: 20rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ============ 日程 ============ */
|
||||
.sched-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14rpx;
|
||||
padding: 18rpx 0;
|
||||
|
||||
& + & {
|
||||
border-top: 1rpx solid $color-divider;
|
||||
}
|
||||
|
||||
&.done {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.sched-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sched-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sched-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.sched-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.done {
|
||||
text-decoration: line-through;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.sched-priority {
|
||||
flex-shrink: 0;
|
||||
font-size: 18rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
&.p-important {
|
||||
background: #fffbeb;
|
||||
color: $color-warning;
|
||||
}
|
||||
|
||||
&.p-urgent {
|
||||
background: #fef3f2;
|
||||
color: $color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.sched-time {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user