zoukankan      html  css  js  c++  java
  • 利用Element-UI一步一步搭建后台界面

    注意点:

    1、菜单嵌套在容器中后,文字会默认居中,左边空出距离,需要设置文字居左:

      .el-submenu,.el-menu-item{
          text-align: left;
          width: 220px;
      }

    2、嵌套菜单后,背景色与aside同色,同时设置最小高度100%;

      .el-aside {
        background: #545c64;
        color: #333;
        text-align: center;
        min-height: 100%;
      }

    3、设置好菜单背景色和文字后,下拉时菜单右侧会有1像素的空隙,解决如第1步,将菜单项设置为与aside同宽。

      .el-submenu,.el-menu-item{
          text-align: left;
          width: 220px;
      }
    
    <el-aside width="220px">
    //菜单项
    </el-aside>

    4、布局容器高度100%的设置方法

        .el-main {
        height: calc(100vh - 100px);
        }

    完整代码如下:

    <template>
        <div>
            <el-container>
            <el-header>
                XX管理系统
            </el-header>
            <el-main>
                <el-aside width="220px">
                    <el-menu
                    default-active="2"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                    </el-menu>
                </el-aside>
            </el-main>
            <el-footer height="40px">版权信息</el-footer>
            </el-container>
        </div>
    </template>
    
    <style>
        .el-main {
        height: calc(100vh - 100px);
        }
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: rgb(17, 16, 16);
        text-align: left;
        line-height: 60px;
      }
    
      .el-footer {
          text-align: center;
          line-height: 40px;
      }
      
      .el-aside {
        background: #545c64;
        color: #333;
        text-align: center;
        min-height: 100%;
      }
      
      .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        padding: 0;
      }
      
      .el-submenu,.el-menu-item{
          text-align: left;
          width: 220px;
      }
    </style>
  • 相关阅读:
    day91:luffy:基于vue+drf的路飞学城项目后端部署
    day90:luffy:基于vue+drf的路飞学城项目前端部署
    day89:luffy:使用Celery完成我的订单超时取消&Polyv视频加密播放
    day88:luffy:支付宝同步结果通知&接收异步支付结果&用户购买记录&我的订单
    day87:luffy:结算页面积分&支付宝接口
    day86:luffy:前端发送请求生成订单&结算页面优惠劵的实现
    day85:luffy:购物车根据有效期不同切换价格&购物车删除操作&价格结算&订单页面前戏
    C++中子类出现与父类同名成员函数如果调用父类函数
    C++继承方式引起子类中继承的父类属性访问权限的改变 && C++对象大小
    C++引用传递和指针传递区别
  • 原文地址:https://www.cnblogs.com/superfeeling/p/14186510.html
Copyright © 2011-2022 走看看