|
|
|
|
@ -93,8 +93,14 @@ |
|
|
|
|
<div class="table_box"> |
|
|
|
|
<div class="table_line1"> |
|
|
|
|
<div class="table_item">站点名称</div> |
|
|
|
|
<div class="table_item">上行</div> |
|
|
|
|
<div class="table_item">下行</div> |
|
|
|
|
<div class="table_item"> |
|
|
|
|
<span>上行</span> |
|
|
|
|
<img src="~@/assets/img/up.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="table_item"> |
|
|
|
|
<span>下行</span> |
|
|
|
|
<img src="~@/assets/img/down.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="swiper-container swiper2"> |
|
|
|
|
<div class="swiper-wrapper"> |
|
|
|
|
@ -112,8 +118,58 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center_top"></div> |
|
|
|
|
<div class="center_bottom"></div> |
|
|
|
|
<div class="center_top"> |
|
|
|
|
<div class="cen_left"> |
|
|
|
|
<div class="data_box" v-for="item in totalData" :key="item.name"> |
|
|
|
|
<div class="data_txt" style="font-family: 'ALHY'">{{ item.name }}</div> |
|
|
|
|
<div class="data_txt data_text">{{ item.data }}</div> |
|
|
|
|
<div class="data_txt"> |
|
|
|
|
<span class="hb_txt">环比</span> |
|
|
|
|
<span class="hb_data">{{ item.huanbi }}</span> |
|
|
|
|
<img |
|
|
|
|
v-show="item.name == '收件量' && item.huanbi > 0" |
|
|
|
|
src="~@/assets/img/up1.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
v-show="item.name == '收件量' && item.huanbi < 0" |
|
|
|
|
src="~@/assets/img/down1.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
v-show="item.name == '发件量' && item.huanbi > 0" |
|
|
|
|
src="~@/assets/img/up2.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
v-show="item.name == '发件量' && item.huanbi < 0" |
|
|
|
|
src="~@/assets/img/down2.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
v-show="item.name !== '收件量' && item.name !== '发件量' && item.huanbi > 0" |
|
|
|
|
src="~@/assets/img/up3.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
v-show="item.name !== '收件量' && item.name !== '发件量' && item.huanbi < 0" |
|
|
|
|
src="~@/assets/img/down3.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cen_right"> |
|
|
|
|
<div class="btn_box" :class="active == 1 ? 'active' : ''" @click="changeData(1)">日</div> |
|
|
|
|
<div class="btn_box" :class="active == 2 ? 'active' : ''" @click="changeData(2)">月</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center_bottom"> |
|
|
|
|
<div class="charts_box"></div> |
|
|
|
|
<div class="charts_box"> |
|
|
|
|
<div id="trendChart" class="trend_box"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="map_wrap"> |
|
|
|
|
<a |
|
|
|
|
@click="backMap" |
|
|
|
|
@ -138,6 +194,8 @@ |
|
|
|
|
<span class="name">PROPORTION</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="pie_box" id="pieChart"></div> |
|
|
|
|
<!-- <div class="pie_bg"></div> --> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_cen"> |
|
|
|
|
<div class="top_title"> |
|
|
|
|
@ -162,6 +220,7 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import 'echarts-gl' |
|
|
|
|
import axios from "axios"; |
|
|
|
|
import * as XLSX from "xlsx/xlsx.mjs"; |
|
|
|
|
import Swiper from "swiper"; |
|
|
|
|
@ -282,6 +341,10 @@ export default { |
|
|
|
|
this.temp = res.result.now.temp; |
|
|
|
|
this.weather = res.result.now.text; |
|
|
|
|
}); |
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
this.createPieChart() |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
backMap() { |
|
|
|
|
@ -392,14 +455,342 @@ export default { |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
// this.createChart(); |
|
|
|
|
this.createChart(); |
|
|
|
|
// this.createCharts(); |
|
|
|
|
// this.createCharts1(); |
|
|
|
|
// this.run(); |
|
|
|
|
// this.run1(); |
|
|
|
|
this.run(); |
|
|
|
|
this.run1(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
createChart() { |
|
|
|
|
this.trendCharts = this.$echarts.init(document.getElementById("trendChart")); |
|
|
|
|
window.addEventListener("resize", () => { |
|
|
|
|
this.trendCharts.resize(); |
|
|
|
|
}); |
|
|
|
|
var option = { |
|
|
|
|
color: ["#115fff", "#1dd58e"], |
|
|
|
|
title: { |
|
|
|
|
text: "仓库收件量趋势", |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 15, |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
top: 12, |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ["到件量", "派件量"], |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
top: 12, |
|
|
|
|
right: 10, |
|
|
|
|
itemHeight: 8, |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "axis", |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: "3%", |
|
|
|
|
right: "4%", |
|
|
|
|
bottom: "3%", |
|
|
|
|
top: "18%", |
|
|
|
|
containLabel: true, |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: this.xData, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "rgba(255, 255, 255, .1)", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
axisTick: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "rgba(255, 255, 255, .7)", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: "value", |
|
|
|
|
axisLabel: { |
|
|
|
|
show: true, |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "rgba(255, 255, 255, .1)", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: "到件量", |
|
|
|
|
type: "line", |
|
|
|
|
smooth: true, |
|
|
|
|
data: this.yData1, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "派件量", |
|
|
|
|
type: "line", |
|
|
|
|
smooth: true, |
|
|
|
|
data: this.yData2, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
this.trendCharts.setOption(option); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
createPieChart() { |
|
|
|
|
this.pieChart = this.$echarts.init(document.getElementById("pieChart")); |
|
|
|
|
window.addEventListener("resize", () => { |
|
|
|
|
this.pieChart.resize(); |
|
|
|
|
}); |
|
|
|
|
var data = [ |
|
|
|
|
{ |
|
|
|
|
name: "不满意", |
|
|
|
|
value: 30, |
|
|
|
|
itemStyle: { color: "#00bfff" }, |
|
|
|
|
startRatio: 0, |
|
|
|
|
endRatio: 0.7, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "非常满意", |
|
|
|
|
value: 45, |
|
|
|
|
itemStyle: { color: "#48f5c0" }, |
|
|
|
|
startRatio: 0.7, |
|
|
|
|
endRatio: 1, |
|
|
|
|
}, |
|
|
|
|
{ name: "满意", value: 6, itemStyle: { color: "#00dced" }, startRatio: 0.7, endRatio: 1 }, |
|
|
|
|
]; |
|
|
|
|
var optionConfig = {}; |
|
|
|
|
|
|
|
|
|
const getPie3D = (pieData, internalDiameterRatio) => { |
|
|
|
|
//internalDiameterRatio:透明的空心占比 |
|
|
|
|
let series = []; |
|
|
|
|
let sumValue = 0; |
|
|
|
|
let startValue = 0; |
|
|
|
|
let endValue = 0; |
|
|
|
|
let k = 1; |
|
|
|
|
pieData.sort((a, b) => { |
|
|
|
|
return b.value - a.value; |
|
|
|
|
}); |
|
|
|
|
// 为每一个饼图数据，生成一个 series-surface 配置 |
|
|
|
|
for (let i = 0; i < pieData.length; i++) { |
|
|
|
|
sumValue += pieData[i].value; |
|
|
|
|
let seriesItem = { |
|
|
|
|
name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, |
|
|
|
|
type: "surface", |
|
|
|
|
parametric: true, |
|
|
|
|
wireframe: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
pieData: pieData[i], |
|
|
|
|
pieStatus: { |
|
|
|
|
selected: false, |
|
|
|
|
hovered: false, |
|
|
|
|
k: k, |
|
|
|
|
}, |
|
|
|
|
radius: "50%", |
|
|
|
|
center: ["10%", "10%"], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
if (typeof pieData[i].itemStyle != "undefined") { |
|
|
|
|
let itemStyle = {}; |
|
|
|
|
typeof pieData[i].itemStyle.color != "undefined" |
|
|
|
|
? (itemStyle.color = pieData[i].itemStyle.color) |
|
|
|
|
: null; |
|
|
|
|
typeof pieData[i].itemStyle.opacity != "undefined" |
|
|
|
|
? (itemStyle.opacity = pieData[i].itemStyle.opacity) |
|
|
|
|
: null; |
|
|
|
|
seriesItem.itemStyle = itemStyle; |
|
|
|
|
} |
|
|
|
|
series.push(seriesItem); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， |
|
|
|
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < series.length; i++) { |
|
|
|
|
endValue = startValue + series[i].pieData.value; |
|
|
|
|
series[i].pieData.startRatio = startValue / sumValue; |
|
|
|
|
series[i].pieData.endRatio = endValue / sumValue; |
|
|
|
|
series[i].parametricEquation = this.getParametricEquation( |
|
|
|
|
series[i].pieData.startRatio, |
|
|
|
|
series[i].pieData.endRatio, |
|
|
|
|
false, |
|
|
|
|
false, |
|
|
|
|
k, |
|
|
|
|
series[i].pieData.value |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
startValue = endValue; |
|
|
|
|
} |
|
|
|
|
// console.log(getParametricEquation) |
|
|
|
|
let boxHeight = this.getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px |
|
|
|
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。 |
|
|
|
|
let option = { |
|
|
|
|
// backgroundColor: "#203598", |
|
|
|
|
labelLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#404772", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: "outside", |
|
|
|
|
rich: { |
|
|
|
|
b: { |
|
|
|
|
fontSize: 24, |
|
|
|
|
lineHeight: 30, |
|
|
|
|
fontWeight: "bold", |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
c: { |
|
|
|
|
fontSize: 18, |
|
|
|
|
color: "#fff", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
formatter: "{b|{b}}\n{c|{c}%}", |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
backgroundColor: "#053A8D", |
|
|
|
|
formatter: (params) => { |
|
|
|
|
if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") { |
|
|
|
|
let bfb = ( |
|
|
|
|
(option.series[params.seriesIndex].pieData.endRatio - |
|
|
|
|
option.series[params.seriesIndex].pieData.startRatio) * |
|
|
|
|
100 |
|
|
|
|
).toFixed(2); |
|
|
|
|
return ( |
|
|
|
|
`${params.seriesName}<br/>` + |
|
|
|
|
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + |
|
|
|
|
`${bfb}%` |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
xAxis3D: { |
|
|
|
|
min: -1, |
|
|
|
|
max: 1, |
|
|
|
|
}, |
|
|
|
|
yAxis3D: { |
|
|
|
|
min: -1, |
|
|
|
|
max: 1, |
|
|
|
|
}, |
|
|
|
|
zAxis3D: { |
|
|
|
|
min: -1, |
|
|
|
|
max: 1, |
|
|
|
|
}, |
|
|
|
|
grid3D: { |
|
|
|
|
show: false, |
|
|
|
|
boxHeight: boxHeight, //圆环的高度 |
|
|
|
|
left: 0, |
|
|
|
|
top: 0, //3d饼图的位置 |
|
|
|
|
viewControl: { |
|
|
|
|
//3d效果可以放大、旋转等，请自己去查看官方配置 |
|
|
|
|
alpha: 20, //角度 |
|
|
|
|
distance: 250, //调整视角到主体的距离，类似调整zoom |
|
|
|
|
rotateSensitivity: 0, //设置为0无法旋转 |
|
|
|
|
zoomSensitivity: 0, //设置为0无法缩放 |
|
|
|
|
panSensitivity: 0, //设置为0无法平移 |
|
|
|
|
autoRotate: false, //自动旋转 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
series: series, |
|
|
|
|
}; |
|
|
|
|
return option; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var option = getPie3D(data, 0.8); |
|
|
|
|
console.log(option); |
|
|
|
|
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption |
|
|
|
|
this.pieChart.setOption(option); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//获取3d丙图的最高扇区的高度 |
|
|
|
|
getHeight3D(series, height){ |
|
|
|
|
series.sort((a, b) => { |
|
|
|
|
return b.pieData.value - a.pieData.value; |
|
|
|
|
}); |
|
|
|
|
return (height * 25) / series[0].pieData.value; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { |
|
|
|
|
// 计算 |
|
|
|
|
let midRatio = (startRatio + endRatio) / 2; |
|
|
|
|
let startRadian = startRatio * Math.PI * 2; |
|
|
|
|
let endRadian = endRatio * Math.PI * 2; |
|
|
|
|
let midRadian = midRatio * Math.PI * 2; |
|
|
|
|
// 如果只有一个扇形，则不实现选中效果。 |
|
|
|
|
if (startRatio === 0 && endRatio === 1) { |
|
|
|
|
isSelected = true; |
|
|
|
|
} |
|
|
|
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） |
|
|
|
|
k = typeof k !== "undefined" ? k : 1 / 3; |
|
|
|
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） |
|
|
|
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; |
|
|
|
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; |
|
|
|
|
// 计算高亮效果的放大比例（未高亮，则比例为 1） |
|
|
|
|
let hoverRate = isHovered ? 1.05 : 1; |
|
|
|
|
// 返回曲面参数方程 |
|
|
|
|
return { |
|
|
|
|
u: { |
|
|
|
|
min: -Math.PI, |
|
|
|
|
max: Math.PI * 3, |
|
|
|
|
step: Math.PI / 32, |
|
|
|
|
}, |
|
|
|
|
v: { |
|
|
|
|
min: 0, |
|
|
|
|
max: Math.PI * 2, |
|
|
|
|
step: Math.PI / 20, |
|
|
|
|
}, |
|
|
|
|
x: (u, v) => { |
|
|
|
|
if (u < startRadian) { |
|
|
|
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
|
|
|
} |
|
|
|
|
if (u > endRadian) { |
|
|
|
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
|
|
|
} |
|
|
|
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; |
|
|
|
|
}, |
|
|
|
|
y: (u, v)=> { |
|
|
|
|
if (u < startRadian) { |
|
|
|
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
|
|
|
} |
|
|
|
|
if (u > endRadian) { |
|
|
|
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
|
|
|
} |
|
|
|
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; |
|
|
|
|
}, |
|
|
|
|
z: (u, v)=> { |
|
|
|
|
if (u < -Math.PI * 0.5) { |
|
|
|
|
return Math.sin(u); |
|
|
|
|
} |
|
|
|
|
if (u > Math.PI * 2.5) { |
|
|
|
|
return Math.sin(u) * h * 0.1; |
|
|
|
|
} |
|
|
|
|
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
// 按照日月更换数据 |
|
|
|
|
changeData(val) { |
|
|
|
|
this.active = val; |
|
|
|
|
if (val == 1) { |
|
|
|
|
this.totalData = this.dayData; |
|
|
|
|
} else if (val == 2) { |
|
|
|
|
this.totalData = this.monthData; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
run() { |
|
|
|
|
this.mySwiper = new Swiper(".swiper1", { |
|
|
|
|
loop: true, // 循环模式选项 |
|
|
|
|
@ -410,6 +801,17 @@ export default { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
run1() { |
|
|
|
|
this.mySwiper = new Swiper(".swiper2", { |
|
|
|
|
loop: true, // 循环模式选项 |
|
|
|
|
// autoplay: true, //可选选项，自动滑动 |
|
|
|
|
autoplay: { |
|
|
|
|
delay: 10000, //10秒切换一次 |
|
|
|
|
disableOnInteraction: false, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
changeBtn(val) { |
|
|
|
|
this.isActive = val; |
|
|
|
|
this.slideList = [{ arr: [] }, { arr: [] }]; |
|
|
|
|
@ -907,6 +1309,11 @@ export default { |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.16rem; |
|
|
|
|
color: #ffffff; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 0.18rem; |
|
|
|
|
height: 0.16rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -934,22 +1341,165 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center_top { |
|
|
|
|
width: 44%; |
|
|
|
|
width: 46%; |
|
|
|
|
height: 12%; |
|
|
|
|
background: red; |
|
|
|
|
background: url(~@/assets/img/data_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 28%; |
|
|
|
|
top: 15%; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.cen_left { |
|
|
|
|
width: 86%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.data_box { |
|
|
|
|
width: 20%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
.data_text { |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#fceece, |
|
|
|
|
#e39054 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.data_txt { |
|
|
|
|
.hb_data { |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#fceece, |
|
|
|
|
#e39054 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
|
.data_text { |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#cefce7, |
|
|
|
|
#16da85 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.data_txt { |
|
|
|
|
.hb_data { |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#cefce7, |
|
|
|
|
#16da85 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.data_txt { |
|
|
|
|
font-size: 0.16rem; |
|
|
|
|
color: #fff; |
|
|
|
|
color: #ffffff; |
|
|
|
|
.hb_txt { |
|
|
|
|
font-size: 0.14rem; |
|
|
|
|
color: #ffffff; |
|
|
|
|
opacity: 0.7; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.hb_data { |
|
|
|
|
margin-left: 0.1rem; |
|
|
|
|
font-size: 0.14rem; |
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#76e4ff, |
|
|
|
|
#1c77f2 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.data_text { |
|
|
|
|
font-family: "ALHY"; |
|
|
|
|
font-size: 0.26rem; |
|
|
|
|
line-height: 0.5rem; |
|
|
|
|
|
|
|
|
|
background-image: linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
#76e4ff, |
|
|
|
|
#1c77f2 |
|
|
|
|
); /* 线性渐变背景，方向向上 */ |
|
|
|
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
|
|
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cen_right { |
|
|
|
|
width: 8%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.btn_box { |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
color: #fff; |
|
|
|
|
width: 0.46rem; |
|
|
|
|
height: 0.35rem; |
|
|
|
|
background: url(~@/assets/img/bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
margin-bottom: 0.03rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-family: "FZSK"; |
|
|
|
|
font-size: 0.22erm; |
|
|
|
|
color: #ffffff; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-left: 0.13rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.active { |
|
|
|
|
background: url(~@/assets/img/active_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center_bottom { |
|
|
|
|
width: 44%; |
|
|
|
|
height: 25%; |
|
|
|
|
background: red; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 28%; |
|
|
|
|
bottom: 6%; |
|
|
|
|
bottom: 2%; |
|
|
|
|
z-index: 11; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.charts_box { |
|
|
|
|
width: 50%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.trend_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right_box { |
|
|
|
|
width: 24%; |
|
|
|
|
@ -1022,6 +1572,15 @@ export default { |
|
|
|
|
.right_top { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 34%; |
|
|
|
|
|
|
|
|
|
.pie_box { |
|
|
|
|
height: 83%; |
|
|
|
|
width: 50%; |
|
|
|
|
background: url(~@/assets/img/pie_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-position: 0% 10%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_cen { |
|
|
|
|
@ -1037,7 +1596,7 @@ export default { |
|
|
|
|
.map_wrap { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 5.2rem; |
|
|
|
|
top: 2.6rem; |
|
|
|
|
top: 28%; |
|
|
|
|
width: 8.82rem; |
|
|
|
|
height: 4.2rem; |
|
|
|
|
} |
|
|
|
|
|
jinna
3 years ago
