From 9b4d11ae5ea944ab602225551083aa0475fbec9c Mon Sep 17 00:00:00 2001
From: ningbo <3301955438@qq.com>
Date: Sat, 16 Aug 2025 16:49:52 +0800
Subject: [PATCH] =?UTF-8?q?style(Home):=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一格式化模板中的标签闭合和属性写法
- 添加数量单元格的样式效果和交互状态
- 优化对话框和模态框的样式细节
---
 src/views/Home/index-new-blue.vue | 594 +++++++++++++++++++++---------
 1 file changed, 411 insertions(+), 183 deletions(-)

diff --git a/src/views/Home/index-new-blue.vue b/src/views/Home/index-new-blue.vue
index fd63cce..93e72b1 100644
--- a/src/views/Home/index-new-blue.vue
+++ b/src/views/Home/index-new-blue.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="home-main-box">
     <div class="head-information">
-
       <div>
-        <div class="avatar"><img :src="avatar" alt="avatar"></div>
+        <div class="avatar"><img :src="avatar" alt="avatar" /></div>
         <!--        <div class="avatar"><img src = "./images/test-avatar.jpeg" alt = "avatar"></div>-->
 
         <div class="text-list">
@@ -33,36 +32,48 @@
           </div>
         </div>
       </div>
-      <div style="overflow: hidden;text-overflow: ellipsis">
+      <div style="overflow: hidden; text-overflow: ellipsis">
         <div class="home-page-title">
           <div>我的消息</div>
-          <div @click="showMessageDialog" style="cursor: pointer;">更多 <span>></span></div>
+          <div @click="showMessageDialog" style="cursor: pointer">
+            更多 <span>></span>
+          </div>
         </div>
         <div>
           <div class="home-page-content">
-            <div v-if="!isEmpty(msg_list)" v-for="(v, i) in msg_list" :key="i" class="message-item" @click="showMessageDetail(v, i)">
-              <div>{{ v.content }}</div>
-              <!--             <div>2024-09-24</div>-->
+            <template v-if="!isEmpty(msg_list)">
+              <div
+                v-for="(v, i) in msg_list"
+                :key="i"
+                class="message-item"
+                @click="showMessageDetail(v, i)"
+              >
+                <div>{{ v.content }}</div>
+                <!--             <div>2024-09-24</div>-->
               </div>
-            <div v-else>
-              暂无消息
-            </div>
-
+            </template>
+            <div v-else>暂无消息</div>
           </div>
         </div>
       </div>
-      <div style="overflow: hidden;text-overflow: ellipsis">
+      <div style="overflow: hidden; text-overflow: ellipsis">
         <div class="home-page-title">
           <div>公示栏</div>
-          <div @click="showAnnouncementDialog" style="cursor: pointer;">更多 <span>></span></div>
+          <div @click="showAnnouncementDialog" style="cursor: pointer">
+            更多 <span>></span>
+          </div>
         </div>
         <div>
           <div class="home-page-content">
-            <div v-for="(v, i) in comp_list.slice(0, 9)" :key="i" class="announcement-item" @click="showAnnouncementDetail(v, i)">
+            <div
+              v-for="(v, i) in comp_list.slice(0, 9)"
+              :key="i"
+              class="announcement-item"
+              @click="showAnnouncementDetail(v, i)"
+            >
               <div>{{ v.submitterName }}--{{ v.projectName }} -- 审核通过</div>
               <div>{{ formatTime(v.createTime) }}</div>
             </div>
-
           </div>
         </div>
       </div>
@@ -75,132 +86,194 @@
           <div>更多 <span>></span></div>
         </div>
         <div class="content">
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/basedata/private/fdypic')">
-            <div><img src="./images/6.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/basedata/private/fdypic')"
+          >
+            <div><img src="./images/6.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>画像</div>
           </div>
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/basedata/stu/own')">
-            <div><img src="./images/6.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/basedata/stu/own')"
+          >
+            <div><img src="./images/6.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>学生信息</div>
           </div>
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/stuCQS/class-score/teacher-own')">
-            <div><img src="./images/10.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/stuCQS/class-score/teacher-own')"
+          >
+            <div><img src="./images/10.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>综合素质</div>
           </div>
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/dormitory/new/fdy')">
-            <div><img src="./images/9.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/dormitory/new/fdy')"
+          >
+            <div><img src="./images/9.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>学生宿舍</div>
           </div>
