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