liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: liulonglong:f1fc04869003f58e7aefeafdab842cf1d4fef721
Branches Tags
liulonglong:master
..
compare: liulonglong:79eb01d5754ccb0c8dc1d82e5ad5b8a3bbf191d6
Branches Tags
liulonglong:master

2 Commits
f1fc048690 ... 79eb01d575

Author SHA1 Message Date
lll 79eb01d575 Merge branch 'master' of http://git.umayle.com:2023/liulonglong/shuinichang_ 2023-11-24 10:12:04 +08:00
lll a7d61aa6e1 1 2023-11-24 10:12:00 +08:00
4 changed files with 1383 additions and 1 deletions
Show Stats Expand all files Collapse all files

11
src/router/index.js
View File

@ -37,6 +37,12 @@ const routes = [
name: "pds", name: "pds",
component: () => import("../views/lll/PDS.vue"), component: () => import("../views/lll/PDS.vue"),
}, },
//测试页面
{
path: "pds1",
name: "pds1",
component: () => import("../views/lll/NYJCD/PDS.vue"),
},
{ {
path: "area", path: "area",
name: "area", name: "area",
@ -57,6 +63,11 @@ const routes = [
name: "nyjcs", name: "nyjcs",
component: () => import("../views/lll/NYJCS.vue"), component: () => import("../views/lll/NYJCS.vue"),
}, },
{
path: "nyjcm",
name: "nyjcm",
component: () => import("../views/lll/NYJCM.vue"),
},
], ],
}, },
], ],

11
src/views/lll/AREA.vue
View File

@ -37,7 +37,16 @@
src="../../assets/nyjc/煤1.png" src="../../assets/nyjc/煤1.png"
alt="" alt=""
v-show="!mei" v-show="!mei"
@click="(dian = false), (shui = false), (mei = true)" @click="
(dian = false),
(shui = false),
(mei = true),
$router.push(
'/area/nyjcm',
() => {},
() => {}
)
"
/> />
<img src="../../assets/nyjc/煤.png" alt="" v-show="mei" /> <img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
</div> </div>

453
src/views/lll/NYJCD/PDS.vue Normal file
View File

