917 lines
24 KiB
Vue
917 lines
24 KiB
Vue
<template>
|
||
<div>
|
||
<center1>
|
||
<div class="data">
|
||
<div class="top_tab">
|
||
<bigScreenTabs
|
||
slot="datePicker"
|
||
v-model="index"
|
||
:titleArr="['全年', '本月']"
|
||
></bigScreenTabs>
|
||
</div>
|
||
<div class="data-item">
|
||
<div>
|
||
<img src="./icon1.png" alt="" /><span style="font-weight: bold"
|
||
>收入</span
|
||
>
|
||
</div>
|
||
<div class="box">
|
||
<i>{{ handleMillion(resData.realIncome) }}/</i
|
||
><i class="num">{{ handleMillion(resData.targetIncome) }}</i
|
||
><span class="num2">亿元</span>
|
||
</div>
|
||
<!-- <div style="width: 100%">
|
||
<progressBar
|
||
:percentage="(resData.realIncome / resData.targetIncome) * 100"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
<div class="data-item">
|
||
<div>
|
||
<img src="./icon2.png" alt="" /><span style="font-weight: bold"
|
||
>利润</span
|
||
>
|
||
</div>
|
||
<div class="box">
|
||
<i>{{ handleMillion(resData.realProfit) }}/</i
|
||
><i class="num">{{ handleMillion(resData.targetProfit) }}</i
|
||
><span class="num2">亿元</span>
|
||
</div>
|
||
<!-- <div style="width: 100%">
|
||
<progressBar
|
||
:percentage="(resData.realProfit / resData.targetProfit) * 100"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
<div class="data-item">
|
||
<div>
|
||
<img src="./icon3.png" alt="" /><span style="font-weight: bold"
|
||
>EVA</span
|
||
>
|
||
</div>
|
||
<div class="box">
|
||
<i>{{ handleMillion(resData.realEva) }}/</i
|
||
><i class="num">{{ handleMillion(resData.targetEva) }}</i
|
||
><span class="num2">亿元</span>
|
||
</div>
|
||
<!-- <div style="width: 100%">
|
||
<progressBar
|
||
:percentage="(resData.realEva / resData.targetEva) * 100"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
<div class="data-item" style="width: 37%">
|
||
<div>
|
||
<img src="./icon4.png" alt="" /><span style="font-weight: bold"
|
||
>两金<span style="font-size: 14px"
|
||
>（ 产成品 / 应收账款 ）</span
|
||
></span
|
||
>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div>
|
||
<div class="box" style="margin-bottom: 0; position: relative">
|
||
<i>{{ handleMillion(resData.realCollection) }}/</i
|
||
><i class="num">{{ handleMillion(resData.targetCollection) }}</i
|
||
><span class="num2">亿元</span>
|
||
<!-- <div
|
||
style="
|
||
font-size: 12px;
|
||
color: #fff;
|
||
position: absolute;
|
||
bottom: -20px;
|
||
"
|
||
>
|
||
产成品
|
||
</div> -->
|
||
</div>
|
||
|
||
<!-- <div style="display: flex">
|
||
<progressBar
|
||
:percentage="
|
||
(resData.realCollection / resData.targetCollection) * 100
|
||
"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
<div style="margin-left: 10px">
|
||
<div class="box" style="margin-bottom: 0; position: relative">
|
||
<i>{{ handleMillion(resData.realFinishProduct) }}/</i
|
||
><i class="num">{{
|
||
handleMillion(resData.targetFinishProduct)
|
||
}}</i
|
||
><span class="num2">亿元</span>
|
||
<!-- <div
|
||
style="
|
||
font-size: 12px;
|
||
color: #fff;
|
||
position: absolute;
|
||
bottom: -20px;
|
||
"
|
||
>
|
||
应收账款
|
||
</div> -->
|
||
</div>
|
||
<!-- <div style="display: flex">
|
||
<progressBar
|
||
:percentage="
|
||
(resData.realFinishProduct / resData.targetFinishProduct) *
|
||
100
|
||
"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center_box">
|
||
<rocketTit>经营指标完成率</rocketTit>
|
||
<el-date-picker
|
||
v-model="month"
|
||
value-format="yyyy-MM"
|
||
v-if="index2 == 0"
|
||
type="month"
|
||
size="mini"
|
||
placeholder="选择月"
|
||
>
|
||
</el-date-picker>
|
||
<bigScreenTabs
|
||
slot="datePicker"
|
||
v-model="index2"
|
||
:titleArr="['全年', '本月']"
|
||
></bigScreenTabs>
|
||
<div
|
||
style="height: 182px; width: 100%"
|
||
ref="chart"
|
||
v-if="index2 == 0"
|
||
></div>
|
||
<div style="height: 182px; width: 100%" ref="chart4" v-else></div>
|
||
</div>
|
||
<div class="center_box">
|
||
<rocketTit>成本分析</rocketTit>
|
||
<el-row style="height: 182px; width: 100%" :gutter="12">
|
||
<el-col style="height: 100%" :span="18">
|
||
<div style="height: 100%" ref="chart2"></div>
|
||
</el-col>
|
||
<el-col :span="6" style="height: 100%">
|
||
<div style="height: 100%" ref="chart3"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</center1>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import center1 from "./components/center1/index.vue";
|
||
import rocketTit from "../components/rocketTit/index.vue";
|
||
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
|
||
import progressBar from "./../components/progress/index.vue";
|
||
import colorList from "@/utils/colorPalette";
|
||
import {
|
||
blueColorList,
|
||
greenColorList,
|
||
yelloColorList,
|
||
} from "@/utils/gradualColor";
|
||
|
||
import echarts from "echarts";
|
||
require("echarts/theme/macarons"); // echarts theme
|
||
import resize from "../../dashboard/mixins/resize";
|
||
export default {
|
||
mixins: [resize],
|
||
name: "left1",
|
||
components: {
|
||
center1,
|
||
rocketTit,
|
||
progressBar,
|
||
bigScreenTabs,
|
||
},
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
index2: 0,
|
||
month: "",
|
||
chart: null,
|
||
chart2: null,
|
||
chart3: null,
|
||
chart4: null,
|
||
resData: {
|
||
realCollection: 0,
|
||
realEva: 0,
|
||
realFinishProduct: 0,
|
||
realIncome: 0,
|
||
realProfit: 0,
|
||
targetCollection: 0,
|
||
targetEva: 0,
|
||
targetFinishProduct: 0,
|
||
targetIncome: 0,
|
||
targetProfit: 0,
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initChart();
|
||
this.initChart2();
|
||
this.getData(1);
|
||
});
|
||
},
|
||
beforeDestroy() {},
|
||
watch: {
|
||
month(newVal) {
|
||
this.initChart(newVal);
|
||
},
|
||
index(newVal, oldVal) {
|
||
if (newVal == 0) {
|
||
this.getData(1);
|
||
} else {
|
||
this.getData(2);
|
||
}
|
||
},
|
||
index2(newVal, oldVal) {
|
||
if (newVal == 0) {
|
||
this.chart4.dispose();
|
||
this.chart4 = null;
|
||
this.$nextTick(() => {
|
||
this.initChart();
|
||
});
|
||
} else {
|
||
this.chart.dispose();
|
||
this.chart = null;
|
||
this.$nextTick(() => {
|
||
this.initChart4();
|
||
});
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
getData(type) {
|
||
this.request({
|
||
url: "/hx/operating/getFactoryOperateIndexPic",
|
||
method: "get",
|
||
params: { type: type },
|
||
}).then((res) => {
|
||
if (200 == res.code && res.data) {
|
||
this.resData = res.data;
|
||
}
|
||
});
|
||
},
|
||
initChart(month) {
|
||
let params = { type: 2 };
|
||
if (month) {
|
||
params["month"] = month;
|
||
}
|
||
if (this.chart) {
|
||
this.chart.dispose();
|
||
this.chart = null;
|
||
}
|
||
this.request({
|
||
url: "/hx/operating/getDeptOperateIndexPic",
|
||
method: "get",
|
||
params: params,
|
||
}).then((res) => {
|
||
if (200 == res.code) {
|
||
let { list } = res.data;
|
||
this.chart = echarts.init(this.$refs.chart, "macarons");
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
// trigger: 'axis',
|
||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
legend: {
|
||
data: ["数量", "完成率"],
|
||
textStyle: {
|
||
color: "#fff", //legend字体颜色
|
||
},
|
||
left: "left",
|
||
left: "10%",
|
||
// selectedMode: false,
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 0,
|
||
},
|
||
xAxis: {
|
||
data: list.map((e) => e.deptName),
|
||
// data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
// dataZoom: {
|
||
// type: 'slider',
|
||
// start: 0,
|
||
// end: 50,
|
||
// },
|
||
color: ["#ccc", "red"],
|
||
yAxis: [
|
||
{
|
||
name: "个",
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ["rgba(255, 255, 255,.5)"],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
// {
|
||
// name: '目标',
|
||
// type: 'bar',
|
||
// z: '-1',
|
||
// barGap: '-75%',
|
||
// barWidth: 30,
|
||
// itemStyle: {
|
||
// color: 'rgba(85, 197, 162, .3)',
|
||
// },
|
||
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||
// },
|
||
{
|
||
name: "数量",
|
||
type: "bar",
|
||
barWidth: 30,
|
||
position: [0, 0],
|
||
data: list.map((e) => e.realIncome),
|
||
// data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear", // 线性渐变
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#B5D3FE",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#7EA7FC",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "完成率",
|
||
type: "scatter",
|
||
symbol: "rect",
|
||
symbolSize: [30, 4],
|
||
symbolOffset: [0, 0],
|
||
position: [0, 0],
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
color: "#F6D97E",
|
||
},
|
||
data: list.map((e) => e.rate),
|
||
// data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||
},
|
||
],
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 折线图
|
||
initChart2() {
|
||
this.request({
|
||
url: "/hx/operating/getCostAnalysisPic",
|
||
method: "get",
|
||
}).then((res) => {
|
||
if (200 == res.code) {
|
||
let { list, rate } = res.data;
|
||
this.chart2 = echarts.init(this.$refs.chart2, "macarons");
|
||
this.setOptions2(list);
|
||
this.initChart3(rate);
|
||
}
|
||
});
|
||
},
|
||
setOptions2(list) {
|
||
this.chart2.setOption({
|
||
legend: {
|
||
left: "right",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
grid: {
|
||
top: "3%",
|
||
left: "3%",
|
||
right: "6%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: list.map((e) => e.month),
|
||
// axisPointer: {
|
||
// type: 'shadow',
|
||
// },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 100,
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
},
|
||
splitLine: {
|
||
// show: false, //不显示网格线
|
||
lineStyle: {
|
||
color: "#2b3b6c",
|
||
},
|
||
},
|
||
// splitArea: {
|
||
// show: false, //不显示网格区域
|
||
// },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
grid: {
|
||
containLabel: true,
|
||
width: "99%",
|
||
left: 0,
|
||
top: 30,
|
||
bottom: 0,
|
||
},
|
||
series: [
|
||
{
|
||
name: "预算执行率",
|
||
type: "line",
|
||
yAxisIndex: 0,
|
||
smooth: false,
|
||
//
|
||
data: list.map((e) => e.rate),
|
||
// data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||
itemStyle: {
|
||
color: "#1098FF",
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(16, 152, 255, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(51, 65, 106, 0.18)",
|
||
},
|
||
]),
|
||
},
|
||
symbol: "none",
|
||
},
|
||
],
|
||
});
|
||
},
|
||
initChart3(rate) {
|
||
if (!rate) {
|
||
return;
|
||
}
|
||
this.chart3 = echarts.init(this.$refs.chart3, "macarons");
|
||
this.setOptions3(rate);
|
||
},
|
||
setOptions3(rate) {
|
||
this.chart3.setOption({
|
||
tooltip: {
|
||
trigger: "item",
|
||
},
|
||
// color: colorList,
|
||
// legend: {
|
||
// top: '5%',
|
||
// right: '5%',
|
||
// orient: 'vertical',
|
||
// y: 'center',
|
||
// // left: 'right',
|
||
// textStyle: {
|
||
// color: '#fff', //legend字体颜色
|
||
// },
|
||
// },
|
||
series: [
|
||
{
|
||
name: "占比",
|
||
type: "pie",
|
||
center: ["50%", "50%"],
|
||
radius: ["65%", "85%"],
|
||
clockWise: false, // 逆时针
|
||
hoverAnimation: false, // hover 效果
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: "40",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{ value: rate.total, name: "总2" },
|
||
{ value: rate.toolingTotal, name: "工装成本占比" },
|
||
],
|
||
color: ["#73cdcf", "#2f6a74"],
|
||
},
|
||
{
|
||
name: "占比",
|
||
type: "pie",
|
||
radius: ["30%", "50%"],
|
||
center: ["50%", "50%"],
|
||
clockWise: false, // 逆时针
|
||
hoverAnimation: false, // hover 效果
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: "40",
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{ value: rate.total, name: "总1" },
|
||
{ value: rate.materialTotal, name: "原材料成本占比" },
|
||
],
|
||
color: ["#f6d97e", "#7f7462"],
|
||
},
|
||
],
|
||
});
|
||
},
|
||
|
||
initChart4() {
|
||
this.request({
|
||
url: "/hx/operating/getDeptOperateIndexPic",
|
||
method: "get",
|
||
params: { type: 1 },
|
||
}).then((res) => {
|
||
if (200 == res.code) {
|
||
let { list } = res.data;
|
||
this.chart4 = echarts.init(this.$refs.chart4);
|
||
this.chart4.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
orient: "vertical",
|
||
x: "right",
|
||
// y: 'center',
|
||
top: "20%",
|
||
textStyle: {
|
||
color: "#fff", //legend字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
left: 20,
|
||
right: "25%",
|
||
top: 30,
|
||
bottom: 50,
|
||
containLabel: true,
|
||
},
|
||
dataZoom: {
|
||
type: "slider",
|
||
// start: 0,
|
||
// end: 50,
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: list.map((e) => e.month),
|
||
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ["rgba(255, 255, 255,.5)"],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "EVA",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
itemStyle: {
|
||
color: "#F6D97E",
|
||
},
|
||
barWidth: 30,
|
||
data: list.map((e) => e.realEva),
|
||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||
},
|
||
{
|
||
name: "两金",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
itemStyle: {
|
||
color: "#F89343",
|
||
},
|
||
barWidth: 30,
|
||
data: list.map((e) => e.realCollection),
|
||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||
},
|
||
{
|
||
name: "利润",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
itemStyle: {
|
||
color: "#83DDC5",
|
||
},
|
||
barWidth: 30,
|
||
data: list.map((e) => e.realProfit),
|
||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||
},
|
||
{
|
||
name: "收入",
|
||
type: "bar",
|
||
stack: "Ad",
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
itemStyle: {
|
||
color: "#ADCDFD",
|
||
},
|
||
barWidth: 30,
|
||
data: list.map((e) => e.realIncome),
|
||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||
},
|
||
{
|
||
name: "收入完成率",
|
||
type: "line",
|
||
smooth: false,
|
||
data: list.map((e) => e.incomeRate),
|
||
// data: [500, 550, 700, 520, 650, 520, 550],
|
||
itemStyle: {
|
||
color: "#8BB1ED",
|
||
},
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "利润完成率",
|
||
type: "line",
|
||
smooth: false,
|
||
itemStyle: {
|
||
color: "#53C19D",
|
||
},
|
||
data: list.map((e) => e.profitRate),
|
||
// data: [600, 500, 700, 620, 750, 800, 600],
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "两金完成率",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
smooth: false,
|
||
data: list.map((e) => e.collectionRate),
|
||
// data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
|
||
itemStyle: {
|
||
color: "#F64F58",
|
||
},
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "EVA完成率",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
smooth: false,
|
||
data: list.map((e) => e.evaRate),
|
||
itemStyle: {
|
||
color: "#F6D97E",
|
||
},
|
||
symbol: "none",
|
||
},
|
||
],
|
||
});
|
||
}
|
||
});
|
||
|
||
// this.setOptions4()
|
||
},
|
||
// setOptions4 () {
|
||
// },
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.center_box {
|
||
position: relative;
|
||
margin-top: 8px;
|
||
width: 100%;
|
||
height: 225px;
|
||
padding: 10px 25px;
|
||
background-image: url(./center.png);
|
||
::v-deep .el-date-editor {
|
||
position: absolute;
|
||
right: 190px;
|
||
top: 12px;
|
||
border-radius: 0;
|
||
box-shadow: none !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
vertical-align: middle;
|
||
color: #fff;
|
||
background-color: transparent;
|
||
.el-range-input,
|
||
.el-range-separator {
|
||
color: #fff;
|
||
}
|
||
.el-range-editor.is-active {
|
||
border-color: #fff !important;
|
||
}
|
||
|
||
input {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
.BigScreenTabs {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 12px;
|
||
}
|
||
}
|
||
.tit {
|
||
padding: 16px 24px;
|
||
}
|
||
.img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.data {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
// margin: 0 30px;
|
||
height: 120px;
|
||
background: rgba(145, 213, 254, 0.1);
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
.top_tab {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.data-item {
|
||
// flex: 1;
|
||
width: 19%;
|
||
padding: 5px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
// justify-content: space-between;
|
||
align-items: flex-start;
|
||
> div {
|
||
margin: 5px 0;
|
||
// text-align: center;
|
||
img {
|
||
// width: 10px;
|
||
// height: 10px;
|
||
vertical-align: middle;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.box {
|
||
font-size: 20px;
|
||
font-family: Roboto-BlackItalic, Roboto;
|
||
font-weight: 600;
|
||
color: #55c5a2;
|
||
}
|
||
.num {
|
||
font-size: 13px;
|
||
}
|
||
.num2 {
|
||
font-size: 14px;
|
||
margin-left: 5px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top_tab {
|
||
::v-deep .BigScreenTabs {
|
||
.button {
|
||
padding: 0;
|
||
transform: unset;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
width: 40px;
|
||
min-width: 40px;
|
||
div {
|
||
transform: unset;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|