Python全系列 教程
3567个小节阅读:5929.1k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
修改src\view\HomeView.vue
文件
xxxxxxxxxx
<template>
<div class="common-layout container">
<el-container class="container">
<el-header class="header">
<div class="logo">
<img src="../assets/logo1.png" alt="">
<span>电商后台管理系统</span>
</div>
<div class="user">
<el-button>退出</el-button>
</div>
</el-header>
<el-container>
<el-aside class="aside">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped>
.header {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
font-size: 20px;
color: #999;
height: 50px;
width: 100%;
}
.logo {
float: left;
height: 50px;
align-items: center;
display: flex;
justify-content: center;
}
.logo img {
width: 50px;
height: 30px;
margin-right: 10px;
}
.user {
float: right;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.aside{
width: 200px;
background-color: #304156;
}
.container{
height: 100%;
}
</style>
修改src\App.vue
,增加样式
xxxxxxxxxx
<template>
<router-view/>
</template>
<style>
/* 设置主页面充满 */
html,body,#app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #f0f2f5;
}
</style>