dawan_bigScreen/src/views/header/index.vue

<template>
  <div class="header-container">
    <div class="header-text header-date">
      <div class="time">{{ nowDate.split(' ')[1] }}</div>
      <div class="time-other">
        <span>{{ currentWeek }}</span>
        <span>{{ nowDate.split(' ')[0] }}</span>
      </div>
    </div>
    <div class="header-title">
      <h2>{{ headerTitle }}</h2>
      <div class="header-bottom">
        <span class="bottom-block" />
      </div>
      <div class="dot-container left-dots">
        <div class="dot" />
        <div class="dot" />
        <div class="dot" />
      </div>
      <div class="dot-container right-dots">
        <div class="dot" />
        <div class="dot" />
        <div class="dot" />
      </div>
    </div>
    <div style="display: flex; justify-content: flex-end; align-items: center; position: absolute;  right: .175rem; top: .175rem; ">
      <div class="header-weather">
        <!-- 天气api: https://www.tianqi.com/plugin -->
        <!-- <iframe id="weather" width="400" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=18" /> -->
        <iframe height="50" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=52&icon=1&color=%23FFFFFF&py=qiyang&site=14" />
      </div>
      <div class="header-page">{{ (currentIndex+1) +' / '+ pageData.length }}</div>
    </div>
  </div>
</template>

<script>
import { getCurrentTime } from '@/utils/index'
export default {
  name: 'Header',
  props: {
    headerTitle: {
      type: String,
      default: function() {
        return ''
      }
    },
    currentIndex: {
      type: Number,
      default: function() {
        return 0
      }
    },
    pageData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      nowDate: '',
      currentWeek: this.getCurrentWeek()
    }
  },
  watch: {
    headerTitle: function() {
    }
  },
  created() {
    this.timer = setInterval(() => {
      this.nowDate = getCurrentTime()
    }, 1000)
  },
  mounted() {
  },
  methods: {
    getCurrentWeek() {
      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const date = new Date()
      return days[date.getDay()]
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
</style>