diff --git a/src/pages/workbench/workPlace.vue b/src/pages/workbench/workPlace.vue index b2899586ed213274c4e1056f160680c8a4d4100d..10cb5bb8a7f1753070f3f2bf7e1530daf06fc850 100644 --- a/src/pages/workbench/workPlace.vue +++ b/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 }" > - - {{ item.text }} + + {{ item.text }} +
+
+ + {{ it.text }} +
+
@@ -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%;