diff --git a/package-lock.json b/package-lock.json index 07ad25f..a74277c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4348,6 +4348,11 @@ "assert-plus": "^1.0.0" } }, + "dayjs": { + "version": "1.11.4", + "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.4.tgz", + "integrity": "sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==" + }, "de-indent": { "version": "1.0.2", "resolved": "http://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz", diff --git a/package.json b/package.json index 6ea05c0..1eefb88 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "axios": "^0.27.2", "core-js": "^3.6.4", + "dayjs": "^1.11.4", "echarts": "^5.3.3", "vue": "^2.6.11", "vue-router": "^3.1.6", diff --git a/src/assets/img/brand/bg.png b/src/assets/img/brand/bg.png new file mode 100644 index 0000000..01d7bd1 Binary files /dev/null and b/src/assets/img/brand/bg.png differ diff --git a/src/assets/img/brand/bg.jpg b/src/assets/img/brand/bg1.jpg similarity index 100% rename from src/assets/img/brand/bg.jpg rename to src/assets/img/brand/bg1.jpg diff --git a/src/assets/img/brand/resume-hd-item.png b/src/assets/img/brand/resume-hd-item.png new file mode 100644 index 0000000..a24b7c6 Binary files /dev/null and b/src/assets/img/brand/resume-hd-item.png differ diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss index 1c6db7f..11a8c43 100644 --- a/src/assets/styles/common.scss +++ b/src/assets/styles/common.scss @@ -112,6 +112,11 @@ } } +@font-face { + font-family:"LCD"; + src: url('./fonts/LCD.ttf'); +} + @font-face { font-family: 'DIGITALDREAMFAT'; diff --git a/src/assets/styles/fonts/LCD.ttf b/src/assets/styles/fonts/LCD.ttf new file mode 100644 index 0000000..a161a7b Binary files /dev/null and b/src/assets/styles/fonts/LCD.ttf differ diff --git a/src/main.js b/src/main.js index cc38bc8..038859b 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,7 @@ import Vcomp from './components/index' import Toast from './components/toast' import axios from 'axios' +import dayjs from 'dayjs' @@ -19,6 +20,7 @@ Vue.use(Vcomp) Vue.config.productionTip = false Vue.prototype.axios = axios +Vue.prototype.dayjs = dayjs Vue.prototype.$Toast = Toast diff --git a/src/router/index.js b/src/router/index.js index 2b40158..da97b62 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -5,11 +5,11 @@ Vue.use(VueRouter) const routes = [ { - path: '/login', - name: 'Login', - component: () => import('@/views/Login.vue'), + path: '/', + name: 'Brand', + component: () => import('@/views/Brand.vue'), meta: { - title: '登录界面' + title: '智慧云停车大数据平台' } }, { @@ -25,13 +25,14 @@ const routes = [ } }, { - path: '/', - name: 'Brand', - component: () => import('@/views/Brand.vue'), + path: '/login', + name: 'Login', + component: () => import('@/views/Login.vue'), meta: { - title: '公司品牌介绍' + title: '登录界面' } - } + }, + ] const router = new VueRouter({ diff --git a/src/views/Brand.vue b/src/views/Brand.vue index ea8a145..2c99c39 100644 --- a/src/views/Brand.vue +++ b/src/views/Brand.vue @@ -2,19 +2,18 @@
-
- - {{ weatcherData.tem }}°C - {{ weatcherData.wea }} -
-

智慧云停车大数据平台

{{ nowTime }} - {{ week }} {{ date }} + {{ week }}
+

智慧云停车大数据平台

+
+ 欢迎使用本系统 +
+
@@ -37,28 +36,18 @@
+
-
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
+ 今日交易笔数 + 今日交易金额
-
    -
  • 公司总人数(单位:人)
  • -
  • 技术人员占比(单位:%)
  • -
  • 产品投资额(单位:万元)
  • -
+ +
+
@@ -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%); } } + + } }