首页跳转

src/pages/workbench/workPlace.vue

@@ -100,10 +100,25 @@
             v-for="(item, index) in online_tool_arr"
             :key="index + 300"
             class="online_box"
-            :style="{ backgroundColor: item.bg }"
+            @click="goto_online_page(item.url,index)"
+            @mouseenter="enter_online_tool(index)" 
+            @mouseleave="leave_online_tool()"
+            :style="now_online==index&&item.move_bg?{backgroundColor:item.move_bg}:{ backgroundColor: item.bg }"
           >
-            <img :src="item.pic" alt />
-            <span :style="{ color: item.color }">{{ item.text }}</span>
+            <img :src="now_online==index&&(item.move_pic||item.move_pic=='')?item.move_pic:item.pic" alt />
+            <span :style="now_online==index&&item.move_color?{color: item.move_color}:{ color: item.color }">{{ item.text }}</span>
+            <div v-if="item.children&&item.children.length" class="online_child_box">
+              <div 
+              v-for="(it,idx) in item.children" 
+              :key="idx+59000"
+              @click.stop="goto_online_page(it.url,index,idx)"
+              class="online_box online_child"
+              :style="{ backgroundColor: it.bg }"
+              >
+                <img :src="it.pic" alt />
+                <span :style="{ color: it.color }">{{ it.text }}</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -324,6 +339,7 @@ export default {
       now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
       now_type: 0,
       now_app: 0,
+      now_online:-1,
       manage_flag: false,
       health: uuidv1(),
       yy_asy: uuidv1(),
@@ -956,8 +972,27 @@ export default {
         {
           text: "应用创新",
           pic: require("@/assets/imgs/home_tool_ic_yycx.png"),
+          move_pic:'',
           bg: "#e7fdfc",
-          color: "#25bdb1"
+          move_bg:'#b2e4e1',
+          color: "#25bdb1",
+          move_color:'#009488',
+          children:[
+            {
+              text: "镜像形式",
+              pic: require("@/assets/imgs/home_tool_ic_jxxs.png"),
+              bg: "#e7fdfc",
+              color: "#25bdb1",
+              url:'/app_build',
+            },
+            {
+              text: "代码形式",
+              pic: require("@/assets/imgs/home_tool_ic_dmxs.png"),
+              bg: "#d3f6f4",
+              color: "#25bdb1",
+              url:'',
+            },
+          ]
         }
       ],
       service_arr: [
@@ -1020,6 +1055,12 @@ export default {
     }
   },
   methods: {
+    enter_online_tool(index){
+      this.now_online = index
+    },
+    leave_online_tool(){
+      this.now_online = -1
+    },
     gotopage(id, deploy) {
       if (deploy) {
         this.$router.push(this.detailsUrl1[0][1] + deploy);
@@ -1072,6 +1113,11 @@ export default {
           }
         });
     },
+    goto_online_page(url,index,idx){
+      if(url){
+        this.$router.push(url);
+      }
+    },
     get_service_list() {
       this.$http
         .get(
@@ -1865,6 +1911,7 @@ export default {
   text-align: center;
   float: left;
   margin-right: 20px;
+  cursor: pointer;
   margin-bottom: 15px;
 }
 .online_contain .online_box:nth-child(3n) {
@@ -1874,6 +1921,21 @@ export default {
   vertical-align: -4px;
   margin-right: 10px;
 }
+.online_box:hover{
+  height: auto;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.online_box .online_child{
+  margin-bottom: 0;
+  border-radius:0;
+}
+.online_child_box{
+  display: none;
+}
+.online_box:hover .online_child_box{
+  display: block;
+}
 .myservice,
 .myapp {
   width: 100%;