-          <div v-hasPermi="['home:fdy:qgzx']" @click="going('/workstudy/stupost/fdyAll')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:qgzx']"
+            @click="going('/workstudy/stupost/fdyAll')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>勤工助学</div>
           </div>
-          <div v-hasPermi="['home:zdls:qgzx']" @click="going('/workstudy/stupost/ZdlsAll')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:zdls:qgzx']"
+            @click="going('/workstudy/stupost/ZdlsAll')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>指导老师</div>
             <div>勤工助学</div>
           </div>
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/hard/pks/fdyjl')">
-            <div><img src="./images/6.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/hard/pks/fdyjl')"
+          >
+            <div><img src="./images/6.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>困难认定</div>
           </div>
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/hard/zxj/record')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/hard/zxj/record')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>助学金</div>
           </div>
-          <div v-hasPermi="['home:fdy:undo1']" @click="going('/stuGood/about-good/fdyall')">
-            <div><img src="./images/7.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:fdy:undo1']"
+            @click="going('/stuGood/about-good/fdyall')"
+          >
+            <div><img src="./images/7.png" alt="icon" /></div>
             <div>辅导员</div>
             <div>评优评先</div>
           </div>
 
-          <div v-hasPermi="['home:dept:qgzx']" @click="going('/workstudy/post/DeptAll')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:dept:qgzx']"
+            @click="going('/workstudy/post/DeptAll')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>部门领导</div>
             <div>勤工助学</div>
           </div>
 
-          <div v-hasPermi="['home:xw:undo1']" @click="going('/stuCQS/cphxw/stu')">
-            <div><img src="./images/4.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xw:undo1']"
+            @click="going('/stuCQS/cphxw/stu')"
+          >
+            <div><img src="./images/4.png" alt="icon" /></div>
             <div>学务</div>
             <div>综合素质</div>
           </div>
 
-          <div v-hasPermi="['home:xw:undo1']" @click="going('/stuGood/about-good/xwall')">
-            <div><img src="./images/7.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xw:undo1']"
+            @click="going('/stuGood/about-good/xwall')"
+          >
+            <div><img src="./images/7.png" alt="icon" /></div>
             <div>学务</div>
             <div>评优评先</div>
           </div>
 
           <div v-hasPermi="['home:xw:undo1']" @click="going('/hard/pks/xwjl')">
-            <div><img src="./images/12.png" alt="icon"></div>
+            <div><img src="./images/12.png" alt="icon" /></div>
             <div>学务</div>
             <div>困难认定</div>
           </div>
 
-          <div v-hasPermi="['home:xw:undo1']" @click="going('/hard/zxj/recordXw')">
-            <div><img src="./images/11.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xw:undo1']"
+            @click="going('/hard/zxj/recordXw')"
+          >
+            <div><img src="./images/11.png" alt="icon" /></div>
             <div>学务</div>
             <div>助学金</div>
           </div>
 
-          <div v-hasPermi="['home:xw:undo1']" @click="going('/dormitory/new/xw')">
-            <div><img src="./images/9.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xw:undo1']"
+            @click="going('/dormitory/new/xw')"
+          >
+            <div><img src="./images/9.png" alt="icon" /></div>
             <div>学务</div>
             <div>学生宿舍</div>
           </div>
 
-
-          <div v-hasPermi="['home:stu:undo1']" @click="going('/workstudy/post/hall')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:stu:undo1']"
+            @click="going('/workstudy/post/hall')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>岗位大厅</div>
             <div>勤工助学</div>
           </div>
 
