fix:修改柱状图提示框样式

ZhangXianQiang

2024-03-08 2aa1d87680e9351bf027bab73f61290b7f00efe4

 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;