updata

f/web-kboss/src/router/index.js

@@ -85,9 +85,51 @@ export const constantRoutes = [
     path: '/h5HomePage',
     name: 'H5HomePage',
     title: 'H5首页',
-    component: () => import('@/views/H5/calculate/index.vue'),
+    component: () => import('@/views/H5/index.vue'),
     hidden: true,
-    
+    redirect:"/h5HomePage/index",
+     children: [
+      {
+        path: "index",
+        title: 'H5首页',
+        component: () => import('@/views/H5/official/index.vue'),
+        meta: {
+          title: "H5首页", fullPath: "/h5HomePage/index",
+        },
+      },
+      {
+        path: "cloud",
+        title: '云',
+        component: () => import('@/views/H5/cloud/index.vue'),
+        meta: {
+          title: "云", fullPath: "/h5HomePage/cloud",
+        },
+      },
+      {
+        path: "calculate",
+        title: '算',
+        component: () => import('@/views/H5/calculate/index.vue'),
+        meta: {
+          title: "算", fullPath: "/h5HomePage/calculate",
+        },
+      },
+      {
+        path: "net",
+        title: '网',
+        component: () => import('@/views/H5/net/index.vue'),
+        meta: {
+          title: "网", fullPath: "/h5HomePage/net",
+        },
+      },
+      {
+        path: "use",
+        title: '用',
+        component: () => import('@/views/H5/use/index.vue'),
+        meta: {
+          title: "用", fullPath: "/h5HomePage/use",
+        },
+      },
+     ]
   },
 
   {

f/web-kboss/src/views/H5/calculate/index.vue

@@ -10,7 +10,7 @@
       <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</div>
     </div>
 
-    <!-- 云产品 -->
+    <!-- 产品 -->
     <div class="box">
       <!-- 循环所有分类下的产品 -->
       <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0">

f/web-kboss/src/views/H5/index.vue

@@ -1,49 +1,92 @@
 <template>
-  <div>
+  <div class="h5-container">
+    <!-- 主要内容区域 -->
     <div class="main">
-      
+      <router-view></router-view>
     </div>
+    <div style="height: 0.8rem;">
+    </div>
+    <!-- 底部导航栏 -->
     <div class="tabBar">
       <!-- 首页 -->
-      <div class="tabBar-item">
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'index' }"
+        @click="switchTab('index')"
+      >
         <div class="item-img">
-          <img src="./images/tabBar/home.png" alt="" />
+          <img
+            :src="activeTab === 'index' ? require('./images/tabBar/homeColor.png') : require('./images/tabBar/home.png')"
+            alt="首页"
+          />
         </div>
         <div class="item-text">
           首页
         </div>
       </div>
+
       <!-- 云 -->
-      <div class="tabBar-item">
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'cloud' }"
+        @click="switchTab('cloud')"
+      >
         <div class="item-img">
-          <img src="./images/tabBar/cloud.png" alt="" />
+          <img
+            :src="activeTab === 'cloud' ? require('./images/tabBar/cloudColor.png') : require('./images/tabBar/cloud.png')"
+            alt="云"
+          />
         </div>
         <div class="item-text">
           云
         </div>
       </div>
+
       <!-- 算 -->
-      <div class="tabBar-item">
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'calculate' }"
+        @click="switchTab('calculate')"
+      >
         <div class="item-img">
-          <img src="./images/tabBar/calculate.png" alt="" />
+          <img
+            :src="activeTab === 'calculate' ? require('./images/tabBar/calculateColor.png') : require('./images/tabBar/calculate.png')"
+            alt="算"
+          />
         </div>
         <div class="item-text">
           算
         </div>
       </div>
+
       <!-- 网 -->
-      <div class="tabBar-item">
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'net' }"
+        @click="switchTab('net')"
+      >
         <div class="item-img">
-          <img src="./images/tabBar/net.png" alt="" />
+          <img
+            :src="activeTab === 'net' ? require('./images/tabBar/netColor.png') : require('./images/tabBar/net.png')"
+            alt="网"
+          />
         </div>
         <div class="item-text">
           网
         </div>
       </div>
+
       <!-- 用 -->
-      <div class="tabBar-item">
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'use' }"
+        @click="switchTab('use')"
+      >
         <div class="item-img">
-          <img src="./images/tabBar/user.png" alt="" />
+          <img
+            :src="activeTab === 'use' ? require('./images/tabBar/userColor.png') : require('./images/tabBar/user.png')"
+            alt="用"
+          />
         </div>
         <div class="item-text">
           用
@@ -54,48 +97,130 @@
 </template>
 
 <script>
-import './media'
 export default {
+  name: 'H5HomePage',
   data() {
     return {
-
+      activeTab: 'index', // 当前激活的标签
+      tabList: [
+        { id: 'index', name: '首页', path: '/h5HomePage/index' },
+        { id: 'cloud', name: '云', path: '/h5HomePage/cloud' },
+        { id: 'calculate', name: '算', path: '/h5HomePage/calculate' },
+        { id: 'net', name: '网', path: '/h5HomePage/net' },
+        { id: 'use', name: '用', path: '/h5HomePage/use' }
+      ]
+    };
+  },
+  watch: {
+    // 监听路由变化，更新激活的标签
+    '$route'(to) {
+      this.updateActiveTab(to.path);
     }
   },
-  methods: {
+  mounted() {
-
+    // 初始化时根据当前路由设置激活状态
+    this.updateActiveTab(this.$route.path);
   },
+  methods: {
+    /**
+     * 切换标签页
+     * @param {string} tabId - 标签ID
+     */
+    switchTab(tabId) {
+      // 如果点击的是当前已激活的标签，不进行操作
+      if (this.activeTab === tabId) return;
 
+      // 更新激活状态
+      this.activeTab = tabId;
 
-}
+      // 根据tabId跳转到对应的路由
+      const tab = this.tabList.find(item => item.id === tabId);
+      if (tab) {
+        this.$router.push(tab.path);
+      }
+    },
+
+    /**
+     * 根据路由路径更新激活的标签
+     * @param {string} path - 当前路由路径
+     */
+    updateActiveTab(path) {
+      // 从路径中提取tabId
+      const pathParts = path.split('/');
+      const tabId = pathParts[pathParts.length - 1];
+
+      // 如果提取的tabId在tabList中存在，则更新activeTab
+      if (this.tabList.some(item => item.id === tabId)) {
+        this.activeTab = tabId;
+      }
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
+.h5-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main {
+  flex: 1;
+  overflow-y: auto;/* 为底部导航栏留出空间 */
+}
+
 .tabBar {
-  padding: .1rem 0;
+  height:.8rem;
+  // padding: .1rem 0;
   background-color: #fff;
   width: 100%;
   display: flex;
   justify-content: space-around;
+  align-items: center;
   position: fixed;
   bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  box-shadow: 0 -0.02rem .1rem rgba(0, 0, 0, 0.1);
+
   .tabBar-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &.active {
+      .item-text {
+        color: #1890ff; /* 激活状态的颜色 */
+        font-weight: bold;
+      }
+    }
   }
 
   .item-img {
-    margin-bottom: .1rem;
+    margin-bottom: .05rem;
+
     img {
-      width: .3rem;
+      width: .24rem;
-      height: .3rem;
+      height: .24rem;
       display: block;
+      transition: transform 0.3s ease;
     }
   }
 
   .item-text {
-    font-size: .14rem;
+    font-size: .12rem;
+    color: #666;
+    transition: color 0.3s ease;
   }
 }
 </style>