left_toolbar.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <template>
  2. <div id="left_toolbar">
  3. <ul class="list-1">
  4. <li
  5. v-on:mouseout="mouseoutActive(item)"
  6. v-on:mouseover="mouseoverActive(item)"
  7. v-for="(item,i) in baseChoice"
  8. :key="i"
  9. @click="toolActionClick(item)"
  10. >
  11. <div class="item">
  12. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
  13. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
  14. </div>
  15. </li>
  16. </ul>
  17. <ul class="list-2">
  18. <!-- <li>
  19. <div class="item">
  20. <a-icon type="team" />
  21. <div>消防系统</div>
  22. </div>
  23. <div class="tooltip">
  24. <a-card style="width: 300px">
  25. <p>Card content</p>
  26. <p>Card content</p>
  27. <p>Card content</p>
  28. </a-card>
  29. </div>
  30. </li>-->
  31. <li
  32. v-on:mouseout="mouseoutActive(item)"
  33. v-on:mouseover="mouseoverActive(item)"
  34. v-for="(item,i) in systemChoice"
  35. :key="i"
  36. >
  37. <div class="item">
  38. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt/>
  39. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt/>
  40. <div>{{item.name}}</div>
  41. </div>
  42. </li>
  43. </ul>
  44. <!-- 提取-->
  45. <ul class="list-2 border-top">
  46. <li
  47. v-on:mouseout="mouseoutActive(item)"
  48. v-on:mouseover="mouseoverActive(item)"
  49. v-for="(item,i) in extractChoice"
  50. :key="i"
  51. >
  52. <div class="item">
  53. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt/>
  54. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt/>
  55. <div>{{item.name}}</div>
  56. </div>
  57. </li>
  58. </ul>
  59. <div class="bottom-item">
  60. <a-icon type="ellipsis"/>
  61. <span>选择原件</span>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. export default {
  67. data() {
  68. return {
  69. // 基础选择
  70. baseChoice: [
  71. {
  72. img: "t-select.png", //logo
  73. hoverImg: "t-select-hover.png", //hoverlogo
  74. isHover: false, //是否hover
  75. name: "选择" //类型
  76. },
  77. {
  78. img: "t-line.png", //logo
  79. hoverImg: "t-line-hover.png", //hoverlogo
  80. isHover: false, //是否hover
  81. name: "画线" //类型
  82. },
  83. {
  84. img: "t-text.png", //logo
  85. hoverImg: "t-text-hover.png", //hoverlogo
  86. isHover: false, //是否hover
  87. name: "画文字" //类型
  88. },
  89. {
  90. img: "t-img.png", //logo
  91. hoverImg: "t-img-hover.png", //hoverlogo
  92. isHover: false, //是否hover
  93. name: "画图片" //类型
  94. }
  95. ],
  96. // 系统选择
  97. systemChoice: [
  98. {
  99. img: "t-position.png", //logo
  100. hoverImg: "t-position-hover.png", //hoverlogo
  101. isHover: false, //是否hover
  102. name: "位置区域" //类型
  103. },
  104. {
  105. img: "t-equipment.png", //logo
  106. hoverImg: "t-equipment-hover.png", //hoverlogo
  107. isHover: false, //是否hover
  108. name: "设备设施" //类型
  109. },
  110. {
  111. img: "t-papeline.png", //logo
  112. hoverImg: "t-papeline-hover.png", //hoverlogo
  113. isHover: false, //是否hover
  114. name: "管线桥架" //类型
  115. }
  116. ],
  117. //提取
  118. extractChoice: [
  119. {
  120. img: "t-slices.png", //logo
  121. hoverImg: "t-slices-hover.png", //hoverlogo
  122. isHover: false, //是否hover
  123. name: "提取" //类型
  124. }
  125. ]
  126. };
  127. },
  128. methods: {
  129. // 触入
  130. mouseoverActive(item) {
  131. item.isHover = true;
  132. },
  133. mouseoutActive(item) {
  134. item.isHover = false;
  135. },
  136. toolActionClick(item) {
  137. this.$emit('toolActionClick',item.name);
  138. }
  139. }
  140. };
  141. </script>
  142. <style lang="less">
  143. #left_toolbar {
  144. width: 68px;
  145. /*height: 707px;*/
  146. height: 100%;
  147. background: rgba(255, 255, 255, 1);
  148. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  149. padding: 0 0 12px 0;
  150. box-sizing: border-box;
  151. position: relative;
  152. ul,
  153. li {
  154. padding: 0;
  155. margin: 0;
  156. list-style: none;
  157. }
  158. .list-1 {
  159. padding-top: 1px;
  160. box-sizing: border-box;
  161. border-bottom: 1px solid #c3c7cb;
  162. li {
  163. width: 64px;
  164. min-height: 42px;
  165. margin: 6px auto;
  166. display: flex;
  167. align-items: center;
  168. justify-content: center;
  169. position: relative;
  170. .item {
  171. margin: 0 auto;
  172. display: flex;
  173. flex-direction: column;
  174. position: relative;
  175. cursor: pointer;
  176. font-size: 12px;
  177. img {
  178. width: 25px;
  179. height: 25px;
  180. }
  181. }
  182. &:hover {
  183. background: #e1f2ff;
  184. border-radius: 8px;
  185. opacity: 0.89;
  186. color: #fff;
  187. }
  188. .tooltip {
  189. position: absolute;
  190. left: 90px;
  191. top: 0;
  192. }
  193. }
  194. }
  195. .list-2 {
  196. padding-top: 1px;
  197. box-sizing: border-box;
  198. li {
  199. width: 64px;
  200. min-height: 42px;
  201. margin: 6px auto;
  202. display: flex;
  203. align-items: center;
  204. justify-content: center;
  205. position: relative;
  206. .item {
  207. margin: 0 auto;
  208. height: 54px;
  209. display: flex;
  210. flex-direction: column;
  211. position: relative;
  212. cursor: pointer;
  213. align-items: center;
  214. font-size: 12px;
  215. img {
  216. width: 25px;
  217. height: 25px;
  218. margin-top: 6px;
  219. }
  220. }
  221. &:hover {
  222. background: #e1f2ff;
  223. border-radius: 8px;
  224. opacity: 0.89;
  225. color: #0091ff;
  226. }
  227. .tooltip {
  228. position: absolute;
  229. left: 90px;
  230. top: 0;
  231. }
  232. }
  233. }
  234. .bottom-item {
  235. position: absolute;
  236. font-size: 18px;
  237. width: 100%;
  238. bottom: 12px;
  239. height: 54px;
  240. left: 0;
  241. display: flex;
  242. align-items: center;
  243. justify-content: center;
  244. flex-direction: column;
  245. cursor: pointer;
  246. span {
  247. font-size: 12px;
  248. }
  249. &:hover {
  250. background: #e1f2ff;
  251. border-radius: 8px;
  252. opacity: 0.89;
  253. color: #0091ff;
  254. height: 54px;
  255. }
  256. }
  257. .border-top{
  258. border-top: 1px solid #c3c7cb;
  259. }
  260. }
  261. </style>