提交 32c9046b 编写于 作者: huangwensu's avatar huangwensu

数据总览页面

上级 f1c55ce4
......@@ -364,14 +364,10 @@ export default {
// 是否对外开放
selectIsOpen() {
},
// tab点击
handleClick(tab,event) {
},
// 删除tab
removeTab() {
removeTab(targetName) {
vm.componentList.moduleList.splice(targetName - 1,1)
},
// 添加空白模块
addModule() {
......
<template>
<div>
<div class="home-wrap">
<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>
<div class="visitor-title">
<div class="title">今日随访</div>
<div class="visitor-more" @click="lookMore">查看更多<i class="el-icon-arrow-right"></i></div>
</div>
<div class="visitor-info">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column prop="date" label="预约时间" min-width="30"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="20"></el-table-column>
<el-table-column prop="style" label="随访方式" min-width="30"></el-table-column>
<el-table-column prop="content" label="随访内容"></el-table-column>
</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>
<div class="message-info">
<div class="message-item" v-for="(item,index) in messageList" :key="index">
<div class="text-top">
<i class="el-icon-message"></i>
<span>{{item.status}}</span>
<span>{{item.date}}</span>
</div>
<div class="text-bottom">{{item.info}}</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
......@@ -11,13 +62,146 @@ export default {
},
data() {
return {
curmbFirst: '工作平台'
curmbFirst: '工作平台',
spanFirstNum: 12,
spanSecondNum: 12,
tableData: [
{
date: '2016-05-02',
name: '王小虎',
style: '电话随访',
content: '糖尿病患者第20190228定期随访登记'
},{
date: '2016-05-02',
name: '王小虎',
style: '电话随访',
content: '糖尿病患者第20190228定期随访登记'
},{
date: '2016-05-02',
name: '王小虎',
style: '电话随访',
content: '糖尿病患者第20190228定期随访登记'
}
],
messageList:[{
status: '审核提醒',
date: '2019-01-02',
info: '王小波创建了"浙江省2019高血压第一季度考试"项目,提醒您审核。'
},{
status: '审核提醒',
date: '2019-01-02',
info: '王小波创建了"浙江省2019高血压第一季度考试"项目,提醒您审核。'
}]
}
},
methods: {
// 查看更多
lookMore() {
}
}
}
</script>
<style>
<style lang="scss">
.home-wrap {
.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;
margin-right: 20px;
.title {
float: left;
font-size: 18px;
}
.visitor-more {
float: right;
font-size: 12px;
color: #999;
}
}
.visitor-info {
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;
}
.message-info {
padding: 7px;
border: 1px solid #DDDCE0;
.message-item {
padding: 10px;
border: 1px solid #efefef;
.text-top {
span:nth-child(2) {
padding: 10px;
}
span:nth-child(3) {
font-size: 12px;
color: #999;
}
}
.text-bottom {
font-size: 14px;
color: #666;
margin-top: 15px;
}
}
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册