vue中大屏可视化面板title组件——滚动播放-html之marquee详解 & 年月日时分秒星期组件的展示

vue中大屏可视化面板title组件——滚动播放-html之marquee标签详解 & 年月日时分秒星期组件的展示

效果

代码

1、页面模块

index.vue

<script setup lang="ts">
import Times from '@/components/header/Time.vue'
import Weather from '@/components/header/Weather.vue'
import Newtime from '@/components/header/Newtime.vue'
</script>
<template>
  <div class="main-container">
    <div class="head-container">
      <div class="head-content">
        <div class="left">
          <Weather />
        </div>
        <div class="main">
          <div class="left">
            <Times />
          </div>
          <div class="right">
            <Newtime />
          </div>
        </div>
      </div>
    </div>
  </div> 
</template>
<style scoped lang="scss">
.main-container {
  width: 7660px;
  height: 1070px;
  display: grid;
  padding: 0 10px 10px;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 140px auto;
  background: url(@/assets/beijing-bs/import-expo/background.png) no-repeat;
  background-size: cover;
  color: #fff;
  font-size: 23px;
  grid-template-areas:
    'a a a a'
    'b c c d';
  .head-container {
    background-image: url(@/assets/beijing-bs/import-expo/title.png);
    background-repeat: no-repeat;
    background-size: cover;
    grid-area: a;
    width: 100%;
    background-position-y: -50px;
    display: flex;
    .head-content {
      width: 100%;
      display: flex;
      .left {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -200px;
      }
      .main {
        width: 53%;
        display: flex;
        justify-content: end;
        .left {
          width: 50%;
        }
        .right {
          display: flex;
          justify-content: right;
          //  background: red;
          line-height: 150px;
          font-size: 46px;
        }
      }
    }
  }
}
</style>

2.1、滚动播报——中文时间组件

效果

src/components/header/Time.vue

<template>
  <div class="weather">
    <marquee
      class="Time"
      direction="left"
      v-html="data.now"
    />
  </div>
</template>
<script setup lang="ts">

import { ref, onMounted } from 'vue'
const data = ref({
  now: '', // 时间
  topDate: '',
  topTime: ''
})
onMounted(() => {
  getNowadays(new Date())
})

// // 转换日期格式
const getNowadays = function (curDate:any) {
//   const curDate = new Date()
  const year = curDate.getFullYear()
  const month = curDate.getMonth() + 1
  const date = curDate.getDate()
  const hour = curDate.getHours()
  const min = curDate.getMinutes()
  const sec = curDate.getSeconds()
  const day = '星期' + '日一二三四五六'.charAt(new Date().getDay())

  // 小于10的要添0
  function _supplement (nn:any) {
    return nn < 10 ? '0' + nn : nn
  }
  data.value.topTime = _supplement(hour) + ':' + _supplement(min) + ':' + _supplement(sec)
  data.value.topDate = year + '-' + _supplement(month) + '-' + _supplement(date) + ' ' + day
  data.value.now += `${year}年-${month}月-${date}日 ${hour}时:${min}分:${sec}秒 ${day}`
}
</script>
<style scoped lang="scss">
    .weather{
        width: 100%;
        margin-left: 20px;
        display:flex;
        justify-content:center;
        .Time{
            width: 500px;
            height: 60px;
            border: 1px solid;
            border-radius: 13px;
            background-color: #101045;
            text-align: center;
            line-height:60px ;
        }
    }
</style>

2.2、滚动播报——天气文本组件-marquee

效果

src/components/header/Weather.vue

<template>
  <div class="weather">
    <div
      class="Tleft"
    >
      <marquee
        direction="left"
        v-html="data.list"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const data = ref({
  list: '天气预报滚动播报正文'
})
</script>
<style scoped lang="scss">
    .weather {
        .Tleft {
            width: 600px;
            height: 60px;
            border: 1px solid;
            border-radius: 13px;
            background-color: #101045;
            text-align: center;
            line-height:60px ;
            span {
              font-size: 18px;
              display: inline-block;
              white-space: nowrap;
            }
        }

    }
</style>

2.3、时间展示——英文时间组件

效果

src/components/header/Newtime.vue

<template>
  <div class="topDate">
    {{ data.topDate }} <span class="topTime">{{ data.topTime }}</span>
  </div>
</template>
<script setup lang="ts">

import { ref, onMounted } from 'vue'
const data = ref({
  now: '', // 时间
  topDate: '',
  topTime: ''
})
onMounted(() => {
  setInterval(() => {
    getNowadays(new Date())
  }, 1000)
})

// // 转换日期格式
const getNowadays = function (curDate:any) {
//   const curDate = new Date()
  const year = curDate.getFullYear()
  const month = curDate.getMonth() + 1
  const date = curDate.getDate()
  const hour = curDate.getHours()
  const min = curDate.getMinutes()
  const sec = curDate.getSeconds()
  const day = '星期' + '日一二三四五六'.charAt(new Date().getDay())

  // 小于10的要添0
  function _supplement (nn:any) {
    return nn < 10 ? '0' + nn : nn
  }
  data.value.topTime = _supplement(hour) + ':' + _supplement(min) + ':' + _supplement(sec)
  data.value.topDate = year + '-' + _supplement(month) + '-' + _supplement(date) + ' ' + day
  data.value.now += `${year}年-${month}月-${date}日 ${hour}时:${min}分:${sec}秒 ${day}`
  // console.log(data.value.topTime, data.value.topDate, 'mmmm')
}
</script>
<style scoped lang="scss">
        .Time {
            width: 500px;
            height: 60px;
            border: 1px solid;
            border-radius: 13px;
            background-color: #101045;
            text-align: center;
            line-height:60px;
    }
</style>