增加字体,修改头部,两个今日交易模块

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",

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",

src/assets/styles/common.scss

@@ -112,6 +112,11 @@
   }
 }
 
+@font-face {
+  font-family:"LCD";
+  src: url('./fonts/LCD.ttf');
+}
+
 
 @font-face {
     font-family: 'DIGITALDREAMFAT';

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
 
 

src/router/index.js

@@ -5,11 +5,11 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/login',
+    path: '/',
-    name: 'Login',
+    name: 'Brand',
-    component: () => import('@/views/Login.vue'),
+    component: () => import('@/views/Brand.vue'),
     meta: {
-      title: '登录界面'
+      title: '智慧云停车大数据平台'
     }
   },
   {
@@ -25,13 +25,14 @@ const routes = [
     }
   },
   {
-    path: '/',
+    path: '/login',
-    name: 'Brand',
+    name: 'Login',
-    component: () => import('@/views/Brand.vue'),
+    component: () => import('@/views/Login.vue'),
     meta: {
-      title: '公司品牌介绍'
+      title: '登录界面'
     }
-  }
+  },
+
 ]
 
 const router = new VueRouter({

src/views/Brand.vue

@@ -2,19 +2,18 @@
   <div class="brand-container">
     <div class="wrap">
       <header>
-        <div class="weather">
-          <img :src="imgSrc">
-          <span class="tem">{{ weatcherData.tem }}°C</span>
-          <span class="wea">{{ weatcherData.wea }}</span>
-        </div>
-        <h2>智慧云停车大数据平台</h2>
         <div class="showTime">
           <span class="time">{{ nowTime }}</span>
           <span class="date">
-            <span>{{ week }}</span>
             <span>{{ date }}</span>
+            <span>{{ week }}</span>
           </span>
         </div>
+        <h2>智慧云停车大数据平台</h2>
+        <div class="welcome">
+          欢迎使用本系统
+        </div>
+
       </header>
 
       <section class="mainbox">
@@ -37,28 +36,18 @@
         </div>
 
         <div class="item center">
+
           <div class="resume">
             <div class="resume-hd">
-              <ul>
+              <span>今日交易笔数</span>
-                <li>
+              <span>今日交易金额</span>
-                  <countTo :startVal='startVal' :endVal='490' :duration='6000' separator=""></countTo>
-                </li>
-                <li>
-                  <countTo :startVal='startVal' :endVal='75' :duration='6000' separator=""></countTo>
-                </li>
-                <li>
-                  <countTo :startVal='startVal' :endVal='3000' :duration='6000' separator=""></countTo>
-                </li>
-              </ul>
             </div>
             <div class="resume-bd">
-              <ul>
+              <countTo :startVal='startVal' :endVal='82388888' :duration='1500' separator=""></countTo>
-                <li>公司总人数（单位：人）</li>
+              <countTo :startVal='startVal' :endVal='65488888' :duration='1500' separator=""></countTo>
-                <li>技术人员占比（单位：%）</li>
-                <li>产品投资额（单位：万元）</li>
-              </ul>
             </div>
           </div>
+
           <div class="map">
             <div class="chart" id="chart_map"></div>
             <div class="map1"></div>
@@ -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)
+      clearInterval(this.timer)
-      this.nowTimes = null;
+      this.timer = 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)
-      })
     },
+
     convertData(data) { // 地图数据转换
       let res = [];
       for (let i = 0; i < data.length; i++) {
@@ -485,7 +426,7 @@ export default {
     }
   },
   beforeDestroy() {
-    clearInterval(this.timer);
+    this.clear();
   }
 }
 </script>
@@ -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;
+        line-height: 1.175rem;
-        letter-spacing: 1px;
+        letter-spacing: 0.05rem;
-      }
+        padding-top: 0.175rem;
-
+        font-weight: 400;
-      .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;
-        }
       }
 
       .showTime {
         position: absolute;
-        right: 1.375rem;
+        left: 0.625rem;
-        top: 0.5rem;
+        top: 0.45rem;
-        color: rgba(126, 240, 255, .7);
+        color: #fff;
         display: flex;
 
         .time {
-          font-size: .28rem;
+          top: 0.45rem;
+          font-size: .4rem;
           margin-right: .18rem;
         }
 
         .date {
-          span {
+          top: 0.45rem;
-            display: block;
 
-            &:nth-child(1) {
+          span {
-              font-size: .12rem;
+            line-height: 0.45rem;
-              text-align: right;
+            font-size: .2rem;
-            }
+            padding-right: 0.1rem;
-
-            &:nth-child(2) {
-              font-size: .14rem;
-            }
           }
         }
       }
+
+      .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;
+              display: flex;
-              border: 1px solid rgba(25, 186, 139, 0.17);
+              justify-content: space-around;
-
+
-              ul {
+              span {
-                display: flex;
+                display: block;
-
+                box-sizing: border-box;
-                %li-line {
+                width: 3.535rem;
-                  content: "";
+                background: url(../assets/img/brand/resume-hd-item.png) no-repeat;
-                  position: absolute;
+                height: 0.3125rem;
-                  height: 50%;
+                line-height: 0.5rem;
-                  width: 1px;
+                text-align: left;
-                  background: rgba(255, 255, 255, 0.2);
+                font-size: 0.1625rem;
-                  top: 25%;
+                color: rgba(255, 255, 255, 0.9);
-                }
+                padding-left: .3rem;
-
-                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;
-                    }
-                  }
-                }
               }
 
-              &: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;
-                display: flex;
+              justify-content: space-around;
-
+
-                li {
+              span {
-                  flex: 1;
+                margin-top: .25rem;
-                  height: 0.5rem;
+                // border: .03rem solid rgba(63, 124, 163, 0.7);
-                  line-height: 0.5rem;
+                box-shadow: 0rem .02rem .08rem rgba(38, 228, 245, 0.7);
-                  text-align: center;
+                width: 3.535rem;
-                  font-size: 0.225rem;
+                text-align: center;
-                  color: rgba(255, 255, 255, 0.7);
+                height: 0.725rem;
-                  padding-top: 0.125rem;
+                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%);
               }
             }
+
+
           }
         }