1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <!-- 楼层功能右下侧hove的时候出现编辑平面图-->
- <template>
- <div class='edit_map'>
- <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'>
- <el-tooltip class='item' effect='dark' content='111' placement='left'>
- <span class='icon1'>
- <a-icon type='form' />
- </span>
- </el-tooltip>
- <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
- <span class='icon2' @click='dump'>
- <a-icon type='form' />
- </span>
- </el-tooltip>
- </div>
- </div>
- </template>
- <script>
- export default {
- components: {},
- data() {
- return {}
- },
- methods: {
- dump() {}
- },
- 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;
- // &:hover + .hover-div {
- // display: block;
- // }
- }
- .hover-div {
- position: absolute;
- bottom: 58px;
- right: 28px;
- // 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>
|