zoukankan      html  css  js  c++  java
  • element el-menu 包含下拉菜单

    例如:

    <div class="el-menu-demo">
                <el-menu :default-active="$route.path" class="el-menus" mode="horizontal" @select="handleSelect" :router="true">
                    <el-menu-item index="/dashboard">
                        <span>菜单管理</span>
                    </el-menu-item>
                    <el-menu-item index="/logoconfigur">
                        <span>LOGO配置</span>
                    </el-menu-item>
                    <el-submenu index="/contentmanage">
                        <template slot="title">内容管理</template>
                        <el-menu-item class="acc" index="/contentmanage/index">首页</el-menu-item>
                        <el-menu-item class="acc" index="/contentmanage/companyprofile">公司简介</el-menu-item>
                        <el-menu-item class="acc" index="/contentmanage/contactus">联系我们</el-menu-item>
                        <el-menu-item class="acc" index="/contentmanage/openplatform">开放平台</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/bottommanage">
                        <span>底部管理</span>
                    </el-menu-item>
                </el-menu>
            </div>

    route:

    {
            path: '/contentmanage/index',
            id:'3',
            component: Layout,
            redirect: 'contentmanage/index',
            alwaysShow: true,
            // name: '内容管理',
            // meta: {title: '内容管理', icon: 'dashboard'},
            children: [
                {
                    path: '/contentmanage/index',
                    component: () => import('@/views/contentmanage/index'),//首页
                    name: '首页',
                    meta: { title: '首页', icon: 'dashboard', affix: true }
                },
                {
                    path: '/contentmanage/companyprofile',
                    component: () => import('@/views/contentmanage/companyprofile'),//公司简介
                    name: '公司简介',
                    meta: { title: '公司简介', icon: 'dashboard', affix: true }
                },
                {
                    path: '/contentmanage/contactus',
                    component: () => import('@/views/contentmanage/contactus'),//联系我们
                    name: '联系我们',
                    meta: { title: '联系我们', icon: 'dashboard', affix: true }
                },
                {
                    path: '/contentmanage/openplatform',
                    component: () => import('@/views/contentmanage/openplatform'),//开放平台
                    name: '开放平台',
                    meta: { title: '开放平台', icon: 'dashboard', affix: true }
                }
            ]
        },

    一级菜单样式设置:

    .el-menu-demo{
                 1300px;
                margin: auto;
                text-align: left;
                .el-menu-item{
                    height: 45px;
                    line-height: 45px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #919193;
                }
                .el-menus{
                    display: inline-block;
                    vertical-align: top;
                    .el-menu-item.is-active{
                        border-bottom: none;
                        color: #3C56C6;
                    }
                    .el-submenu{
                        height: 45px;
                        .el-submenu__title{
                            height: 45px;
                            line-height: 50px;
                            color: #919193;
                            font-weight: 600;
                        }
                    }
                    .el-submenu.is-active .el-submenu__title{
                        border-bottom: none !important;
                        color: #3C56C6 !important;
                    }
                }
            }

    二级菜单样式设置:

    .el-menu--horizontal{
            background: #fff;
             100%;
        }
        .el-menu--horizontal .el-menu--popup-bottom-start{
            margin-top: 0 !important;
             1160px;
            margin: auto;
            box-shadow: none;
        }
        .acc{
            display: inline-block !important;
            vertical-align: middle !important;
             110px;
            text-align: center;
        }
        .acc.is-active{
            color: #3C56C6 !important;
            border-bottom: 2px solid #3C56C6;
        }
        .condition-table{
            margin-top: 20px;
            .pagein_box{
                margin-top: 20px;
                text-align: right;
            }
        }
  • 相关阅读:
    与MS Project相关的两个项目
    最后的报告bug
    oo第二阶段的总结
    第一阶段的反思和改变
    面向对象设计与构造第四次课程总结
    面向对象设计与构造第三次课程总结
    面向对象设计与构造第一次课程总结
    OO游记之六月篇
    OO游记之五月篇
    OO游记之四月篇
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/14633609.html
Copyright © 2011-2022 走看看