开发代码生成功能
This commit is contained in:
izory
@@ -1,218 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div id="big-data-container" class="big-data-container">
|
||||
<div class="head">
|
||||
<h1>大屏数据统计分析显示</h1>
|
||||
</div>
|
||||
<div class="data-container">
|
||||
<div class="data-left">
|
||||
<div class="data-left-item">
|
||||
<div class="title">商品销量分类</div>
|
||||
<div id="chart-left-1" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<div class="title">本月商品销量</div>
|
||||
<div id="chart-left-3" style="height: calc(100% - 30px);"></div>
|
||||
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<div class="title">7日订单销量</div>
|
||||
<div id="chart-left-2" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-center">
|
||||
<!-- <div class="title">中间位置</div> -->
|
||||
<div class="center-top-num">
|
||||
<div class="item">
|
||||
<div class="text">累计销量</div>
|
||||
<div class="num">220,000</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">累计销售金额</div>
|
||||
<div class="num">58,000,000</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">购买用户人数</div>
|
||||
<div class="num">15,000</div>
|
||||
</div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="center-top">
|
||||
<div class="title">用户活跃信息-1</div>
|
||||
<iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="title">订单销售统计</div>
|
||||
<div id="chart-center" class="chart-center"></div>
|
||||
</div>
|
||||
<div class="data-right">
|
||||
<div class="data-right-item">
|
||||
<div class="title">销售情况走势</div>
|
||||
<div id="chart-right-1" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item">
|
||||
<div class="title">用户活跃信息</div>
|
||||
<iview-circle></iview-circle>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item right-3">
|
||||
<div class="title">商品销售排行</div>
|
||||
<div id="chart-right-3" class="right-item">
|
||||
<div class="item">
|
||||
<div class="top">排名</div>
|
||||
<div class="pro-name">商品名称</div>
|
||||
<div class="num">销量</div>
|
||||
<div class="num">销售金额</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-1">
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="pro-name">卡帝乐鳄鱼</div>
|
||||
<div class="num">2,200</div>
|
||||
<div class="num">360,00</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-2">
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div class="pro-name">春夏男T恤</div>
|
||||
<div class="num">1,700</div>
|
||||
<div class="num">24,500</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-3">
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div class="pro-name">男女同款休闲鞋</div>
|
||||
<div class="num">1,120</div>
|
||||
<div class="num">12,700</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require("echarts");
|
||||
import {
|
||||
chartLeft1,
|
||||
chartLeft2,
|
||||
chartLeft3,
|
||||
chartRight1
|
||||
} from "./bigdata/chart-options";
|
||||
import IviewCircle from "./bigdata/IviewCircle";
|
||||
import "./bigdata/layout.less";
|
||||
export default {
|
||||
components: {
|
||||
"iview-circle": IviewCircle
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
var $chartLeft1 = echarts.init(document.getElementById("chart-left-1"));
|
||||
$chartLeft1.setOption(chartLeft1);
|
||||
|
||||
var $chartLeft2 = echarts.init(document.getElementById("chart-left-2"));
|
||||
$chartLeft2.setOption(chartLeft2);
|
||||
|
||||
var $chartLeft3 = echarts.init(document.getElementById("chart-left-3"));
|
||||
$chartLeft3.setOption(chartLeft3);
|
||||
|
||||
var $chartCenter = echarts.init(document.getElementById("chart-center"));
|
||||
$chartCenter.setOption(chartRight1);
|
||||
|
||||
var $chartRight1 = echarts.init(document.getElementById("chart-right-1"));
|
||||
$chartRight1.setOption(chartRight1);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* .chart-center {
|
||||
display: flex;
|
||||
border: 1px solid #0000ff;
|
||||
height: 200px;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chart-center .item {
|
||||
text-align: center;
|
||||
border: 1px solid #00c1b3;
|
||||
flex: 1;
|
||||
} */
|
||||
.right-3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* margin-top: 20px; */
|
||||
}
|
||||
|
||||
.right-3 .right-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.right-3 .item {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #549069;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
margin: 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.right-3 .item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.right-3 .item > div {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.right-3 .top {
|
||||
width: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-3 .top span {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
line-height: 20px;
|
||||
top: 5px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.right-3 .top-1 span {
|
||||
background: #e80d0d;
|
||||
}
|
||||
|
||||
.right-3 .top-2 span {
|
||||
background: #00c935;
|
||||
}
|
||||
|
||||
.right-3 .top-3 span {
|
||||
background: #0083f4;
|
||||
}
|
||||
|
||||
.right-3 .num {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.right-3 .pro-name {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="demo-Circle">
|
||||
<div style>
|
||||
<i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
|
||||
<div class="demo-Circle-custom">
|
||||
<h1>1500</h1>
|
||||
<p>昨日活跃用户数量</p>
|
||||
<span>
|
||||
占比
|
||||
<i>{{1500/20000}}%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</div>
|
||||
<div style>
|
||||
<i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
|
||||
<div class="demo-Circle-custom">
|
||||
<h1>12000</h1>
|
||||
<p>上月活跃用户数量</p>
|
||||
<span>
|
||||
占比
|
||||
<i>{{12000/150000}}%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-Circle {
|
||||
display: flex;
|
||||
}
|
||||
.demo-Circle > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.demo-Circle > div:first-child {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.demo-Circle > div:last-child {
|
||||
padding-right: 10%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.demo-Circle-custom {
|
||||
& h1 {
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& p {
|
||||
color: #ece8e8;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
& span {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: wheat;
|
||||
font-size: 14px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #e0e3e6;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
& span i {
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,471 +0,0 @@
|
||||
var echarts = require("echarts");
|
||||
let chartLeft1 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "10px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"商超门店",
|
||||
"教育培训",
|
||||
"房地产",
|
||||
"生活服务",
|
||||
"汽车销售",
|
||||
"旅游酒店",
|
||||
"五金建材"
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: [200, 600, 300, 900, 1500, 1200, 600],
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
let chartLeft2 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "10px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"07.01",
|
||||
"07.02",
|
||||
"07.03",
|
||||
"07.04",
|
||||
"07.05",
|
||||
"07.06",
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// rotate:50,
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
], series: [
|
||||
{
|
||||
type: "bar",
|
||||
name: "销量",
|
||||
data: [1200, 800, 300, 500, 560, 220],
|
||||
barWidth: "25%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: "bar",
|
||||
name: "订单",
|
||||
data: [1000, 750, 380, 450, 450, 120],
|
||||
barWidth: "25%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#46d000",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartLeft3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "-5px",
|
||||
right: "3%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
data: ['周一', '周二', '周三', '周四', '周五']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
barWidth: "55%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
},
|
||||
data: [120, 302, 400, 200, 700]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartRight1 = {
|
||||
title: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
|
||||
legend: {
|
||||
top: "0%",
|
||||
icon: "roundRect",
|
||||
data: ["销售订单", "退货订单", "折扣订单"],
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {}
|
||||
},
|
||||
grid: {
|
||||
left: "10",
|
||||
top: "20",
|
||||
right: "10",
|
||||
bottom: "10",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.2)"
|
||||
}
|
||||
},
|
||||
data: [
|
||||
"2020.06.15",
|
||||
"2020.06.16",
|
||||
"2020.06.17",
|
||||
"2020.06.18",
|
||||
"2020.06.19",
|
||||
"2020.06.20",
|
||||
"2020.06.21",
|
||||
"2020.06.22"
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisTick: { show: false },
|
||||
minInterval: 60,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "销售订单",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: "#45d4ba",
|
||||
width: 1
|
||||
}, //线条的样式
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#83cddc"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#bfdffbb5"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [5, 22, 150, 54, 1, 230, 4, 1]
|
||||
},
|
||||
{
|
||||
name: "退货订单",
|
||||
type: "line",
|
||||
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: "#04a710",
|
||||
width: 1
|
||||
}, //
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0cbf22"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#b8f7d1b5"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [10, 150, 1, 250, 20, 100, 10, 150]
|
||||
},
|
||||
{
|
||||
name: "折扣订单",
|
||||
type: "line",
|
||||
|
||||
lineStyle: {
|
||||
color: "#0864c3",
|
||||
width: 1
|
||||
}, //线条的样式
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#29d7ff"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#34ccef85"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [100, 2, 260, 1, 200, 30, 101, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
@@ -1,197 +0,0 @@
|
||||
|
||||
.big-data-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #1400a8;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
.head {
|
||||
height: 75px;
|
||||
/* height: 1.05rem; */
|
||||
background: url(./head_bg.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* font-size: .4rem; */
|
||||
/* line-height: .8rem; */
|
||||
line-height: 71px;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
/* margin: 5px 15px;
|
||||
height:100%; */
|
||||
|
||||
margin: 0px 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 76px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.data-container > div {
|
||||
float: left;
|
||||
/* border: 1px solid white; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-center {
|
||||
padding: 0 0.9rem;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// .center-top{
|
||||
// height: 210px;
|
||||
// background: red;
|
||||
// }
|
||||
.chart-center{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.chart-center{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// background: white;
|
||||
}
|
||||
.data-left,
|
||||
.data-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data-left-item,
|
||||
.data-right-item,.center-top,.center-top-num,.chart-center {
|
||||
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||
padding: 0 0.2rem 0.4rem 0.15rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
margin-bottom: 0.15rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.data-foot-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.data-foot-line:before,
|
||||
.data-foot-line:after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height:10px;
|
||||
content: "";
|
||||
border-bottom: 2px solid #02a6b5;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.boxall:before,
|
||||
.data-foot-line:before {
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.boxall:after,
|
||||
.data-foot-line:after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.boxall:before,
|
||||
.boxall:after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left-item:before,
|
||||
.data-right-item:before,
|
||||
.center-top-num:before,
|
||||
.center-top:before{
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height:10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left-item:after,
|
||||
.data-right-item:after,
|
||||
.center-top-num:after,
|
||||
.center-top:after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left,
|
||||
.data-right {
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
.data-left > .data-left-item,
|
||||
.data-right > .data-right-item {
|
||||
flex: 1;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.data-center .title,
|
||||
.data-left > .data-left-item .title,
|
||||
.data-right > .data-right-item .title {
|
||||
/* font-size: .2rem; */
|
||||
font-size: 1rem;
|
||||
padding: 7px 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* line-height: .5rem; */
|
||||
}
|
||||
|
||||
.data-center .chart-center{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-top-num{
|
||||
height: 80px;
|
||||
padding-top: 7px;
|
||||
margin-bottom: 0.8rem;
|
||||
display: flex;
|
||||
.item{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.text{
|
||||
color: #fcf0d8;
|
||||
font-size: 14px;
|
||||
}
|
||||
.num{
|
||||
font-size: 34px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
font-weight: bold;
|
||||
color: #67caca;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user