基于Vue+element设计 经典网站后台管理界面
导读：<template> <el-container> <el-header height="" > <el-menu :default-active="ac...
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
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 基于Vue+element设计 经典网站后台管理界面
本文地址： https://pptw.com/jishu/340364.html