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

1

This commit is contained in:
lll 2023-11-23 12:22:36 +08:00
parent b3101fbda6
commit c9830c2b2b
7 changed files with 1450 additions and 1420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@ -6011,7 +6011,7 @@
}, },
"node_modules/echarts-gl": { "node_modules/echarts-gl": {
"version": "2.0.9", "version": "2.0.9",
"resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz", "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==", "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
"dependencies": { "dependencies": {
"claygl": "^1.2.1", "claygl": "^1.2.1",
@ -17548,7 +17548,7 @@
}, },
"echarts-gl": { "echarts-gl": {
"version": "2.0.9", "version": "2.0.9",
"resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz", "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==", "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
"requires": { "requires": {
"claygl": "^1.2.1", "claygl": "^1.2.1",

69
src/views/Index.vue
View File

@ -9,15 +9,27 @@
<p>生产工艺</p> <p>生产工艺</p>
</div> </div>
<div class="box1" v-else> <div class="box1" v-else>
<img src="../assets/img/生产工艺按钮选中_hover.png" alt="" class="tabbars1" /> <img
src="../assets/img/生产工艺按钮选中_hover.png"
alt=""
class="tabbars1"
/>
<p>生产工艺</p> <p>生产工艺</p>
</div> </div>
<div class="box2" v-if="isShow"> <div class="box2" v-if="isShow">
<img src="../assets/img/能源监测按钮 拷贝.png" alt="" class="tabbars2" /> <img
src="../assets/img/能源监测按钮 拷贝.png"
alt=""
class="tabbars2"
/>
<p>能源监测</p> <p>能源监测</p>
</div> </div>
<div class="box2" v-else> <div class="box2" v-else>
<img src="../assets/img/能源监测按钮 _hover.png" alt="" class="tabbars2" /> <img
src="../assets/img/能源监测按钮 _hover.png"
alt=""
class="tabbars2"
/>
<p>能源监测</p> <p>能源监测</p>
</div> </div>
<div class="box3" v-if="isShow"> <div class="box3" v-if="isShow">
@ -25,19 +37,35 @@
<p>负荷管理</p> <p>负荷管理</p>
</div> </div>
<div class="box3" v-else> <div class="box3" v-else>
<img src="../assets/img/负荷管理按钮 拷贝_hover.png" alt="" class="tabbars3" /> <img
src="../assets/img/负荷管理按钮 拷贝_hover.png"
alt=""
class="tabbars3"
/>
<p>负荷管理</p> <p>负荷管理</p>
</div> </div>
<div class="box4" v-if="isShow"> <div class="box4" v-if="isShow">
<img src="../assets/img/能效管理按钮 拷贝.png" alt="" class="tabbars4" /> <img
src="../assets/img/能效管理按钮 拷贝.png"
alt=""
class="tabbars4"
/>
<p>能效管理</p> <p>能效管理</p>
</div> </div>
<div class="box4" v-else> <div class="box4" v-else>
<img src="../assets/img/能效管理按钮_hover.png" alt="" class="tabbars4" /> <img
src="../assets/img/能效管理按钮_hover.png"
alt=""
class="tabbars4"
/>
<p>能效管理</p> <p>能效管理</p>
</div> </div>
<div class="box5" v-if="isShow"> <div class="box5" v-if="isShow">
<img src="../assets/img/智能运维按钮 拷贝.png" alt="" class="tabbars5" /> <img
src="../assets/img/智能运维按钮 拷贝.png"
alt=""
class="tabbars5"
/>
<p>智能运维</p> <p>智能运维</p>
</div> </div>
<div class="box5" v-else> <div class="box5" v-else>
@ -49,10 +77,14 @@
<p>碳资产管理</p> <p>碳资产管理</p>
</div> </div>
<div class="box6" v-else> <div class="box6" v-else>
<img src="../assets/img/碳资产管理 拷贝_hover.png" alt="" class="tabbars6" /> <img
src="../assets/img/碳资产管理 拷贝_hover.png"
alt=""
class="tabbars6"
/>
<p>碳资产管理</p> <p>碳资产管理</p>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -65,7 +97,7 @@ export default {
data() { data() {
return { return {
isShow: true, isShow: true,
} };
}, },
}; };
</script> </script>
@ -99,7 +131,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -120,7 +152,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -141,7 +173,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -162,7 +194,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -183,7 +215,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -204,7 +236,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -225,7 +257,7 @@ export default {
font-size: 50px; font-size: 50px;
font-family: FZZhengHeiS-B-GB; font-family: FZZhengHeiS-B-GB;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} }
@ -241,4 +273,5 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
}</style> }
</style>

98
src/views/Zhou/FHGL.vue
View File

@ -96,7 +96,7 @@
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from "echarts";
import "echarts-gl"; import "echarts-gl";
import { getPie3D, getParametricEquation } from "../../utils/fhgl"; import { getPie3D, getParametricEquation } from "../../utils/fhgl";
const color = ["#3cd6b7", "#fe9326", "#124fb7", "#383893"]; const color = ["#3cd6b7", "#fe9326", "#124fb7", "#383893"];
@ -106,15 +106,15 @@ export default {
return { return {
option: { option: {
title: { title: {
text: '单位:kW' text: "单位:kW",
}, },
// tooltip: { // tooltip: {
// trigger: 'axis', // trigger: 'axis',
// }, // },
grid: { grid: {
left: '3%', left: "3%",
right: '4%', right: "4%",
bottom: '3%', bottom: "3%",
// containLabel: true // containLabel: true
}, },
// toolbox: { // toolbox: {
@ -123,17 +123,17 @@ export default {
// } // }
// }, // },
xAxis: { xAxis: {
type: 'category', type: "category",
// boundaryGap: false, // boundaryGap: false,
data: ['0', '02:30', '03:30', '04:30', '05:30', '05:30'] data: ["0", "02:30", "03:30", "04:30", "05:30", "05:30"],
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
// boundaryGap: true, // boundaryGap: true,
data: ['100', '200', '300', '400', '500'] data: ["100", "200", "300", "400", "500"],
}, },
legend: { legend: {
data: ['可调负荷', '实时负荷'], data: ["可调负荷", "实时负荷"],
x: "center", x: "center",
y: "top", y: "top",
itemGap: 200, itemGap: 200,
@ -141,39 +141,39 @@ export default {
color: "#fff", color: "#fff",
fontSize: "28px", fontSize: "28px",
}, },
fontSize: "28px" fontSize: "28px",
}, },
series: [ series: [
{ {
name: '实时负荷', name: "实时负荷",
type: 'line', type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 20, symbolSize: 20,
data: [450, 120, 450, 428, 540, 100, 520], data: [450, 120, 450, 428, 540, 100, 520],
lineStyle: { lineStyle: {
width: 5, width: 5,
color: "#3FFF5A" color: "#3FFF5A",
}, },
itemStyle: { itemStyle: {
color: "#3FFF5A" color: "#3FFF5A",
} },
}, },
{ {
name: '可调负荷', name: "可调负荷",
type: 'line', type: "line",
// stack: 'Total', // stack: 'Total',
symbol: "circle", symbol: "circle",
symbolSize: 20, symbolSize: 20,
data: [180, 420, 90, 470, 500, 90, 280], data: [180, 420, 90, 470, 500, 90, 280],
lineStyle: { lineStyle: {
width: 5, width: 5,
color: "#43FFF4" color: "#43FFF4",
}, },
itemStyle: { itemStyle: {
color: "#43FFF4" color: "#43FFF4",
}
}, },
] },
],
}, },
optionData: [ optionData: [
{ {
@ -195,7 +195,7 @@ export default {
], ],
statusChart: null, statusChart: null,
option1: {}, option1: {},
} };
}, },
methods: { methods: {
BingTu() { BingTu() {
@ -242,7 +242,8 @@ export default {
// shadowOffsety: 20, // shadowOffsety: 20,
color: "#00D2FF", color: "#00D2FF",
}, },
}]; },
];
const sum = chartData.reduce((per, cur) => per + cur.value, 0); const sum = chartData.reduce((per, cur) => per + cur.value, 0);
const gap = (1 * sum) / 100; const gap = (1 * sum) / 100;
const pieData1 = []; const pieData1 = [];
@ -273,13 +274,13 @@ export default {
color: "#fff", color: "#fff",
fontSize: 30, fontSize: 30,
fontWeight: "400", fontWeight: "400",
lineHeight: 60 lineHeight: 60,
}, },
subtextStyle: { subtextStyle: {
color: "#fff", color: "#fff",
fontSize: 26, fontSize: 26,
fontWeight: "400", fontWeight: "400",
lineHeight: 36 lineHeight: 36,
}, },
textAlign: "center", textAlign: "center",
}, },
@ -357,7 +358,7 @@ export default {
}, },
], ],
}; };
var chartDom2 = document.getElementById('bingtu'); var chartDom2 = document.getElementById("bingtu");
var myChart = echarts.init(chartDom2); var myChart = echarts.init(chartDom2);
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
@ -371,7 +372,7 @@ export default {
normal: { normal: {
show: true, show: true,
color: color[index], color: color[index],
position: 'right', position: "right",
// distance:-10, // distance:-10,
offset: [0, 3], offset: [0, 3],
formatter: [ formatter: [
@ -531,7 +532,6 @@ export default {
params.seriesName !== "mouseoutSeries" && params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "信用评价" params.seriesName !== "信用评价"
) { ) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = isSelected =
this[optionName].series[params.seriesIndex].pieStatus.selected; this[optionName].series[params.seriesIndex].pieStatus.selected;
@ -598,15 +598,15 @@ export default {
this.setLabel(); this.setLabel();
}, },
mounted() { mounted() {
var chartDom = document.getElementById('main'); var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
this.option && myChart.setOption(this.option); this.option && myChart.setOption(this.option);
this.$nextTick(() => { this.$nextTick(() => {
this.BingTu(); this.BingTu();
this.initChart(); this.initChart();
}) });
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.box { .box {
@ -615,6 +615,7 @@ export default {
padding-top: 500px; padding-top: 500px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
background-color: transparent;
justify-content: space-between; justify-content: space-between;
} }
@ -678,7 +679,7 @@ export default {
font-size: 54px; font-size: 54px;
font-family: Impact; font-family: Impact;
font-weight: 400; font-weight: 400;
color: #58FD64; color: #58fd64;
// line-height: 341px; // line-height: 341px;
span { span {
@ -688,7 +689,7 @@ export default {
margin-left: 18px; margin-left: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 341px; // line-height: 341px;
} }
} }
@ -700,7 +701,7 @@ export default {
font-size: 36px; font-size: 36px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 196px; // line-height: 196px;
} }
} }
@ -726,7 +727,7 @@ export default {
font-size: 54px; font-size: 54px;
font-family: Impact; font-family: Impact;
font-weight: 400; font-weight: 400;
color: #03FFD8; color: #03ffd8;
// line-height: 341px; // line-height: 341px;
span { span {
@ -736,7 +737,7 @@ export default {
font-size: 33px; font-size: 33px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
} }
@ -747,7 +748,7 @@ export default {
font-size: 36px; font-size: 36px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 196px; // line-height: 196px;
} }
} }
@ -774,7 +775,7 @@ export default {
text-align: center; text-align: center;
font-family: Impact; font-family: Impact;
font-weight: 400; font-weight: 400;
color: #36B1FF; color: #36b1ff;
// line-height: 341px; // line-height: 341px;
span { span {
@ -784,7 +785,7 @@ export default {
font-size: 33px; font-size: 33px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
} }
@ -795,7 +796,7 @@ export default {
font-size: 36px; font-size: 36px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 196px; // line-height: 196px;
} }
} }
@ -821,7 +822,7 @@ export default {
font-size: 54px; font-size: 54px;
font-family: Impact; font-family: Impact;
font-weight: 400; font-weight: 400;
color: #03FFD8; color: #03ffd8;
// line-height: 341px; // line-height: 341px;
span { span {
@ -831,7 +832,7 @@ export default {
margin-left: 18px; margin-left: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 341px; // line-height: 341px;
} }
} }
@ -843,7 +844,7 @@ export default {
font-size: 36px; font-size: 36px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 196px; // line-height: 196px;
} }
} }
@ -905,7 +906,7 @@ export default {
font-size: 42px; font-size: 42px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 98px; line-height: 98px;
} }
@ -915,7 +916,7 @@ export default {
font-size: 42px; font-size: 42px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #40FFF1; color: #40fff1;
line-height: 98px; line-height: 98px;
} }
} }
@ -972,7 +973,6 @@ export default {
font-size: 30px; font-size: 30px;
font-family: "MicrosoftYaHei"; font-family: "MicrosoftYaHei";
} }
} }
#bingtu2 { #bingtu2 {
@ -995,7 +995,6 @@ export default {
font-family: "MicrosoftYaHei"; font-family: "MicrosoftYaHei";
} }
} }
} }
} }
@ -1028,4 +1027,3 @@ export default {
} }
} }
</style> </style>

