样式调整

shuishen

2022-11-26 2f26fbc8e76dc8f4c87696367e2ead8f6b7a452a

 src/views/lyout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-18 10:39:09
 * @LastEditTime: 2022-11-26 10:45:02
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -19,28 +19,22 @@

            <!-- 菜单导航 -->
            <div class="menu-list">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
                    v-for="(item, index) in menuList" :key="index">
                    {{ item.menuName }}
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >{{ subItem.menuName }}</div>
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">{{
                                subItem.menuName
                        }}</div>
                    </div>
                </div>
            </div>

            <!-- 用户登录展示的 -->
            <!-- <div class="user-infor"></div> -->
            <div class="user-infor">
                <i class="el-icon-user-solid"></i>
            </div>
        </div>

        <div class="main-container">
@@ -48,23 +42,15 @@
            <mapBox ref="modalForm" />

            <!-- 主体内容区域 -->
            <div
                class="main-content"
                id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
            >
            <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>
@@ -106,6 +92,11 @@
                    menuName: '安保活动',
                    path: '/lyout/activity'
                },
                {
                    menuName: '运维管理',
                    openExternal: true,
                    path: 'http://192.168.0.105:8081/#/login'
                }
            ],

            show: true,
@@ -155,6 +146,11 @@
         * @return {*} 没有返回值
         */
        goToPath (params) {
            if (params.openExternal) {
                window.open(params.path)
                return
            }

            if (params.children && params.children.length > 0) return

            if (params.path) {
@@ -227,8 +223,8 @@
        justify-content: space-between;
        position: absolute;
        width: 100%;
        height: 80px;
        line-height: 80px;
        height: 60px;
        line-height: 60px;
        text-align: left;
        font-size: 44px;
        font-weight: bold;
@@ -240,12 +236,12 @@
            display: flex;
            align-items: center;
            width: 450px;
            font-size: 38px;
            font-size: 24px;
            // text-align: center;
            overflow: hidden;
            letter-spacing: 6px;

            & > img {
            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -254,13 +250,13 @@
        }

        .menu-list {
            margin-right: 10px;
            margin-right: 60px;
            display: flex;
            align-items: center;

            .nav-list.on {
                // color: rgba(32, 106, 181, 1);
                border-bottom: 3px solid #409eff;
                border-bottom: 2px solid #409eff;
                box-sizing: border-box;
            }

@@ -270,8 +266,8 @@
                display: flex;
                align-items: center;
                justify-content: center;
                height: 60px;
                font-size: 32px;
                height: 40px;
                font-size: 18px;
                font-weight: 400;
                cursor: pointer;
                border-bottom: 3px solid transparent;
@@ -279,7 +275,7 @@
                .sub-nav-list {
                    border-top: 14px solid transparent;
                    position: absolute;
                    top: 60px;
                    top: 40px;
                    width: 100%;
                    cursor: default;
                    z-index: 999;
@@ -304,6 +300,17 @@
                }
            }
        }

        .user-infor {
            position: absolute;
            top: 0;
            right: 0;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
        }
    }

    .main-container {
@@ -313,8 +320,8 @@

        .main-content {
            position: absolute;
            top: 80px;
            height: calc(100% - 80px);
            top: 60px;
            height: calc(100% - 60px);
        }

        .main-content.spread {