|
|
@@ -4,14 +4,16 @@
|
|
|
<div class="center" style="width: 18%;height: 100%">
|
|
|
<div class="name center" style="flex-direction: column">
|
|
|
{{title}}
|
|
|
- <span style="font-size: 17px;letter-spacing: 2px;font-weight: normal;font-style: italic;color: #dddddd">Xinyang Rongji soft Garden</span>
|
|
|
+ <span style="font-size: 17px;letter-spacing: 2px;font-weight: normal;font-style: italic;color: #dddddd">Xinyang
|
|
|
+ Rongji soft Garden</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 时间日期 -->
|
|
|
<div style="width: 10%;height: 100%" class="center">
|
|
|
<div class="time-date">
|
|
|
- <div class="full center" style="height: 30%;font-style: italic">{{dateTime.date}} {{weekStr[dateTime.week]}}</div>
|
|
|
+ <div class="full center" style="height: 30%;font-style: italic">{{dateTime.date}} {{weekStr[dateTime.week]}}
|
|
|
+ </div>
|
|
|
<div class="full center" style="height: 70%;font-size: 35px">{{dateTime.time}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -22,7 +24,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 天气 -->
|
|
|
-<!-- <div class="center" style="width:7%;height: 100%;">
|
|
|
+ <!-- <div class="center" style="width:7%;height: 100%;">
|
|
|
<div class="weather">
|
|
|
<div class="full center" style="height: 75%;font-size: 35px;font-weight: 100">{{weather.dayWeather}}</div>
|
|
|
<div class="full center" style="height: 25%;font-style: italic;color: #dddddd">{{weather.nightTemp+'℃ ~' + weather.dayTemp+'℃'}}</div>
|
|
|
@@ -37,114 +39,132 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {dateFormat} from "../../../util/date";
|
|
|
-import {fullscreenToggel} from "../../../util/util";
|
|
|
-import {resetRouter} from "../../../router/router";
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "top-bar",
|
|
|
- async mounted() {
|
|
|
- this.currentTime();
|
|
|
- await this.getWeather();
|
|
|
- },
|
|
|
- props: {
|
|
|
- title: {type: 'String'},
|
|
|
- showBack: {type: 'Boolean',default: false}
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- dateTime: {},
|
|
|
- weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
|
|
|
- temperature: '',
|
|
|
- weather: '',
|
|
|
- weatherClass: 'duoyun',
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- weather(){
|
|
|
- this.weatherClass = this.getWeatherClass(this.weather);
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- back(){
|
|
|
- this.$router.go(-1);
|
|
|
- },
|
|
|
- logout() {
|
|
|
- this.$confirm('退出系统, 是否继续?', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- }).then(() => {
|
|
|
- this.$store.dispatch("LogOut").then(() => {
|
|
|
- resetRouter();
|
|
|
- this.$router.push({path: "/login"});
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- currentTime() {
|
|
|
- setInterval(this.getTime, 500);
|
|
|
+ import {
|
|
|
+ dateFormat
|
|
|
+ } from "../../../util/date";
|
|
|
+ import {
|
|
|
+ fullscreenToggel
|
|
|
+ } from "../../../util/util";
|
|
|
+ import {
|
|
|
+ resetRouter
|
|
|
+ } from "../../../router/router";
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "top-bar",
|
|
|
+ async mounted() {
|
|
|
+ this.currentTime();
|
|
|
+ await this.getWeather();
|
|
|
},
|
|
|
- getTime() {
|
|
|
- let date = new Date();
|
|
|
- let str = dateFormat(date);
|
|
|
- let week = date.getDay();
|
|
|
- str = str.split(" ");
|
|
|
- this.dateTime = {
|
|
|
- week: week,
|
|
|
- date: str[0],
|
|
|
- time: str[1]
|
|
|
+ props: {
|
|
|
+ title: {
|
|
|
+ type: 'String'
|
|
|
+ },
|
|
|
+ showBack: {
|
|
|
+ type: 'Boolean',
|
|
|
+ default: false
|
|
|
}
|
|
|
},
|
|
|
- getWeatherClass(weather) {
|
|
|
- let duoyun = ['少云', '晴间多云', '多云', '阴'];
|
|
|
- let wu = ['雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾'];
|
|
|
- let mai = ['霾', '中度霾', '重度霾', '严重霾'];
|
|
|
- let feng = ['有风', '平静', '微风', '和风', '清风', '强风/劲风', , '疾风', '大风', '烈风', '风暴', '狂爆风', '飓风', '热带风暴'];
|
|
|
- let yu = ['阵雨', '雷阵雨', '雷阵雨并伴有冰雹', '小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '强阵雨', '强雷阵雨', '极端降雨', '毛毛雨/细雨', '雨', '小雨-中雨', '中雨-大雨', '大雨-暴雨', '暴雨-大暴雨', '大暴雨-特大暴雨', '雨雪天气', '雨夹雪', '阵雨夹雪', '冻雨'];
|
|
|
- let sun = ['晴'];
|
|
|
- let xue = ['雪', '阵雪', '小雪', '中雪', '大雪', '暴雪', '小雪-中雪', '中雪-大雪', '大雪-暴雪'];
|
|
|
- if (duoyun.indexOf(weather) >= 0) return 'duoyun';
|
|
|
- if (wu.indexOf(weather) >= 0) return 'wu';
|
|
|
- if (yu.indexOf(weather) >= 0) return 'yu';
|
|
|
- if (sun.indexOf(weather) >= 0) return 'sun';
|
|
|
- if (xue.indexOf(weather) >= 0) return 'xue';
|
|
|
- if (mai.indexOf(weather) >= 0) return 'mai';
|
|
|
- if (feng.indexOf(weather) >= 0) return 'feng';
|
|
|
- return 'duoyun';
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dateTime: {},
|
|
|
+ weekStr: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ],
|
|
|
+ temperature: '',
|
|
|
+ weather: '',
|
|
|
+ weatherClass: 'duoyun',
|
|
|
+ }
|
|
|
},
|
|
|
- async getWeather() {
|
|
|
- console.log(this.$map)
|
|
|
- let weather = new this.$AMap.Weather();
|
|
|
- //执行实时天气信息查询
|
|
|
- weather.getForecast('信阳市', (err, data) => {
|
|
|
- this.weather = data.forecasts[0];
|
|
|
- });
|
|
|
+ watch: {
|
|
|
+ weather() {
|
|
|
+ this.weatherClass = this.getWeatherClass(this.weather);
|
|
|
+ },
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ back() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ logout() {
|
|
|
+ this.$confirm('退出系统, 是否继续?', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ }).then(() => {
|
|
|
+ this.$store.dispatch("LogOut").then(() => {
|
|
|
+ resetRouter();
|
|
|
+ this.$router.push({
|
|
|
+ path: "/login"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ currentTime() {
|
|
|
+ setInterval(this.getTime, 500);
|
|
|
+ },
|
|
|
+ getTime() {
|
|
|
+ let date = new Date();
|
|
|
+ let str = dateFormat(date);
|
|
|
+ let week = date.getDay();
|
|
|
+ str = str.split(" ");
|
|
|
+ this.dateTime = {
|
|
|
+ week: week,
|
|
|
+ date: str[0],
|
|
|
+ time: str[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getWeatherClass(weather) {
|
|
|
+ let duoyun = ['少云', '晴间多云', '多云', '阴'];
|
|
|
+ let wu = ['雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾'];
|
|
|
+ let mai = ['霾', '中度霾', '重度霾', '严重霾'];
|
|
|
+ let feng = ['有风', '平静', '微风', '和风', '清风', '强风/劲风', , '疾风', '大风', '烈风', '风暴', '狂爆风', '飓风', '热带风暴'];
|
|
|
+ let yu = ['阵雨', '雷阵雨', '雷阵雨并伴有冰雹', '小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '强阵雨', '强雷阵雨', '极端降雨', '毛毛雨/细雨', '雨',
|
|
|
+ '小雨-中雨', '中雨-大雨', '大雨-暴雨', '暴雨-大暴雨', '大暴雨-特大暴雨', '雨雪天气', '雨夹雪', '阵雨夹雪', '冻雨'
|
|
|
+ ];
|
|
|
+ let sun = ['晴'];
|
|
|
+ let xue = ['雪', '阵雪', '小雪', '中雪', '大雪', '暴雪', '小雪-中雪', '中雪-大雪', '大雪-暴雪'];
|
|
|
+ if (duoyun.indexOf(weather) >= 0) return 'duoyun';
|
|
|
+ if (wu.indexOf(weather) >= 0) return 'wu';
|
|
|
+ if (yu.indexOf(weather) >= 0) return 'yu';
|
|
|
+ if (sun.indexOf(weather) >= 0) return 'sun';
|
|
|
+ if (xue.indexOf(weather) >= 0) return 'xue';
|
|
|
+ if (mai.indexOf(weather) >= 0) return 'mai';
|
|
|
+ if (feng.indexOf(weather) >= 0) return 'feng';
|
|
|
+ return 'duoyun';
|
|
|
+ },
|
|
|
+ async getWeather() {
|
|
|
+ console.log(this.$map)
|
|
|
+ let weather = new this.$AMap.Weather();
|
|
|
+ //执行实时天气信息查询
|
|
|
+ weather.getForecast('信阳市', (err, data) => {
|
|
|
+ this.weather = data.forecasts[0];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .container{
|
|
|
+ .container {
|
|
|
width: 100%;
|
|
|
height: 7%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
overflow: hidden;
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
}
|
|
|
- .name{
|
|
|
+
|
|
|
+ .name {
|
|
|
width: 100%;
|
|
|
height: 70%;
|
|
|
letter-spacing: 10px;
|
|
|
font-size: 30px;
|
|
|
font-weight: 900;
|
|
|
border-right: 1px solid;
|
|
|
- border-right-color: rgba(255,255,255,0.8);
|
|
|
+ border-right-color: rgba(255, 255, 255, 0.8);
|
|
|
color: white;
|
|
|
user-select: none;
|
|
|
text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
|
|
|
}
|
|
|
- .time-date{
|
|
|
+
|
|
|
+ .time-date {
|
|
|
width: 100%;
|
|
|
height: 70%;
|
|
|
color: white;
|
|
|
@@ -152,7 +172,8 @@ export default {
|
|
|
user-select: none;
|
|
|
text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
|
|
|
}
|
|
|
- .weather{
|
|
|
+
|
|
|
+ .weather {
|
|
|
width: 100%;
|
|
|
height: 70%;
|
|
|
color: white;
|
|
|
@@ -160,24 +181,31 @@ export default {
|
|
|
user-select: none;
|
|
|
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
- .switch{
|
|
|
+
|
|
|
+ .switch {
|
|
|
background: url("/data/switch.png") no-repeat center/30%;
|
|
|
}
|
|
|
- .switch-bg:active,.switch-bg:hover{
|
|
|
+
|
|
|
+ .switch-bg:active,
|
|
|
+ .switch-bg:hover {
|
|
|
cursor: pointer;
|
|
|
- background: rgba(0,0,0,0.5);
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
|
|
|
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
- .switch-bg:active{
|
|
|
- transform: translate(-1px,1px);
|
|
|
+
|
|
|
+ .switch-bg:active {
|
|
|
+ transform: translate(-1px, 1px);
|
|
|
}
|
|
|
+
|
|
|
@keyframes shake-horizontal {
|
|
|
+
|
|
|
0%,
|
|
|
100% {
|
|
|
-webkit-transform: translateX(0);
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
+
|
|
|
10%,
|
|
|
30%,
|
|
|
50%,
|
|
|
@@ -185,30 +213,36 @@ export default {
|
|
|
-webkit-transform: translateX(-10px);
|
|
|
transform: translateX(-10px);
|
|
|
}
|
|
|
+
|
|
|
20%,
|
|
|
40%,
|
|
|
60% {
|
|
|
-webkit-transform: translateX(10px);
|
|
|
transform: translateX(10px);
|
|
|
}
|
|
|
+
|
|
|
80% {
|
|
|
-webkit-transform: translateX(8px);
|
|
|
transform: translateX(8px);
|
|
|
}
|
|
|
+
|
|
|
90% {
|
|
|
-webkit-transform: translateX(-8px);
|
|
|
transform: translateX(-8px);
|
|
|
}
|
|
|
}
|
|
|
- /deep/ .el-page-header__title {
|
|
|
+
|
|
|
+ /deep/ .el-page-header__title {
|
|
|
color: white;
|
|
|
font-size: 24px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
- /deep/ .el-page-header__content {
|
|
|
- font-size: 18px;
|
|
|
- color: #acacac;
|
|
|
- }
|
|
|
+
|
|
|
+ /deep/ .el-page-header__content {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #acacac;
|
|
|
+ }
|
|
|
+
|
|
|
/deep/ .el-page-header__left .el-icon-back {
|
|
|
font-size: 18px;
|
|
|
color: white;
|