|
@@ -1,36 +1,20 @@
|
|
|
<template>
|
|
|
<div id="left_toolbar">
|
|
|
<ul class="list-1">
|
|
|
- <li>
|
|
|
+ <li
|
|
|
+ v-on:mouseout="mouseoutActive(item)"
|
|
|
+ v-on:mouseover="mouseoverActive(item)"
|
|
|
+ v-for="(item,i) in baseChoice"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
<div class="item">
|
|
|
- <img src="./../../assets/images/t-select.png" alt />
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="item">
|
|
|
- <img src="./../../assets/images/t-select.png" alt />
|
|
|
- </div>
|
|
|
- <div class="tooltip">
|
|
|
- <a-card style="width: 300px">
|
|
|
- <p>Card content</p>
|
|
|
- <p>Card content</p>
|
|
|
- <p>Card content</p>
|
|
|
- </a-card>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="item">
|
|
|
- <img src="./../../assets/images/t-select.png" alt />
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="item">
|
|
|
- <img src="./../../assets/images/t-select.png" alt />
|
|
|
+ <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
|
+ <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="list-2">
|
|
|
- <li>
|
|
|
+ <!-- <li>
|
|
|
<div class="item">
|
|
|
<a-icon type="team" />
|
|
|
<div>消防系统</div>
|
|
@@ -42,25 +26,19 @@
|
|
|
<p>Card content</p>
|
|
|
</a-card>
|
|
|
</div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
+ </li>-->
|
|
|
+ <li
|
|
|
+ v-on:mouseout="mouseoutActive(item)"
|
|
|
+ v-on:mouseover="mouseoverActive(item)"
|
|
|
+ v-for="(item,i) in systemChoice"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
<div class="item">
|
|
|
- <a-icon type="team" />
|
|
|
+ <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
|
+ <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
|
|
|
<div>弱电系统</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li>
|
|
|
- <div class="item">
|
|
|
- <a-icon type="team" />
|
|
|
- <div>暖通系统</div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="item">
|
|
|
- <a-icon type="team" />
|
|
|
- <div>电梯系统</div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
</ul>
|
|
|
<div class="bottom-item">
|
|
|
<a-icon type="ellipsis" />
|
|
@@ -68,6 +46,71 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 基础选择
|
|
|
+ baseChoice: [
|
|
|
+ {
|
|
|
+ img: "t-select.png", //logo
|
|
|
+ hoverImg: "t-select-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "选择" //类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "t-line.png", //logo
|
|
|
+ hoverImg: "t-line-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "画线" //类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "t-text.png", //logo
|
|
|
+ hoverImg: "t-text-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "画文字" //类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "t-img.png", //logo
|
|
|
+ hoverImg: "t-img-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "画图片" //类型
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 系统选择
|
|
|
+ systemChoice: [
|
|
|
+ {
|
|
|
+ img: "t-position.png", //logo
|
|
|
+ hoverImg: "t-position-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "位置区域" //类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "t-equipment.png", //logo
|
|
|
+ hoverImg: "t-equipment-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "设备设施" //类型
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: "t-papeline.png", //logo
|
|
|
+ hoverImg: "t-papeline-hover.png", //hoverlogo
|
|
|
+ isHover: false, //是否hover
|
|
|
+ name: "管线桥架" //类型
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 触入
|
|
|
+ mouseoverActive(item) {
|
|
|
+ item.isHover = true;
|
|
|
+ },
|
|
|
+ mouseoutActive(item) {
|
|
|
+ item.isHover = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
<style lang="less">
|
|
|
#left_toolbar {
|
|
|
width: 68px;
|
|
@@ -101,6 +144,11 @@
|
|
|
flex-direction: column;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
&:hover {
|
|
|
background: #e1f2ff;
|
|
@@ -128,16 +176,24 @@
|
|
|
position: relative;
|
|
|
.item {
|
|
|
margin: 0 auto;
|
|
|
+ height: 54px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
&:hover {
|
|
|
background: #e1f2ff;
|
|
|
border-radius: 8px;
|
|
|
opacity: 0.89;
|
|
|
- color: #fff;
|
|
|
+ color: #0091ff;
|
|
|
}
|
|
|
.tooltip {
|
|
|
position: absolute;
|
|
@@ -151,6 +207,7 @@
|
|
|
font-size: 18px;
|
|
|
width: 100%;
|
|
|
bottom: 12px;
|
|
|
+ height: 54px;
|
|
|
left: 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -160,6 +217,13 @@
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+ &:hover {
|
|
|
+ background: #e1f2ff;
|
|
|
+ border-radius: 8px;
|
|
|
+ opacity: 0.89;
|
|
|
+ color: #0091ff;
|
|
|
+ height: 54px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|