Parcourir la source

添加半圆导航栏环境/工具跳转

qinzhipeng_v@didiglobal.com il y a 4 ans
Parent
commit
a2e3dee5bc

+ 42 - 15
src/components/newLayout/Head.vue

@@ -10,11 +10,18 @@
       </div>
       <div class="name">{{ item.name }}</div>
     </div>
-    <div :class="[target ? 'div1' : 'div2']">
-      <div v-if="!target" class="div-child" @click="$router.push({ name: 'Interface' })"><svg-icon icon-class="tool-enter" /></div>
-      <div v-if="!target" class="div-child" @click="$router.push({ name: 'env' })"><svg-icon icon-class="env-enter" /></div>
+    <div @mouseleave="target = true">
+      <div :class="[target ? 'nav-div1' : 'nav-div2']">
+        <el-tooltip v-if="!target" class="item" effect="dark" content="工具集合" placement="right">
+          <div class="div-child" @click="$router.push({ name: 'Interface' })"><svg-icon icon-class="tool-enter" /></div>
+        </el-tooltip>
+        <el-tooltip v-if="!target" class="item" effect="dark" content="环境平台" placement="right">
+          <div class="div-child" @click="$router.push({ name: 'env' })"><svg-icon icon-class="env-enter" /></div>
+        </el-tooltip>
+      </div>
+      <div class="nav-div3 nav-circular" />
+      <div class="nav-div4 nav-circular" @mouseenter="target = false" />
     </div>
-    <div class="div3" @click="getTarget" />
     <!-- <div v-show="navTagType === 2" class="nav-tag-type" @click="setNavTagType(1)">
       <i class="el-icon-notebook-2" style="transform: rotate(90deg);" />
     </div>
@@ -230,38 +237,52 @@ export default {
   }
 }
 </style>
-<style lang="scss">
+<style lang="scss" scoped>
 .head-popover {
   box-shadow: 10px 0px 11px #dedede;
   /deep/ .ant-popover-inner-content {
     padding: 0;
   }
 }
-.div1 {
-  width:25px;height:50px;border-radius: 0 50px 50px 0;line-height:50px;background: #FFF; position: absolute; bottom: 172px; left: 0;border: 1px solid #333;opacity: 0.5;animation:myfirsts 0.5s;
+.nav-div1 {
+  width:25px;height:50px;border-radius: 0 50px 50px 0;line-height:50px;background: #FFF; position: absolute; bottom: 172px; left: 0;border: 1px solid #333;opacity: 0.8;animation:myfirsts 0.5s;
 }
-.div2 {
-  bottom: 117px; width:80px; height:160px; line-height:160px;border-radius: 0 80px 80px 0;;background: rgb(255, 255, 255); position: absolute; left: 0;opacity: 0.5;animation:myfirst 1s;
+.nav-div2 {
+  bottom: 122px; width:70px; height:150px; line-height:150px;border-radius: 0 80px 80px 0;;background: rgb(255, 255, 255); position: absolute; left: 0;opacity: 0.8;animation:myfirst 1s;
 }
 @keyframes myfirst
 {
 	from {bottom: 172px; width:25px; height:50px; line-height:50px;}
-	to {bottom: 117px; width:80px; height:160px; line-height:160px;}
+	to {bottom: 122px; width:70px; height:150px; line-height:150px;}
 }
 
 @keyframes myfirsts
 {
-	from {bottom: 117px; width:80px; height:160px; line-height:160px;}
+	from {bottom: 122px; width:70px; height:150px; line-height:150px;}
   to {bottom: 172px; width:25px; height:50px; line-height:50px;}
 }
 
-.div3 {
-  width:25px;height:50px;border-radius: 0 50px 50px 0;line-height:50px;background: #FFF; position: absolute; bottom: 172px; left: 0;border: 1px solid #333;cursor: pointer;
+.nav-div3 {
+  width:25px;
+  height:50px;
+  line-height:50px;
+  background: #FFF;
+  bottom: 172px;
+  border: 1px solid #eee;
+  opacity: 0.63;
+}
+.nav-div4 {
+  width:20px;
+  height:40px;
+  line-height:45px;
+  background: #FFF;
+  bottom: 177px;
+  border: 1px solid #eee;
 }
 .div-child {
   text-align: right;
-  margin-right: 33px;
-  line-height: 80px;
+  margin-right: 24px;
+  line-height: 75px;
   cursor: pointer;
   opacity: 1;
   animation:myfirs 4s;
@@ -271,4 +292,10 @@ export default {
 	from {opacity: 0}
   to {opacity: 1}
 }
+.nav-circular {
+  position: absolute;
+  left: 0;
+  border-radius: 0 50px 50px 0;
+  cursor: pointer;
+}
 </style>

+ 7 - 1
src/views/projectManage/components/demand.vue

@@ -158,7 +158,13 @@
     <el-row :gutter="20">
       <el-col v-for="(item, index) in scheduleDetail" :key="index" :span="6"><span class="demandLayout">{{ index }}:</span><span class="demandeta">{{ item.startTime }} ~ {{ item.endTime }}</span></el-col>
     </el-row>
-    <el-row><span class="demandLayout">预计上线版本:</span> <span v-for="item in preOnlineVersion" :key="item" class="demandeta">{{ item }}</span></el-row>
+    <el-row>
+      <span class="demandLayout">预计上线版本:</span>
+      <span v-for="item in preOnlineVersion" :key="item" class="demandeta">{{ item }}</span>
+      <el-tooltip class="item" effect="dark" content="版本有问题?点击触发重新计算!" placement="right">
+        <svg-icon icon-class="float_反馈_icon_close" />
+      </el-tooltip>
+    </el-row>
     <!-- 日期详情 -->
 
     <!-- 排期锁定弹窗 -->

+ 9 - 2
src/views/projectManage/taskList/components/scheduleList.vue

@@ -103,10 +103,17 @@
       <el-row v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length>0">
         <el-col :span="2">预计上线版本:</el-col>
         <el-col :span="6">
-          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span><br>
+          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span>
+          <el-tooltip class="item" effect="dark" content="版本有问题?点击触发重新计算!" placement="right">
+            <svg-icon icon-class="float_反馈_icon_close" />
+          </el-tooltip>
         </el-col>
       </el-row>
-      <el-row v-else>预计上线版本:</el-row>
+      <el-row v-else>预计上线版本:
+        <el-tooltip class="item" effect="dark" content="版本有问题?点击触发重新计算!" placement="right">
+          <svg-icon icon-class="float_反馈_icon_close" />
+        </el-tooltip>
+      </el-row>
     </div>
     <modify-schedule
       v-if="visibleSchedule"