-          <div v-hasPermi="['home:zzb:qgzx']" @click="going('/workstudy/post/HighAll')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:zzb:qgzx']"
+            @click="going('/workstudy/post/HighAll')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>资助办</div>
             <div>勤工助学</div>
           </div>
 
-          <div v-hasPermi="['home:xg:undo1']" @click="going('/stuCQS/infofill/report/cq_score')">
-            <div><img src="./images/8.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xg:undo1']"
+            @click="going('/stuCQS/infofill/report/cq_score')"
+          >
+            <div><img src="./images/8.png" alt="icon" /></div>
             <div>学工</div>
             <div>综合素质</div>
           </div>
 
-          <div v-hasPermi="['home:xg:undo1']" @click="going('/stuGood/about-good/all')">
-            <div><img src="./images/7.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xg:undo1']"
+            @click="going('/stuGood/about-good/all')"
+          >
+            <div><img src="./images/7.png" alt="icon" /></div>
             <div>学工</div>
             <div>评优评先</div>
           </div>
 
           <div v-hasPermi="['home:xg:undo1']" @click="going('/hard/pks/jwcjl')">
-            <div><img src="./images/12.png" alt="icon"></div>
+            <div><img src="./images/12.png" alt="icon" /></div>
             <div>学工</div>
             <div>困难认定</div>
           </div>
 
-          <div v-hasPermi="['home:xg:undo1']" @click="going('/hard/zxj/record')">
-            <div><img src="./images/5.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xg:undo1']"
+            @click="going('/hard/zxj/record')"
+          >
+            <div><img src="./images/5.png" alt="icon" /></div>
             <div>学工</div>
             <div>助学金</div>
           </div>
 
-          <div v-hasPermi="['home:xg:undo1']" @click="going('/dormitory/stuDom/clear')">
-            <div><img src="./images/9.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xg:undo1']"
+            @click="going('/dormitory/stuDom/clear')"
+          >
+            <div><img src="./images/9.png" alt="icon" /></div>
             <div>学工</div>
             <div>学生宿舍</div>
           </div>
-          <div v-hasPermi="['home:xw:undo1']" @click="going('/system/suggestion')">
-            <div><img src="./images/11.png" alt="icon"></div>
+          <div
+            v-hasPermi="['home:xw:undo1']"
+            @click="going('/system/suggestion')"
+          >
+            <div><img src="./images/11.png" alt="icon" /></div>
             <div>优化建议</div>
           </div>
         </div>
@@ -211,9 +284,23 @@
           <div>更多 <span>></span></div>
         </div>
         <div class="content">
-          <el-table :data="listData" :border="false" height="368" style="width: 100%;">
+          <el-table
+            :data="listData"
+            :border="false"
+            height="368"
+            style="width: 100%"
+          >
             <el-table-column prop="label" label="项目" align="center" />
-            <el-table-column prop="value" label="数量" align="center" />
+            <el-table-column prop="value" label="数量" align="center">
+              <template v-slot="scope">
+                <div
+                  class="quantity-cell"
+                  :class="{ 'zero-quantity': scope.row.value == 0 }"
+                >
+                  {{ scope.row.value }}
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column prop="controller" align="center" label="操作">
               <template v-slot="scope">
                 <div class="going" @click="going(scope.row.url)">查看更多</div>
@@ -224,17 +311,61 @@
       </div>
     </div>
     <div v-show="false">
