<template>
|
<div class="container">
|
<div class="catlog">
|
<div class="weather">
|
<img :src="cimg" />
|
<span>{{tem}}℃</span>
|
</div>
|
<div class="loction">
|
<img src="../../assets/image/top/location.png" />
|
<span>朝阳</span>
|
</div>
|
<div class="time">
|
<span class="CurrentDate">{{date}}</span>
|
<span class="CurrentWeek">{{week}}</span>
|
<span class="CurrentTime">{{time}}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import httpUrl from '../../config/http.js'
|
import axios from "axios";
|
export default {
|
data() {
|
return {
|
date: undefined,
|
week: undefined,
|
time: undefined,
|
cimg: require("../../assets/image/top/sun.png"),
|
tem:26,
|
labels: [],
|
};
|
},
|
methods: {
|
|
getDate() {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1;
|
month = month < 10 ? "0" + month : month;
|
var dates = date.getDate();
|
dates = dates < 10 ? "0" + dates : dates;
|
var arr = [
|
"星期日",
|
"星期一",
|
"星期二",
|
"星期三",
|
"星期四",
|
"星期五",
|
"星期六",
|
];
|
var day = date.getDay();
|
var hour = date.getHours();
|
var min = date.getMinutes();
|
min = min < 10 ? "0" + min : min;
|
var sed = date.getSeconds();
|
sed = sed < 10 ? "0" + sed : sed;
|
this.date = year + "." + month + "." + dates;
|
this.week = arr[day];
|
this.time = hour + ":" + min + ":" + sed + "";
|
},
|
GetCurrentWeather(){
|
axios(httpUrl.WeatherAddress).then(response=>{
|
//console.log(response.data.lives[0]);
|
if(response.data.lives!=null){
|
// debugger;
|
// alert(response.data.lives[0].weather);
|
switch (response.data.lives[0].weather) {
|
case "晴":
|
this.cimg = require("../../assets/image/top/晴天.gif");
|
break;
|
case "晴转多云":
|
this.cimg = require("../../assets/image/top/晴转多云.gif");
|
break;
|
case "多云":
|
this.cimg = require("../../assets/image/top/多云.gif");
|
break;
|
case "雾":
|
case "雾霾":
|
this.cimg = require("../../assets/image/top/多云.gif");
|
break;
|
case "小雨":
|
case "中雨":
|
case "大雨":
|
case "暴雨":
|
this.cimg = require("../../assets/image/top/下雨.gif");
|
break;
|
case "小雪":
|
case "中雪":
|
case "大雪":
|
case "暴雪":
|
this.cimg = require("../../assets/image/top/下雪.gif");
|
break;
|
case "雷电":
|
this.cimg = require("../../assets/image/top/雷暴.gif");
|
break;
|
default:
|
this.cimg = require("../../assets/image/top/多云.gif");
|
break;
|
}
|
|
this.tem=response.data.lives[0].temperature;
|
|
}
|
})
|
}
|
},
|
mounted() {
|
this.GetCurrentWeather();
|
this.getDate();
|
setInterval(this.getDate, 1000);
|
}
|
}
|
</script>
|
|
<style scoped="scoped">
|
.container{
|
height: 148px;
|
width: 3803px;
|
background-image: url(../../assets/images/顶部LOGO.png);
|
background-position: center;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.catlog{
|
height: 120px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
}
|
|
.weather,.loction{
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
color: white;
|
font-size: 36px;
|
color:#FFFFFF;
|
font-family: MyTime;
|
text-indent: 10px;
|
font-style: italic;
|
letter-spacing: 2px;
|
}
|
|
.weather{width: 20%;}
|
.loction{
|
width: 5%;
|
}
|
|
.time{
|
width: 75%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-family: MyTime;
|
}
|
.CurrentDate,.CurrentWeek,.CurrentTime{
|
font-size: 36px;
|
color: #FFFFFF;
|
font-style: italic;
|
text-indent: 50px;
|
}
|
.CurrentDate{
|
margin-left: 60%;
|
}
|
.CurrentTime{
|
color: #FEF20E;
|
text-shadow: 0 0 30px #FEF20E;
|
}
|
|
.weather img{
|
height: 90px;
|
width: 90px;
|
}
|
|
</style>
|
