|
|
@@ -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>
|
Cooklalala