-      <jwc-undo v-if="checkPermi(['home:xg:undo1'])" v-hasPermi="['home:xg:undo1']" ref="childOne" />
-      <xw-undo v-if="checkPermi(['home:xw:undo1'])" v-hasPermi="['home:xw:undo1']" ref="child2" />
-      <fdy-undo v-if="checkPermi(['home:fdy:undo1'])" v-hasPermi="['home:fdy:undo1']" ref="child3" />
-      <stu-undo v-if="checkPermi(['home:stu:undo1'])" v-hasPermi="['home:stu:undo1']" ref="child4" />
-      <fdy-qgzx v-if="checkPermi(['home:fdy:qgzx'])" v-hasPermi="['home:fdy:qgzx']" ref="child5" />
-      <zdls-qgzx v-if="checkPermi(['home:zdls:qgzx'])" v-hasPermi="['home:zdls:qgzx']" ref="child6" />
-      <dept-qgzx v-if="checkPermi(['home:dept:qgzx'])" v-hasPermi="['home:dept:qgzx']" ref="child7" />
-      <zzb-qgzx v-if="checkPermi(['home:zzb:qgzx'])" v-hasPermi="['home:zzb:qgzx']" ref="child8" />
-      <zzbld-qgzx v-if="checkPermi(['home:zzbld:qgzx'])" v-hasPermi="['home:zzbld:qgzx']" ref="child9" />
-      <jwc-bottom v-if="checkPermi(['home:xg:undo1'])" v-hasPermi="['home:xg:undo1']" ref="child10" />
-      <sjUndo v-if="checkPermi(['home:sj:undo1'])" v-hasPermi="['home:sj:undo1']" ref="child11" />
+      <jwc-undo
+        v-if="checkPermi(['home:xg:undo1'])"
+        v-hasPermi="['home:xg:undo1']"
+        ref="childOne"
+      />
+      <xw-undo
+        v-if="checkPermi(['home:xw:undo1'])"
+        v-hasPermi="['home:xw:undo1']"
+        ref="child2"
+      />
+      <fdy-undo
+        v-if="checkPermi(['home:fdy:undo1'])"
+        v-hasPermi="['home:fdy:undo1']"
+        ref="child3"
+      />
+      <stu-undo
+        v-if="checkPermi(['home:stu:undo1'])"
+        v-hasPermi="['home:stu:undo1']"
+        ref="child4"
+      />
+      <fdy-qgzx
+        v-if="checkPermi(['home:fdy:qgzx'])"
+        v-hasPermi="['home:fdy:qgzx']"
+        ref="child5"
+      />
+      <zdls-qgzx
+        v-if="checkPermi(['home:zdls:qgzx'])"
+        v-hasPermi="['home:zdls:qgzx']"
+        ref="child6"
+      />
+      <dept-qgzx
+        v-if="checkPermi(['home:dept:qgzx'])"
+        v-hasPermi="['home:dept:qgzx']"
+        ref="child7"
+      />
+      <zzb-qgzx
+        v-if="checkPermi(['home:zzb:qgzx'])"
+        v-hasPermi="['home:zzb:qgzx']"
+        ref="child8"
+      />
+      <zzbld-qgzx
+        v-if="checkPermi(['home:zzbld:qgzx'])"
+        v-hasPermi="['home:zzbld:qgzx']"
+        ref="child9"
+      />
+      <jwc-bottom
+        v-if="checkPermi(['home:xg:undo1'])"
+        v-hasPermi="['home:xg:undo1']"
+        ref="child10"
+      />
+      <sjUndo
+        v-if="checkPermi(['home:sj:undo1'])"
+        v-hasPermi="['home:sj:undo1']"
+        ref="child11"
+      />
     </div>
 
     <!-- 我的消息详情对话框 -->
@@ -244,15 +375,26 @@
       width="80%"
       :show-close="true"
       :close-on-click-modal="false"
-      :close-on-press-escape="false">
+      :close-on-press-escape="false"
+    >
       <div class="message-dialog-content">
         <el-table :data="msg_list" style="width: 100%" max-height="400">
           <el-table-column prop="content" label="消息内容" min-width="200">
             <template slot-scope="scope">
-              <div class="message-content clickable-row" @click="viewMessageDetail(scope.row)">{{ scope.row.content }}</div>
+              <div
+                class="message-content clickable-row"
+                @click="viewMessageDetail(scope.row)"
+              >
+                {{ scope.row.content }}
+              </div>
             </template>
           </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
+          <el-table-column
+            prop="createTime"
+            label="创建时间"
+            width="180"
+            align="center"
+          >
             <template slot-scope="scope">
               {{ formatTime(scope.row.createTime) }}
             </template>
