<template>
|
<div class="header">
|
<!-- 左侧天气 -->
|
<div class="weather">
|
<div class="mask"></div>
|
<div class="box"></div>
|
<iframe allowtransparency="true" frameborder="0" width="180" height="36" scrolling="no"
|
src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=3&t=1&v=0&d=3&bd=0&k=000000&f=ffffff<f=ffffff&htf=ffffff&q=1&e=1&a=1&c=60910&w=103&h=36&align=left" />
|
</div>
|
|
<!-- 中间标题 -->
|
<div class="title">崇州市自主安置购房信息化大数据平台</div>
|
|
<!-- 右侧时间 -->
|
<div class="datetime">
|
<img src="@/assets/027_日历@2x.png" alt="calendar" class="calendar-icon">
|
<div class="time">{{ currentTime }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'HeaderPanel',
|
data() {
|
return {
|
currentTime: '',
|
weatherInfo: {
|
text: '晴',
|
icon: 'sunny' // 对应天气图标文件名
|
}
|
};
|
},
|
mounted() {
|
this.updateTime();
|
this.timer = setInterval(this.updateTime, 1000);
|
this.getWeather();
|
|
},
|
beforeDestroy() {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
},
|
methods: {
|
updateTime() {
|
const now = new Date();
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
const date = String(now.getDate()).padStart(2, '0');
|
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
const weekDay = weekDays[now.getDay()];
|
this.currentTime = `${year}年${month}月${date}日 星期${weekDay}`;
|
},
|
getWeather() {
|
// 这里可以接入实际的天气 API
|
// 目前使用模拟数据
|
this.weatherInfo = {
|
text: '晴',
|
icon: 'sunny'
|
};
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.header {
|
height: 86px;
|
background: url('@/assets/顶部@2x.png') no-repeat center center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 40px;
|
position: relative;
|
|
.weather {
|
display: flex;
|
margin-top: 61px;
|
|
|
.mask {
|
position: absolute;
|
width: 180px;
|
height: 36px;
|
z-index: 1;
|
filter: alpha(opacity=0);
|
opacity: 0;
|
background: #040A56
|
}
|
|
.box {
|
position: absolute;
|
width: 20px;
|
height: 36px;
|
left: 140px;
|
z-index: 1;
|
background: #040A56
|
}
|
}
|
|
.title {
|
font-size: 38px;
|
font-weight: bold;
|
color: #FFFFFF;
|
position: absolute;
|
line-height: 86px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.datetime {
|
display: flex;
|
margin-top: 61px;
|
|
.calendar-icon {
|
width: 22px;
|
height: 21px;
|
margin-right: 10px;
|
}
|
|
.time {
|
font-size: 16px;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
