<template>
<div class="datav">
<dv-full-screen-container>
<div class="main">
<div class="header">
<div class="title">
<span class="title-text">DEMO</span>
</div>
<div class="header-left">
<el-button type="primary" round @click="onBack">返回</el-button>
</div>
<div class="header-right">
<span class="time">{{ time }}</span>
</div>
</div>
<div class="viewport">
<template>
<div class="screen-left">
<div class="panel top">
</div>
<div class="panel center">
</div>
<div class="panel bottom">
</div>
</div>
</template>
<template>
<div class="screen-center">
</div>
</template>
<template>
<div class="screen-right">
<div class="panel top">
</div>
<div class="panel center">
</div>
<div class="more">
<div class="panel left">
</div>
<div class="panel right">
</div>
</div>
<div class="panel bottom">
</div>
</div>
</template>
</div>
</div>
</dv-full-screen-container>
</div>
</template>
<script>
import { parseTime } from "@/utils/utils.js"
export default {
name: "BigScreen",
data() {
return {
time: "",
timer: null,
};
},
created() {
this.getCurrentTime();
this.createTimer();
},
beforeDestroy() {
this.clearTimer();
},
methods: {
getCurrentTime() {
this.time = parseTime(new Date(), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}')
},
createTimer() {
this.timer = setInterval(() => {
this.getCurrentTime();
}, 1000);
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
onBack() {
this.$router.push({ path: "/index" });
},
}
};
</script>
<style lang="scss" scoped>
.title {
position: relative;
// width: 500px;
text-align: center;
background-size: cover;
color: transparent;
height: 60px;
line-height: 50px;
.title-text {
font-size: 50px;
font-weight: 900;
letter-spacing: 10px;
width: 100%;
background: linear-gradient(
92deg,
#0072ff 0%,
#00eaff 48.8525390625%,
#01aaff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.datav {
width: 100%;
height: 100%;
background-color: #101129;
}
#dv-full-screen-container {
background-color: #101129;
overflow-y: auto;
position: unset;
}
.main {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
width: 100%;
.header-center {
width: 100%;
}
.header-left {
position: absolute;
top: 4%;
left: 2%;
}
.header-right {
position: absolute;
top: 3%;
right: 2%;
height: 45px;
display: flex;
align-items: flex-end;
justify-items: center;
color: #ffffff;
float: left;
font-size: 16px;
.time {
font-size: 24px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
color: #fff; /* 文本颜色 */
}
}
}
.viewport {
width: 100%;
height: 93%;
display: flex;
position: absolute;
top: 7%;
}
.screen-left {
flex: 20;
display: flex;
flex-direction: column;
.top {
flex: 15;
}
.center {
flex: 60;
}
.bottom {
flex: 30;
}
}
.screen-center {
flex: 80;
display: flex;
flex-direction: column;
}
.screen-right {
flex: 20;
display: flex;
flex-direction: column;
.top {
flex: 15;
}
.center {
flex: 30;
}
.more {
flex: 25;
display: flex;
flex-direction: row;
.left {
flex: 1;
}
.right {
flex: 1;
}
}
.bottom {
flex: 30;
}
}
.panel {
/* 边框 */
flex: 1;
box-sizing: border-box;
border: 2px solid rgb(0, 174, 255);
border-image: url("~@/assets/images/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin: 0.833rem;
display: flex;
}
</style>
其中的parseTime方法:
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
效果: