feat: 基地详情

mm/mm.config.js

@@ -253,6 +253,19 @@ module.exports = async (util) => {
           res.redirect(req.originalUrl.replace(`/api`, ``))
         },
       }),
+      'get /api/base/:id': util.side({
+        tags: [`增删改查`, `种植分析`, `种值分析详情`],
+        summary: `基地详情`,
+        schema: {
+          path: joi
+            .object({
+              id: joi.string(),
+            })
+        },
+        async action(req, res, next) {
+          res.redirect(req.originalUrl.replace(`/api`, ``))
+        },
+      }),
       'get /api/holePunchingMachine': util.side({
         tags: [`增删改查`, `种值分析详情`],
         summary: `打孔机 crud`,

src/assets/styles/common.less

@@ -32,4 +32,130 @@
   background-repeat: no-repeat;
   width: 1920px;
   height: 1080px;
+}
+
+/*
+ *  描述: 动画组件通用样式
+ *  作者：Jack Chen
+ *  时间：2020-04-18
+ */
+
+.wrap-container {
+  position: absolute;
+  overflow: hidden;
+  display: block;
+  cursor: default;
+  z-index: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+@font-face {
+    font-family: 'DIGITALDREAMFAT';
+    /*src: url('./fonts/DIGITALDREAMFAT.eot');*/
+    /*src: url('./fonts/DIGITALDREAMFAT.eot') format('embedded-opentype'),*/
+    src: url('./fonts/DIGITALDREAMFAT.woff2') format('woff2'),
+    url('./fonts/DIGITALDREAMFAT.woff') format('woff'),
+    url('./fonts/DIGITALDREAMFAT.ttf') format('truetype');
+    /*url('./fonts/DIGITALDREAMFAT.svg#DIGITALDREAMFAT') format('svg');*/
+}
+.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+  position: relative;
+}
+.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+  position: relative;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer {
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  *zoom: 1;
+  *display: inline;
+  visibility: hidden;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner {
+  text-align: left;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /*overflow: hidden;*/
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon {
+  display: block;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon-inner {
+  display: block;
+  -webkit-backface-visibility: hidden;
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value {
+  display: block;
+  -webkit-transform: translateZ(0);
+}
+.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value.odometer-last-value {
+  position: absolute;
+}
+.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner {
+  -webkit-transition: -webkit-transform 2s;
+  -moz-transition: -moz-transform 2s;
+  -ms-transition: -ms-transform 2s;
+  -o-transition: -o-transform 2s;
+  transition: transform 2s;
+}
+.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner {
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
+  -webkit-transition: -webkit-transform 2s;
+  -moz-transition: -moz-transform 2s;
+  -ms-transition: -ms-transform 2s;
+  -o-transition: -o-transform 2s;
+  transition: transform 2s;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+
+.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiZjVhNSIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-size: 100%;
+  background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
+  background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
+  background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000);
+  background-color: #000;
+  font-family: "DIGITALDREAMFAT";
+  padding: 0 0.2em;
+  line-height: 1.1em;
+  color: #8bf5a5;
+}
+.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit {
+  margin-left: 0.1em;
 }

src/main.js

@@ -9,8 +9,7 @@ import Vcomp from './components/index'
 import Toast from './components/toast'
 import util from '@/util/index.js'
 
-import '@/assets/styles/base.scss'
-import '@/assets/styles/common.scss'
+import '@/assets/styles/base.less'
 import '@/assets/styles/common.less'
 import '@/assets/iconfont/iconfont.css'
 import '@/assets/icon2/font/iconfont.css'

src/views/Brand.vue

@@ -1,847 +1,5 @@
-<!--
- 描述: 公司品牌介绍
- 作者: Jack Chen
- 日期: 2020-05-10
--->
-
 <template>
-  <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>
-        </div>
-      </header>
-
-      <section class="mainbox">
-        <div class="item left">
-          <div class="panel">
-            <h2>业务范围</h2>
-            <business />
-            <div class="panel-footer"></div>
-          </div>
-          <div class="panel">
-            <h2>人才队伍</h2>
-            <talent />
-            <div class="panel-footer"></div>
-          </div>
-          <div class="panel">
-            <h2>营收状况</h2>
-            <income />
-            <div class="panel-footer"></div>
-          </div>
-        </div>
-
-        <div class="item center">
-          <div class="resume">
-            <div class="resume-hd">
-              <ul>
-                <li>
-                  <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>
-                <li>公司总人数（单位：人）</li>
-                <li>技术人员占比（单位：%）</li>
-                <li>产品投资额（单位：万元）</li>
-              </ul>
-            </div>
-          </div>
-          <div class="map">
-            <div class="chart" id="chart_map"></div>
-            <div class="map1"></div>
-            <div class="map2"></div>
-            <div class="map3"></div>
-          </div>
-        </div>
-
-        <div class="item right">
-          <div class="panel">
-            <h2>产品热词</h2>
-            <wordCloud />
-            <div class="panel-footer"></div>
-          </div>
-          <div class="panel">
-            <h2>客户分布</h2>
-            <distribution />
-            <div class="panel-footer"></div>
-          </div>
-          <div class="panel">
-            <h2>发展历程</h2>
-            <history />
-            <div class="panel-footer"></div>
-          </div>
-        </div>
-      </section>
-    </div>
+  <div>
+    hello
   </div>
-</template>
-
-<script>
-import '@/assets/js/flexible'
-import '@/assets/js/china'
-import countTo from 'vue-count-to'
-
-export default {
-  name: `Brand`,
-  components: {
-    countTo,
-  },
-  data() {
-    return {
-      nowTime: ``,
-      week: ``,
-      date: ``,
-      timer: null,
-      imgSrc: ``,
-      weatcherData: {},
-      startVal: 0,
-      geoCoordMap: {},
-      XAData: [
-        [{ name: `长沙` }, { name: `北京`, value: 100 }],
-        [{ name: `长沙` }, { name: `上海`, value: 100 }],
-        [{ name: `长沙` }, { name: `广州`, value: 100 }],
-        [{ name: `长沙` }, { name: `深圳`, value: 100 }],
-        [{ name: `长沙` }, { name: `西安`, value: 100 }],
-      ],
-      XNData: [
-        [{ name: `长沙` }, { name: `西宁`, value: 100 }],
-        [{ name: `长沙` }, { name: `拉萨`, value: 100 }],
-        [{ name: `长沙` }, { name: `哈尔滨`, value: 100 }],
-        [{ name: `长沙` }, { name: `成都`, value: 100 }],
-        [{ name: `长沙` }, { name: `重庆`, value: 100 }],
-      ],
-      YCData: [
-        [{ name: `北京` }, { name: `长沙`, value: 100 }],
-        [{ name: `北京` }, { name: `贵阳`, value: 100 }],
-        [{ name: `北京` }, { name: `杭州`, value: 100 }],
-      ],
-    }
-  },
-  computed: {},
-  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()
-    },
-    clear() {
-      clearInterval(this.nowTimes)
-      this.nowTimes = null
-    },
-    getWeather() {
-      // 第三方天气api接口
-      window.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++) {
-        let dataItem = data[i]
-        let fromCoord = this.geoCoordMap[dataItem[0].name]
-        let toCoord = this.geoCoordMap[dataItem[1].name]
-        if (fromCoord && toCoord) {
-          res.push({
-            fromName: dataItem[0].name,
-            toName: dataItem[1].name,
-            coords: [fromCoord, toCoord],
-            value: dataItem[1].value,
-          })
-        }
-      }
-      return res
-    },
-    getEchart() {
-      // 初始化地图数据
-      let myChart = echarts.init(document.getElementById(`chart_map`))
-
-      this.geoCoordMap = {
-        上海: [121.4648, 31.2891],
-        东莞: [113.8953, 22.901],
-        东营: [118.7073, 37.5513],
-        中山: [113.4229, 22.478],
-        临汾: [111.4783, 36.1615],
-        临沂: [118.3118, 35.2936],
-        丹东: [124.541, 40.4242],
-        丽水: [119.5642, 28.1854],
-        乌鲁木齐: [87.9236, 43.5883],
-        佛山: [112.8955, 23.1097],
-        保定: [115.0488, 39.0948],
-        兰州: [103.5901, 36.3043],
-        包头: [110.3467, 41.4899],
-        北京: [116.4551, 40.2539],
-        北海: [109.314, 21.6211],
-        南京: [118.8062, 31.9208],
-        南宁: [108.479, 23.1152],
-        南昌: [116.0046, 28.6633],
-        南通: [121.1023, 32.1625],
-        厦门: [118.1689, 24.6478],
-        台州: [121.1353, 28.6688],
-        合肥: [117.29, 32.0581],
-        呼和浩特: [111.4124, 40.4901],
-        咸阳: [108.4131, 34.8706],
-        哈尔滨: [127.9688, 45.368],
-        唐山: [118.4766, 39.6826],
-        嘉兴: [120.9155, 30.6354],
-        大同: [113.7854, 39.8035],
-        大连: [122.2229, 39.4409],
-        天津: [117.4219, 39.4189],
-        太原: [112.3352, 37.9413],
-        威海: [121.9482, 37.1393],
-        宁波: [121.5967, 29.6466],
-        宝鸡: [107.1826, 34.3433],
-        宿迁: [118.5535, 33.7775],
-        常州: [119.4543, 31.5582],
-        广州: [113.5107, 23.2196],
-        廊坊: [116.521, 39.0509],
-        延安: [109.1052, 36.4252],
-        张家口: [115.1477, 40.8527],
-        徐州: [117.5208, 34.3268],
-        德州: [116.6858, 37.2107],
-        惠州: [114.6204, 23.1647],
-        成都: [103.9526, 30.7617],
-        扬州: [119.4653, 32.8162],
-        承德: [117.5757, 41.4075],
-        拉萨: [91.1865, 30.1465],
-        无锡: [120.3442, 31.5527],
-        日照: [119.2786, 35.5023],
-        昆明: [102.9199, 25.4663],
-        杭州: [119.5313, 29.8773],
-        枣庄: [117.323, 34.8926],
-        柳州: [109.3799, 24.9774],
-        株洲: [113.5327, 27.0319],
-        武汉: [114.3896, 30.6628],
-        汕头: [117.1692, 23.3405],
-        江门: [112.6318, 22.1484],
-        沈阳: [123.1238, 42.1216],
-        沧州: [116.8286, 38.2104],
-        河源: [114.917, 23.9722],
-        泉州: [118.3228, 25.1147],
-        泰安: [117.0264, 36.0516],
-        泰州: [120.0586, 32.5525],
-        济南: [117.1582, 36.8701],
-        济宁: [116.8286, 35.3375],
-        海口: [110.3893, 19.8516],
-        淄博: [118.0371, 36.6064],
-        淮安: [118.927, 33.4039],
-        深圳: [114.5435, 22.5439],
-        清远: [112.9175, 24.3292],
-        温州: [120.498, 27.8119],
-        渭南: [109.7864, 35.0299],
-        湖州: [119.8608, 30.7782],
-        湘潭: [112.5439, 27.7075],
-        滨州: [117.8174, 37.4963],
-        潍坊: [119.0918, 36.524],
-        烟台: [120.7397, 37.5128],
-        玉溪: [101.9312, 23.8898],
-        珠海: [113.7305, 22.1155],
-        盐城: [120.2234, 33.5577],
-        盘锦: [121.9482, 41.0449],
-        石家庄: [114.4995, 38.1006],
-        福州: [119.4543, 25.9222],
-        秦皇岛: [119.2126, 40.0232],
-        绍兴: [120.564, 29.7565],
-        聊城: [115.9167, 36.4032],
-        肇庆: [112.1265, 23.5822],
-        舟山: [122.2559, 30.2234],
-        苏州: [120.6519, 31.3989],
-        莱芜: [117.6526, 36.2714],
-        菏泽: [115.6201, 35.2057],
-        营口: [122.4316, 40.4297],
-        葫芦岛: [120.1575, 40.578],
-        衡水: [115.8838, 37.7161],
-        衢州: [118.6853, 28.8666],
-        西宁: [101.4038, 36.8207],
-        西安: [109.1162, 34.2004],
-        贵阳: [106.6992, 26.7682],
-        连云港: [119.1248, 34.552],
-        邢台: [114.8071, 37.2821],
-        邯郸: [114.4775, 36.535],
-        郑州: [113.4668, 34.6234],
-        鄂尔多斯: [108.9734, 39.2487],
-        重庆: [107.7539, 30.1904],
-        金华: [120.0037, 29.1028],
-        铜川: [109.0393, 35.1947],
-        银川: [106.3586, 38.1775],
-        镇江: [119.4763, 31.9702],
-        长春: [125.8154, 44.2584],
-        长沙: [113.0823, 28.2568],
-        长治: [112.8625, 36.4746],
-        阳泉: [113.4778, 38.0951],
-        青岛: [120.4651, 36.3373],
-        韶关: [113.7964, 24.7028],
-      }
-
-      let planePath = `path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z`
-
-      let color = [`#fff`, `#fff`, `#fff`] // 航线的颜色
-      let series = []
-
-      ;[
-        [`长沙`, this.XAData],
-        [`长沙`, this.XNData],
-        [`北京`, this.YCData],
-      ].forEach((item, i) => {
-        series.push(
-          {
-            name: item[0] + ` Top3`,
-            type: `lines`,
-            zlevel: 1,
-            effect: {
-              show: true,
-              period: 6,
-              trailLength: 0.7,
-              color: `red`, // arrow箭头的颜色
-              symbolSize: 3,
-            },
-            lineStyle: {
-              normal: {
-                color: color[i],
-                width: 0,
-                curveness: 0.2,
-              },
-            },
-            data: this.convertData(item[1]),
-          },
-          {
-            name: item[0] + ` Top3`,
-            type: `lines`,
-            zlevel: 2,
-            symbol: [`none`, `arrow`],
-            symbolSize: 10,
-            effect: {
-              show: true,
-              period: 6,
-              trailLength: 0,
-              symbol: planePath,
-              symbolSize: 15,
-            },
-            lineStyle: {
-              normal: {
-                color: color[i],
-                width: 1,
-                opacity: 0.6,
-                curveness: 0.2,
-              },
-            },
-            data: this.convertData(item[1]),
-          },
-          {
-            name: item[0] + ` Top3`,
-            type: `effectScatter`,
-            coordinateSystem: `geo`,
-            zlevel: 2,
-            rippleEffect: {
-              brushType: `stroke`,
-            },
-            label: {
-              normal: {
-                show: true,
-                position: `right`,
-                formatter: `{b}`,
-              },
-            },
-            symbolSize: (val) => {
-              return val[2] / 8
-            },
-            itemStyle: {
-              normal: {
-                color: color[i],
-              },
-              emphasis: {
-                areaColor: `#2B91B7`,
-              },
-            },
-            data: item[1].map((dataItem) => {
-              return {
-                name: dataItem[1].name,
-                value: this.geoCoordMap[dataItem[1].name].concat([
-                  dataItem[1].value,
-                ]),
-              }
-            }),
-          }
-        )
-      })
-
-      let option = {
-        tooltip: {
-          trigger: `item`,
-          formatter: (params, ticket, callback) => {
-            if (params.seriesType == `effectScatter`) {
-              return `线路：` + params.data.name + `` + params.data.value[2]
-            } else if (params.seriesType == `lines`) {
-              return (
-                params.data.fromName +
-                `>` +
-                params.data.toName +
-                `<br />` +
-                params.data.value
-              )
-            } else {
-              return params.name
-            }
-          },
-        },
-        geo: {
-          map: `china`,
-          label: {
-            emphasis: {
-              show: true,
-              color: `#fff`,
-            },
-          },
-          roam: false,
-          //   放大我们的地图
-          zoom: 1,
-          itemStyle: {
-            normal: {
-              areaColor: `rgba(43, 196, 243, 0.42)`,
-              borderColor: `rgba(43, 196, 243, 1)`,
-              borderWidth: 1,
-            },
-            emphasis: {
-              areaColor: `#2B91B7`,
-            },
-          },
-        },
-        series: series,
-      }
-
-      myChart.setOption(option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.brand-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  .wrap {
-    background: url(../assets/img/brand/bg.jpg) no-repeat #000;
-    background-size: cover;
-    line-height: 1.15;
-    header {
-      position: relative;
-      height: 1rem;
-      background: url(../assets/img/brand/head_bg.png) no-repeat top center;
-      background-size: 100% 100%;
-      h2 {
-        color: #7ef0ff;
-        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, 0.7);
-        img {
-          width: 0.45rem;
-        }
-        span {
-          display: inline-block;
-        }
-        .tem {
-          margin: 0 0.1rem 0 0.2rem;
-        }
-      }
-      .showTime {
-        position: absolute;
-        right: 1.375rem;
-        top: 0.5rem;
-        color: rgba(126, 240, 255, 0.7);
-        display: flex;
-        .time {
-          font-size: 0.28rem;
-          margin-right: 0.18rem;
-        }
-        .date {
-          span {
-            display: block;
-            &:nth-child(1) {
-              font-size: 0.12rem;
-              text-align: right;
-            }
-            &:nth-child(2) {
-              font-size: 0.14rem;
-            }
-          }
-        }
-      }
-    }
-
-    .mainbox {
-      min-width: 1024px;
-      max-width: 1920px;
-      padding: 0.125rem 0.125rem 0;
-      display: flex;
-      .item {
-        flex: 3;
-        &.center {
-          flex: 5;
-          margin: 0 0.125rem 0.1rem;
-          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;
-                    }
-                  }
-                }
-              }
-              &: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;
-                }
-              }
-            }
-          }
-        }
-
-        %map-style {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 6.475rem;
-          height: 6.475rem;
-          background: url(../assets/img/brand/map.png) no-repeat;
-          background-size: 100% 100%;
-          opacity: 0.3;
-        }
-        .map {
-          position: relative;
-          height: 10.125rem;
-          .chart {
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 5;
-            height: 10.125rem;
-            width: 100%;
-          }
-          .map1 {
-            @extend %map-style;
-          }
-          .map2 {
-            @extend %map-style;
-            width: 8.0375rem;
-            height: 8.0375rem;
-            background-image: url(../assets/img/brand/lbx.png);
-            opacity: 0.6;
-            -webkit-animation: rotate 15s linear infinite;
-            animation: rotate 15s linear infinite;
-            z-index: 2;
-          }
-          .map3 {
-            @extend %map-style;
-            width: 7.075rem;
-            height: 7.075rem;
-            background-image: url(../assets/img/brand/jt.png);
-            -webkit-animation: rotate1 10s linear infinite;
-            animation: rotate1 10s linear infinite;
-          }
-        }
-        .panel {
-          position: relative;
-          height: 3.875rem;
-          border: 1px solid rgba(25, 186, 139, 0.17);
-          background: rgba(255, 255, 255, 0.04)
-            url(../assets/img/brand/line.png);
-          padding: 0 0.1875rem 0;
-          margin-bottom: 0.1875rem;
-          &:before {
-            position: absolute;
-            top: 0;
-            left: 0;
-            content: '';
-            width: 10px;
-            height: 10px;
-            border-top: 2px solid #02a6b5;
-            border-left: 2px solid #02a6b5;
-          }
-          &:after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            content: '';
-            width: 10px;
-            height: 10px;
-            border-top: 2px solid #02a6b5;
-            border-right: 2px solid #02a6b5;
-          }
-
-          .panel-footer {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            &:before {
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              content: '';
-              width: 10px;
-              height: 10px;
-              border-bottom: 2px solid #02a6b5;
-              border-left: 2px solid #02a6b5;
-            }
-            &:after {
-              position: absolute;
-              bottom: 0;
-              right: 0;
-              content: '';
-              width: 10px;
-              height: 10px;
-              border-bottom: 2px solid #02a6b5;
-              border-right: 2px solid #02a6b5;
-            }
-          }
-
-          h2 {
-            height: 0.6rem;
-            line-height: 0.6rem;
-            text-align: center;
-            color: #fff;
-            font-size: 0.225rem;
-            font-weight: 400;
-            a {
-              margin: 0 0.1875rem;
-              color: #fff;
-              text-decoration: none;
-            }
-          }
-          .chart {
-            height: 3rem;
-          }
-        }
-      }
-    }
-  }
-}
-
-@-webkit-keyframes rotate {
-  from {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  to {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-@keyframes rotate {
-  from {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  to {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-@-webkit-keyframes rotate1 {
-  from {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  to {
-    transform: translate(-50%, -50%) rotate(-360deg);
-  }
-}
-@keyframes rotate1 {
-  from {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  to {
-    transform: translate(-50%, -50%) rotate(-360deg);
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  html {
-    font-size: 42px !important;
-  }
-}
-@media screen and (min-width: 1920) {
-  html {
-    font-size: 80px !important;
-  }
-}
-</style>
+</template>

src/views/Home.vue

@@ -62,7 +62,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .home-container {
   position: absolute;
   left: 0;