edit.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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. <el-tooltip class='item' effect='dark' content='111' placement='left'>
  11. <span class='icon1'>
  12. <a-icon type='form' />
  13. </span>
  14. </el-tooltip>
  15. <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
  16. <span class='icon2' @click='dump'>
  17. <a-icon type='form' />
  18. </span>
  19. </el-tooltip>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. components: {},
  26. data() {
  27. return {}
  28. },
  29. methods: {
  30. dump() {}
  31. },
  32. mounted() {}
  33. }
  34. </script>
  35. <style lang="less" scoped>
  36. .edit_map {
  37. position: fixed;
  38. bottom: 28px;
  39. right: 28px;
  40. z-index: 2;
  41. .edit-icon {
  42. width: 48px;
  43. height: 48px;
  44. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  45. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
  46. border-radius: 50%;
  47. text-align: center;
  48. line-height: 48px;
  49. display: inline-block;
  50. cursor: pointer;
  51. // &:hover + .hover-div {
  52. // display: block;
  53. // }
  54. }
  55. .hover-div {
  56. position: absolute;
  57. bottom: 58px;
  58. right: 28px;
  59. // display: none;
  60. .icon1 {
  61. width: 40px;
  62. height: 40px;
  63. background: rgba(255, 255, 255, 1);
  64. box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
  65. border: 1px solid rgba(31, 36, 41, 0.2);
  66. font-size: 16px;
  67. display: inline-block;
  68. color: #646c73;
  69. border-radius: 50%;
  70. text-align: center;
  71. line-height: 40px;
  72. cursor: pointer;
  73. }
  74. .icon2 {
  75. width: 40px;
  76. height: 40px;
  77. background: rgba(255, 255, 255, 1);
  78. box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
  79. border: 1px solid rgba(31, 36, 41, 0.2);
  80. font-size: 16px;
  81. display: inline-block;
  82. color: #646c73;
  83. border-radius: 50%;
  84. text-align: center;
  85. line-height: 40px;
  86. margin-top: 15px;
  87. cursor: pointer;
  88. }
  89. }
  90. }
  91. </style>