'保安项目提交'

src/views/dataBI/layout/head.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="head-container">
+    <div class="home-head-box relative">
+      <div class="time absolute">
+        <div class="f20">{{ datatime }}</div>
+        <div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
+      </div>
+      <div class="title absolute" @click="goPath">{{ props.title }}</div>
+
+      <div class="title-tow" absolute>
+        <div class="back"><span class="ml40">林芝市</span></div>
+      </div>
+      <!-- <div class="wd absolute">
+        <el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
+        <span> 温度 1~7°C </span>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { useRouter } from "vue-router";
+  import { getRecentDay, timeValidate } from "@/utils/tools.js";
+  import { ref, onMounted, defineProps, onUnmounted } from "vue";
+  const props = defineProps({
+    title: {
+      type: String,
+      default: "警保联动"
+    }
+  });
+  const datatime = ref(getRecentDay(0));
+  const minute = ref("00"); //分
+  const second = ref("00"); //秒
+  const hour = ref("00"); //时
+  const day = ref(0);
+  const timersfm = ref(null);
+
+  const router = useRouter();
+
+  onMounted(() => {
+    timersfm.value = setInterval(() => {
+      CurrentTime();
+    }, 1000);
+  });
+  // 获取时分秒
+  function CurrentTime() {
+    const date = new Date();
+    hour.value = date.getHours();
+    minute.value = date.getMinutes();
+    second.value = date.getSeconds();
+    day.value = day.value < 10 ? "0" + day.value : day.value;
+    hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
+    minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
+    second.value = second.value < 10 ? "0" + second.value : second.value;
+  }
+
+  function goPath() {
+    router.push("/editPassword");
+  }
+</script>
+
+<style lang="scss" scoped>
+  .head-container {
+    width: 100%;
+    height: 135px;
+    position: relative;
+    background: #263445;
+    z-index: 2;
+  }
+  .home-head-box {
+    width: 100%;
+    height: 138px;
+    background: url("~@/assets/images/home_head.png") no-repeat center center;
+    z-index: 2;
+    .title {
+      font-size: 36px;
+      left: 50%;
+      top: 10px;
+      transform: translateX(-50%);
+      font-family: "YSBTH";
+      background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .title-tow {
+      background: #fff;
+      position: absolute;
+      height: 70px;
+      width: 500px;
+      top: 50px;
+      left: calc(50% - 270px);
+      font-size: 36px;
+      font-family: "YSBTH";
+      background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+      line-height: 100px;
+      .back {
+        background: url("~@/assets/images/bi/fbt.png") no-repeat center center;
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .time {
+      font-family: "DigifaceWide";
+      color: #fff;
+      left: 25%;
+      top: 10px;
+    }
+    .wd {
+      right: 25%;
+      top: 12px;
+      font-size: 16px;
+      font-family: "DigifaceWide";
+      color: #fff;
+    }
+    .zbbb {
+      position: absolute;
+      right: 20px;
+      top: 22px;
+      font-size: 16px;
+      width: 162px;
+      height: 48px;
+      text-align: center;
+      line-height: 48px;
+      font-size: 16px;
+      background: url("~@/assets/images/btnbb.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+  }
+</style>