@ -0,0 +1,453 @@
<template>
<div class="box">
<div class="left">
<img
src="../../../assets/img/标题/能源监测-电-配电室.png"
class="title"
/>
<div class="pdsssdh">
<div class="imgBox">
<img src="../../../assets/img/小标题栏.png" class="img" />
<p>配电室实时负荷</p>
</div>
<div class="data">
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
>年</span
>
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
>月</span
>
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
>日</span
>
</div>
<div id="pdsssdh"></div>
</div>
<div class="pdsydl">
<div class="imgBox">
<img src="../../../assets/img/小标题栏.png" class="img" />
<p>配电室用电量</p>
</div>
<div class="data">
<span
:class="type == '总用电' ? 'active' : ''"
@click="type = '总用电'"
>总用电</span
>
<span
:class="type == '分时段' ? 'active' : ''"
@click="type = '分时段'"
>分时段</span
>
</div>
<div id="pdsydl"></div>
</div>
<div class="pdstpt">
<div class="imgBox">
<img src="../../../assets/img/小标题栏.png" class="img" />
<p>配电室拓扑图</p>
</div>
<div id="pdstpt">
<img src="../../../assets/znyw/tpt.png" />
</div>
</div>
</div>
<div class="right">
<div class="pdsjk">
<div class="imgBox">
<img src="../../../assets/img/小标题栏.png" class="img" />
<p>配电室监控</p>
</div>
<div class="chartBox">
<div id="pdsjk">
<div class="title">
<p>配电室数量：</p>
<span>6</span>
<p>个</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
res: "月",
type: "总用电",
option1: {
xAxis: {
type: "category",
data: ["1月", "2月", "3月", "4月", "5月"],
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
},
},
yAxis: {
type: "value",
name: "单位:KW",
nameTextStyle: {
color: "#fff",
fontSize: 20,
padding: 10,
},
min: 0,
max: 500,
interval: 100, // 指定刻度间隔
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
},
},
grid: {
// 让图表占满容器
// top: "5%",
left: "8%",
right: "5%",
bottom: "8%",
},
series: [
{
type: "line",
symbol: "circle",
symbolSize: 20,
data: [200, 300, 500, 400, 334],
itemStyle: {
normal: {
color: "#00FF00",
lineStyle: {
width: 5, //折线宽度
color: "#21FF55", //折线颜色
},
},
},
},
],
},
option2: {
legend: {
data: [
{ icon: "rect", name: "昨日" },
{ icon: "rect", name: "今日" },
],
textStyle: {
color: "#fff",
fontSize: "20px",
},
},
xAxis: {
type: "category",
data: ["1月", "2月", "3月", "4月", "5月"],
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
},
},
yAxis: {
type: "value",
name: "单位:kWh",
nameTextStyle: {
color: "#fff",
fontSize: 20,
padding: 10,
},
min: 0,
max: 500,
interval: 100, // 指定刻度间隔
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
},
},
grid: {
// 让图表占满容器
// top: "5%",
left: "8%",
right: "5%",
bottom: "8%",
},
series: [
{
type: "bar",
name: "昨日",
data: [200, 300, 500, 400, 334],
itemStyle: {
normal: {
color: "#11C3FF",
lineStyle: {
width: 5, //折线宽度
color: "#11C3FF", //折线颜色
},
},
},
},
{
type: "bar",
name: "今日",
data: [200, 300, 500, 400, 334],
itemStyle: {
normal: {
color: "#09E83E",
lineStyle: {
width: 5, //折线宽度
color: "#09E83E", //折线颜色
},
},
},
},
],
},
};
},
methods: {
defineEcharts(dom, option) {
var chartDom = document.getElementById(dom);
var myChart = this.$echarts.init(chartDom);
myChart.setOption(option);
},
},
mounted() {
this.defineEcharts("pdsssdh", this.option1);
this.defineEcharts("pdsydl", this.option2);
},
};
</script>
<style scoped lang="less">
.box {
width: 100%;
height: 100%;
padding-top: 400px;
box-sizing: border-box;
background-color: transparent;
display: flex;
justify-content: space-between;
position: relative;
}
.left {
width: 1237px;
height: 2500px;
margin-left: 61px;
background-image: url("../../../assets/img/侧边.png");
padding-left: 59px;
padding-right: 45px;
box-sizing: border-box;
.title {
margin-top: 15px;
margin-left: 60px;
}
.pdsssdh {
position: relative;
margin-top: 56px;
.data {
position: absolute;
font-size: 20px;
font-family: "DOUYU";
color: #ffffff;
line-height: 18px;
display: flex;
right: 0;
top: 120px;
z-index: 1;
cursor: pointer;
span {
width: 122px;
height: 38px;
margin: 10px;
display: block;
line-height: 38px;
text-align: center;
}
.active {
background: linear-gradient(
to right,
rgba(33, 76, 124, 0.3) 20%,
rgba(152, 207, 230, 0.3) 100%,
rgba(33, 76, 124, 0.3) 20%
);
}
}
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#pdsssdh {
width: 1155px;
height: 600px;
margin-top: 50px;
}
}
.pdsydl {
position: relative;
margin-top: 56px;
.data {
position: absolute;
font-size: 20px;
font-family: "DOUYU";
color: #ffffff;
line-height: 18px;
display: flex;
right: 0;
top: 120px;
z-index: 1;
cursor: pointer;
span {
width: 122px;
height: 38px;
margin: 10px;
display: block;
line-height: 38px;
text-align: center;
}
.active {
background: linear-gradient(
to right,
rgba(33, 76, 124, 0.3) 20%,
rgba(152, 207, 230, 0.3) 100%,
rgba(33, 76, 124, 0.3) 20%
);
}
}
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#pdsydl {
width: 1155px;
height: 600px;
margin-top: 50px;
}
}
.pdstpt {
position: relative;
margin-top: 56px;
.data {
position: absolute;
font-size: 20px;
font-family: "DOUYU";
color: #ffffff;
line-height: 18px;
display: flex;
right: 0;
top: 120px;
z-index: 1;
cursor: pointer;
span {
width: 122px;
height: 38px;
margin: 10px;
display: block;
line-height: 38px;
text-align: center;
.active {
background: linear-gradient(
to right,
rgba(33, 76, 124, 0.3) 20%,
rgba(152, 207, 230, 0.3) 100%,
rgba(33, 76, 124, 0.3) 20%
);
}
}
}
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#pdstpt {
width: 1155px;
height: 600px;
margin-top: 50px;
img {
width: 100%;
height: 94%;
}
}
}
}
.right {
width: 1237px;
height: 2500px;
margin-right: 61px;
background-image: url("../../../assets/img/侧边.png");
padding-left: 59px;
padding-right: 45px;
box-sizing: border-box;
.pdsjk {
position: relative;
margin-top: 130px;
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
.chartBox {
margin-top: 50px;
#pdsjk {
width: 1156px;
height: 600px;
.title {
display: flex;
align-items: center;
color: #fff;
font-size: 20px;
margin-left: 50px;
margin-bottom: 20px;
span {
margin: 0 20px;
font-size: 30px;
color: #56f671;
}
}
}
}
}
}
</style>

