123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <!-- 楼层功能右下侧hove的时候出现编辑平面图-->
- <template>
- <div class='edit_map'>
- <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
- <span class='edit-icon'>
- <i class='el-icon-edit'></i>
- <span v-if='len>0'></span>
- </span>
- </el-tooltip>
- <div class='hover-div'>
- <span class='icon1' @click='legendClik'>
- <a-icon type='form' />
- </span>
- <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
- <span class='icon2' @click='dump'>
- <a-icon type='form' />
- </span>
- </el-tooltip>
- </div>
- <remarks ref='EditdMarks'></remarks>
- </div>
- </template>
- <script>
- import Remarks from './legendremarks'
- export default {
- data() {
- return {
- len: 2,
- text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后的数字,代表此位置的数量'
- }
- },
- methods: {
- dump() {},
- legendClik() {
- this.$refs.EditdMarks.showModal()
- }
- },
- components: {
- Remarks
- },
- mounted() {}
- }
- </script>
- <style lang="less" scoped>
- .edit_map {
- position: fixed;
- bottom: 28px;
- right: 28px;
- z-index: 2;
- .edit-icon {
- width: 48px;
- height: 48px;
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
- border-radius: 50%;
- text-align: center;
- line-height: 48px;
- display: inline-block;
- cursor: pointer;
- position: relative;
- i {
- color: #ffffff;
- font-size: 20px;
- }
- span {
- position: absolute;
- right: 4px;
- top: 2px;
- width: 10px;
- height: 10px;
- display: inline-block;
- background: #f54a45;
- border-radius: 50%;
- }
- }
- .hover-div {
- position: absolute;
- bottom: 58px;
- right: 28px;
- .icon1 {
- width: 40px;
- height: 40px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
- border: 1px solid rgba(31, 36, 41, 0.2);
- font-size: 16px;
- display: inline-block;
- color: #646c73;
- border-radius: 50%;
- text-align: center;
- line-height: 40px;
- cursor: pointer;
- }
- .icon2 {
- width: 40px;
- height: 40px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
- border: 1px solid rgba(31, 36, 41, 0.2);
- font-size: 16px;
- display: inline-block;
- color: #646c73;
- border-radius: 50%;
- text-align: center;
- line-height: 40px;
- margin-top: 15px;
- cursor: pointer;
- }
- }
- }
- </style>
- <style lang="less">
- </style>
|