init

src/views/home.vue

@@ -0,0 +1,125 @@
+<!--
+ * @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 src="@/assets/img/ln_logo.png" alt="" class="imgs2" />
+          </div>
+          <div class="d-flex jc-center">
+            <div class="title">
+              <!--箱箱碳林可视化平台-->
+              <!--嘉兴海港碳服务平台-->
+              <!--2025.4.1  szy -->
+              <span class="title-text">Lingniu ESG Link</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";
+// 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>