<style scoped>
|
.index {
|
width: 100%;
|
height: calc(100% - 50px);
|
overflow-y: auto;
|
padding: 25px 0;
|
}
|
|
.no {
|
width: 100%;
|
display: flex;
|
margin-bottom: 10px;
|
}
|
|
.card {
|
border-radius: 6px;
|
background-color: #fff;
|
padding: 10px 20px;
|
}
|
|
.no1 {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.no1 .left {
|
width: 65%;
|
}
|
|
.left-1 {
|
background-image: url("../../../static/img/首页图片1.png");
|
background-size: 100% 100%;
|
width: calc(100% - 40px);
|
height: 7.2vw;
|
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;
|
}
|
|
.right {
|
width: 32%;
|
height: calc(7.2vw + 10px + 120px);
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
::-webkit-scrollbar {
|
width: 0px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 3px;
|
}
|
|
</style>
|
|
<template>
|
<div class="index">
|
<el-row :gutter="10">
|
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
</el-row>
|
<div class="no no1">
|
<div class="left">
|
<div class="left-1 card">
|
<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>
|
<div class="right card">
|
</div>
|
</div>
|
</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>
|
