优化样式

hejianhao

2025-04-28 c6cda29ad2b10d71d403ac6be4dc685236e7523b

优化样式

 src/layouts/index.vue

@@ -25,10 +25,11 @@
            </div>

        </div>

        <div class="menu w100 bgColor1">

            <div v-for="(item, index) in routesList" :key="index" class="flex a-center h100">

                <div v-if="!item.meta || !item.meta.title" class="h100">

            <template v-for="(item, index) in routesList">

                <template v-if="!item.meta || !item.meta.title">

                    <template v-for="(item2, index2) in item.children">

                        <div :key="index2" @click="pushPath(item2.path)" v-if="!item2.meta.hide"

                        <div v-if="!item2.meta.hide" :key="index2"

                            @click="pushPath(item2.path)"

                            class="flex a-center j-center h100 br--18 w--160 menuItemHover pointer"

                            :class="item2.path == $route.path && 'bgColor2'">

                            <img v-if="item2.meta.icon" :src="require(`@/assets/routerIcon/${item2.meta.icon}.png`)"

@@ -38,9 +39,11 @@
                            </div>

                        </div>

                    </template>

                </div>

                <div v-else :class="$route.path.includes('systemManage') && 'bgColor2'"

                    class="h100 w--160 br--18 menuItemHover dropdown" @mouseenter="routerDropdown(true)"

                </template>

                <div v-else :key="index"

                    :class="$route.path.includes('systemManage') && 'bgColor2'"

                    class="h100 w--160 br--18 menuItemHover dropdown" 
                    @mouseenter="routerDropdown(true)"

                    @mouseleave="routerDropdown(false)">

                    <div class="flex a-center j-center h100">

                        <img :src="require(`@/assets/routerIcon/${item.meta.icon}.png`)"

@@ -51,14 +54,15 @@
                    </div>

                    <div v-if="routerIsOpen" class="dropdown-menu positionTwo">

                        <template v-for="(item2, index2) in item.children">

                            <div v-if="!item2.meta.hide" :key="index2" @click="pushPath(item.path + '/' + item2.path)"

                            <div v-if="!item2.meta.hide" :key="index2" 
                                @click="pushPath(item.path + '/' + item2.path)"

                                class="dropdown-item flex a-center">

                                {{ item2.meta.title }}

                            </div>

                        </template>

                    </div>

                </div>

            </div>

            </template>

        </div>

        <div class="main">

            <router-view></router-view>

@@ -201,6 +205,17 @@
    padding: 0 220px;

}



.menuItemHover {

    flex: 1;

    max-width: 160px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s;

}



.menuItemHover:hover {

    border-radius: 18px;

    background: #2b5ab6;