edit.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!-- 楼层功能右下侧hove的时候出现编辑平面图-->
  2. <template>
  3. <div class='edit_map'>
  4. <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
  5. <span class='edit-icon'>
  6. <a-icon type='edit' style='color:#fff' />
  7. </span>
  8. </el-tooltip>
  9. <div class='hover-div'>
  10. <span class='icon1' @click='legendClik'>
  11. <a-icon type='form' />
  12. </span>
  13. <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
  14. <span class='icon2' @click='dump'>
  15. <a-icon type='form' />
  16. </span>
  17. </el-tooltip>
  18. </div>
  19. <remarks ref='EditdMarks'></remarks>
  20. </div>
  21. </template>
  22. <script>
  23. import Remarks from './legendremarks'
  24. export default {
  25. data() {
  26. return {
  27. text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后 的数字,代表此位置的数量'
  28. }
  29. },
  30. methods: {
  31. dump() {},
  32. legendClik() {
  33. this.$refs.EditdMarks.showModal()
  34. }
  35. },
  36. components: {
  37. Remarks
  38. },
  39. mounted() {}
  40. }
  41. </script>
  42. <style lang="less" scoped>
  43. .edit_map {
  44. position: fixed;
  45. bottom: 28px;
  46. right: 28px;
  47. z-index: 2;
  48. .edit-icon {
  49. width: 48px;
  50. height: 48px;
  51. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  52. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
  53. border-radius: 50%;
  54. text-align: center;
  55. line-height: 48px;
  56. display: inline-block;
  57. cursor: pointer;
  58. // &:hover + .hover-div {
  59. // display: block;
  60. // }
  61. }
  62. .hover-div {
  63. position: absolute;
  64. bottom: 58px;
  65. right: 28px;
  66. // display: none;
  67. .icon1 {
  68. width: 40px;
  69. height: 40px;
  70. background: rgba(255, 255, 255, 1);
  71. box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
  72. border: 1px solid rgba(31, 36, 41, 0.2);
  73. font-size: 16px;
  74. display: inline-block;
  75. color: #646c73;
  76. border-radius: 50%;
  77. text-align: center;
  78. line-height: 40px;
  79. cursor: pointer;
  80. }
  81. .icon2 {
  82. width: 40px;
  83. height: 40px;
  84. background: rgba(255, 255, 255, 1);
  85. box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
  86. border: 1px solid rgba(31, 36, 41, 0.2);
  87. font-size: 16px;
  88. display: inline-block;
  89. color: #646c73;
  90. border-radius: 50%;
  91. text-align: center;
  92. line-height: 40px;
  93. margin-top: 15px;
  94. cursor: pointer;
  95. }
  96. }
  97. }
  98. </style>