发表于： 2019-02-19 23:02:43
1 488
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务6-10的部分内容
明天计划的事情：（一定要写非常细致的内容）
继续完成任务，继续复习
遇到的问题：（遇到什么困难，怎么解决的）
关于vue 的点击事件
收获：（通过今天的学习，学到了什么知识）
------------------------------HTML部分-------------------------------
<template>
<div>
<header>
<!-- 后台管理样式 -->
<div class="back-stage-management">
<!-- 后台管理样式字体 -->
<p class="back-stage-management-font">萝卜多后台管理系统</p>
</div>
<!-- 头部右边样式 -->
<div class="header-operation">
<p class="status">管理员</p>
<div style="margin-top: auto;width: 70px; margin-left: auto;">
<p class="ID">admin</p>
</div>
<!-- 右边的关闭按钮样式 -->
<a class="shut">
<img class="shut-img" src="./../assets/QQ图片20190216174210.png">
</a>
</div>
</header>
<main>
<!-- 左边样式表格按钮 -->
<div class="option-button">
<!-- 后台管理按钮 -->
<button class="back-stage-management" @click="show">
<p class="back-stage-management-font">后台管理</p>
</button>
<!-- 按钮下方折叠字体按钮 -->
<button v-if='background' class=" background-system ">模块管理</button>
<button v-if='background' class=" background-system ">角色管理</button>
<button v-if='background' class=" background-system ">密码修改</button>
<button v-if='background' class=" background-system ">账户管理</button>
<!-- 信息管理按钮 -->
<button class="information-management" @click="information">
<p class="information-management-font">信息管理</p>
</button>
<button v-if='CompanyLocation' class=" background-system ">公司列表</button>
<button v-if='CompanyLocation' class=" background-system ">职位列表</button>
<!-- 内容管理按钮 -->
<button class="content-management" @click="content">
<p class="content-management-font">内容管理</p>
</button>
<button v-if="Article" class=" background-system ">Article列表</button>
</div>
<!-- 右边查询页面 -->
<div class="inquire-background">
<div class="inquire">
<div class="date-type ">
<span>发布时间</span>
<input class="begin" type="text">
<span style="margin-left: 5%;">一</span>
<input class="finish" type="text">
<span style="margin-left: 5%;">类 型</span>
<select class="status1">
<option>全部</option>
<option>1个</option>
<option>2个</option>
<option>3个</option>
</select>
</div>
<div style="margin-top: 20px;">
<span style=" margin-left: 5%;">状 态</span>
<select class="status1">
<option>全部</option>
<option>1个</option>
<option>2个</option>
<option>3个</option>
</select>
</div>
<div class="button-box">
<button class="empty">清空</button>
<button class="seek">搜索</button>
</div>
</div>
</div>
</main>
</div>
</template>
------------------------------CSS部分-------------------------------
<style lang="scss" scoped>
// 默认CSS样式部分
p{
margin-top: 0;
}
// 头部样式部分
header {
display: flex;
justify-content: space-between;
// 后台管理样式
.back-stage-management{
width: 16.69%;
height: 45px;
text-align: center;
background-color: salmon;
}
// 后台管理字体样式
.back-stage-management-font{
font-weight: 1000;
font-family: "微软雅黑";
color: white;
padding-top: 10px;
}
// 头部右边样式
.header-operation{
width: 180px;
background-color: white;
display: flex;
}
// 管理员字体样式
.status{
color: blue;
margin-top: auto;
}
// 账号样式
.ID{
color: blue;
border-left: 1px solid bisque;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid;
}
// 关闭按钮样式
.shut{
margin: auto;
width: 38px;
margin-bottom: 12px;
margin-left: 15px;
// 关闭按钮图片样式
.shut-img{
width: 20px;
height: 20px;
}
}
}
// 中间的部分
main{
display: flex;
.option-button{
display: inline-block;
width: 20%;
height: 1000px;
background-color: coral;
// 左边菜单栏折叠部分
.background-system{
display: block;
width: 100%;
border: 0;
color: white;
outline: none;
text-align: center;
background-color: coral;
}
// 折叠部分菜单栏效果
.background-system:hover{
background-color: orange;
}
}
// 后台管理样式
.back-stage-management:hover{
background-color: white;
}
.back-stage-management{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
margin-top: 20px;
border: 0;
outline: none;
.back-stage-management-font{
margin: 0;
}
}
// 信息管理样式
.information-management:hover{
background-color: white;
}
.information-management{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
border: 0;
outline: none;
.information-management-font{
margin: 0;
}
}
// 内容管理样式
.content-management:hover{
background-color: white;
}
.content-management{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
border: 0;
outline: none;
.content-management-font{
margin: 0;
}
}
.inquire-background{
width: 100%;
background-color: darkgray;
.inquire{
height: 127px;
margin-top: 20px;
margin-left: 20px;
background-color: white;
.date-type{
display: flex;
margin-left: 5%;
padding-top: 10px;
.begin{
margin-left: 5%;
}
.finish{
margin-left: 5%;
}
.profession{
margin-left: 5%;
}
}
.status{
margin-left: 5%;
}
.status1{
width: 200px;
padding-left: 10px;
margin-left: 4.6%;
}
.button-box{
display: flex;
justify-content: flex-end;
margin-top: 13px;
.empty{
}
.seek{
margin-right: 2%;
margin-left: 1%;
}}
}
}
}
</style>
----------------------------JS部分--------------------
<script>
export default {
data(){
return{
background: false,
CompanyLocation:false,
Article:false,
}
},
methods: {
show() {
console.log(this.background)
this.background = this.background ? false : true;//三元表达式，如果为false的时候赋值true反之相反
},
information(){
this.CompanyLocation = this.CompanyLocation ? false :true;
},
content(){
this.Article = this.Article ? false :true;
},
},
}
</script>
返回列表
评论