yunzerwebsite/yunzerwebsiteallinone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化小程序报销模块

Browse Source
This commit is contained in:
hero920103 committed 2026-10-10 14:24:44 +08:00
1 parent 1e9666cefd
commit 48f3bd997c
21 files changed
+5738 -1750
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

uniapp/components/sub/SubHome.vue
+92 -42
View File
@@ -37,15 +37,19 @@
</view>
<block v-else>
<!-- OA 工作台仪表盘（Web 版内容搬到首页顶部） -->
<!-- 首页卡片流：flex 纵向 + 统一 gap，避免跨组件 margin 不折叠导致间距不均 -->
<view class="home-stack">
<!-- OA 工作台仪表盘上半：公告 + 数据统计（常用功能插在下面） -->
<SubOaDashboard
v-if="isOa && dash"
part="top"
:data="dash"
@view-notices="goNotices"
@view-schedules="goSchedules"
/>
<!-- 概览 -->
<!-- 概览 / 日程待办 / 最新公告：非 OA 子系统，或 OA 仪表盘加载失败时兜底展示 -->
<block v-if="!(isOa && dash)">
<view class="kpi-card">
<view class="kpi-item">
<text class="kpi-value">{{ leafMenus.length }}</text>
@@ -120,44 +124,58 @@
<text class="list-time">{{ item.publish_time || item.publisher_name || '' }}</text>
</view>
</view>
</view>
</view>
</block>
<!-- 常用功能：与仪表盘卡片统一的样式，点「全部」切到功能页签 -->
<view class="quick-card">
<view class="quick-head">
<view class="quick-head-left">
<view class="head-icon">
<FaIcon name="star" color="#f59e0b" :size="12" />
</view>
<text class="quick-title">常用功能</text>
</view>
<view class="block-more" @tap="goFunctions">
<text class="block-more-text">全部</text>
<FaIcon name="chevron-right" color="#94a3b8" :size="11" />
</view>
</view>
<view class="grid">
<view
v-for="(item, index) in quickMenus"
:key="item.id"
class="cell"
@tap="openMenu(item, item.title)"
>
<view class="fn-card" :class="{ locked: item.locked }">
<view class="tint-icon fn-icon" :class="item.locked ? 'tint-off' : 'tint-' + (index % 8)">
<FaIcon :name="item.icon || fallbackIcon" color="#ffffff" :size="18" />
</view>
<text class="fn-name">{{ item.title }}</text>
</view>
</view>
<!-- 末位固定「+」：点击选择要加入常用功能的功能 -->
<view class="cell">
<view class="fn-card fn-add" @tap="openPicker">
<view class="add-icon">
<FaIcon name="plus" color="#8a94ad" :size="18" />
</view>
<text class="fn-name">添加</text>
</view>
</view>
</view>
</view>
<!-- 常用功能：仪表盘式快捷入口，点「全部」切到功能页签 -->
<view class="block">
<view class="block-head">
<text class="block-title">常用功能</text>
<view class="block-more" @tap="goFunctions">
<text class="block-more-text">全部</text>
<FaIcon name="chevron-right" color="#8a94ad" :size="11" />
</view>
</view>
<view class="quick-card">
<view class="grid">
<view
v-for="(item, index) in quickMenus"
:key="item.id"
class="cell"
@tap="openMenu(item, item.title)"
>
<view class="fn-card" :class="{ locked: item.locked }">
<view class="tint-icon fn-icon" :class="item.locked ? 'tint-off' : 'tint-' + (index % 8)">
<FaIcon :name="item.icon || fallbackIcon" color="#ffffff" :size="18" />
</view>
<text class="fn-name">{{ item.title }}</text>
</view>
</view>
<!-- 末位固定「+」：点击选择要加入常用功能的功能 -->
<view class="cell">
<view class="fn-card fn-add" @tap="openPicker">
<view class="add-icon">
<FaIcon name="plus" color="#8a94ad" :size="18" />
</view>
<text class="fn-name">添加</text>
</view>
</view>
</view>
</view>
<!-- OA 工作台仪表盘下半：报销趋势 + 状态分布 -->
<SubOaDashboard
v-if="isOa && dash"
part="bottom"
:data="dash"
@view-notices="goNotices"
@view-schedules="goSchedules"
/>
</view>
</block>
</block>
@@ -489,8 +507,11 @@ onShow(() => {
padding: 28rpx $page-padding-x 0;
}
.block + .block {
margin-top: 32rpx;
/* 首页卡片流：统一纵向间距（跨组件 margin 不折叠，故用 flex gap） */
.home-stack {
display: flex;
flex-direction: column;
gap: 24rpx;
}
.block-head {
@@ -517,7 +538,6 @@ onShow(() => {
@include card;
display: flex;
padding: 30rpx 0;
margin-bottom: 32rpx;
}
.kpi-item {
@@ -634,9 +654,39 @@ onShow(() => {
/* ============ 常用功能宫格：一行 4 个 ============
cell 占 25% 宽并自带右侧间隙，容器用负 margin 抵消末列间隙，
避免使用 calc 除法——小程序端 wxss 对复杂 calc 支持不稳。 */
/* 与 SubOaDashboard 的 dash-card 保持同一视觉语言 */
.quick-card {
@include card;
padding: 24rpx 20rpx 8rpx;
padding: 26rpx 24rpx 10rpx;
}
.quick-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22rpx;
}
.quick-head-left {
display: flex;
align-items: center;
gap: 12rpx;
}
.head-icon {
width: 40rpx;
height: 40rpx;
border-radius: 12rpx;
background: #fff7e6;
display: flex;
align-items: center;
justify-content: center;
}
.quick-title {
font-size: 28rpx;
font-weight: 600;
color: $color-text;
}
.grid {
@@ -656,7 +706,7 @@ onShow(() => {
height: 100%;
padding: 18rpx 6rpx 16rpx;
border-radius: $radius-md;
background: $color-bg-page;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
uniapp/components/sub/SubOaDashboard.vue
+263 -335
View File
@@ -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>