From a34be9c3c724e9c1ca83dba3153d7ce6f3e4f406 Mon Sep 17 00:00:00 2001
From: "wangmingyong@163.com" <wangmingyong@163.com>
Date: Fri, 24 Jul 2026 18:01:14 +0800
Subject: [PATCH] =?UTF-8?q?UI=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../enforcement/my/task/cp_task_mine.vue      | 238 ++++++++++--------
 1 file changed, 128 insertions(+), 110 deletions(-)

diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/task/cp_task_mine.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/task/cp_task_mine.vue
index 917c397b..eb31d80f 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/task/cp_task_mine.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/my/task/cp_task_mine.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="task-page">
         <!-- 顶部导航 -->
-        <div class="nav-bar">
+        <!-- <div class="nav-bar">
             <div class="nav-back" @click="onBack">
                 <van-icon name="arrow-left" size="20" color="#333" />
             </div>
             <div class="nav-title">我的任务</div>
             <div class="nav-right"></div>
-        </div>
+        </div> -->
 
         <!-- 月份切换 -->
         <div class="month-switch">
             <div class="month-arrow" @click="onPrevMonth">
-                <van-icon name="arrow-left" size="16" color="#2382cf" />
+                <van-icon name="arrow-left" size="16" color="#333333" />
             </div>
             <div class="month-text" @click="showMonthPicker = true">
                 {{ currentYear }}年{{ currentMonth }}月
             </div>
             <div class="month-arrow" @click="onNextMonth">
-                <van-icon name="arrow" size="16" color="#2382cf" />
+                <van-icon name="arrow" size="16" color="#333333" />
             </div>
         </div>
 
@@ -28,17 +28,12 @@
                 <div class="week-cell" v-for="w in weekDays" :key="w">{{ w }}</div>
             </div>
             <div class="date-grid">
-                <div
-                    v-for="(cell, idx) in calendarCells"
-                    :key="idx"
-                    class="date-cell"
-                    :class="{
-                        'other-month': !cell.isCurrentMonth,
-                        'is-today': cell.isToday,
-                        'is-selected': cell.isSelected,
-                    }"
-                    @click="onSelectDate(cell)"
-                >
+                <div v-for="(cell, idx) in calendarCells" :key="idx" class="date-cell" :class="{
+                    'other-month': !cell.isCurrentMonth,
+                    'is-today': cell.isToday,
+                    'is-selected': cell.isSelected,
+                    'is-weekend': cell.isWeekend,
+                }" @click="onSelectDate(cell)">
                     <span class="date-num">{{ cell.day }}</span>
                     <span class="date-lunar">{{ cell.lunar }}</span>
                     <span v-if="cell.hasDot && cell.isCurrentMonth" class="date-dot"></span>
@@ -48,7 +43,7 @@
 
         <!-- 任务数量 -->
         <div class="task-count">
-            今天共 <span class="count-num">{{ taskList.length }}</span> 个任务
+            今天共<span class="count-num">{{ taskList.length }}</span>个任务
         </div>
 
         <!-- 任务列表 -->
@@ -60,12 +55,7 @@
                 <van-empty description="当天暂无任务" />
             </div>
             <div v-else class="task-list">
-                <div
-                    v-for="item in taskList"
-                    :key="item.id"
-                    class="task-card"
-                    @click="onTaskClick(item)"
-                >
+                <div v-for="item in taskList" :key="item.id" class="task-card" @click="onTaskClick(item)">
                     <div class="task-time-col">
                         <div class="time-label">{{ getTimeLabel(item) }}</div>
                         <div class="time-date">{{ getShortDate(item) }}</div>
@@ -91,7 +81,8 @@
                             </div>
                             <div class="detail-row">
                                 <div class="detail-label">执法人员：</div>
-                                <div class="detail-value">{{ formatUserInfo(item.enforceUserNames, item.enforceUserTels) }}</div>
+                                <div class="detail-value">{{ formatUserInfo(item.enforceUserNames, item.enforceUserTels)
+                                    }}</div>
                             </div>
                         </div>
                         <!-- 联合执法关联计划 -->
@@ -107,7 +98,8 @@
                                 </div>
                                 <div class="detail-row">
                                     <div class="detail-label">执法人员：</div>
-                                    <div class="detail-value">{{ formatUserInfo(ap.enforceUserNames, ap.enforceUserTels) }}</div>
+                                    <div class="detail-value">{{ formatUserInfo(ap.enforceUserNames, ap.enforceUserTels)
+                                        }}</div>
                                 </div>
                             </div>
                         </template>
@@ -118,13 +110,8 @@
 
         <!-- 月份选择弹窗 -->
         <van-popup v-model:show="showMonthPicker" position="bottom" round>
-            <van-date-picker
-                v-model="monthPickerValue"
-                title="选择月份"
-                :columns-type="['year', 'month']"
-                @confirm="onMonthPickerConfirm"
-                @cancel="showMonthPicker = false"
-            />
+            <van-date-picker v-model="monthPickerValue" title="选择月份" :columns-type="['year', 'month']"
+                @confirm="onMonthPickerConfirm" @cancel="showMonthPicker = false" />
         </van-popup>
     </div>
 </template>
