1

guanqb

2022-12-05 aeb5ae0fed62c8ce3864877cb1e68b723a52ffca

1

 src/views/lyout/index.vue

@@ -13,13 +13,23 @@
        <div class="main-header">
            <!-- <div class="title"></div> -->
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                    subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -33,13 +43,23 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                    subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -59,15 +79,23 @@
            <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>
@@ -280,7 +308,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
            & > img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -296,7 +324,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                &>span {
                & > span {
                    transform: skew(-58deg);
                }
            }
@@ -310,7 +338,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                &>span {
                & > span {
                    transform: skew(58deg);
                }
            }
@@ -320,11 +348,10 @@
            display: flex;
            align-items: center;

            &>.nav-list {

            & > .nav-list {
                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                & > span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -356,11 +383,12 @@
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        font-size: 18px;
                        font-size: 16px;
                        // background: $bg-blue;
                        background: $table-body-tr-n-color;
                        cursor: pointer;
                        box-sizing: content-box;
                        font-weight: normal;
                    }

                    div:first-child {
@@ -372,7 +400,7 @@
                    }

                    div:hover {
                        text-shadow: 0px 1px 1px #fff;
                        background-color: ragb(0, 0, 0, 0.8);
                    }
                }
            }