发表于： 2019-10-17 23:29:10
1 802
今天完成的事情：
1vue更新到4了，然后没察觉到，在建新项目的脚手架时，发现路由和vuex一直安装不上，后来试着重装vue，结果更新到4了，然后就可以了。接下来开始写后台：
<template>
<div class="about">
<nav>
<p class="navName">学渣乐园后台管理系统</p>
<div>
<p>管理员</p>
<img src alt />
<p>假装admin</p>
<button>注销</button>
</div>
</nav>
<div class="navLeft">
<button><img src="" alt="">欢迎页</button>
<el-collapse accordion>
<el-collapse-item>
<template slot="title">
用户管理
<i class="header-icon el-icon-info"></i>
</template>
<div>用户列表</div>
</el-collapse-item>
<el-collapse-item>
<template slot="title">
内容管理
<i class="header-icon el-icon-info"></i>
</template>
<div>文章列表</div>
<div>视频列表</div>
</el-collapse-item>
<el-collapse-item>
<template slot="title">
后台管理
<i class="header-icon el-icon-info"></i>
</template>
<div>账号管理</div>
<div>角色管理</div>
<div>修改密码</div>
<div>模块管理</div>
</el-collapse-item>
</el-collapse>
</div>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
export default {
name: "about"
};
</script>
<style lang="scss" scope>
.about {
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e3e3e3;
border: 1px solid #000;
.navName {
padding-left: 50px;
}
div {
width: 200px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
}
.navLeft {
float: left;
width: 200px;
border: 1px solid #000;
margin-top: 5px;
.el-collapse-item__header{
border-top: 1px solid #000;
}
button{
width: 100%;
height: 40px;
border: none;
background-color: #fff;
outline: none;
}
}
main{
margin-left: 200px;
}
}
</style>
没写多少，明天要加速
明天计划：
把后台页面尽量往前赶
返回列表
评论