地图按钮位置

guanqb

2022-11-12 b8f10cb873bd29aea1636e0918767191d316a588

地图按钮位置

 package-lock.json

Diff too large

 src/components/shrink/index.vue

@@ -9,9 +9,7 @@
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
    <div class="shrink-box" @click="shrinkClick">
        {{ str }}
    </div>
    <div class="shrink-box" @click="shrinkClick">{{ str }}</div>
</template>

<script>
@@ -29,11 +27,15 @@
                this.str = '<<'
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn')

            } else {
                this.str = '>>'
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-img-btn').classList.add('shrink-btn')
            }
        }
    },
@@ -41,6 +43,8 @@
    beforeDestroy () {
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
        document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn')
    }
}
</script>

 src/styles/dc/index.scss

@@ -114,6 +114,9 @@
    left: 410px;
    bottom: 500px; 
}
.image-switch-icon-btn.shrink-btn {
    left: 410px !important;
}
.image-switch-img-btn {
    display: flex;
    align-items: center;
@@ -156,4 +159,7 @@
.image-switch-img-btn.imgbottom {
        left: 446px;
        bottom: 490px;
}
.image-switch-img-btn.shrink-btn {
    left: 410px !important;
}

 src/views/lyout/index.vue

@@ -19,10 +19,13 @@

            <!-- 菜单导航 -->
            <div class="menu-list">
                <div class="nav-list" :class="{ on: currentUrl == item.path }" @click="goToPath(item)"
                    v-for="(item, index) in menuList" :key="index">
                    {{ item.menuName }}
                </div>
                <div
                    class="nav-list"
                    :class="{ on: currentUrl == item.path }"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuList"
                    :key="index"
                >{{ item.menuName }}</div>
            </div>

            <!-- 用户登录展示的 -->
@@ -34,16 +37,23 @@
            <mapBox ref="modalForm" />

            <!-- 主体内容区域 -->
            <div class="main-content" id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <router-view ref='target-name'></router-view>
            <div
                class="main-content"
                id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
            >
                <router-view ref="target-name"></router-view>
            </div>


            <el-button v-show='leftShow' class="flexible-btn"
            <el-button
                v-show="leftShow"
                class="flexible-btn"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                @click="flexibelClick"></el-button>
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                id="FlexibleBtn"
                type="primary"
                @click="flexibelClick"
            ></el-button>
        </div>
    </div>
</template>
@@ -100,6 +110,8 @@
                this.$nextTick(() => {
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn')
                })

                if (this.currentUrl == '/lyout/home') {
@@ -140,10 +152,14 @@
            if (this.show) {
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-img-btn').classList.add('shrink-btn')
            } else {

                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn')
            }
        },

@@ -189,7 +205,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
            & > img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -219,10 +235,10 @@
                cursor: pointer;
                border-bottom: 3px solid transparent;
            }

        }

        .user-infor {}
        .user-infor {
        }
    }

    .main-container {