Skip to content

P
pica.cloud.web-education-admin
提交 69271794 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

菜单样式调整

上级 32c9046b
显示空白字符变更
内嵌 并排
正在显示 包含 64 行增加 和 101 行删除
src/App.vue
浏览文件 @ 69271794
......@@ -45,14 +45,14 @@
opacity: 0;
}
.el-container {
margin-left: 225px;
margin-left: 255px;
overflow: hidden;
.content {
background: none repeat scroll 0 0 #fff;
background: #F0F2F5;
position: absolute;
left: 225px;
left: 255px;
right: 0;
top: 70px;
top: 64px;
bottom: 0;
width: auto;
box-sizing: border-box;
......
src/components/breadcrumb.vue
浏览文件 @ 69271794
......@@ -28,15 +28,16 @@ export default {
<style lang="scss">
.bread-crumb {
position: fixed;
left: 225px;
top: 70px;
left: 255px;
top: 64px;
width: 100%;
background: #F4F5F6;
height: 50px;
padding: 20px 0 0 13px;
background: #fff;
height: 61px;
padding: 20px 20px 30px;
z-index: 99;
border-top: 3px solid #F0F2F5;
.el-breadcrumb__inner {
font-size: 12px;
font-size: 14px;
}
}
</style>
......
src/style/common.scss
浏览文件 @ 69271794
......@@ -145,3 +145,8 @@ html,body{
.el-table thead th{
background: #fafafa;
}
//下拉框
.el-dropdown-menu .el-popper {
top: 48px;
}
\ No newline at end of file
src/views/home.vue
浏览文件 @ 69271794
......@@ -3,18 +3,9 @@
<bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
<div class="message-content">
<el-row>
<el-col :span="spanFirstNum">
<div class="visitor">
<div class="visitor-icon">
<i class="el-icon-goods"></i>
</div>
<div class="visitor-text">
<p>今日随访</p>
<p>10人</p>
</div>
</div>
<el-col :span="24">
<div class="visitor-title">
<div class="title">今日随访</div>
<div class="title">今日随访：10人</div>
<div class="visitor-more" @click="lookMore">查看更多<i class="el-icon-arrow-right"></i></div>
</div>
<div class="visitor-info">
......@@ -28,17 +19,8 @@
</el-table>
</div>
</el-col>
<el-col :span="spanSecondNum">
<div class="message">
<div class="message-icon">
<i class="el-icon-message"></i>
</div>
<div class="message-text">
<p>今日消息</p>
<p>3条</p>
</div>
</div>
<div class="message-title">系统消息</div>
<el-col :span="24">
<div class="message-title">系统消息 <span>今日消息：3条</span></div>
<div class="message-info">
<div class="message-item" v-for="(item,index) in messageList" :key="index">
<div class="text-top">
......@@ -62,7 +44,7 @@ export default {
},
data() {
return {
curmbFirst: '工作平台',
curmbFirst: '数据总览',
spanFirstNum: 12,
spanSecondNum: 12,
tableData: [
......@@ -107,30 +89,6 @@ export default {
.message-content {
margin-top: 50px;
padding:20px;
.visitor {
height: 110px;
margin-right: 20px;
background:#F2F2F2;
.visitor-icon {
float:left;
font-size: 40px;
padding: 28px 30px;
}
.visitor-text {
float:right;
padding: 25px 20px;
p:first-child {
font-size: 20px;
color: #999;
}
p:nth-child(2) {
font-size: 20px;
color: #000;
text-align: center;
padding-top: 5px;
}
}
}
.visitor-title {
height: 80px;
line-height: 80px;
......@@ -149,30 +107,6 @@ export default {
margin-right: 20px;
border: 1px solid #DDDCE0;
}
.message{
height: 110px;
background:#F2F2F2;
.message-icon{
float:left;
font-size: 40px;
padding: 28px 30px;
}
.message-text {
float:right;
float:right;
padding: 25px 20px;
p:first-child {
font-size: 20px;
color: #999;
}
p:nth-child(2) {
font-size: 20px;
color: #000;
text-align: center;
padding-top: 5px;
}
}
}
.message-title {
height: 80px;
line-height: 80px;
......
src/views/layout/header.vue
浏览文件 @ 69271794
<template>
<div class="header-container">
<div class="logo"><img src="../../assets/image/index_logoicon.png"/>云鹊医工作站</div>
<div class="logo">
<img src="../../assets/image/index_logoicon.png"/>
<p>云鹊医工作站</p>
</div>
<div class="user-info">
<el-dropdown trigger="click" @command="handleCommand">
<div class="el-dropdown-link">
......@@ -14,9 +17,18 @@
</div>
<!--导航-->
<div class="user-info" style="padding-right:10px;">
<span class="el-dropdown-link" @click="forward">{{'返回云鹊医首页'}}</span>
<el-dropdown trigger="click" @command="handleCommand">
<div>
<span class="el-dropdown-link">返回云鹊医首页</span>
<span class="line">|</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="logout">注销</el-dropdown-item>
<el-dropdown-item @click="forward">返回云鹊医首页</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
......@@ -46,37 +58,43 @@ export default {
left: 0;
top: 0;
box-sizing: border-box;
height: 70px;
height: 64px;
width: 100%;
z-index: 99999;
font-size: 22px;
line-height: 70px;
line-height: 64px;
color: #fff;
background-color: #242f42;
// background-color: #242f42;
.logo {
float: left;
width: 250px;
width: 255px;
text-align: center;
color: #fff;
background: #0B2F3F;
img{
width: 30px;
width: 24px;
float: left;
margin-left: 24px;
margin-top: 21px;
}
p {
text-align: left;
margin-left: 60px;
margin-top: 20px;
}
}
.user-info {
float: right;
padding-right: 50px;
font-size: 16px;
color: #fff;
color: #838683;
.el-dropdown-link {
position: relative;
display: inline-block;
padding-left: 50px;
color: #fff;
color: #838683;
cursor: pointer;
vertical-align: middle;
font-size: 14px;
}
.user-logo {
position: absolute;
......@@ -87,7 +105,6 @@ export default {
border-radius: 50%;
}
.el-icon--right, #headName,.line, #login-out{
color: #fff;
font-size: 14px;
}
.line {
......
src/views/layout/slidebar.vue
浏览文件 @ 69271794
......@@ -81,22 +81,28 @@ export default {
display: block;
position: absolute;
left: 0;
top: 70px;
top: 64px;
bottom: 0;
width: 225px;
background: #E2E2E2;
width: 256px;
background: #06232C;
.el-menu {
background: #E2E2E2;
background: #06232C;
.sub-icon {
font-size: 12px;
}
.el-menu-item, .el-submenu {
border-bottom: 1px solid #E8E8E8;
.el-menu-item, .el-submenu__title {
color: #8FA4AC;
}
.el-menu-item.is-active {
color: #000;
background: #CBCBCB;
color: #fff;
background: #509284;
}
// .el-menu-item:focus, .el-menu-item:hover,
// .el-submenu__title:hover,.slidebar-container .el-menu .el-menu-item:focus,
// .slidebar-container .el-menu .el-menu-item:hover,
// .slidebar-container .el-menu .el-submenu__title:hover {
// background: #06232C;
// }
}
}
</style>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或