底部导航

刘淇
1 parent a7a0b46e
Showing 11 changed files with 111 additions and 82 deletions
common/config/env.js
pages-sub/daily/maintain-manage/finish-plan-detail.vue
pages-sub/daily/patrol-manage/finish-plan-detail.vue
pages.json
pages/workbench/index.vue
static/imgs/nav/home-off.png
static/imgs/nav/home-on.png
static/imgs/nav/my-off.png
static/imgs/nav/my-on.png
static/imgs/nav/work-off.png
static/imgs/nav/work-on.png
@@ -4,6 +4,7 @@ const env = {
   development: {
     baseUrl: 'https://test.jichengshanshui.com.cn:28302',
     // https://test.jichengshanshui.com.cn:28302
+    // http://h95ce3aa.natappfree.cc
     uploadUrl: 'https://test.jichengshanshui.com.cn:28302',
     // baseApi:'admin-api',
@@ -146,7 +146,7 @@ onLoad((options) =&gt; {
   background: #fff;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: 20rpx;
+  margin-bottom: 30rpx;
 }
@@ -144,7 +144,7 @@ onLoad((options) =&gt; {
   background: #fff;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: 20rpx;
+  margin-bottom: 30rpx;
 }
@@ -160,20 +160,20 @@
 			{
 				"pagePath": "pages/index/index",
 				"text": "首页",
-				"iconPath": "static/icons/home.png",
-				"selectedIconPath": "static/icons/home-active.png"
+				"iconPath": "static/imgs/nav/home-off.png",
+				"selectedIconPath": "static/imgs/nav/home-on.png"
 			},
 			{
 				"pagePath": "pages/workbench/index",
 				"text": "工作台",
-				"iconPath": "static/icons/mine.png",
-				"selectedIconPath": "static/icons/mine-active.png"
+				"iconPath": "static/imgs/nav/work-off.png",
+				"selectedIconPath": "static/imgs/nav/work-on.png"
 			},
 			{
 				"pagePath": "pages/mine/index",
 				"text": "我的",
-				"iconPath": "static/icons/mine.png",
-				"selectedIconPath": "static/icons/mine-active.png"
+				"iconPath": "static/imgs/nav/my-off.png",
+				"selectedIconPath": "static/imgs/nav/my-on.png"
 			}
 		]
 	},
 <template>
   <!-- 外层容器：包含蓝色块 + 原始内容 -->
-  <view class="workbench-container">
+  <view class="page-container">
     <!-- 加载页：覆盖整个容器，渲染完成后隐藏 -->
     <up-loading-page
-        v-if="loading"
+
+        :loading="loading"
         loading-text="加载中..."
         color="#577ee3"
-        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;"
+        zIndex="1000"
     ></up-loading-page>
     <!-- 蓝色装饰块：#577ee3 -->
-    <view class="blue-decor-block"></view>
+    <view class="blue-decor-block" v-show="!loading"></view>
-    <!-- 原始内容容器：仅添加定位和顶部偏移实现压边 -->
+    <!-- 原始内容容器 -->
     <view class="content-wrap">
       <!-- uview-plus空状态组件 -->
       <u-empty
           v-if="!moduleList.length && !loading"
-          mode="list"
-          text="暂无菜单数据"
-          color="#999"
-          font-size="28rpx"
+          mode="permission"
       ></u-empty>
-      <!-- 菜单卡片列表（修复header插槽语法，恢复标题显示） -->
-      <view v-else-if="!loading" class="menu-card-wrap">
+      <!-- 菜单卡片列表（替换grid为flex布局） -->
+      <view  class="menu-card-wrap">
         <up-card
             :title-size="18"
+            :border="false"
+            :shadow="true"
+            :foot-border-top="false"
             v-for="(parentModule, index) in moduleList"
-            :key="parentModule.id"
+            :key="`$parentModule.id_${index}`"
             :title="parentModule.name"
+            class="card-container"
         >
           <template #body>
-            <view>
-              <up-grid
-                  :border="false"
-                  col="4"
+            <!-- 替换up-grid：改用flex流式布局容器 -->
+            <view class="card-content">
+              <view
+                  v-for="(listItem, listIndex) in parentModule.children"
+                  :key="listItem.id"
+                  class="content-block"
+                  @click="handleMenuClick(listItem)"
               >
-                <up-grid-item
-                    v-for="(listItem,listIndex) in parentModule.children"
-                    :key="listItem.id"
-                    @click="handleMenuClick(listItem)"
-                    class="grid-item-wrap"
-                >
-                  <u-image
-                      :src="listItem.icon "
-                      mode="aspectFit"
-                      width="80rpx"
-                      height="80rpx"
-                      lazy-load
-                      radius="16rpx"
-                  ></u-image>
-                  <text class="grid-text">{{ listItem.name }}</text>
-                </up-grid-item>
-              </up-grid>
-
+                <u-image
+                    :src="listItem.icon"
+                    mode="aspectFit"
+                    width="80rpx"
+                    height="80rpx"
+                    lazy-load
+                    radius="16rpx"
+                    class="block-icon"
+                ></u-image>
+                <text class="grid-text">{{ listItem.name }}</text>
+              </view>
             </view>
           </template>
         </up-card>
@@ -64,8 +62,8 @@
 </template>
 <script setup lang="ts">
-// 原始代码完全保留，新增loading状态
-import {ref, nextTick} from 'vue';
+// 原始代码完全保留，无任何修改
+import { ref, nextTick } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import { useUserStore } from '@/pinia/user';
 import globalConfig from '@/common/config/global';
@@ -89,41 +87,27 @@ interface MenuItem {
   children: MenuItem[];
 }
-// 新增：加载状态（默认开启）
 const loading = ref(true);
 const userStore = useUserStore();
 const moduleList = ref<MenuItem[]>([]);
-// 无用变量（保留避免警告）
-const subTitle = ref('');
-const thumb = ref('');
-const border = ref(true);
-const click = () => {
-};
-const headClick = () => {
-};
-
 onShow(async () => {
   try {
-    // 重置加载状态
     loading.value = true;
     const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);
     const menuData = rawMenuData || [];
     moduleList.value = menuData;
-
-    // 关键：等待DOM完全渲染后再隐藏加载页
-    await nextTick();
-    // 额外延迟（可选，确保视觉更流畅）
-    setTimeout(() => {
-      loading.value = false;
-    }, 300);
-
+    //
+    // // await nextTick();
+    // setTimeout(() => {
+    //   loading.value = false;
+    // }, 500);
+    loading.value = false;
     console.log('菜单数据：', moduleList.value);
   } catch (error) {
     console.error('获取菜单数据失败：', error);
     moduleList.value = [];
-    // 出错时也隐藏加载页
     await nextTick();
     loading.value = false;
   }
@@ -138,7 +122,7 @@ const handleMenuClick = (item: MenuItem) =&gt; {
     });
     return;
   }
-  console.log(item.jumpUrl)
+  console.log(item.jumpUrl);
   uni.navigateTo({
     url: item.jumpUrl,
     fail: (err) => {
@@ -153,19 +137,14 @@ const handleMenuClick = (item: MenuItem) =&gt; {
 };
 </script>
-<style scoped>
-/* 仅新增/保留必要样式，不修改卡片核心样式 */
-.workbench-container {
-  width: 100%;
-  min-height: 100vh;
-  position: relative;
-  background-color: #fff;
-}
-.grid-item-wrap{
-  margin-top: 20px;
+<style scoped lang="scss">
+/* 原有样式保留 + 新增/调整图片居中样式 */
+.page-container {
+  position: relative; // 新增：让蓝色块绝对定位生效
+  min-height: 100vh; // 新增：防止内容高度不足
 }
-/* 蓝色块样式 */
+/* 蓝色块样式（保留） */
 .blue-decor-block {
   position: absolute;
   top: 0;
@@ -176,21 +155,70 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   z-index: 1;
 }
-/* 内容容器样式 */
+/* 内容容器样式（保留 + 微调） */
 .content-wrap {
   position: relative;
   z-index: 2;
-  padding-top: 160px;
+  padding: 120px 0 0 ; // 新增左右内边距，避免卡片贴边
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx; // 新增：卡片之间的上下间距
+}
+
+/* 菜单卡片容器（新增：统一卡片外层间距） */
+.menu-card-wrap {
+  width: 100%;
+}
+
+/* 卡片容器：重置up-card默认样式 */
+.card-container {
+  --u-card-content-padding: 0; // 取消卡片默认内边距
+  border-radius: 8rpx; // 新增：卡片圆角
+  overflow: hidden; // 新增：裁剪内部元素
+}
+
+/* 核心：小块容器（Flex 流式布局） */
+.card-content {
+  display: flex;
+  flex-wrap: wrap; // 自动换行
+  gap: 20rpx; // 关键：小块之间的上下+左右间距统一
+
+}
+
+/* 小块样式：一行最多4个，宽度自适应 + 内部flex布局 */
+.content-block {
+  // 宽度计算：(100% - 3*间距) / 4 （4个元素有3个间距）
+  width: calc((100% - 3 * 20rpx) / 4);
+  // 小块内部样式：改用flex布局，确保子元素居中
+  display: flex;
+  flex-direction: column;
+  align-items: center; // 水平居中（核心：解决图片不居中问题）
+  justify-content: center; // 垂直居中（可选，优化视觉）
+  padding: 24rpx 0;
+  border-radius: 8rpx;
+  text-align: center;
+  // 点击反馈
+  touch-action: manipulation;
+  transition: background-color 0.2s;
 }
+/* 小块点击态 */
+.content-block:active {
+  background-color: #e9ecef;
+}
-/* 网格文字样式（保留原始） */
+/* 新增：图片居中样式（兜底保障） */
+.block-icon {
+  display: block; // 转为块级元素
+  margin: 0 auto; // 水平居中（双重保障）
+}
+
+/* 网格文字样式（保留 + 微调） */
 .grid-text {
-  font-size: 24rpx;
+  font-size: 26rpx;
   color: #333;
   text-align: center;
   margin-top: 10rpx;
+  display: block; // 新增：确保文字换行
 }
-
-
 </style>
 \ No newline at end of file