|
@@ -0,0 +1,113 @@
|
|
|
+<template>
|
|
|
+ <div class="bg-img" id="fullScreen">
|
|
|
+ <div style="display: flex;justify-content: space-between">
|
|
|
+ <div style="width: 330px"></div>
|
|
|
+ <div class="title-style">
|
|
|
+ 营销管理平台
|
|
|
+ </div>
|
|
|
+ <div style="width: 330px" class="time-style">{{nowTime}}</div>
|
|
|
+ </div>
|
|
|
+ <fullScreen ref="fullRef" class="inline-16" domId="fullScreen" v-show="false"></fullScreen>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import fullScreen from "@/views/salesData/components/fullScreen";
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ components:{fullScreen},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ currentTime:'',
|
|
|
+ timer: "", // 定义一个定时器
|
|
|
+ nowTime: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentTime() {
|
|
|
+ // 获取当前日期和时间,并将其转换为字符串
|
|
|
+ const now = new Date();
|
|
|
+ // 格式化日期时间,这里是一个简单的例子,可根据需要调整格式
|
|
|
+ return now.toLocaleString('default', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.updateTime(); // 初始化显示一次
|
|
|
+ setInterval(this.updateTime, 1000); // 每秒更新一次
|
|
|
+ this.$refs.fullRef.enterFullscreen()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ updateTime() {
|
|
|
+ this.currentTime = new Date().toLocaleString('default', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
|
+ },
|
|
|
+ getTime() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ // 获取当前时间的各个部分
|
|
|
+ let timeDate = new Date();
|
|
|
+ let year = timeDate.getFullYear();
|
|
|
+ let mounth = timeDate.getMonth() + 1;
|
|
|
+ let day = timeDate.getDate();
|
|
|
+ let hours = timeDate.getHours();
|
|
|
+ // 格式化小时
|
|
|
+ hours = hours >= 10 ? hours : "0" + hours;
|
|
|
+ let minutes = timeDate.getMinutes();
|
|
|
+ // 格式化分钟
|
|
|
+ minutes = minutes >= 10 ? minutes : "0" + minutes;
|
|
|
+ let seconds = timeDate.getSeconds();
|
|
|
+ // 格式化秒钟
|
|
|
+ seconds = seconds >= 10 ? seconds : "0" + seconds;
|
|
|
+ let week = timeDate.getDay();
|
|
|
+ let weekArr = [
|
|
|
+ "星期日",
|
|
|
+ "星期一",
|
|
|
+ "星期二",
|
|
|
+ "星期三",
|
|
|
+ "星期四",
|
|
|
+ "星期五",
|
|
|
+ "星期六"
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 将获取的时间信息赋值给nowTime
|
|
|
+ this.nowTime = `${year}-${mounth}-${day} ${weekArr[week]} ${hours}:${minutes}:${seconds}`;
|
|
|
+ }, 1000); // 每隔一秒更新时间
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTime()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.bg-img {
|
|
|
+ background: url("../../assets/icons/bgScreen.jpg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 130px);
|
|
|
+}
|
|
|
+.title-style{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 2.75rem;
|
|
|
+ color: #E6F4FF;
|
|
|
+ text-shadow: 0rem 0.125rem 0.25rem #A9D7F9;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ margin: 1.25rem;
|
|
|
+}
|
|
|
+.time-style{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 1.125rem;
|
|
|
+ color: #E6F4FF;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+</style>
|