909
src/views/lll/NYJCM.vue Normal file
View File

@ -0,0 +1,909 @@
<template>
<div class="box">
<div class="left">
<img src="../../assets/img/标题/能源监测-煤.png" class="title" />
<div class="top">
<div>
<img src="../../assets/nyjc/组 963.png" alt="" />
<p>平阴水泥厂</p>
</div>
<div class="two">
<div class="txt">
<span style="color: #95fffe">1218</span><span>t</span>
</div>
<img src="../../assets/nyjc/煤 拷贝.png" alt="" />
<p>今日用煤量</p>
</div>
</div>
<div class="rysl">
<div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" />
<p>日用煤量</p>
</div>
<div class="tip">
<span>今日用煤量</span><span>870</span><span>t</span><span>↑</span>
</div>
<div id="rysl"></div>
</div>
<div class="yysl">
<div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" />
<p>月用煤量</p>
</div>
<div class="tip">
<span>本月用煤量</span><span>870</span><span>t</span><span>↑</span>
</div>
<div id="yysl"></div>
</div>
<div class="nysl">
<div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" />
<p>年用煤量</p>
</div>
<div class="tip">
<span>本年用煤量</span><span>870</span><span>t</span><span>↑</span>
</div>
<div id="nysl"></div>
</div>
</div>
<div class="right">
<div class="ystj">
<div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" />
<p>用煤统计</p>
</div>
<div class="chartBox">
<div id="ystj">
<img src="../../assets/nyjc/组 964.png" alt="" />
<div class="zs">
<span>总数：</span
><span style="color: #58caff; font-size: 30px">5</span>
</div>
<div class="zx">
<span>在线：</span
><span style="color: #56f671; font-size: 30px">118</span>
</div>
<div class="zxl">
<span>在线率：</span
><span style="color: #56f671; font-size: 30px">72%</span>
</div>
</div>
</div>
</div>
<div class="sbjc">
<div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" />
<p>用煤设备监测</p>
</div>
<div class="chartBox">
<div id="sbjc">
<div class="title">
<p>用煤设备：</p>
<span>5</span>
<p>个</p>
</div>
<el-table
:data="tableData"
:row-class-name="tableRowClassName"
style="width: 100%"
header-cell-style="background-color: #1969A8; color: white"
>
<el-table-column label="序号" align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="date1" label="名称" align="center">
</el-table-column>
<el-table-column prop="date2" label="用煤量" align="center"
><template slot-scope="scope">
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
><span>t</span>
</template>
</el-table-column>
<el-table-column prop="date3" label="碳排放量" align="center"
><template slot-scope="scope">
<span style="color: #58caff">{{ scope.row.date3 }}</span>
<span>t</span>
</template>
</el-table-column>
<el-table-column
prop="date4"
label="单位热值含碳量"
align="center"
><template slot-scope="scope">
<span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
<span>tCO2/t</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="tpt">
<div class="imgBox">
<img src="../../assets/img/小标题栏.png" class="img" />
<p>用煤排名</p>
</div>
<div class="chartBox">
<div id="tpt">
<div class="data">
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
>年</span
>
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
>月</span
>
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
>日</span
>
</div>
<el-table
:data="tableData1"
:row-class-name="tableRowClassName"
style="width: 100%"
header-cell-style="background-color: #1969A8; color: white"
>
<el-table-column label="序号" align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="date1" label="设备名称" align="center">
</el-table-column>
<el-table-column prop="date2" label="用煤量" align="center"
><template slot-scope="scope">
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
><span>t</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
res: "月",
option1: {
legend: {
data: [{ icon: "rect", name: "日用煤量" }],
textStyle: {
color: "#fff",
fontSize: "20px",
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"],
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
},
},
yAxis: {
type: "value",
name: "单位:t",
nameTextStyle: {
color: "#fff",
fontSize: 20,
padding: 10,
},
min: 0,
max: 500,
interval: 100, // 指定刻度间隔
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
},
},
grid: {
// 让图表占满容器
// top: "5%",
left: "8%",
right: "5%",
bottom: "8%",
},
series: [
{
type: "line",
name: "日用煤量",
data: [280, 350, 120, 270, 290],
smooth: true,
itemStyle: {
normal: {
color: "#21EF06",
lineStyle: {
width: 5, //折线宽度
color: "#21EF06", //折线颜色
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "#0C3431" },
{ offset: 0.5, color: "#198522" },
{ offset: 0, color: "#18881C" },
]),
},
},
},
markPoint: {
data: [{ type: "max", name: "Max" }],
label: {
textStyle: {
color: "#fff",
fontSize: 15,
},
},
},
},
],
},
option2: {
legend: {
data: [{ icon: "rect", name: "月用煤量" }],
textStyle: {
color: "#fff",
fontSize: "20px",
},
},
xAxis: {
type: "category",
data: ["1月", "2月", "3月", "4月", "5月"],
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
},
},
yAxis: {
type: "value",
name: "单位:t",
nameTextStyle: {
color: "#fff",
fontSize: 20,
padding: 10,
},
min: 0,
max: 500,
interval: 100, // 指定刻度间隔
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
},
},
grid: {
// 让图表占满容器
// top: "5%",
left: "8%",
right: "5%",
bottom: "8%",
},
series: [
{
type: "bar",
markPoint: {
data: [{ type: "max", name: "Max" }],
label: {
textStyle: {
color: "#fff",
fontSize: 15,
},
},
},
name: "月用煤量",
data: [280, 350, 120, 270, 290],
smooth: true,
itemStyle: {
normal: {
color: "#11C3FF",
lineStyle: {
width: 5, //折线宽度
color: "#11C3FF", //折线颜色
},
},
},
},
],
},
option3: {
legend: {
data: [
{ icon: "rect", name: "去年用煤量" },
{ icon: "rect", name: "今年用煤量" },
],
textStyle: {
color: "#fff",
fontSize: "20px",
},
},
xAxis: {
type: "category",
data: ["2019", "2020", "2021", "2022", "2023"],
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
},
},
yAxis: {
type: "value",
name: "单位:t",
nameTextStyle: {
color: "#fff",
fontSize: 20,
padding: 10,
},
min: 0,
max: 500,
interval: 100, // 指定刻度间隔
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
},
},
grid: {
// 让图表占满容器
// top: "5%",
left: "8%",
right: "5%",
bottom: "8%",
},
series: [
{
type: "line",
name: "去年用煤量",
data: [240, 334, 123, 270, 296],
symbolSize: 15,
itemStyle: {
normal: {
color: "#56F671",
lineStyle: {
width: 5, //折线宽度
color: "#56F671", //折线颜色
},
},
},
},
{
type: "line",
name: "今年用煤量",
symbolSize: 15,
data: [223, 434, 423, 254, 216],
itemStyle: {
normal: {
color: "#43FFF4",
lineStyle: {
width: 5, //折线宽度
color: "#43FFF4", //折线颜色
},
},
},
},
],
},
tableData: [
{
date1: "回转窑",
date2: "20.34",
date3: "20.34",
date4: "20.34",
},
{
date1: "熟料收尘",
date2: "17.42",
date3: "17.42",
date4: "17.42",
},
{
date1: "篦冷机",
date2: "12.22",
date3: "12.22",
date4: "12.22",
},
{
date1: "生料收尘",
date2: "19.19",
date3: "19.19",
date4: "19.19",
},
{
date1: "熟料收尘",
date2: "17.42",
date3: "17.42",
date4: "17.42",
},
{
date1: "篦冷机",
date2: "12.22",
date3: "12.22",
date4: "12.22",
},
{
date1: "生料收尘",
date2: "19.19",
date3: "19.19",
date4: "19.19",
},
],
tableData1: [
{
date1: "1号回转窑",
date2: "120.34",
},
{
date1: "2号回转窑",
date2: "87.42",
},
{
date1: "3号回转窑",
date2: "82.22",
},
{
date1: "1号线预加热分解炉",
date2: "79.19",
},
{
date1: "2号线预加热分解炉",
date2: "76.76",
},
{
date1: "3号线预加热分解炉",
date2: "45.76",
},
],
};
},
methods: {
defineEcharts(dom, option) {
var chartDom = document.getElementById(dom);
var myChart = this.$echarts.init(chartDom);
myChart.setOption(option);
},
tableRowClassName({ row, rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return "success-row";
}
return "";
},
},
mounted() {
this.defineEcharts("rysl", this.option1);
this.defineEcharts("yysl", this.option2);
this.defineEcharts("nysl", this.option3);
},
};
</script>
<style scoped lang="less">
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: transparent;
display: flex;
padding-top: 400px;
justify-content: space-between;
position: relative;
}
.left {
width: 1237px;
height: 2500px;
margin-left: 61px;
background-image: url("../../assets/img/侧边.png");
padding-left: 59px;
padding-right: 45px;
box-sizing: border-box;
.title {
margin-top: 15px;
margin-left: 60px;
}
.top {
position: relative;
margin-top: 100px;
color: #fff;
font-size: 22px;
display: flex;
div {
display: flex;
flex-direction: column;
width: 1155px;
align-items: center;
justify-content: space-between;
img {
height: 130px;
width: 200px;
}
p {
margin-top: 20px;
}
}
.two {
.txt {
position: absolute;
display: flex;
justify-content: space-around;
span:nth-of-type(1) {
font-size: 30px;
}
span:nth-of-type(2) {
font-size: 20px;
position: absolute;
top: 10px;
right: 530px;
}
}
}
}
.rysl {
position: relative;
margin-top: 56px;
.tip {
margin-left: 20px;
font-size: 20px;
position: absolute;
color: #fff;
top: 110px;
span:nth-of-type(1) {
margin-right: 30px;
}
span:nth-of-type(2) {
color: #09e83e;
font-weight: 600;
}
span:nth-of-type(4) {
color: #09e83e;
}
}
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#rysl {
width: 1155px;
height: 500px;
margin-top: 50px;
}
}
.yysl {
position: relative;
margin-top: 56px;
.tip {
margin-left: 20px;
font-size: 20px;
position: absolute;
color: #fff;
top: 110px;
span:nth-of-type(1) {
margin-right: 30px;
}
span:nth-of-type(2) {
color: #11c3ff;
font-weight: 600;
}
span:nth-of-type(4) {
color: #11c3ff;
}
}
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#yysl {
width: 1155px;
height: 500px;
margin-top: 50px;
}
}
.nysl {
position: relative;
margin-top: 56px;
.tip {
margin-left: 20px;
font-size: 20px;
position: absolute;
color: #fff;
top: 110px;
span:nth-of-type(1) {
margin-right: 30px;
}
span:nth-of-type(2) {
color: #43fff4;
font-weight: 600;
}
span:nth-of-type(4) {
color: #43fff4;
}
}
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#nysl {
width: 1155px;
height: 500px;
margin-top: 50px;
}
}
}
.right {
width: 1237px;
height: 2500px;
margin-right: 61px;
background-image: url("../../assets/img/侧边.png");
padding-left: 59px;
padding-right: 45px;
box-sizing: border-box;
.ystj {
position: relative;
margin-top: 130px;
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
.chartBox {
margin-top: 50px;
#ystj {
width: 1156px;
font-size: 20px;
color: #fff;
position: relative;
img {
height: 180px;
width: 200px;
margin-left: 60px;
}
.zs {
position: absolute;
top: 80px;
left: 400px;
}
.zx {
position: absolute;
top: 30px;
left: 700px;
}
.zxl {
position: absolute;
top: 100px;
left: 700px;
}
}
}
}
.sbjc {
position: relative;
margin-top: 56px;
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#sbjc {
width: 1155px;
height: 650px;
margin-top: 50px;
.title {
display: flex;
align-items: center;
color: #fff;
font-size: 20px;
margin-left: 50px;
margin-bottom: 20px;
span {
margin: 0 20px;
font-size: 30px;
color: #56f671;
}
}
/deep/.el-table tr {
background: #16253b;
color: #fff;
font-size: 30px;
height: 50px;
.cell {
line-height: 50px;
}
}
// 去掉eltable的hover效果
::v-deep .el-table tbody tr:hover > td {
background-color: #0b679e !important;
}
//修改表头颜色
::v-deep .has-gutter {
background-color: #1969a8;
th {
background-color: #1969a8;
}
}
//奇偶行颜色
::v-deep .el-table .success-row {
background: #184167;
}
//去掉边框白线
::v-deep .el-table__row > td {
border: none;
}
::v-deep .el-table::before {
height: 0px;
}
/* 移除表头的下边框 */
::v-deep .el-table__header th {
border-bottom: none;
}
/deep/ .el-table {
tr th,
tr td {
border-right: none;
}
}
}
}
.tpt {
position: relative;
margin-top: 56px;
.imgBox {
height: 93px;
width: 1156px;
p {
position: absolute;
color: #fff;
top: 20px;
left: 50px;
font-size: 30px;
font-family: "MicrosoftYaHei";
}
}
#tpt {
width: 1155px;
height: 650px;
margin-top: 100px;
.data {
position: absolute;
font-size: 20px;
font-family: "DOUYU";
color: #ffffff;
line-height: 18px;
display: flex;
right: 0;
top: 120px;
z-index: 1;
cursor: pointer;
span {
width: 122px;
height: 38px;
margin: 10px;
display: block;
line-height: 38px;
text-align: center;
}
.active {
background: linear-gradient(
to right,
rgba(33, 76, 124, 0.3) 20%,
rgba(152, 207, 230, 0.3) 100%,
rgba(33, 76, 124, 0.3) 20%
);
}
}
/deep/.el-table tr {
background: #16253b;
color: #fff;
font-size: 30px;
height: 50px;
.cell {
line-height: 50px;
}
}
// 去掉eltable的hover效果
::v-deep .el-table tbody tr:hover > td {
background-color: #0b679e !important;
}
//修改表头颜色
::v-deep .has-gutter {
background-color: #1969a8;
th {
background-color: #1969a8;
}
}
//奇偶行颜色
::v-deep .el-table .success-row {
background: #184167;
}
//去掉边框白线
::v-deep .el-table__row > td {
border: none;
}
::v-deep .el-table::before {
height: 0px;
}
/* 移除表头的下边框 */
::v-deep .el-table__header th {
border-bottom: none;
}
/deep/ .el-table {
tr th,
tr td {
border-right: none;
}
}
}
}
}
</style>