@@ -272,13 +414,24 @@
       width="80%"
       :show-close="true"
       :close-on-click-modal="false"
-      :close-on-press-escape="false">
+      :close-on-press-escape="false"
+    >
       <div class="announcement-dialog-content">
         <el-table :data="comp_list" style="width: 100%" max-height="400">
-          <el-table-column prop="submitterName" label="提交人" width="120" align="center" />
+          <el-table-column
+            prop="submitterName"
+            label="提交人"
+            width="120"
+            align="center"
+          />
           <el-table-column prop="projectName" label="项目名称" min-width="200">
             <template slot-scope="scope">
-              <div class="project-name clickable-row" @click="viewAnnouncementDetail(scope.row)">{{ scope.row.projectName }}</div>
+              <div
+                class="project-name clickable-row"
+                @click="viewAnnouncementDetail(scope.row)"
+              >
+                {{ scope.row.projectName }}
+              </div>
             </template>
           </el-table-column>
           <el-table-column label="状态" width="100" align="center">
@@ -286,7 +439,12 @@
               <el-tag type="success" size="small">审核通过</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
+          <el-table-column
+            prop="createTime"
+            label="创建时间"
+            width="180"
+            align="center"
+          >
             <template slot-scope="scope">
               {{ formatTime(scope.row.createTime) }}
             </template>
@@ -300,36 +458,54 @@
     </el-dialog>
 
     <!-- 消息详情模态框 -->
-    <div v-if="messageDetailVisible" class="detail-modal-overlay" @click.self="hideMessageDetail">
+    <div
+      v-if="messageDetailVisible"
+      class="detail-modal-overlay"
+      @click.self="hideMessageDetail"
+    >
       <div class="detail-modal-content">
         <div class="detail-modal-header">
           <h4>消息详情</h4>
           <div class="detail-time" v-if="currentMessageDetail.createTime">
             {{ formatTime(currentMessageDetail.createTime) }}
           </div>
-          <button class="detail-close-btn" @click="hideMessageDetail">&times;</button>
+          <button class="detail-close-btn" @click="hideMessageDetail">
+            &times;
+          </button>
         </div>
         <div class="detail-modal-body">
           <div class="detail-content-section">
-            <div class="detail-content-text">{{ currentMessageDetail.content || '暂无内容' }}</div>
+            <div class="detail-content-text">
+              {{ currentMessageDetail.content || "暂无内容" }}
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <!-- 公示详情模态框 -->
-    <div v-if="announcementDetailVisible" class="detail-modal-overlay" @click.self="hideAnnouncementDetail">
+    <div
+      v-if="announcementDetailVisible"
+      class="detail-modal-overlay"
+      @click.self="hideAnnouncementDetail"
+    >
       <div class="detail-modal-content">
         <div class="detail-modal-header">
           <h4>公示详情</h4>
           <div class="detail-time" v-if="currentAnnouncementDetail.createTime">
             {{ formatTime(currentAnnouncementDetail.createTime) }}
           </div>
-          <button class="detail-close-btn" @click="hideAnnouncementDetail">&times;</button>
+          <button class="detail-close-btn" @click="hideAnnouncementDetail">
+            &times;
+          </button>
         </div>
         <div class="detail-modal-body">
           <div class="detail-content-section">
-            <div class="detail-content-text">{{ currentAnnouncementDetail.projectName || '暂无项目名称' }} - {{ currentAnnouncementDetail.submitterName || '暂无提交人' }} - 审核通过</div>
+            <div class="detail-content-text">
+              {{ currentAnnouncementDetail.projectName || "暂无项目名称" }} -
+              {{ currentAnnouncementDetail.submitterName || "暂无提交人" }} -
+              审核通过
+            </div>
           </div>
         </div>
       </div>
@@ -349,14 +525,14 @@
   display: flex;
   column-gap: 15px;
 
