139 lines
3.7 KiB
Vue
139 lines
3.7 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="zuojuxing"></div>
|
|
<div class="youjuxing"></div>
|
|
<div class="guang">
|
|
<!-- <p class="title-name">广州开发区交投氢能</p> -->
|
|
<!-- <img src="@/assets/img/logo.png" alt="" class="imgs img-container"/> -->
|
|
<img src="@/assets/img/hg10.png" alt="" class="imgs"/>
|
|
</div>
|
|
<div class="d-flex jc-center">
|
|
<div class="title">
|
|
<!--箱箱碳林可视化平台-->
|
|
<!--嘉兴海港碳服务平台-->
|
|
<!--Lingniu ESG Link -->
|
|
<!--2025.4.1 szy -->
|
|
<!--探 寻 嘉 2025-7-7 注释-->
|
|
<span class="title-text">碳寻嘉seeker氢能集装箱碳数据平台</span>
|
|
</div>
|
|
</div>
|
|
<div class="timers">
|
|
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
|
<!-- <button class="selectTime">选择日期</button> -->
|
|
<i
|
|
class="blq-icon-shezhi02"
|
|
style="margin-left: 10px"
|
|
@click="showSetting"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
<!-- 头部 e-->
|
|
<!-- 内容 s-->
|
|
<router-view></router-view>
|
|
<!-- 内容 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";
|
|
.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;
|
|
}
|
|
|
|
.img-container {
|
|
top:-3px;
|
|
width: 450px; /* 或者你想要的宽度 */
|
|
height: 45px; /* 或者你想要的固定高度 */
|
|
overflow: hidden; /* 确保图片不会溢出容器 */
|
|
}
|
|
|
|
.img-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* 让图片填充并覆盖整个容器，可能会裁剪图片 */
|
|
}
|
|
</style>
|