42
src/views/Zhou/KDFH.vue
View File

@ -67,7 +67,7 @@
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from "echarts";
export default { export default {
name: "FHGL", name: "FHGL",
data() { data() {
@ -87,12 +87,12 @@ export default {
date1: "一级", date1: "一级",
date2: "45.00kW", date2: "45.00kW",
date3: "1小时", date3: "1小时",
}],
}
}, },
mounted() { ],
} };
} },
mounted() {},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.box { .box {
@ -101,6 +101,7 @@ export default {
padding-top: 500px; padding-top: 500px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
background-color: transparent;
justify-content: space-between; justify-content: space-between;
} }
@ -178,7 +179,7 @@ export default {
} }
// 去掉eltable的hover效果 // 去掉eltable的hover效果
::v-deep .el-table tbody tr:hover>td { ::v-deep .el-table tbody tr:hover > td {
background-color: #102b49 !important; background-color: #102b49 !important;
} }
@ -192,7 +193,7 @@ export default {
} }
//去掉边框白线 //去掉边框白线
::v-deep .el-table__row>td { ::v-deep .el-table__row > td {
border: none; border: none;
} }
@ -216,7 +217,7 @@ export default {
font-size: 22px; font-size: 22px;
font-family: SourceHanSansCN, SourceHanSansCN; font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
@ -225,7 +226,7 @@ export default {
width: 186px; width: 186px;
height: 41px; height: 41px;
font-size: 42px; font-size: 42px;
color: #56F671; color: #56f671;
line-height: 20px; line-height: 20px;
padding-right: 9px; padding-right: 9px;
} }
@ -250,7 +251,7 @@ export default {
margin-top: 20px; margin-top: 20px;
font-size: 59px; font-size: 59px;
font-family: Impact; font-family: Impact;
color: #58FD64; color: #58fd64;
// line-height: 322px; // line-height: 322px;
} }
@ -262,7 +263,6 @@ export default {
color: #fff; color: #fff;
font-size: 36px; font-size: 36px;
opacity: 1; opacity: 1;
;
} }
span { span {
@ -272,7 +272,7 @@ export default {
margin-left: 18px; margin-left: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
} }
@ -297,7 +297,7 @@ export default {
margin-top: 20px; margin-top: 20px;
font-size: 59px; font-size: 59px;
font-family: Impact; font-family: Impact;
color: #03FFD8; color: #03ffd8;
// line-height: 322px; // line-height: 322px;
} }
@ -309,7 +309,6 @@ export default {
color: #fff; color: #fff;
font-size: 36px; font-size: 36px;
opacity: 1; opacity: 1;
;
// line-height: 185px; // line-height: 185px;
} }
@ -320,7 +319,7 @@ export default {
margin-left: 18px; margin-left: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 341px; // line-height: 341px;
} }
} }
@ -346,7 +345,7 @@ export default {
margin-top: 20px; margin-top: 20px;
font-size: 59px; font-size: 59px;
font-family: Impact; font-family: Impact;
color: #36B1FF; color: #36b1ff;
// line-height: 322px; // line-height: 322px;
} }
@ -358,7 +357,6 @@ export default {
color: #fff; color: #fff;
font-size: 36px; font-size: 36px;
opacity: 1; opacity: 1;
;
} }
span { span {
@ -368,7 +366,7 @@ export default {
margin-left: 18px; margin-left: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
} }
@ -393,7 +391,7 @@ export default {
margin-top: 20px; margin-top: 20px;
font-size: 59px; font-size: 59px;
font-family: Impact; font-family: Impact;
color: #03FFD8; color: #03ffd8;
// line-height: 322px; // line-height: 322px;
} }
@ -405,7 +403,6 @@ export default {
color: #fff; color: #fff;
font-size: 36px; font-size: 36px;
opacity: 1; opacity: 1;
;
// line-height: 185px; // line-height: 185px;
} }
@ -416,7 +413,7 @@ export default {
margin-left: 18px; margin-left: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
// line-height: 341px; // line-height: 341px;
} }
} }
@ -454,4 +451,3 @@ export default {
} }
} }
</style> </style>

1
src/views/lll/NYJCD.vue
View File

@ -220,6 +220,7 @@ export default {
height: 100%; height: 100%;
padding-top: 500px; padding-top: 500px;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }

1
src/views/lll/PDS.vue
View File

@ -42,6 +42,7 @@ export default {
padding-top: 500px; padding-top: 500px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
background-color: transparent;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 1237px; width: 1237px;

1
src/views/lll/ZNYW.vue
View File

@ -498,6 +498,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: transparent;
} }
.left { .left {
width: 1237px; width: 1237px;