Browse Source

feature:调整首页空数据样式

liuzhenlin 1 week ago
parent
commit
e65ca7edbd
1 changed files with 41 additions and 2 deletions
  1. 41 2
      pages/home/index.vue

+ 41 - 2
pages/home/index.vue

@@ -21,7 +21,7 @@
     </view>
 
 
-    <view class="section-box mt20" v-if="todoStore.list.length" v-hasPermi="['todo:list']">
+    <view class="section-box mt20" v-hasPermi="['todo:list']">
       <view class="section-header flex justify-between align-center">
         <view class="flex align-center">
           <text class="section-title">待办事项</text>
@@ -30,6 +30,11 @@
         <text class="link" @click="onRouterPush('/pages/todo/index')">查看更多 ></text>
       </view>
       <view class="todo-list">
+        <view v-if="!todoStore.list.length && !isLogining" class="home-empty-row">
+          <uv-icon name="file-text" size="22" color="#cbd5f5"></uv-icon>
+          <text class="home-empty-text">暂无待办事项</text>
+        </view>
+        <view v-else>
         <view 
           class="todo-item" 
           v-for="item in todoStore.list" 
@@ -49,16 +54,22 @@
           </view>
           <view class="todo-btn" @click="handleApprove(item)">去处理</view>
         </view>
+        </view>
       </view>
     </view>
 
     <!-- 报销提醒 -->
-    <view class="section-box mt20" v-if="expendseList.length">
+    <view class="section-box mt20" v-hasPermi="['fund:reimbursement:list']">
       <view class="section-header flex justify-between align-center">
         <text class="section-title">报销提醒</text>
         <text class="link" @click="onRouterPush('/pages/fund/reimbursement-remind/index')">查看更多 ></text>
       </view>
       <view class="fund-list">
+        <view v-if="!expendseList.length && !isLogining" class="home-empty-row">
+          <uv-icon name="order" size="22" color="#cbd5f5"></uv-icon>
+          <text class="home-empty-text">暂无报销提醒</text>
+        </view>
+        <view v-else>
         <view 
           class="fund-item" 
           v-for="item in expendseList" 
@@ -71,6 +82,7 @@
             <text class="date">{{ formatDate(item.createdTime) }}</text>
           </view>
         </view>
+        </view>
       </view>
     </view>
 
@@ -81,6 +93,11 @@
         <text class="link" @click="onRouterPush('/pages/notice/index')">查看更多 ></text>
       </view>
       <view class="notice-card">
+        <view v-if="!noticeList.length && !isLogining" class="home-empty-row">
+          <uv-icon name="file-text" size="22" color="#cbd5f5"></uv-icon>
+          <text class="home-empty-text">暂无通知公告</text>
+        </view>
+        <view v-else>
         <view 
           class="notice-item" 
           v-for="item in noticeList" 
@@ -96,6 +113,7 @@
             <text class="arrow">></text>
           </view>
         </view>
+        </view>
       </view>
       </view>
     </view>
@@ -431,7 +449,28 @@ onMounted(() => {
       box-shadow: 0 4rpx 8rpx rgba(255, 77, 79, 0.3);
     }
 
+    .home-empty-row {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      padding: 20rpx 0 10rpx;
+      color: #94a3b8;
+      font-size: 26rpx;
+    }
+
+    .home-empty-text {
+      color: #94a3b8;
+    }
+
     .todo-list {
+      .home-empty-row {
+        padding: 24rpx;
+        margin-bottom: 24rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
+      }
+
       .todo-item {
         display: flex;
         align-items: center;