You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
984 lines
26 KiB
984 lines
26 KiB
<template>
|
|
<div class="brand-container">
|
|
<div class="wrap">
|
|
<header>
|
|
<div class="showTime">
|
|
<span class="time">{{ nowTime }}</span>
|
|
<span class="date">
|
|
<span>{{ date }}</span>
|
|
<span>{{ week }}</span>
|
|
</span>
|
|
</div>
|
|
<h2>智慧云停车大数据平台</h2>
|
|
<div class="welcome">欢迎使用本系统</div>
|
|
</header>
|
|
|
|
<section class="mainbox">
|
|
<div class="item left">
|
|
<!-- <div class="panel">
|
|
<h2>业务范围</h2>
|
|
<business />
|
|
<div class="panel-footer"></div>
|
|
</div> -->
|
|
<div class="left-top">
|
|
<div class="topBg">今日收费TOP5</div>
|
|
<table class="table">
|
|
<thead class="thead">
|
|
<td class="td">排行</td>
|
|
<td class="td">停车场名称</td>
|
|
<td class="td">收费金额</td>
|
|
</thead>
|
|
<tbody class="tbody">
|
|
<tr class="tr">
|
|
<td class="td"><img src="/img/img3.png" alt="" /></td>
|
|
<td class="td">深圳宝安中心大厦</td>
|
|
<td class="td">6890.38元</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td"><img src="/img/img4.png" alt="" /></td>
|
|
<td class="td">深圳宝安中心大厦</td>
|
|
<td class="td">6890.38元</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td"><img src="/img/img4.png" alt="" /></td>
|
|
<td class="td">深圳宝安中心大厦</td>
|
|
<td class="td">6890.38元</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td"><img src="/img/img4.png" alt="" /></td>
|
|
<td class="td">深圳宝安中心大厦</td>
|
|
<td class="td">6890.38元</td>
|
|
</tr>
|
|
<tr class="tr">
|
|
<td class="td"><img src="/img/img4.png" alt="" /></td>
|
|
<td class="td">深圳宝安中心大厦</td>
|
|
<td class="td">6890.38元</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="left-top">
|
|
<div class="topBg">支付统计</div>
|
|
<talent />
|
|
<div class="panel-footer"></div>
|
|
</div>
|
|
|
|
<div class="left-top">
|
|
<div class="topBg">收费车辆统计</div>
|
|
<business />
|
|
<div class="panel-footer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item center">
|
|
<div class="resume">
|
|
<div class="resume-hd">
|
|
<span>今日交易笔数</span>
|
|
<span>今日交易金额</span>
|
|
</div>
|
|
<div class="resume-bd">
|
|
<countTo :startVal="startNumber" :endVal="endNumber" :duration="1500" separator=""></countTo>
|
|
<countTo :startVal="startAmount" :endVal="endAmount" :duration="1500" separator=""></countTo>
|
|
</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 class="parkInfo">
|
|
<seamless :listData="realTimeInOutRecord" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item right">
|
|
<div class="left-top">
|
|
<div class="topBg2">24小时车流统计</div>
|
|
<scrollArc />
|
|
<div class="panel-footer"></div>
|
|
</div>
|
|
|
|
<div class="left-top">
|
|
<div class="topBg">车辆使用统计</div>
|
|
<div class="carFlex">
|
|
<div class="let">
|
|
<div class="item">
|
|
<p class="p1">总车位</p>
|
|
<p class="p2">6666</p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="p1">周转率</p>
|
|
<p class="p2">66%</p>
|
|
</div>
|
|
</div>
|
|
<ringPie />
|
|
<div class="rig">
|
|
<div class="item">
|
|
<p class="p1">已使用车位</p>
|
|
<p class="p2">6666</p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="p1">剩余车位</p>
|
|
<p class="p2">6666</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-footer"></div>
|
|
</div>
|
|
|
|
<div class="left-top">
|
|
<div class="topBg">24小时车位使用统计</div>
|
|
<szBar />
|
|
<div class="panel-footer"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { BiApi } from "@/api/form";
|
|
import "@/assets/js/flexible";
|
|
import "@/assets/js/china";
|
|
import countTo from "vue-count-to";
|
|
// console.log(window.location.href);
|
|
const authCode = "712110694685872129";
|
|
|
|
export default {
|
|
name: "Brand",
|
|
components: {
|
|
countTo,
|
|
},
|
|
data() {
|
|
return {
|
|
nowTime: "",
|
|
week: "",
|
|
date: "",
|
|
timer: null,
|
|
startNumber: 0,
|
|
startAmount: 0,
|
|
endNumber: 0,
|
|
endAmount: 0,
|
|
realTimeInOutRecord: [],//实时进出信息
|
|
heartTimes: 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() {
|
|
// BiApi.getParkingRanking({ authCode }).then((res) => {
|
|
// console.log(res);
|
|
// })
|
|
},
|
|
mounted() {
|
|
this.heart();
|
|
this.getEchart();
|
|
},
|
|
methods: {
|
|
/**
|
|
* 格式化时钟函数
|
|
*/
|
|
formatNowTimes() {
|
|
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");
|
|
},
|
|
/**
|
|
* 心跳回调函数,获取数据的函数可以放这里
|
|
*/
|
|
heartCallBack() {
|
|
this.heartTimes += 1;
|
|
this.formatNowTimes(); //放外面就每一秒执行一次
|
|
if (this.heartTimes === 1 || this.heartTimes % 10 === 0) { // 首次加载和每10秒执行一次
|
|
this.getTodayTrade();
|
|
this.getRealTimeInOutRecord();
|
|
}
|
|
},
|
|
/**
|
|
* 心跳函数,每秒执行一次
|
|
*/
|
|
heart() {
|
|
this.clear();
|
|
this.heartCallBack() // 首次加载
|
|
this.timer = setInterval(this.heartCallBack, 1000);
|
|
},
|
|
clear() {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
this.heartTimes = 0;
|
|
},
|
|
/**
|
|
* 今日交易金额-笔数数据
|
|
* */
|
|
getTodayTrade() {
|
|
BiApi.getTodayTrade({ authCode }).then((res) => {
|
|
// console.log(res);
|
|
if (res.code === 200) {
|
|
const { totalAmount, totalNum } = res.data
|
|
this.startNumber = this.endNumber;
|
|
this.startAmount = this.endAmount;
|
|
this.endNumber = +totalNum;
|
|
this.endAmount = +totalAmount;
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
/**
|
|
* 实时进出信息
|
|
* */
|
|
getRealTimeInOutRecord() {
|
|
const query = {
|
|
authCode,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
BiApi.getRealTimeInOutRecord(query).then((res) => {
|
|
if (res.code === 200) {
|
|
this.realTimeInOutRecord = res.rows
|
|
}
|
|
});
|
|
},
|
|
|
|
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() {
|
|
// 初始化地图数据
|
|
// eslint-disable-next-line no-undef
|
|
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",
|
|
// eslint-disable-next-line no-unused-vars
|
|
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);
|
|
|
|
var dataList = echarts.getMap("china").geoJson.features;
|
|
// console.log("dataList:", dataList);
|
|
// 鼠标事件
|
|
myChart.on("click", function (res) {
|
|
console.log("click city:", res.name);
|
|
dataList.forEach((element) => {
|
|
if (element.properties.name == res.name) {
|
|
console.log("city code:", element.id);
|
|
}
|
|
});
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
clickGoNext() { },
|
|
},
|
|
beforeDestroy() {
|
|
this.clear();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.carFlex {
|
|
display: flex;
|
|
color: #fff;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
text-align: center;
|
|
height: 1.3rem;
|
|
background: url(/img/img12.png) no-repeat;
|
|
background-size: contain;
|
|
margin-top: 0.3rem;
|
|
|
|
.p1 {
|
|
font-size: 0.2rem;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.p2 {
|
|
font-size: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topBg {
|
|
height: 0.7rem;
|
|
background: url(/img/img1.png) no-repeat;
|
|
background-size: contain;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 0.5rem;
|
|
color: #aeceff;
|
|
font-size: 0.21rem;
|
|
}
|
|
|
|
.topBg2 {
|
|
height: 0.7rem;
|
|
background: url(/img/img11.png) no-repeat;
|
|
background-size: contain;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 0.5rem;
|
|
color: #aeceff;
|
|
font-size: 0.21rem;
|
|
}
|
|
|
|
.left-top {
|
|
height: 3.5rem;
|
|
position: relative;
|
|
background: url(/img/img2.png) no-repeat;
|
|
background-size: cover;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.tbody .tr:nth-child(odd) {
|
|
background: #06184b;
|
|
}
|
|
|
|
//奇数行
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
border-color: transparent;
|
|
|
|
.thead {
|
|
background: #061131;
|
|
width: 100%;
|
|
height: 0.575rem;
|
|
line-height: 0.575rem;
|
|
font-size: 0.2rem;
|
|
|
|
.td {
|
|
color: #6fa8ff;
|
|
text-align: center;
|
|
border: none;
|
|
font-size: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.tbody {
|
|
.td {
|
|
color: #fff;
|
|
text-align: center;
|
|
border: none;
|
|
font-size: 0.14rem;
|
|
|
|
img {
|
|
width: 0.4rem;
|
|
display: block;
|
|
margin: 0 auto;
|
|
height: 0.4rem;
|
|
}
|
|
}
|
|
|
|
.tr {
|
|
height: 0.5rem;
|
|
line-height: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.brand-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
|
|
.wrap {
|
|
background: url(../assets/img/brand/bg.png) no-repeat #000;
|
|
background-size: cover;
|
|
|
|
header {
|
|
position: relative;
|
|
height: 1.35rem;
|
|
background: url(../assets/img/brand/head_bg.png) no-repeat top center;
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
height: 1.175rem;
|
|
color: #fff;
|
|
font-size: 0.475rem;
|
|
text-align: center;
|
|
line-height: 1.175rem;
|
|
letter-spacing: 0.05rem;
|
|
padding-top: 0.175rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.showTime {
|
|
position: absolute;
|
|
left: 0.625rem;
|
|
top: 0.45rem;
|
|
color: #fff;
|
|
display: flex;
|
|
|
|
.time {
|
|
top: 0.45rem;
|
|
font-size: 0.4rem;
|
|
margin-right: 0.18rem;
|
|
}
|
|
|
|
.date {
|
|
top: 0.45rem;
|
|
|
|
span {
|
|
line-height: 0.45rem;
|
|
font-size: 0.2rem;
|
|
padding-right: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.welcome {
|
|
position: absolute;
|
|
right: 0.625rem;
|
|
top: 0.45rem;
|
|
height: 0.35rem;
|
|
color: #fff;
|
|
font-size: 0.25rem;
|
|
text-align: center;
|
|
line-height: 0.35rem;
|
|
}
|
|
}
|
|
|
|
.mainbox {
|
|
min-width: 1024px;
|
|
max-width: 1920px;
|
|
padding: 0.125rem 0.125rem 0;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 3;
|
|
|
|
&.center {
|
|
flex: 5;
|
|
overflow: hidden;
|
|
|
|
.resume {
|
|
.resume-hd {
|
|
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: 0.3rem;
|
|
}
|
|
}
|
|
|
|
.resume-bd {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
span {
|
|
margin-top: 0.25rem;
|
|
box-shadow: 0rem 0.02rem 0.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: 0.02rem 0.02rem 0.04rem #000;
|
|
background: linear-gradient(180deg,
|
|
rgba(101, 172, 255, 0) 0%,
|
|
rgba(29, 104, 190, 0.78) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
%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: 8rem;
|
|
|
|
.chart {
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
left: 0;
|
|
z-index: 5;
|
|
height: 8rem;
|
|
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>
|
|
|