更新首页

src/components/menu.vue

 <template>
   <div class="menu">
     <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
-    <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
+    <div
+      style="float:right;cursor: pointer;position:relative;"
+      class="user_hover"
+    >
       <span class="user">用户</span>
       <img src="../assets/imgs/home_ic_user.png" alt class="user_pic" />
       <div class="user_menu">
-        <div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
+        <div
+          v-for="(item, index) in user_arr"
+          :key="index + 700"
+          @click="gotopage(index)"
+        >
+          {{ item }}
+        </div>
       </div>
       <div class="sj"></div>
     </div>
-    <div style="float:right;cursor: pointer;position:relative;" class="shop_hover">
+    <div
+      style="float:right;cursor: pointer;position:relative;"
+      class="shop_hover"
+    >
       <div class="number">99+</div>
       <img src="../assets/imgs/home_ic_shop.png" alt class="car" />
       <div class="shop_menu">
         <div class="shop_list_title">最近加入的服务：</div>
         <div
-          v-for="(item,index) in shopping_list"
+          v-for="(item, index) in shopping_list"
           :key="'shopping' + index"
           class="shop_list_cell shop_line"
         >
@@ -24,16 +36,24 @@
             class="shop_img"
           />
           <div class="shop_cell_msgs">
-            <p @click="getDetail(item.id)" class="shop_cell_name over_one">{{ item.name }}</p>
+            <p @click="getDetail(item.id)" class="shop_cell_name over_one">
+              {{ item.name }}
+            </p>
             <p class="shop_cell_msg bover_one">{{ item.type }}</p>
             <p class="shop_cell_msg over_one">{{ item.creator }}</p>
           </div>
           <div>
-            <img @click="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
+            <img
+              @click="deleteItem(item.id)"
+              src="../assets/imgs/ic_delete.png"
+              alt
+            />
           </div>
         </div>
         <div class="shop_footer">
-          <el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
+          <el-button @click="settlement" size="small" class="shop_settlement">
+            去购物车申请结算
+          </el-button>
         </div>
       </div>
       <div class="shop_sj"></div>
@@ -41,14 +61,32 @@
 
     <div style="float:right">
       <div
-        v-for="(item,index) in menu_arr"
-        :key="index+200"
-        class="menu_box"
+        v-for="(item, index) in menu_arr"
+        :key="index + 200"
+        class="menu_box user_hover"
         @click="now_menu = index"
-        :style="now_menu==index?{color:'#fff'}:{}"
+        :style="{ color: now_menu == index ? '#fff' : '' }"
       >
-        {{item}}
-        <div class="bottom_show" v-if="now_menu==index"></div>
+        {{ item.name }}
+        <div
+          class="user_menu"
+          v-if="item.children && item.children.length"
+          style="left: 30px;"
+        >
+          <div
+            v-for="(v, index) in item.children"
+            :key="index + 700"
+            @click="gotoChildPage(v)"
+          >
+            {{ v.name }}
+          </div>
+        </div>
+        <div
+          class="sj"
+          v-if="item.children && item.children.length"
+          style="left: 60px;"
+        ></div>
+        <div class="bottom_show" v-if="now_menu == index"></div>
       </div>
     </div>
   </div>
@@ -58,14 +96,57 @@
 export default {
   data() {
     return {
-      menu_arr: ["工作台", "技术支持", "服务超市"],
-      now_menu: 0,
+      menu_arr: [
+        {
+          name: "工作台",
+          path: "/workplace",
+        },
+        {
+          name: "技术支持",
+          path: "",
+        },
+        {
+          name: "服务超市",
+          path: "/services_shop",
+          children: [
+            {
+              name: "数据服务",
+              path: "/shop/data_service_list",
+            },
+            {
+              name: "时空服务",
+              path: "/shop/space_time_service_list",
+            },
+            {
+              name: "视频服务",
+              path: "/shop/video_service_list",
+            },
+            {
+              name: "感知服务",
+              path: "/shop/perception_service_list",
+            },
+            {
+              name: "综合应用",
+              path: "/shop/comprehensive_app_list",
+            },
+            {
+              name: "云资源服务",
+              path: "/shop/cloud",
+            },
+            {
+              name: "应用商店",
+              path: "/shop/app_store_list",
+            },
+          ],
+        },
+      ],
+      now_menu: 2,
       user_arr: [
         "个人档案",
         "消息通知",
         "收银中心",
         "关于BD-aPaaS",
-        "退出登录"
+        "退出登录",
       ],
       shopping_list: [
         {
@@ -78,7 +159,7 @@ export default {
           num: 2,
           checkedSubscription: false,
           specification: 1,
-          specificationApplication: 2
+          specificationApplication: 2,
         },
         {
           id: 1,
@@ -89,7 +170,7 @@ export default {
           num: 2,
           checkedSubscription: false,
           specification: 1,
-          specificationApplication: 2
+          specificationApplication: 2,
         },
         {
           id: 2,
@@ -101,9 +182,9 @@ export default {
           num: 2,
           checkedSubscription: true,
           specification: 1,
-          specificationApplication: 2
-        }
-      ]
+          specificationApplication: 2,
+        },
+      ],
     };
   },
   methods: {
@@ -111,13 +192,18 @@ export default {
       console.log(n);
     },
     settlement() {
-      this.$router.push({name: "shoppingCart"});
+      this.$router.push({ name: "shoppingCart" });
     },
     deleteItem() {},
     getDetail() {
       // if you want goto detail page, you should give me the type at first
+    },
+    gotoChildPage(v) {
+      if (v.path) {
+        this.$router.push(v.path);
       }
-  }
+    },
+  },
 };
 </script>
 

src/router/index.js

@@ -22,7 +22,7 @@ export default new Router({
       path: "/index",
       name: "index",
       component: () => import("@/pages/index"),
-      redirect: "/workplace",
+      redirect: "/services_shop",
       children: [
         {
           path: "/fwzc", // 服务注册