image.png
<template>
<div class="content-boxes-power">
<div class="content-boxes-power-main">
<div class="tab-content-title">
<i class="tab-content-dit"></i>使用情况
</div>
<div class="swiper-echarts">
<div class="swiper-panel">
<div class="swiper-containers secondSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-boxes">
<div class="card-1" @click.prevent="handleSelect">
<div class="slide-boxes-title slide-boxes-active">
name:test0
</div>
<div class="slide-boxes-subtitle">
<div class="slide-boxes-subtitle-first">
<div class="subtitle-first-item">
<div
id="lineChart1"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[0].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart2"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[1].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart3"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[2].title }}</div>
</div>
</div>
<div class="slide-boxes-subtitle-first"></div>
</div>
<div class="slide-boxes-subtitle">
<div class="slide-boxes-subtitle-first">
<div class="subtitle-first-item">
<div
id="lineChart4"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[3].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart5"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[4].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart6"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[5].title }}</div>
</div>
</div>
<div class="slide-boxes-subtitle-first"></div>
</div>
</div>
<div class="card-1" @click.prevent="handleSelect">
<span class="slide-boxes-title"> name：test1 </span>
<div class="slide-boxes-subtitle"></div>
</div>
<div class="card-1" @click.prevent="handleSelect">
<span class="slide-boxes-title"> name：test2</span>
<div class="slide-boxes-subtitle"></div>
</div>
<div class="card-1" @click.prevent="handleSelect">
<span class="slide-boxes-title"> --</span>
<div class="slide-boxes-subtitle"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-boxes">
<div class="card-1" @click.prevent="handleSelect">
<div class="slide-boxes-title slide-boxes-active">
name:test0
</div>
<div class="slide-boxes-subtitle">
<div class="slide-boxes-subtitle-first">
<div class="subtitle-first-item">
<div
id="lineChart1"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[0].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart2"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[1].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart3"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[2].title }}</div>
</div>
</div>
<div class="slide-boxes-subtitle-first"></div>
</div>
<div class="slide-boxes-subtitle">
<div class="slide-boxes-subtitle-first">
<div class="subtitle-first-item">
<div
id="lineChart4"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[3].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart5"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[4].title }}</div>
</div>
<div class="subtitle-first-item">
<div
id="lineChart6"
style="width: 100%; height: 85px"
></div>
<div>{{ titles[5].title }}</div>
</div>
</div>
<div class="slide-boxes-subtitle-first"></div>
</div>
</div>
<div class="card-1" @click.prevent="handleSelect">
<span class="slide-boxes-title"> name：test1 </span>
<div class="slide-boxes-subtitle"></div>
</div>
<div class="card-1" @click.prevent="handleSelect">
<span class="slide-boxes-title"> name：test2</span>
<div class="slide-boxes-subtitle"></div>
</div>
<div class="card-1" @click.prevent="handleSelect">
<span class="slide-boxes-title"> --</span>
<div class="slide-boxes-subtitle"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev firstPrevs">
<div class="swiper-button-prev-img"></div>
</div>
<div class="swiper-button-next firstNexts">
<div class="swiper-button-next-img"></div>
</div>
<div class="swiper-total">共<span>3</span>个节点</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import "../../src/common/font.css";
export default {
name: "power",
dicts: ["rgzn_status"],
data() {
return {
titles: [
{
title: "cpu",
},
{ title: "内存" },
{
title: "磁盘",
},
{
title: "显卡1.",
},
{ title: "显卡2" },
{ title: "显卡--" },
],
};
},
created() {},
mounted() {
this.$nextTick(() => {
new Swiper(".secondSwiper", {
observer: true, //启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
//默认false，不开启
observeParents: true,
noSwiping: true,
preventClicks: true, // 禁用点击事件导致的滑动
// 如果需要禁用触摸事件，可以使用以下选项
preventClicksPropagation: true, // 阻止点击事件冒泡
touchRatio: 0, // 设置触摸比例为0，禁止滑动
autoHeight: true,
pagination: {
el: ".swiper-pagination",
clickable: true, // 可点击
type: "fraction",
dynamicBullets: true, // 动态生成分页器
},
navigation: {
nextEl: ".firstNexts",
prevEl: ".firstPrevs",
},
// loop: true, //循环
});
});
this.lineFuntionOne();
this.lineFuntionTwo();
this.lineFuntionThree();
this.lineFuntionfour();
this.lineFuntionfive();
this.lineFuntionsix();
},
methods: {
lineFuntionOne() {
var chartDom = document.getElementById("lineChart1");
var myChart = this.$echarts.init(chartDom);
// 指定图表的配置项和数据
var data = [
{
name: "CPU",
value: 100,
num: 1234,
},
];
var titleArr = [],
seriesArr = [];
var colors = [];
if (data[0].value > 95) {
colors = [["#F23D00", "#EFF2F6"]];
} else {
colors = [["#1382FC", "#EFF2F6"]];
}
data.forEach(function (item, index) {
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [28, 23],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["50%", "55%"],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
if (item.num == "--") {
return `{b|--}`;
} else {
let str = params.value + "%";
if (params.value > 95) {
return `{c|${str}}`;
} else {
return `{a|${str}}`;
}
}
},
position: "center",
show: true,
rich: {
a: {
fontSize: "12",
color: "#1B86FC",
},
b: {
fontSize: "12",
color: "#97A3A7",
// 这里定义不同样式
},
c: {
fontSize: "12",
color: "#F23D00",
// 这里定义不同样式
},
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
var option = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
myChart.clear(); //先清空图表,在重绘图表
option && myChart.setOption(option);
window.addEventListener("resize", function () {
// 调整图表尺寸
myChart.resize();
});
},
lineFuntionTwo() {
var chartDom = document.getElementById("lineChart2");
var myChart = this.$echarts.init(chartDom);
// 指定图表的配置项和数据
var data = [
{
name: "内存(8.32GB)",
value: 100,
num: 1234,
},
];
var titleArr = [],
seriesArr = [];
var colors = [];
if (data[0].value > 95) {
colors = [["#F23D00", "#EFF2F6"]];
} else {
colors = [["#1382FC", "#EFF2F6"]];
}
data.forEach(function (item, index) {
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [28, 23],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["50%", "55%"],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
if (item.num == "--") {
return `{b|--}`;
} else {
let str = params.value + "%";
if (params.value > 95) {
return `{c|${str}}`;
} else {
return `{a|${str}}`;
}
}
},
position: "center",
show: true,
rich: {
a: {
fontSize: "12",
color: "#1B86FC",
},
b: {
fontSize: "12",
color: "#97A3A7",
// 这里定义不同样式
},
c: {
fontSize: "12",
color: "#F23D00",
// 这里定义不同样式
},
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
var option = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
myChart.clear(); //先清空图表,在重绘图表
option && myChart.setOption(option);
window.addEventListener("resize", function () {
// 调整图表尺寸
myChart.resize();
});
},
lineFuntionThree() {
var chartDom = document.getElementById("lineChart3");
var myChart = this.$echarts.init(chartDom);
// 指定图表的配置项和数据
var data = [
{
name: "磁盘(1298.07GB)",
value: 30,
num: 1234,
},
];
var titleArr = [],
seriesArr = [];
var colors = [];
if (data[0].value > 95) {
colors = [["#F23D00", "#EFF2F6"]];
} else {
colors = [["#1382FC", "#EFF2F6"]];
}
data.forEach(function (item, index) {
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [28, 23],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["50%", "55%"],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
if (item.num == "--") {
return `{b|--}`;
} else {
let str = params.value + "%";
if (params.value > 95) {
return `{c|${str}}`;
} else {
return `{a|${str}}`;
}
}
},
position: "center",
show: true,
rich: {
a: {
fontSize: "12",
color: "#1B86FC",
},
b: {
fontSize: "12",
color: "#97A3A7",
// 这里定义不同样式
},
c: {
fontSize: "12",
color: "#F23D00",
// 这里定义不同样式
},
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
var option = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
//
myChart.clear(); //先清空图表,在重绘图表
option && myChart.setOption(option);
window.addEventListener("resize", function () {
// 调整图表尺寸
myChart.resize();
});
},
lineFuntionfour() {
var chartDom = document.getElementById("lineChart4");
var myChart = this.$echarts.init(chartDom);
// 指定图表的配置项和数据
var data = [
{
name: "显卡(0.00GB) GeForce RTX 20999999",
value: 100,
num: 1234,
},
];
var titleArr = [],
seriesArr = [];
var colors = [];
if (data[0].value > 95) {
colors = [["#F23D00", "#EFF2F6"]];
} else {
colors = [["#1382FC", "#EFF2F6"]];
}
data.forEach(function (item, index) {
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [28, 23],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["50%", "55%"],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
if (item.num == "--") {
return `{b|--}`;
} else {
let str = params.value + "%";
if (params.value > 95) {
return `{c|${str}}`;
} else {
return `{a|${str}}`;
}
}
},
position: "center",
show: true,
rich: {
a: {
fontSize: "12",
color: "#1B86FC",
},
b: {
fontSize: "12",
color: "#97A3A7",
// 这里定义不同样式
},
c: {
fontSize: "12",
color: "#F23D00",
// 这里定义不同样式
},
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
var option = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
//
myChart.clear(); //先清空图表,在重绘图表
option && myChart.setOption(option);
window.addEventListener("resize", function () {
// 调整图表尺寸
myChart.resize();
});
},
lineFuntionfive() {
var chartDom = document.getElementById("lineChart5");
var myChart = this.$echarts.init(chartDom);
// 指定图表的配置项和数据
var data = [
{
name: "显卡2(0.71GB) GeForce RTX 20...",
value: 100,
num: 1234,
},
];
var titleArr = [],
seriesArr = [];
var colors = [];
if (data[0].value > 95) {
colors = [["#F23D00", "#EFF2F6"]];
} else {
colors = [["#1382FC", "#EFF2F6"]];
}
data.forEach(function (item, index) {
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [28, 23],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["50%", "55%"],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
if (item.num == "--") {
return `{b|--}`;
} else {
let str = params.value + "%";
if (params.value > 95) {
return `{c|${str}}`;
} else {
return `{a|${str}}`;
}
}
},
position: "center",
show: true,
rich: {
a: {
fontSize: "12",
color: "#1B86FC",
},
b: {
fontSize: "12",
color: "#97A3A7",
// 这里定义不同样式
},
c: {
fontSize: "12",
color: "#F23D00",
// 这里定义不同样式
},
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
var option = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
//
myChart.clear(); //先清空图表,在重绘图表
option && myChart.setOption(option);
window.addEventListener("resize", function () {
// 调整图表尺寸
myChart.resize();
});
},
lineFuntionsix() {
var chartDom = document.getElementById("lineChart6");
var myChart = this.$echarts.init(chartDom);
// 指定图表的配置项和数据
var data = [
{
name: "显卡--",
value: 0,
num: "--",
},
];
var titleArr = [],
seriesArr = [];
var colors = [];
if (data[0].value > 95) {
colors = [["#F23D00", "#EFF2F6"]];
} else {
colors = [["#1382FC", "#EFF2F6"]];
}
data.forEach(function (item, index) {
seriesArr.push({
name: item.name,
type: "pie",
clockWise: false,
radius: [28, 23],
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["50%", "55%"],
data: [
{
value: item.value,
label: {
normal: {
formatter: function (params) {
if (item.num == "--") {
return `{b|--}`;
} else {
let str = params.value + "%";
if (params.value > 95) {
return `{c|${str}}`;
} else {
return `{a|${str}}`;
}
}
},
position: "center",
show: true,
rich: {
a: {
fontSize: "12",
color: "#1B86FC",
},
b: {
fontSize: "12",
color: "#97A3A7",
// 这里定义不同样式
},
c: {
fontSize: "12",
color: "#F23D00",
// 这里定义不同样式
},
},
},
},
},
{
value: 100 - item.value,
name: "invisible",
itemStyle: {
normal: {
color: colors[index][1],
},
emphasis: {
color: colors[index][1],
},
},
},
],
});
});
var option = {
backgroundColor: "#fff",
title: titleArr,
series: seriesArr,
};
myChart.clear(); //先清空图表,在重绘图表
option && myChart.setOption(option);
window.addEventListener("resize", function () {
// 调整图表尺寸
myChart.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
.content-boxes-power {
width: 100%;
margin: 0 auto;
height: calc(100vh - 360px);
overflow-y: auto;
}
.content-boxes-power-main {
width: 80%;
margin: 100px auto 0 auto;
}
.tab-content-title-right {
display: flex;
align-items: center;
img {
width: 18px;
height: 18px;
margin-right: 10px;
}
}
.tab-content-title {
display: flex;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 21px;
color: #505966;
align-items: center;
}
.tab-content-dit {
display: block;
background: #1382fc;
border-radius: 2px;
width: 4px;
height: 20px;
margin: 0 11px 0 0px;
}
.toolsbox {
margin-bottom: 50px;
width: 100%;
height: 81px;
display: flex;
justify-content: space-between;
align-items: center;
}
.toolsbox-item {
display: flex;
align-items: center;
}
.toolsbox-item img {
width: 80px;
height: 81px;
}
.tollsbox-item-text {
display: flex;
flex-direction: column;
}
.tollsbox-item-text > span:nth-child(1) {
font-size: 21px;
color: #000000;
}
.tollsbox-item-text > span:nth-child(2) {
font-size: 12px;
color: #636363;
}
.toolsbox > div:nth-child(1) {
background: #f3f5ff;
border-radius: 7px;
width: calc(18% - 20px);
.tollsbox-item-text {
margin-left: 10px;
}
}
.toolsbox > div:nth-child(2) {
background: #fcf7f5;
border-radius: 7px;
width: calc(46% - 20px);
.tollsbox-item-text {
flex: 1;
}
}
.toolsbox > div:nth-child(3) {
background: #eefcef;
border-radius: 7px;
width: calc(18% - 20px);
.tollsbox-item-text {
margin-left: 10px;
}
}
.toolsbox > div:nth-child(4) {
background: #e6f5fb;
border-radius: 7px;
width: calc(18% - 20px);
.tollsbox-item-text {
margin-left: 10px;
}
}
.toolsbox .tollsbox-item-text-special {
margin-left: 10px;
}
.toolsbox > div:nth-child(2) .tollsbox-item-text {
margin-right: 50px;
}
.tollsbox-item-text > div:nth-child(1) {
margin-bottom: 10px;
font-size: 21px;
color: #000000;
}
.tollsbox-item-text > div:nth-child(2) {
font-size: 12px;
color: #636363;
}
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
.table-box {
display: flex;
margin-bottom: 40px;
justify-content: space-between;
}
.table-box > div {
width: 49.5%;
}
.table-box > div:nth-child(1) {
}
.table-box div span {
font-size: 16px;
color: #505966;
height: 26px;
width: 120px;
background: linear-gradient(to right, #dbeaff, #eff4fb, #ffffff);
border-radius: 4px;
padding-left: 10px;
display: flex;
align-items: center;
margin: 34px 0 18px 0;
}
.swiper-echarts {
width: 100%;
margin: 30px 0 57px 0;
}
.swiper-panel {
padding: 0 0 50px 0;
margin: 0 auto;
width: 100%;
overflow: hidden;
position: relative;
}
::v-deep {
.swiper-panel .swiper-button-next.swiper-button-disabled {
opacity: 1 !important;
cursor: auto;
pointer-events: none;
}
.swiper-panel .swiper-button-prev.swiper-button-disabled {
opacity: 1 !important;
cursor: auto;
pointer-events: none;
}
.swiper-panel .swiper-button-disabled .swiper-button-next-img {
width: 50px !important;
height: 30px !important;
bottom: 15px;
background-size: 100% 100%;
background-position: center center;
}
.swiper-panel .swiper-button-disabled .swiper-button-prev-img {
width: 50px !important;
height: 30px !important;
bottom: 15px;
background-size: 100% 100%;
background-position: center center;
}
.swiper-panel .swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
cursor: auto;
opacity: 1 !important;
pointer-events: none;
}
.swiper-container {
width: 100%;
height: 520px;
}
.swiper-containers {
width: 100%;
margin: 0 auto;
}
.slide-box {
position: relative;
}
.slide-box-title {
margin-left: calc(100% - 90% - 45px);
color: white;
width: 40%;
position: absolute;
top: 60px;
left: 60px;
display: flex;
flex-direction: column;
}
.slide-box-title > div:nth-child(1) {
font-family: YouSheBiaoTiHei;
background-image: -webkit-linear-gradient(top, #83898f, #454545);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 400;
font-size: 60px;
color: #292929;
}
.slide-box-title > div:nth-child(2) {
margin-top: 10px;
font-weight: 400;
font-size: 26px;
color: #616161;
line-height: 36px;
font-style: italic;
}
.slide-box-title .el-button--primary.is-plain {
margin-top: 30px;
font-weight: bold;
font-size: 28px;
color: #ffffff;
background-image: linear-gradient(to right, #3891e4 0%, #5cbdf1 100%);
width: 200px;
height: 60px;
border-radius: 29px;
border: none;
}
.slide-boxes {
display: flex;
width: 100%;
margin: 0 auto;
justify-content: space-between;
align-items: center;
}
.slide-boxes .card-1 {
cursor: pointer;
margin: 0 5px;
width: calc(25% - 20px);
padding: 0 0 30px 0;
overflow: hidden;
height: 294px;
display: flex;
flex-direction: column;
background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
border-radius: 12px;
}
.slide-boxes .card-1 .slide-boxes-subtitle-dit {
display: block;
background: #1382fc;
border-radius: 3px;
width: 8px;
height: 20px;
margin: 0 11px 0 0px;
}
.slide-boxes .card-1 img {
border-radius: 10px 10px 0 0;
height: 240px;
}
.slide-boxes-title {
padding-left: 21px;
display: flex;
align-items: center;
background: linear-gradient(to left, #edf5ff, #daeaff);
font-size: 20px;
color: #6989b8;
height: 50px;
line-height: 50px;
}
.slide-boxes-active {
padding-left: 21px;
display: flex;
align-items: center;
background: linear-gradient(to left, #80c0fb, #4189f5);
font-size: 20px;
color: #ffffff;
line-height: 50px;
}
.slide-boxes-subtitle {
font-weight: 500;
font-size: 20px;
color: #9ea7aa;
line-height: 30px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
/*先去掉默认样式*/
.swiper-panel .swiper-button-prev:after {
display: none;
}
.swiper-panel .swiper-button-next:after {
display: none;
}
.swiper-panel .swiper-button-prev {
position: absolute;
height: 30px;
width: 50px;
bottom: 5px;
right: 130px;
left: auto;
}
.swiper-button-next {
position: absolute;
height: 30px;
width: 50px;
bottom: 5px;
right: 10px !important;
left: auto;
}
.swiper-panel .swiper-wrapper {
height: 100% !important;
}
.swiper-panel .swiper-button-next-img {
width: 50px !important;
height: 30px !important;
background: url("../assets/images/power-right.png") no-repeat;
bottom: 15px;
background-size: 100% 100%;
background-position: center center;
}
.swiper-panel .swiper-button-prev-img {
width: 50px !important;
height: 30px !important;
background: url("../assets/images/power-left.png") no-repeat;
bottom: 15px;
background-size: 100% 100%;
background-position: center center;
}
.swiper-slide {
width: 100%;
}
.swiper-pagination {
position: absolute;
bottom: 0px !important;
right: 60px !important;
left: none !important;
}
.swiper-pagination-fraction {
font-size: 16px !important;
color: #97a3a7 !important;
bottom: 10px !important;
left: auto !important;
width: 60px !important;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: none !important;
bottom: 0px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
left: auto !important;
}
.swiper-button-next,
.swiper-button-prev {
top: none !important;
}
.swiper-button-next,
.swiper-button-prev {
top: auto !important;
}
}
.swiper-total {
margin-left: 10px;
width: 10%;
position: absolute;
left: 0;
bottom: 0px;
font-size: 18px;
color: #97a3a7;
}
.swiper-total span {
color: #1382fc;
}
.slide-boxes-subtitle-first {
width: 100%;
box-sizing: border-box;
padding: 0 10px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
#lineChart1 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#lineChart2 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#lineChart3 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#lineChart4 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#lineChart5 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#lineChart6 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#lineChart3 div {
margin: 0 auto;
}
.echarts-title {
color: red !important;
padding: 0, 10px, 0, 10px;
}
.subtitle-first-item {
flex: 1;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 12px;
color: #666666;
text-align: center;
}
.subtitle-first-item > div:nth-child(2) {
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 12px;
color: #666666;
text-align: center;
line-height: 18px;
height: 36px;
}
</style>
