129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<!--
|
|
* @Author: szy
|
|
* @Date: 2022-01-12 14:23:32
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2022-09-09 14:47:24
|
|
* @FilePath: \web-pc\src\pages\big-screen\view\home.vue
|
|
-->
|
|
<template>
|
|
<!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
|
|
<ScaleScreen
|
|
:width="1920"
|
|
:height="1080"
|
|
class="scale-wrap"
|
|
:selfAdaption="$store.state.setting.isScale"
|
|
>
|
|
<div class="bg">
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<div v-else class="host-body">
|
|
<!-- 头部 s -->
|
|
<div class="d-flex jc-center title_wrap">
|
|
<div class="logo">
|
|
<img src="../assets/img/new/logo.png" alt="" />
|
|
</div>
|
|
<div class="title">
|
|
<span class="title-text">Lingniu ESG Link</span>
|
|
</div>
|
|
<div style="display: flex; flex: 1">
|
|
<div class="timers">
|
|
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
|
<!-- <button class="selectTime">选择日期</button> -->
|
|
</div>
|
|
<img
|
|
src="../assets/img/new/chilun.png"
|
|
style="margin-left: 10px"
|
|
@click="showSetting"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- 头部 e-->
|
|
<!-- 内容 s-->
|
|
<router-view></router-view>
|
|
<div class="footerFlex">
|
|
<div class="footer-text-left">
|
|
Lingniuqingneng © 2026 羚牛氢能. All Rights Reserved.
|
|
</div>
|
|
<div class="footer-text-right">
|
|
<span class="status-dot"></span>API 服务器状态:
|
|
正常 | 当前版本: v4.2.0-stable
|
|
</div>
|
|
</div>
|
|
<!-- 内容 e -->
|
|
</div>
|
|
</div>
|
|
<Setting ref="setting" />
|
|
</ScaleScreen>
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<script>
|
|
import { formatTime } from "../utils/index.js";
|
|
import Setting from "./setting.vue";
|
|
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
|
|
export default {
|
|
components: { Setting, ScaleScreen },
|
|
data() {
|
|
return {
|
|
timing: null,
|
|
loading: true,
|
|
dateDay: null,
|
|
dateYear: null,
|
|
dateWeek: null,
|
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
};
|
|
},
|
|
filters: {
|
|
numsFilter(msg) {
|
|
return msg || 0;
|
|
},
|
|
},
|
|
computed: {},
|
|
created() {},
|
|
mounted() {
|
|
this.timeFn();
|
|
this.cancelLoading();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timing);
|
|
},
|
|
methods: {
|
|
showSetting() {
|
|
this.$refs.setting.init();
|
|
},
|
|
timeFn() {
|
|
this.timing = setInterval(() => {
|
|
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
|
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
|
this.dateWeek = this.weekday[new Date().getDay()];
|
|
}, 1000);
|
|
},
|
|
cancelLoading() {
|
|
let timer = setTimeout(() => {
|
|
this.loading = false;
|
|
clearTimeout(timer);
|
|
}, 500);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./home.scss";
|
|
// 31abe3
|
|
.selectTime {
|
|
color: #31abe3;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.title-name {
|
|
color: white;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
margin-left: 20px;
|
|
font-family: "Microsoft YaHei", "微软雅黑", "SimHei", "PingFang SC",
|
|
"Hiragino Sans GB", sans-serif;
|
|
}
|
|
</style>
|