@@ -107,8 +96,6 @@ export default {
week: '',
date: '',
timer: null,
- imgSrc: '',
- weatcherData: {},
startVal: 0,
geoCoordMap: {},
XAData: [
@@ -139,71 +126,25 @@ export default {
created() {
},
mounted() {
- this.getWeather();
- this.timer = setInterval(() => {
- this.getWeather();
- }, 1000 * 60 * 60)
-
this.nowTimes();
this.getEchart();
},
methods: {
- timeFormate(timeStamp) { //显示当前时间
- let newDate = new Date(timeStamp);
- let year = newDate.getFullYear();
- let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
- let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
- let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
- let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
- let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
- let week = newDate.getDay();
- let weeks = ['日', '一', '二', '三', '四', '五', '六'];
- let getWeek = '星期' + weeks[week];
- this.week = getWeek;
- this.date = year + '.' + month + '.' + date;
- this.nowTime = hh + ':' + mm + ':' + ss;
- },
nowTimes() {
- this.timeFormate(new Date());
- setInterval(this.nowTimes, 1000);
this.clear();
+ let dayjs = this.dayjs()
+ let weeks = ['日', '一', '二', '三', '四', '五', '六'];
+ this.week = `星期${weeks[dayjs.day()]}`
+ this.date = dayjs.format('YYYY-MM-DD')
+ this.nowTime = dayjs.format('HH:mm:ss')
+ this.timer = setInterval(this.nowTimes, 1000);
+
},
clear() {
- clearInterval(this.nowTimes)
- this.nowTimes = null;
- },
- getWeather() { // 第三方天气api接口
- this.axios.get('https://www.tianqiapi.com/api/', {
- params: {
- appid: '26148275',
- appsecret: '2id6H48Y',
- version: 'v6'
- }
- }).then(res => {
- if (res.data) {
- if (res.data.wea_img == 'xue') {
- this.imgSrc = require('../assets/img/brand/xue.png');
- } else if (res.data.wea_img == 'yin') {
- this.imgSrc = require('../assets/img/brand/yin.png');
- } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
- this.imgSrc = require('../assets/img/brand/yu.png');
- } else if (res.data.wea_img == 'yun') {
- this.imgSrc = require('../assets/img/brand/yun.png');
- } else if (res.data.wea_img == 'wu') {
- this.imgSrc = require('../assets/img/brand/wu.png');
- } else if (res.data.wea_img == 'shachen') {
- this.imgSrc = require('../assets/img/brand/shachen.png');
- } else if (res.data.wea_img == 'lei') {
- this.imgSrc = require('../assets/img/brand/lei.png');
- } else {
- this.imgSrc = require('../assets/img/brand/qing.png');
- }
- this.weatcherData = res.data;
- }
- }).catch(err => {
- console.log(err)
- })
+ clearInterval(this.timer)
+ this.timer = null;
},
+
convertData(data) { // 地图数据转换
let res = [];
for (let i = 0; i < data.length; i++) {
@@ -485,7 +426,7 @@ export default {
}
},
beforeDestroy() {
- clearInterval(this.timer);
+ this.clear();
}
}
@@ -498,77 +439,67 @@ export default {
background: #000;
.wrap {
- background: url(../assets/img/brand/bg.jpg) no-repeat #000;
+ background: url(../assets/img/brand/bg.png) no-repeat #000;
background-size: cover;
line-height: 1.15;
header {
position: relative;
- height: 1rem;
+ height: 1.35rem;
background: url(../assets/img/brand/head_bg.png) no-repeat top center;
background-size: 100% 100%;
h2 {
- color: #7ef0ff;
+ height: 1.175rem;
+ color: #fff;
font-size: 0.475rem;
text-align: center;
- line-height: 0.75rem;
- letter-spacing: 1px;
- }
-
- .weather {
- position: absolute;
- left: 1.375rem;
- top: 0.35rem;
- font-size: 0.25rem;
- color: rgba(126, 240, 255, .7);
-
- img {
- width: .45rem;
- }
-
- span {
- display: inline-block;
- }
-
- .tem {
- margin: 0 .1rem 0 .2rem;
- }
+ line-height: 1.175rem;
+ letter-spacing: 0.05rem;
+ padding-top: 0.175rem;
+ font-weight: 400;
}
.showTime {
position: absolute;
- right: 1.375rem;
- top: 0.5rem;
- color: rgba(126, 240, 255, .7);
+ left: 0.625rem;
+ top: 0.45rem;
+ color: #fff;
display: flex;
.time {
- font-size: .28rem;
+ top: 0.45rem;
+ font-size: .4rem;
margin-right: .18rem;
}
.date {
- span {
- display: block;
+ top: 0.45rem;
- &:nth-child(1) {
- font-size: .12rem;
- text-align: right;
- }
-
- &:nth-child(2) {
- font-size: .14rem;
- }
+ span {
+ line-height: 0.45rem;
+ font-size: .2rem;
+ padding-right: 0.1rem;
}
}
}
+
+ .welcome {
+ position: absolute;
+ right: 0.625rem;
+ top: 0.45rem;
+ height: .35rem;
+ color: #fff;
+ font-size: 0.25rem;
+ text-align: center;
+ line-height: .35rem;
+ }
}
.mainbox {
min-width: 1024px;
max-width: 1920px;
- padding: 0.125rem 0.125rem 0;
+ padding: 0.47rem 0.125rem 0;
display: flex;
.item {
@@ -580,89 +511,48 @@ export default {
overflow: hidden;
.resume {
- background: rgba(101, 132, 226, 0.1);
- padding: 0.1875rem;
.resume-hd {
- position: relative;
- border: 1px solid rgba(25, 186, 139, 0.17);
-
- ul {
- display: flex;
-
- %li-line {
- content: "";
- position: absolute;
- height: 50%;
- width: 1px;
- background: rgba(255, 255, 255, 0.2);
- top: 25%;
- }
-
- li {
- position: relative;
- flex: 1;
- text-align: center;
- height: 1.2rem;
- line-height: 1.2rem;
- font-size: 0.65rem;
- color: #ffeb7b;
- padding: 0.05rem 0;
- font-family: 'DIGITALDREAMFAT';
- font-weight: bold;
-
- &:nth-child(2) {
- &:after {
- @extend %li-line;
- right: 0;
- }
-
- &:before {
- @extend %li-line;
- left: 0;
- }
- }
- }
+ display: flex;
+ justify-content: space-around;
+
+ span {
+ display: block;
+ box-sizing: border-box;
+ width: 3.535rem;
+ background: url(../assets/img/brand/resume-hd-item.png) no-repeat;
+ height: 0.3125rem;
+ line-height: 0.5rem;
+ text-align: left;
+ font-size: 0.1625rem;
+ color: rgba(255, 255, 255, 0.9);
+ padding-left: .3rem;
}
- &:before {
- content: "";
- position: absolute;
- width: 30px;
- height: 10px;
- border-top: 2px solid #02a6b5;
- border-left: 2px solid #02a6b5;
- top: 0;
- left: 0;
- }
-
- &:after {
- content: "";
- position: absolute;
- width: 30px;
- height: 10px;
- border-bottom: 2px solid #02a6b5;
- border-right: 2px solid #02a6b5;
- right: 0;
- bottom: 0;
- }
}
.resume-bd {
- ul {
- display: flex;
-
- li {
- flex: 1;
- height: 0.5rem;
- line-height: 0.5rem;
- text-align: center;
- font-size: 0.225rem;
- color: rgba(255, 255, 255, 0.7);
- padding-top: 0.125rem;
- }
+ display: flex;
+ justify-content: space-around;
+
+ span {
+ margin-top: .25rem;
+ // border: .03rem solid rgba(63, 124, 163, 0.7);
+ box-shadow: 0rem .02rem .08rem rgba(38, 228, 245, 0.7);
+ width: 3.535rem;
+ text-align: center;
+ height: 0.725rem;
+ line-height: 0.725rem;
+ font-size: 0.45rem;
+ color: #fff;
+ font-family: 'LCD';
+ letter-spacing: 0.1rem;
+ text-shadow: .02rem .02rem .04rem #000;
+ background: linear-gradient(180deg, rgba(101, 172, 255, 0) 0%, rgba(29, 104, 190, 0.78) 100%);
}
}
+
+
}
}