left_toolbar.vue 5.9 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. v-bind:class="{ actives:item.isChoice}"
  11. >
  12. <div class="item">
  13. <img
  14. v-show="!item.isHover && !item.isChoice"
  15. :src="require(`./../../assets/images/${item.img}`)"
  16. alt
  17. />
  18. <img
  19. v-show="item.isHover || item.isChoice "
  20. :src="require(`./../../assets/images/${item.hoverImg}`)"
  21. alt
  22. />
  23. </div>
  24. </li>
  25. </ul>
  26. <ul class="list-2">
  27. <li
  28. v-on:mouseout="mouseoutActive(item)"
  29. v-on:mouseover="mouseoverActive(item)"
  30. v-for="(item,i) in systemChoice"
  31. :key="i"
  32. >
  33. <div class="item">
  34. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
  35. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
  36. <div>{{item.name}}</div>
  37. </div>
  38. </li>
  39. </ul>
  40. <div class="bottom-item">
  41. <a-icon type="ellipsis" />
  42. <span>选择原件</span>
  43. </div>
  44. </div>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. // 基础选择
  51. baseChoice: [
  52. {
  53. img: "t-select.png", //logo
  54. hoverImg: "t-select-hover.png", //hoverlogo
  55. isHover: true, //是否hover
  56. isChoice: true,
  57. name: "选择", //类型
  58. cmd: 0
  59. },
  60. {
  61. img: "t-line.png", //logo
  62. hoverImg: "t-line-hover.png", //hoverlogo
  63. isHover: false, //是否hover
  64. isChoice: false,
  65. name: "画线", //类型
  66. cmd: 1
  67. },
  68. {
  69. img: "t-text.png", //logo
  70. hoverImg: "t-text-hover.png", //hoverlogo
  71. isHover: false, //是否hover
  72. isChoice: false,
  73. name: "画文字", //类型
  74. cmd: 2
  75. },
  76. {
  77. img: "t-img.png", //logo
  78. hoverImg: "t-img-hover.png", //hoverlogo
  79. isHover: false, //是否hover
  80. isChoice: false,
  81. name: "画图片", //类型
  82. cmd: 3
  83. }
  84. ],
  85. // 系统选择
  86. systemChoice: [
  87. {
  88. img: "t-position.png", //logo
  89. hoverImg: "t-position-hover.png", //hoverlogo
  90. isHover: false, //是否hover
  91. name: "位置区域" //类型
  92. },
  93. {
  94. img: "t-equipment.png", //logo
  95. hoverImg: "t-equipment-hover.png", //hoverlogo
  96. isHover: false, //是否hover
  97. name: "设备设施" //类型
  98. },
  99. {
  100. img: "t-papeline.png", //logo
  101. hoverImg: "t-papeline-hover.png", //hoverlogo
  102. isHover: false, //是否hover
  103. name: "管线桥架" //类型
  104. }
  105. ]
  106. };
  107. },
  108. props: {
  109. cmd: {
  110. type: Number,
  111. default: 0,
  112. required: false
  113. }
  114. },
  115. methods: {
  116. // 触入
  117. mouseoverActive(item) {
  118. item.isHover = true;
  119. },
  120. mouseoutActive(item) {
  121. item.isHover = false;
  122. },
  123. toolActionClick(item) {
  124. this.baseChoice.forEach(item => {
  125. item.isChoice = false;
  126. });
  127. item.isChoice = true;
  128. this.$emit("toolActionClick", item);
  129. }
  130. },
  131. watch: {
  132. cmd(cmd) {
  133. this.baseChoice.forEach(item => {
  134. item.isChoice = false;
  135. if (item.cmd == cmd) {
  136. item.isChoice = true;
  137. }
  138. });
  139. }
  140. }
  141. };
  142. </script>
  143. <style lang="less">
  144. #left_toolbar {
  145. width: 68px;
  146. height: 707px;
  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. .actives {
  258. background: #e1f2ff;
  259. border-radius: 8px;
  260. opacity: 0.89;
  261. color: #0091ff;
  262. }
  263. }
  264. </style>