@@ -132,12 +119,13 @@
 <script setup name="cpTaskMine">
 import { useRouter, useRoute } from 'vue-router';
 import { getMyTaskList, getMyTaskDates, getMyTaskAssociatedPlans } from '@/api/enforcement/task';
+import { getLunarDay } from '@/util/lunar';
 
 const router = useRouter();
 const route = useRoute();
 
 // ========== 日历相关 ==========
-const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+const weekDays = ['一', '二', '三', '四', '五', '六', '日'];
 const today = new Date();
 
 // 从路由参数恢复年月日，若无则默认当天
@@ -157,26 +145,14 @@ const monthPickerValue = ref([
     String(today.getMonth() + 1).padStart(2, '0'),
 ]);
 
-// 简易农历（仅用于展示，不做精确计算）
-const lunarDays = [
-    '', '初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
-    '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
-    '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十',
-];
-
-const getLunarDay = (date) => {
-    // 简化处理：使用日期的日数模拟农历显示
-    const d = date.getDate();
-    return lunarDays[d] || '';
-};
-
 // 生成日历单元格
 const calendarCells = computed(() => {
     const year = currentYear.value;
     const month = currentMonth.value;
     const firstDay = new Date(year, month - 1, 1);
     const lastDay = new Date(year, month, 0);
-    const startWeekDay = firstDay.getDay(); // 0=Sunday
+    let startWeekDay = firstDay.getDay();
+    startWeekDay = (startWeekDay + 6) % 7;
     const totalDays = lastDay.getDate();
 
     const cells = [];
@@ -186,6 +162,7 @@ const calendarCells = computed(() => {
     for (let i = startWeekDay - 1; i >= 0; i--) {
         const day = prevMonthLastDay - i;
         const d = new Date(year, month - 2, day);
+        const weekDay = d.getDay();
         cells.push({
             day,
             date: d,
@@ -194,6 +171,7 @@ const calendarCells = computed(() => {
             isToday: false,
             isSelected: false,
             hasDot: false,
+            isWeekend: weekDay === 0 || weekDay === 6,
         });
     }
 
@@ -203,6 +181,7 @@ const calendarCells = computed(() => {
         const dateStr = formatDateStr(d);
         const isToday = dateStr === formatDateStr(today);
         const isSelected = dateStr === formatDateStr(selectedDate.value);
+        const weekDay = d.getDay();
         cells.push({
             day,
             date: d,
@@ -211,6 +190,7 @@ const calendarCells = computed(() => {
             isToday,
             isSelected,
             hasDot: taskDatesSet.value.has(dateStr),
+            isWeekend: weekDay === 0 || weekDay === 6,
         });
     }
 
@@ -218,6 +198,7 @@ const calendarCells = computed(() => {
     const remaining = 42 - cells.length;
     for (let day = 1; day <= remaining; day++) {
         const d = new Date(year, month, day);
+        const weekDay = d.getDay();
         cells.push({
             day,
             date: d,
@@ -226,6 +207,7 @@ const calendarCells = computed(() => {
             isToday: false,
             isSelected: false,
             hasDot: false,
+            isWeekend: weekDay === 0 || weekDay === 6,
         });
     }
 
@@ -436,8 +418,7 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: #f0f6ff;
-    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background: #EBF4FB;
 }
 
 /* 导航栏 */
@@ -453,11 +434,13 @@ onMounted(() => {
         width: 32px;
         cursor: pointer;
     }
+
     .nav-title {
         font-size: 18px;
         font-weight: 600;
         color: #1a1a2e;
     }
+
     .nav-right {
         width: 32px;
     }
@@ -466,12 +449,15 @@ onMounted(() => {
 /* 月份切换 */
 .month-switch {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    padding: 8px 0;
+    // align-items: center;
+    // justify-content: center;
+    gap: 40px;
+    margin: 8px 12px 0px 12px;
+    padding: 8px;
     background: #fff;
     flex-shrink: 0;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 
     .month-arrow {
         width: 24px;
@@ -481,30 +467,36 @@ onMounted(() => {
         justify-content: center;
         cursor: pointer;
     }
+
     .month-text {
-        font-size: 15px;
-        font-weight: 600;
-        color: #2382cf;
+        font-size: 18px;
+        font-weight: 700;
+        color: #333;
         cursor: pointer;
+        text-align: center;
+        width: 600px;
     }
 }
 
 /* 日历 */
 .calendar {
     background: #fff;
-    padding: 0 8px 8px;
+    padding: 0 12px 12px;
     flex-shrink: 0;
+    margin: 0px 12px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 }
 
 .week-header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
-    padding: 4px 0;
+    padding: 8px 0;
 
     .week-cell {
         font-size: 11px;
-        color: #999;
+        color: #333333;
         font-weight: 500;
     }
 }
@@ -512,59 +504,87 @@ onMounted(() => {
 .date-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 1px 0;
+    gap: 4px 0;
 }
 
 .date-cell {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    padding: 3px 0;
-    min-height: 38px;
+    // justify-content: center;
+    padding: 4px 4px;
     cursor: pointer;
     position: relative;
-    border-radius: 6px;
-    transition: background 0.15s;
+    border-radius: 50%;
+    width: 47px;
+    height: 47px;
+    box-sizing: border-box;
 
     .date-num {
-        font-size: 13px;
+        font-size: 16px;
         font-weight: 600;
-        color: #333;
-        line-height: 1.3;
+        color: #1D1F24;
+        height: 19px;
+        // line-height: 1.3;
     }
 
     .date-lunar {
-        font-size: 9px;
-        color: #999;
-        line-height: 1.1;
+        font-size: 10px;
+        color: #666666;
+        // line-height: 1.1;
+        // margin-top: 2px;
     }
 
     .date-dot {
-        width: 4px;
-        height: 4px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
-        background: #2382cf;
-        margin-top: 1px;
+        background: #1978F8;
+        margin-top: 2px;
+        position: absolute;
+        bottom: 2px;
     }
 
     &.other-month {
-        .date-num { color: #ccc; }
-        .date-lunar { color: #ddd; }
+        .date-num {
+            color: #ccc;
+        }
+
+        .date-lunar {
+            color: #ddd;
+        }
     }
 
     &.is-today:not(.is-selected) {
         .date-num {
-            color: #2382cf;
+            color: #1978F8;
             font-weight: 700;
         }
     }
 
     &.is-selected {
-        background: #2382cf;
-        .date-num { color: #fff; font-weight: 700; }
-        .date-lunar { color: rgba(255,255,255,0.8); }
-        .date-dot { background: #fff; }
+        background: #1978F8;
+
+        // width:47px;
+        // height: 47px;
+        .date-num {
+            color: #fff;
+            font-weight: 700;
+        }
+
+        .date-lunar {
+            color: rgba(255, 255, 255, 0.8);
+        }
+
+        .date-dot {
+            background: #fff;
+        }
+    }
+
+    &.is-weekend:not(.is-selected) {
+        .date-num {
+            color: #999999;
+        }
     }
 }
 
@@ -572,13 +592,13 @@ onMounted(() => {
 .task-count {
     padding: 12px 16px 8px;
     font-size: 14px;
-    color: #666;
+    color: #999;
     flex-shrink: 0;
 
     .count-num {
-        font-size: 18px;
-        font-weight: 700;
-        color: #2382cf;
+        font-size: 14px;
+        // font-weight: 700;
+        color: #1367FE;
     }
 }
 
@@ -616,9 +636,9 @@ onMounted(() => {
     padding-top: 10px;
 
     .time-label {
-        font-size: 15px;
+        font-size: 16px;
         font-weight: 700;
-        color: #1a1a2e;
+        color: #1D1F24;
     }
 
     .time-date {
@@ -632,41 +652,37 @@ onMounted(() => {
     flex: 1;
     min-width: 0;
     background: #fff;
-    border-left: 3px solid #2382cf;
-    border-radius: 10px;
-    padding: 14px 16px;
+    border-radius: 8px;
+    padding: 12px;
     box-shadow: 0 2px 10px rgba(44, 116, 190, 0.07);
 }
 
 .task-title-row {
     display: flex;
     align-items: center;
-    gap: 6px;
-    margin-bottom: 6px;
 }
 
 .task-title {
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 700;
-    color: #1a1a2e;
+    color: #1D1F24;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex: 1;
 }
 
 .union-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    border-radius: 4px;
-    background: #2382cf;
+    text-align: center;
+    line-height: 20px;
+    width: 18px;
+    height: 17px;
+    border-radius: 2px;
+    background: #1367FE;
     color: #fff;
-    font-size: 12px;
+    font-size: 10px;
     font-weight: 600;
-    flex-shrink: 0;
+    margin-left: 4px; 
+    box-sizing: border-box;
 }
 
 .task-time-info {
@@ -675,18 +691,18 @@ onMounted(() => {
     gap: 4px;
     font-size: 13px;
     color: #999;
-    margin-bottom: 10px;
+    padding: 8px 0px;
 }
 
 .task-divider {
-    border-bottom: 1px dashed #999;
+    border-bottom: 1px solid #f6f6f6;
     margin-bottom: 10px;
 }
 
 .task-detail-section {
     padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px dashed #999;
+    // margin-bottom: 10px;
+    // border-bottom: 1px dashed #999
 
     &:last-child {
         border-bottom: none;
@@ -710,13 +726,15 @@ onMounted(() => {
 .detail-label {
     width: 72px;
     flex-shrink: 0;
-    color: #222;
+    color: #1D1F24;
     font-weight: 500;
+    font-size: 12px;
 }
 
 .detail-value {
     flex: 1;
-    color: #444;
+    color: #666666;
     white-space: pre-line;
+    font-size: 12px;
 }
 </style>