|
@@ -10,11 +10,18 @@
|
|
</div>
|
|
</div>
|
|
<div class="name">{{ item.name }}</div>
|
|
<div class="name">{{ item.name }}</div>
|
|
</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>
|
|
- <div class="div3" @click="getTarget" />
|
|
|
|
<!-- <div v-show="navTagType === 2" class="nav-tag-type" @click="setNavTagType(1)">
|
|
<!-- <div v-show="navTagType === 2" class="nav-tag-type" @click="setNavTagType(1)">
|
|
<i class="el-icon-notebook-2" style="transform: rotate(90deg);" />
|
|
<i class="el-icon-notebook-2" style="transform: rotate(90deg);" />
|
|
</div>
|
|
</div>
|
|
@@ -230,38 +237,52 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
-<style lang="scss">
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
.head-popover {
|
|
.head-popover {
|
|
box-shadow: 10px 0px 11px #dedede;
|
|
box-shadow: 10px 0px 11px #dedede;
|
|
/deep/ .ant-popover-inner-content {
|
|
/deep/ .ant-popover-inner-content {
|
|
padding: 0;
|
|
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
|
|
@keyframes myfirst
|
|
{
|
|
{
|
|
from {bottom: 172px; width:25px; height:50px; line-height:50px;}
|
|
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
|
|
@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;}
|
|
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 {
|
|
.div-child {
|
|
text-align: right;
|
|
text-align: right;
|
|
- margin-right: 33px;
|
|
|
|
- line-height: 80px;
|
|
|
|
|
|
+ margin-right: 24px;
|
|
|
|
+ line-height: 75px;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
opacity: 1;
|
|
animation:myfirs 4s;
|
|
animation:myfirs 4s;
|
|
@@ -271,4 +292,10 @@ export default {
|
|
from {opacity: 0}
|
|
from {opacity: 0}
|
|
to {opacity: 1}
|
|
to {opacity: 1}
|
|
}
|
|
}
|
|
|
|
+.nav-circular {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ border-radius: 0 50px 50px 0;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|