You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.6 KiB
96 lines
2.6 KiB
<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=wuhan&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 []
|
|
}
|
|
},
|
|
isSelfService: {
|
|
type: Boolean,
|
|
default: function() {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
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>
|