基于Vue+element设计 经典网站后台管理界面

代码语言：html复制

<template>
  <el-container>
    <el-header
      height=""
    >
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect"
               text-color="white"
               background-color="black">
        <el-menu-item index="1">
          <a href="/" target="_blank">首页</a>
        </el-menu-item>

        <el-menu-item index="2">
          <a href=" " target="_blank">订单管理</a>
        </el-menu-item>

        <el-submenu index="3">
          <template slot="title">个人中心</template>
          <el-menu-item index="2-2">退出登录</el-menu-item>
        </el-submenu>

        <el-menu-item index="4" style="float: right;">
          <span style="margin-right: 15px;">有勇气的牛排</span>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-menu-item>

      </el-menu>
      <div class="line"></div>

    </el-header>
    <el-container>
      <el-aside width="">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">

              <el-menu-item index="1">
                <i class="el-icon-setting"></i>
                <span slot="title">
                     <router-link to="/user_account">账户设置</router-link>
                  </span>
              </el-menu-item>

              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">
                    <router-link to="/user_profile">个人资料</router-link>
                  </span>
              </el-menu-item>

              <el-menu-item index="3">
                <i class="el-icon-menu"></i>
                <span slot="title">
                    <router-link to="/user_article_analysis">数据概览</router-link>
                  </span>
              </el-menu-item>

              <el-menu-item index="4">
                <i class="el-icon-menu"></i>
                <span slot="title">
                    <router-link to="/user_setting">博客设置</router-link>
                  </span>
              </el-menu-item>

            </el-menu>
          </el-col>
        </el-row>

      </el-aside>
      <el-main>
        <router-view/>
      </el-main>

    </el-container>
    <el-container
      width="">
      <el-footer>Footer</el-footer>
    </el-container>

  </el-container>

</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>

  /* 框架 */
  .el-header {
    background-color: black;
    color: white;
    text-align: center;
    /*line-height: 60px;*/
  }

  .el-footer {
    background-color: black;
    color: white;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>

预览

image.png

前端 vue.js

0 人点赞