From 7633cfbb1d9d75b316a004b69f7f9feea4233934 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期三, 28 二月 2024 16:42:21 +0800
Subject: [PATCH] 大屏左侧

---
 src/views/header.vue |   93 ++++++++++++++++++++++++++++++++++------------
 1 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/src/views/header.vue b/src/views/header.vue
index 8ffc87f..16ed804 100644
--- a/src/views/header.vue
+++ b/src/views/header.vue
@@ -1,41 +1,54 @@
 <script setup lang="ts">
 import { reactive } from "vue";
+import dayjs from 'dayjs';
+import type {DateDataType} from "./index.d"
+import {useSettingStore} from "@/stores/index"
 
-const dateData = reactive({
-  dateDay: null,
-  dateYear: null,
-  dateWeek: null,
-  weekday: ["鍛ㄦ棩", "鍛ㄤ竴", "鍛ㄤ簩", "鍛ㄤ笁", "鍛ㄥ洓", "鍛ㄤ簲", "鍛ㄥ叚"],
+const dateData = reactive<DateDataType>({
+  dateDay: "",
+  dateYear: "",
+  dateWeek: "",
+  timing:null
 });
 
-const showSetting = () => {};
+const { setSettingShow} =useSettingStore()
+const weekday= ["鍛ㄦ棩", "鍛ㄤ竴", "鍛ㄤ簩", "鍛ㄤ笁", "鍛ㄥ洓", "鍛ㄤ簲", "鍛ㄥ叚"]
+const timeFn = () => {
+  dateData.timing = setInterval(() => {
+    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
+    dateData.dateWeek = weekday[dayjs().day()];
+  }, 1000);
+};
+timeFn()
 </script>
 
 <template>
   <div class="d-flex jc-center title_wrap">
-    <div class="zuojuxing"></div>
-    <div class="youjuxing"></div>
-    <div class="guang"></div>
+    <div class="zuojuxing-new">
+     鎮ㄥソ锛屾杩庢潵鍒�<span style="color:#E4D68B;">閬撳畨鍔炲競鍩熸不鐞嗘暟鎹�</span>澶у睆锛�
+    </div>
+<!--    <div class="zuojuxing"></div>-->
+<!--    <div class="youjuxing"></div>-->
+<!--    <div class="guang"></div>-->
     <div class="d-flex jc-center">
       <div class="title">
-        <span class="title-text">浜掕仈缃戣澶囧彲瑙嗗寲骞冲彴</span>
+        <span class="title-text">閬撳畨鍔炲競鍩熸不鐞嗘暟鎹ぇ灞�</span>
       </div>
     </div>
-    <div class="timers">
-      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
-      <i
-        class="blq-icon-shezhi02"
-        style="margin-left: 10px"
-        @click="showSetting"
-      ></i>
-    </div>
+<!--    <div class="timers">-->
+<!--      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}-->
+
+<!--      <div class="setting_icon"   @click="setSettingShow(true)">-->
+<!--          <img src="@/assets/img/headers/setting.png" alt="璁剧疆">-->
+<!--      </div>-->
+<!--    </div>-->
   </div>
 </template>
 
 <style scoped lang="scss">
 .title_wrap {
-  height: 60px;
-  background-image: url("../assets/img/top.png");
+  height: 116px;
+  background-image: url("../assets/img/top1.png");
   background-size: cover;
   background-position: center center;
   position: relative;
@@ -58,7 +71,28 @@
     height: 6px;
     background-image: url("../assets/img/headers/juxing1.png");
   }
+  .zuojuxing-new::before{
+    background-image: url(../assets/img/top3.png);
+    content: "";
+    width: 20px;
+    height: 20px;
+    //background-image: url(./bubble.png);
+    background-size: contain;
+    margin: -2px 10px;
+    //background: url("../assets/img/top3.png") no-repeat;
+  }
+  .zuojuxing-new{
+    display: flex;
+    align-items: center;
+    margin-top: 13px;
+    position: absolute;
+    top: -2px;
+    width: auto;
+    height: 20px;
+    left: 0.2%;
+    line-height: 50px;
 
+  }
   .zuojuxing {
     left: 11%;
   }
@@ -76,8 +110,15 @@
     display: flex;
     align-items: center;
 
-    .blq-icon-shezhi02 {
+    .setting_icon {
+      width: 20px;
+      height: 20px;
       cursor: pointer;
+      margin-left: 12px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }
@@ -91,15 +132,17 @@
   line-height: 46px;
 
   .title-text {
+    font-style: italic;
+    //text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
+    //font-family: 200-SSBoYaTi;
     font-size: 38px;
     font-weight: 900;
     letter-spacing: 6px;
     width: 100%;
     background: linear-gradient(
-      92deg,
-      #0072ff 0%,
-      #00eaff 48.8525390625%,
-      #01aaff 100%
+      180deg,
+      #fff 0%,
+      #407BB6 100%
     );
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

--
Gitblit v1.8.0