|
|
@@ -2,15 +2,31 @@
|
|
|
<div class="page">
|
|
|
<div class="header">
|
|
|
<!-- <div class="header-box"> -->
|
|
|
- <img class="header-logo" src="../images/screen-tem2/logo.png" alt="">
|
|
|
+ <!-- <img class="header-logo" src="../images/screen-tem2/logo.png" alt="">
|
|
|
<div class="title">{{data.title}}</div>
|
|
|
<div class="header-img">
|
|
|
<img src="../images/screen-tem4/header.png" alt="">
|
|
|
</div>
|
|
|
- <div class="subhead">Medical waste management module visualization data</div>
|
|
|
+ <div class="subhead">Medical waste management module visualization data</div> -->
|
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
|
+ <div class="header-box">
|
|
|
+ <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+
|
|
|
+ <div class="header-right">
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <span>{{time}}</span>
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <span>{{day}}</span>
|
|
|
+ <img class="header-line" src="../images/screen-tem2/line.png" alt="">
|
|
|
+ <span>{{week}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-title">{{data.title}}</div>
|
|
|
+ <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
<div class="main-box1">
|
|
|
@@ -53,7 +69,49 @@ import ScreenModule from '@/apps/home/components/screen-module.vue';
|
|
|
},
|
|
|
})
|
|
|
export default class Echarts extends Vue {
|
|
|
+ week = '';
|
|
|
+
|
|
|
+ day = '';
|
|
|
+
|
|
|
+ time = '';
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.realSysTime();
|
|
|
+ setInterval(() => {
|
|
|
+ this.realSysTime();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
|
|
|
+ realSysTime() {
|
|
|
+ const now = new Date();
|
|
|
+ const year = now.getFullYear(); // 获取年份
|
|
|
+ let month = now.getMonth(); // 获取月份
|
|
|
+ let date = now.getDate(); // 获取日期
|
|
|
+ const day = now.getDay(); // 获取星期
|
|
|
+ let hour = now.getHours(); // 获取小时
|
|
|
+ let minute = now.getMinutes(); // 获取分钟
|
|
|
+ let seconds = now.getSeconds(); // 获取秒
|
|
|
+ month += 1;
|
|
|
+ const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
+ this.week = arrWeek[day];
|
|
|
+ if (month < 10) {
|
|
|
+ month = `0${month}`;
|
|
|
+ }
|
|
|
+ if (date < 10) {
|
|
|
+ date = `0${date}`;
|
|
|
+ }
|
|
|
+ if (hour < 10) {
|
|
|
+ hour = `0${hour}`;
|
|
|
+ }
|
|
|
+ if (minute < 10) {
|
|
|
+ minute = `0${minute}`;
|
|
|
+ }
|
|
|
+ if (seconds < 10) {
|
|
|
+ seconds = `0${seconds}`;
|
|
|
+ }
|
|
|
+ this.day = `${year}.${month}.${date}`;
|
|
|
+ this.time = `${hour}:${minute}:${seconds}`;
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -77,14 +135,15 @@ export default class Echarts extends Vue {
|
|
|
}
|
|
|
.header{
|
|
|
width: 100%;
|
|
|
- height: 14.3vh;
|
|
|
+ height: 12.8vh;
|
|
|
position: relative;
|
|
|
color: #ffffff;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // text-align: center;
|
|
|
background-color: rgba(29, 81, 156, 0.2);
|
|
|
+ padding-top: 1.5vh;
|
|
|
}
|
|
|
.header .title{
|
|
|
width: 100%;
|
|
|
@@ -189,4 +248,46 @@ export default class Echarts extends Vue {
|
|
|
margin-top: -4px;
|
|
|
}
|
|
|
|
|
|
+ .header-box{
|
|
|
+ height: 6.8vh;
|
|
|
+ line-height: 6.8vh;
|
|
|
+ padding: 0 1.5vw;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .header-box .header-img{
|
|
|
+ display: inline-block;
|
|
|
+ /* width: 12.5vw; */
|
|
|
+ width: 7.7vw;
|
|
|
+ height: 2.8vh;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-top: -4px;
|
|
|
+ }
|
|
|
+ .header-line{
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.6vw;
|
|
|
+ height: 3.7vh;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .header-right{
|
|
|
+ width: 28vw;
|
|
|
+ text-align: right;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .header-blue-line{
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ margin-top: 1vh;
|
|
|
+ }
|
|
|
+ .header-box .header-title{
|
|
|
+ width: 43vw;
|
|
|
+ text-align: center;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 600;
|
|
|
+ // font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
ss