Przeglądaj źródła

fix(mind): 心页快捷入口从一行改为两行布局

- func-grid 改为 column 布局 + gap:16rpx
- func-list 拆分为 funcListRow1(前4个) 和 funcListRow2(后4个)
- 每行4个按钮均分宽度,图标文字更易读
User 4 miesięcy temu
rodzic
commit
0a4779dc02
1 zmienionych plików z 28 dodań i 7 usunięć
  1. 28 7
      cfc-frontend/pages/mind/index.vue

+ 28 - 7
cfc-frontend/pages/mind/index.vue

@@ -261,14 +261,24 @@
     <!-- ===== Phase 1.2: 心理告警横幅 ===== -->
     <!-- ===== Phase 1.2: 心理告警横幅 ===== -->
     <PsychCrisisBanner v-if="isLoggedIn" :childId="currentChildId" source="screening" />
     <PsychCrisisBanner v-if="isLoggedIn" :childId="currentChildId" source="screening" />
 
 
-    <!-- ===== 底部:功能入口 Grid(通用) ===== -->
+    <!-- ===== 底部:功能入口 Grid(通用,两行) ===== -->
     <view class="func-section" v-if="sectionVisible('func_entries')">
     <view class="func-section" v-if="sectionVisible('func_entries')">
       <view class="func-grid">
       <view class="func-grid">
-        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
-          <view class="func-icon-wrap">
-            <text class="func-icon">{{ item.icon }}</text>
+        <view class="func-row">
+          <view class="func-item" v-for="item in funcListRow1" :key="item.label" @click="onFuncClick(item)">
+            <view class="func-icon-wrap">
+              <text class="func-icon">{{ item.icon }}</text>
+            </view>
+            <text class="func-label">{{ item.label }}</text>
+          </view>
+        </view>
+        <view class="func-row">
+          <view class="func-item" v-for="item in funcListRow2" :key="item.label" @click="onFuncClick(item)">
+            <view class="func-icon-wrap">
+              <text class="func-icon">{{ item.icon }}</text>
+            </view>
+            <text class="func-label">{{ item.label }}</text>
           </view>
           </view>
-          <text class="func-label">{{ item.label }}</text>
         </view>
         </view>
       </view>
       </view>
     </view>
     </view>
@@ -437,6 +447,12 @@ export default {
     },
     },
     currentDimensionCode: function() {
     currentDimensionCode: function() {
       return 'mind'
       return 'mind'
+    },
+    funcListRow1: function() {
+      return this.funcList.slice(0, 4)
+    },
+    funcListRow2: function() {
+      return this.funcList.slice(4)
     }
     }
   },
   },
   onShow() {
   onShow() {
@@ -1279,13 +1295,18 @@ export default {
 }
 }
 .func-grid {
 .func-grid {
   display: flex;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 16rpx;
   background: #fff;
   background: #fff;
   border-radius: 20rpx;
   border-radius: 20rpx;
   padding: 24rpx 16rpx;
   padding: 24rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
 }
+.func-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 .func-item {
 .func-item {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;