-  >div {
+  > div {
     height: 380px;
     background-color: white;
     border-radius: 15px;
   }
 
-  >div:nth-child(1):after {
-    content: '个人中心';
+  > div:nth-child(1):after {
+    content: "个人中心";
     display: block;
     background-color: rgb(113, 173, 220);
     color: white;
@@ -368,7 +544,7 @@
     right: 0px;
   }
 
-  >div:nth-child(1) {
+  > div:nth-child(1) {
     position: relative;
     padding: 10px;
     box-sizing: border-box;
@@ -399,23 +575,22 @@
       top: 75%;
       transform: translateY(-50%);
 
-      >div {
+      > div {
         padding-left: 10px;
         display: flex;
         font-size: 14px;
 
         margin-bottom: 25px;
 
-        >div:nth-child(1) {
-          color: rgba(255, 255, 255, 0.80);
+        > div:nth-child(1) {
+          color: rgba(255, 255, 255, 0.8);
           line-height: 20px;
         }
 
-        >div:nth-child(2) {
+        > div:nth-child(2) {
           padding-left: 10px;
           color: rgb(255, 255, 255);
           line-height: 20px;
-
         }
       }
     }
@@ -430,22 +605,21 @@
     padding: 0px 20px;
     box-sizing: border-box;
 
-    >div {
+    > div {
       display: flex;
       justify-content: space-between;
       white-space: nowrap;
       width: 100%;
 
-      >div:nth-child(1) {
+      > div:nth-child(1) {
         height: 30px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         line-height: 30px;
-
       }
 
-      >div:nth-child(2) {
+      > div:nth-child(2) {
         text-align: right;
         line-height: 30px;
       }
@@ -453,21 +627,21 @@
   }
 
   // head center
-  >div:nth-child(2) {
+  > div:nth-child(2) {
     box-sizing: border-box;
     width: 33.3%;
 
-    >div:nth-child(1) {
+    > div:nth-child(1) {
       border-bottom: solid 1px #d0d0d0;
     }
   }
 
-  >div:nth-child(3) {
+  > div:nth-child(3) {
     box-sizing: border-box;
     width: 33.3%;
     padding-bottom: 10px;
 
-    >div:nth-child(1) {
+    > div:nth-child(1) {
       border-bottom: solid 1px #d0d0d0;
     }
   }
@@ -480,14 +654,14 @@
 
   min-height: 46vh;
 
-  >div {
+  > div {
     border-radius: 15px;
     background-color: white;
     box-sizing: border-box;
   }
 
   // bottom content
-  >div:nth-child(1) {
+  > div:nth-child(1) {
     width: 32.8%;
 
     .content {
@@ -500,30 +674,29 @@
       justify-content: start;
       flex-wrap: wrap;
 
-      >div {
+      > div {
         width: 50px;
         margin-top: 15px;
         cursor: pointer;
         font-size: 10px;
         text-align: center;
 
-        >div:nth-child(1) {
+        > div:nth-child(1) {
           img {
             width: 50px;
             height: 50px;
           }
         }
 
-        >div:nth-child(2) {
+        > div:nth-child(2) {
           margin-top: 5px;
           text-align: center;
         }
       }
     }
-
   }
 
-  >div:nth-child(2) {
+  > div:nth-child(2) {
     width: 48.3%;
     flex: 1;
     box-sizing: border-box;
@@ -535,20 +708,19 @@
   }
 }
 
-
 .home-page-title {
   display: flex;
   justify-content: space-between;
   padding: 20px;
 
-  >div:nth-child(1) {
+  > div:nth-child(1) {
     font-size: 17px;
     font-weight: bold;
     position: relative;
     z-index: 3;
   }
 
-  >div:nth-child(2) {
+  > div:nth-child(2) {
     padding-top: 5px;
     color: #757575;
     font-size: 15px;
@@ -559,10 +731,14 @@
     }
   }
 
-  >div:nth-child(1):after {
-    content: ' ';
+  > div:nth-child(1):after {
+    content: " ";
     display: block;
-    background: linear-gradient(to right, rgb(163, 201, 233), rgb(50, 137, 205));
+    background: linear-gradient(
+      to right,
+      rgb(163, 201, 233),
+      rgb(50, 137, 205)
+    );
     height: 6px;
     width: 100%;
     position: absolute;
@@ -574,10 +750,50 @@
 .going {
   cursor: pointer;
   transition: all 0.3s;
+  color: #1565c0;
+  font-weight: 500;
 }
 
 .going:hover {
   opacity: 0.8;
+  color: #0d47a1;
+  text-decoration: underline;
+}
+
+/* 数量列样式 */
+.quantity-cell {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  color: #1565c0;
+  font-weight: bold;
+  font-size: 16px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 2px solid #2196f3;
+  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
+  display: inline-block;
+  min-width: 40px;
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.quantity-cell:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
+}
+
+/* 为数量为0的情况添加绿色样式 */
+.quantity-cell.zero-quantity {
+  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
+  color: #2e7d32;
+  border-color: #4caf50;
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
+}
+
+.quantity-cell.zero-quantity:hover {
+  background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
+  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
 }
 
 /* 对话框样式 */
@@ -596,7 +812,7 @@
     transition: all 0.3s ease;
     padding: 4px 8px;
     border-radius: 4px;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.05);
     }
@@ -649,7 +865,7 @@
   padding: 4px 8px;
   border-radius: 4px;
   margin-bottom: 2px;
-  
+
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
     transform: translateX(2px);
@@ -680,7 +896,7 @@
   max-height: 70vh;
   overflow-y: auto;
   animation: slideInScale 0.3s ease-out;
-  
+
   .detail-modal-header {
     background: white;
     color: #333;
@@ -691,7 +907,7 @@
     justify-content: space-between;
     align-items: center;
     position: relative;
-    
+
     h4 {
       margin: 0;
       font-size: 18px;
@@ -707,7 +923,7 @@
       color: #666;
       margin-top: 8px;
     }
-    
+
     .detail-close-btn {
       background: none;
       border: none;
@@ -722,17 +938,17 @@
       justify-content: center;
       border-radius: 50%;
       transition: all 0.3s;
-      
+
       &:hover {
         background-color: #f5f5f5;
         color: #333;
       }
     }
   }
-  
+
   .detail-modal-body {
     padding: 24px;
-    padding-top: 40px; // 为标题下方的时间留出空间  
+    padding-top: 40px; // 为标题下方的时间留出空间
     .detail-content-section {
       .detail-content-text {
         font-size: 16px;
@@ -790,10 +1006,17 @@ import { isEmpty } from "@/api/helpFunc";
 import { checkPermi } from "@/utils/permission";
 export default {
   components: {
-    JwcUndo, XwUndo, FdyUndo, StuUndo,
+    JwcUndo,
+    XwUndo,
+    FdyUndo,
+    StuUndo,
     jwcBottom,
-    ZzbldQgzx, ZzbQgzx, ZdlsQgzx, FdyQgzx, DeptQgzx,
-    sjUndo
+    ZzbldQgzx,
+    ZzbQgzx,
+    ZdlsQgzx,
+    FdyQgzx,
+    DeptQgzx,
+    sjUndo,
   },
   created() {
     this.getUser();
@@ -801,63 +1024,61 @@ export default {
     this.listMyMsg();
 
     this.avatar = store.getters.avatar;
-
   },
   mounted() {
     setTimeout(() => {
-      const listDataTask = [
-      ];
+      const listDataTask = [];
       if (!isEmpty(this.$refs.childOne) && this.$refs.childOne.hasPrem) {
-        listDataTask.push(...this.$refs.childOne.taskList)
+        listDataTask.push(...this.$refs.childOne.taskList);
       }
       if (!isEmpty(this.$refs.child2) && this.$refs.child2.hasPrem) {
-        listDataTask.push(...this.$refs.child2.taskList)
+        listDataTask.push(...this.$refs.child2.taskList);
       }
       if (!isEmpty(this.$refs.child3) && this.$refs.child3.hasPrem) {
-        listDataTask.push(...this.$refs.child3.taskList)
+        listDataTask.push(...this.$refs.child3.taskList);
       }
       if (!isEmpty(this.$refs.child4) && this.$refs.child4.hasPrem) {
-        listDataTask.push(...this.$refs.child4.taskList)
+        listDataTask.push(...this.$refs.child4.taskList);
       }
       if (!isEmpty(this.$refs.child5) && this.$refs.child5.hasPrem) {
-        listDataTask.push(...this.$refs.child5.taskList)
+        listDataTask.push(...this.$refs.child5.taskList);
       }
       if (!isEmpty(this.$refs.child6) && this.$refs.child6.hasPrem) {
-        listDataTask.push(...this.$refs.child6.taskList)
+        listDataTask.push(...this.$refs.child6.taskList);
       }
       if (!isEmpty(this.$refs.child7) && this.$refs.child7.hasPrem) {
-        listDataTask.push(...this.$refs.child7.taskList)
+        listDataTask.push(...this.$refs.child7.taskList);
       }
       if (!isEmpty(this.$refs.child8) && this.$refs.child8.hasPrem) {
-        listDataTask.push(...this.$refs.child8.taskList)
+        listDataTask.push(...this.$refs.child8.taskList);
       }
       if (!isEmpty(this.$refs.child9) && this.$refs.child9.hasPrem) {
-        listDataTask.push(...this.$refs.child9.taskList)
+        listDataTask.push(...this.$refs.child9.taskList);
       }
-       if (!isEmpty(this.$refs.child10) && this.$refs.child10.hasPrem) {
-        listDataTask.push(...this.$refs.child10.taskList)
+      if (!isEmpty(this.$refs.child10) && this.$refs.child10.hasPrem) {
+        listDataTask.push(...this.$refs.child10.taskList);
       }
-       if (!isEmpty(this.$refs.child11) && this.$refs.child11.hasPrem) {
-        listDataTask.push(...this.$refs.child11.taskList)
+      if (!isEmpty(this.$refs.child11) && this.$refs.child11.hasPrem) {
+        listDataTask.push(...this.$refs.child11.taskList);
       }
 
       this.listData = listDataTask;
       this.listData.sort((a, b) => b.value - a.value);
-    }, 500)
+    }, 500);
   },
   methods: {
     going(url) {
       this.$router.push(url);
     },
     cutString(text) {
-      return text.split('·')
+      return text.split("·");
     },
     formatTime(date) {
-      const dateTime = new Date(date)
-      return new Intl.DateTimeFormat('en-CA').format(dateTime); // 'en-CA' 默认格式是 yyyy-mm-dd
+      const dateTime = new Date(date);
+      return new Intl.DateTimeFormat("en-CA").format(dateTime); // 'en-CA' 默认格式是 yyyy-mm-dd
     },
     getUser() {
-      getUserProfile().then(response => {
+      getUserProfile().then((response) => {
         this.user = response.data;
         this.roleGroup = response.roleGroup;
         this.postGroup = response.postGroup;
@@ -883,7 +1104,7 @@ export default {
       // 获取当前登录用户的ID
       const userId = this.user.userId;
       console.log("userId", userId);
-      let res = await listMsg({receiver: userId});
+      let res = await listMsg({ receiver: userId });
       if (res.rows.length > 0) {
         this.have_msg = true;
         this.msg_list = [...res.rows];
@@ -899,7 +1120,6 @@ export default {
     viewMessageDetail(row) {
       this.currentMessageDetail = row;
       this.messageDetailVisible = true;
-      
     },
 
     // 显示消息详情 - 从首页点击进入
@@ -969,36 +1189,44 @@ export default {
       currentMessageIndex: -1,
       currentAnnouncementIndex: -1,
 
-      tableData: [{
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-08',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-06',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-07',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }]
-    }
-  }
-}
-</script>
\ No newline at end of file
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+    };
+  },
+};
+</script>