|
@@ -1,21 +1,23 @@
|
|
|
+<!-- 楼层功能右下侧hove的时候出现编辑平面图-->
|
|
|
<template>
|
|
|
<div class='edit_map'>
|
|
|
- <span class='edit-icon'>
|
|
|
- <a-icon type='edit' style='color:#fff' />
|
|
|
- </span>
|
|
|
+ <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
|
|
|
+ <span class='edit-icon'>
|
|
|
+ <a-icon type='edit' style='color:#fff' />
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
<div class='hover-div'>
|
|
|
- <a-popover placement='left'>
|
|
|
- <template slot='content'>编辑图例</template>
|
|
|
- <a-button type='primary'>
|
|
|
+ <el-tooltip class='item' effect='dark' content='111' placement='left'>
|
|
|
+ <span class='icon1'>
|
|
|
<a-icon type='form' />
|
|
|
- </a-button>
|
|
|
- </a-popover>
|
|
|
- <a-popover placement='left'>
|
|
|
- <template slot='content'>修改</template>
|
|
|
- <a-button type='primary'>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
|
|
|
+ <span class='icon2' @click='dump'>
|
|
|
<a-icon type='form' />
|
|
|
- </a-button>
|
|
|
- </a-popover>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -25,7 +27,9 @@ export default {
|
|
|
data() {
|
|
|
return {}
|
|
|
},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ dump() {}
|
|
|
+ },
|
|
|
mounted() {}
|
|
|
}
|
|
|
</script>
|
|
@@ -35,25 +39,54 @@ export default {
|
|
|
bottom: 28px;
|
|
|
right: 28px;
|
|
|
z-index: 2;
|
|
|
- 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;
|
|
|
.edit-icon {
|
|
|
- &:hover + .hover-div {
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ // &:hover + .hover-div {
|
|
|
+ // display: block;
|
|
|
+ // }
|
|
|
}
|
|
|
.hover-div {
|
|
|
position: absolute;
|
|
|
bottom: 58px;
|
|
|
right: 28px;
|
|
|
- display: none;
|
|
|
+ // display: none;
|
|
|
+ .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>
|