From 16985f7674bbec4e87e5eaa011e1e789350be8df Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 05 三月 2024 17:25:44 +0800
Subject: [PATCH] fix:修改表格滚动
---
src/views/header.vue | 104 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 78 insertions(+), 26 deletions(-)
diff --git a/src/views/header.vue b/src/views/header.vue
index 8ffc87f..06371be 100644
--- a/src/views/header.vue
+++ b/src/views/header.vue
@@ -1,41 +1,57 @@
<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="d-flex jc-center">
<div class="title">
- <span class="title-text">浜掕仈缃戣澶囧彲瑙嗗寲骞冲彴</span>
+ <div class="title-img">
+ <img src="@/assets/img/title_img.png" alt="">
+ </div>
+ <!-- <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">
+.d-bottom{
+
+}
.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 +74,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 +113,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%;
+ }
}
}
}
@@ -89,17 +133,25 @@
color: transparent;
height: 60px;
line-height: 46px;
-
+ .title-img {
+ width: 560px;
+ position: absolute;
+ left: 50%;
+ top: 9px;
+ transform: translateX(-50%);
+ }
.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