edit.vue 3.1 KB

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