<style scoped>
|
.index {
|
width: 100%;
|
height: calc(100% - 50px);
|
overflow-y: auto;
|
padding: 25px 0;
|
}
|
|
.left-1 {
|
background-image: url("../../../static/img/首页图片1.png");
|
background-size: 100% 100%;
|
height: 118px;
|
margin-bottom: 10px;
|
}
|
|
.left-1 .say {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
margin-left: 15%;
|
width: 45%;
|
}
|
|
.left-1 .say div {
|
color: #fff;
|
margin: 4px 0;
|
}
|
|
.left-1 .say-1 {
|
font-size: 18px;
|
}
|
|
.left-1 .say-2 {
|
font-size: 17px;
|
}
|
|
::-webkit-scrollbar {
|
width: 0px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 3px;
|
}
|
|
.card{
|
background: #FFFFFF;
|
border-radius: 16px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.right-1{
|
padding: 14px 10px 4px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.right-1-item{
|
width: 25%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.right-1-item .mun{
|
margin-left: 6px;
|
color: #0166E2;
|
}
|
|
</style>
|
|
<template>
|
<div class="index">
|
<el-row :gutter="25">
|
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
|
<div class="left-1">
|
<div class="say">
|
<div style="display: flex;align-items: center;flex-wrap: wrap;">
|
<div class="say-1">{{user.name}} 您好！祝您开心每一天</div>
|
<div class="say-2">当前时间： {{now}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="left-2 card"></div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
|
<div class="right-1 card">
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-0.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">我的代办</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-1.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">已办事宜</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-2.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">剩余待办</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-3.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">近期事宜</p>
|
</div>
|
</div>
|
</div>
|
<div class="right-2 card">
|
</div>
|
<div class="right-3 card">
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
user: {},
|
now: null,
|
}
|
},
|
mounted() {
|
this.user = JSON.parse(localStorage.getItem('user'))
|
this.nowTime()
|
this.getDataList()
|
setInterval(() => {
|
this.nowTime()
|
}, 1000)
|
},
|
methods: {
|
nowTime() {
|
var date = new Date();
|
var y = date.getFullYear();
|
var m = date.getMonth() + 1;
|
var d = date.getDate();
|
var h = date.getHours();
|
this.timeH = h
|
var min = date.getMinutes();
|
var s = date.getSeconds();
|
if (s < 10) {
|
s = "0" + s;
|
}
|
if (min < 10) {
|
min = "0" + min;
|
}
|
if (h < 10) {
|
h = "0" + h;
|
}
|
if (d < 10) {
|
d = "0" + d;
|
}
|
if (m < 10) {
|
m = "0" + m;
|
}
|
this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
|
},
|
getDataList() {
|
this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
|
this.data = res.data
|
})
|
}
|
}
|
}
|
</script>
|
