-
-
- 平均停电频次
- {{ CompanyInfo.xlcd }}
-
+
@@ -1017,7 +1113,7 @@ export default {
clearInterval(this.myTimer);
this.beginShowing();
};
-
+ this.xianDuan();
this.detailedTwo11()
this.horizontalChart()
this.detailedOne()
@@ -1027,6 +1123,7 @@ export default {
this.roseCharts()
this.detailen1();
this.handleDate(0);
+
let that = this;
//历史故障接口
@@ -1046,6 +1143,16 @@ export default {
this.timer = null;
},
methods: {
+ //地图画线
+ xianDuan() {
+ var canvas = document.getElementById("myCanvas");
+ var ctx = canvas.getContext("2d");
+ ctx.moveTo(650, 450); // moveTo(x,y) 定义线条开始坐标
+ ctx.lineTo(750, 200); // lineTo(x,y) 定义线条结束坐标
+ ctx.strokeStyle = "orange";
+ ctx.lineWidth = 3;
+ ctx.stroke();
+ },
routerTo(data) {
if (data == '盐城地区分布光伏运行监测') {
this.$router.push("/stationBuilding");
@@ -1075,7 +1182,7 @@ export default {
detailen1() {
var fontColor = "#30eee9";
var myChart = this.$echarts.init(document.getElementById("detailen"));
- var option = {
+ var option = {
tooltip: {
trigger: "axis",
axisPointer: {
@@ -1088,17 +1195,17 @@ export default {
color: "#ffffff", //字体颜色
},
- data: ["关联电网事故", "关联检修单"],
+ data: ["配变名称"],
},
xAxis: [
{
type: "category",
data: [
- "10kv北红线124",
- "10kv北红线125",
- "10kv北红线126",
- "10kv北红线127",
- "10kv北红线128",
+ "钱南1配变",
+ "钱南2配变",
+ "钱南3配变",
+ "钱南4配变",
+ "钱南5配变",
],
axisLabel: {
show: true,
@@ -1117,20 +1224,31 @@ export default {
color: "#ffffff",
},
},
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ // color: 'rgba(66, 192, 255, .3)',
+ color: "rgba(102,102,102,0.6)",
+ width: 1,
+ },
+ },
},
],
series: [
{
- name: "关联电网事故",
+ name: "配变名称",
type: "bar",
+ barWidth: 40, // 柱子宽度核心代码
itemStyle: {
- color: "#00ffff", // 柱状图颜色
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(86,254,226,.2) " },
+ { offset: 0.5, color: "rgb(86,254,226,.6)" },
+ { offset: 0, color: "rgb(86,254,226)" },
+ ]),
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
- emphasis: {
- focus: "series",
- },
data: [320, 332, 301, 334, 390],
},
],
@@ -1282,32 +1400,37 @@ export default {
let myChart = this.$echarts.init(document.getElementById("detailedOne"));
- var option = {
+ var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
+ legend: {
+ textStyle: {
+ fontSize: 18, //字体大小
+ color: "#ffffff", //字体颜色
+ },
+
+ data: ["配变名称"],
+ },
xAxis: [
{
type: "category",
- data: ["2018", "2019", "2020", "2021", "2022"],
+ data: [
+ "钱南1配变",
+ "钱南2配变",
+ "钱南3配变",
+ "钱南4配变",
+ "钱南5配变",
+ ],
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
- fontSize: "18",
},
},
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- alignWithLabel: true,
- },
- splitArea: { show: false },
},
],
yAxis: [
@@ -1317,28 +1440,33 @@ export default {
axisLabel: {
textStyle: {
color: "#ffffff",
- fontSize: "18",
+ },
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ // color: 'rgba(66, 192, 255, .3)',
+ color: "rgba(102,102,102,0.6)",
+ width: 1,
},
},
},
],
series: [
{
- name: "预计年变化趋势",
+ name: "配变名称",
type: "bar",
- barWidth: 40,
+ barWidth: 40, // 柱子宽度核心代码
itemStyle: {
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- // { offset: 1, color: "rgba(86,254,226,.2) " },
- // { offset: 0.5, color: "rgb(86,254,226,.6)" },
- // { offset: 0, color: "rgb(86,254,226)" },
- // ]),
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 1, color: "rgba(86,254,226,.2) " },
+ { offset: 0.5, color: "rgb(86,254,226,.6)" },
+ { offset: 0, color: "rgb(86,254,226)" },
+ ]),
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
- emphasis: {
- focus: "series",
- },
data: [320, 332, 301, 334, 390],
},
],
@@ -1559,23 +1687,18 @@ export default {
detailedTwo() {
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
- var option = {
- tooltip: {
- show: true,
- trigger: "item",
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
+ var option = {
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
- color: "#fff",
- fontSize: "16",
+ color: fontColor,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#397cbc",
+ },
},
axisTick: {
show: false,
@@ -1586,28 +1709,69 @@ export default {
color: "#195384",
},
},
- data: ["2018", "2019", "2020", "2021", "2022"],
- },
- yAxis: {
- type: "value",
- axisLine: {
- lineStyle: {
- color: "#fff",
- },
+ data: [
+ "0:00",
+ "3:00",
+ "6:00",
+ "9:00",
+ "12:00",
+ "15:00",
+ "18:00",
+ "21:00",
+ "24:00",
+ ],
+ axisTick: {
+ show: false,
},
},
+ yAxis: [
+ {
+ type: "value",
+ name: "单位：kw",
+ min: 0,
+ max: 1000,
+ show: true,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ // color: 'rgba(66, 192, 255, .3)',
+ color: "rgba(102,102,102,0.6)",
+ width: 1,
+ },
+ },
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#2ad1d2",
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#27b4c2",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
series: [
{
- name: "总投资",
+ data: [720, 632, 801, 734, 470, 670, 720, 123, 567],
type: "line",
- stack: "Total",
symbol: "none",
- data: [80, 132, 101, 134, 121],
+ lineStyle: {
+ color: "#00ffff",
+ width: 2,
+ },
itemStyle: {
normal: {
- color: "yellow",
+ color: "00ffff",
lineStyle: {
- color: "yellow",
+ color: "00ffff",
+ width: 3,
+ type: "solid",
},
},
},
@@ -1622,23 +1786,18 @@ export default {
detailedTwo11() {
var fontColor = '#30eee9';
var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
- var option = {
- tooltip: {
- show: true,
- trigger: "item",
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
+ var option = {
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
- color: "#fff",
- fontSize: "16",
+ color: fontColor,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#397cbc",
+ },
},
axisTick: {
show: false,
@@ -1649,28 +1808,69 @@ export default {
color: "#195384",
},
},
- data: ["2018", "2019", "2020", "2021", "2022"],
- },
- yAxis: {
- type: "value",
- axisLine: {
- lineStyle: {
- color: "#fff",
- },
+ data: [
+ "0:00",
+ "3:00",
+ "6:00",
+ "9:00",
+ "12:00",
+ "15:00",
+ "18:00",
+ "21:00",
+ "24:00",
+ ],
+ axisTick: {
+ show: false,
},
},
+ yAxis: [
+ {
+ type: "value",
+ name: "单位：kw",
+ min: 0,
+ max: 1000,
+ show: true,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ // color: 'rgba(66, 192, 255, .3)',
+ color: "rgba(102,102,102,0.6)",
+ width: 1,
+ },
+ },
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#2ad1d2",
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#27b4c2",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
series: [
{
- name: "总投资",
+ data: [720, 632, 801, 734, 470, 670, 720, 123, 567],
type: "line",
- stack: "Total",
symbol: "none",
- data: [80, 132, 101, 134, 121],
+ lineStyle: {
+ color: "#00ffff",
+ width: 2,
+ },
itemStyle: {
normal: {
- color: "yellow",
+ color: "00ffff",
lineStyle: {
- color: "yellow",
+ color: "00ffff",
+ width: 3,
+ type: "solid",
},
},
},
@@ -1684,149 +1884,74 @@ export default {
},
horizontalChart() {
var myChart = this.$echarts.init(document.getElementById("horizontalChart"));
- var honorData = [
- {
- name: "用电量（单位：亿）",
- data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
- },
- {
- name: "碳排放量（单位：万）",
- data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
- },
-
- ];
- var honorXAxisData = [
- "盐都区",
- "建湖县",
- "射阳县",
- "阜宁县",
- "滨海县",
- ];
- // // 设置灰色背景色的长度
- var isMax = 2000;
- var bjData1 = [
- isMax,
- isMax,
- isMax,
- isMax,
- isMax,
- isMax,
- isMax,
- isMax,
- isMax,
- ];
+ var bg =
+ "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
+ var bar =
+ "image://data:image/png;base64,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";
+ var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
+ var barWidth = 20;
+ var maxNum = 0;
+ for (var i = 0; i < data.length; i++) {
+ if (data[i] > maxNum) {
+ maxNum = data[i];
+ }
+ }
var option = {
- color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "none",
- },
- },
-
-
- legend: {
- right: 5,
- top: "5%",
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 15,
- textStyle: {
- color: "#ACCFFF",
- fontSize: 16,
- },
- },
grid: {
- left: "5%",
- right: "5%",
- bottom: "5%",
top: "10%",
- containLabel: true,
+ left: "10%",
+ right: "12%",
+ bottom: "0%",
},
- xAxis: [
- {
- type: "value",
+ xAxis: {
+ show: false,
+ },
+ yAxis: {
+ data: data.map((item, index) => `No. ${index}`),
+ splitLine: {
show: false,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#6B9DD7",
- fontSize: 16, // 文字大小
- fontWeight: 400,
- interval: 0,
- formatter: function (value) {
- return value + "(万元)";
- },
- },
- splitLine: {
- show: false,
- },
},
- ],
- yAxis: [
- {
- type: "category",
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#6B9DD7",
- fontSize: 16, // 文字大小
- fontWeight: 400,
- interval: 0,
- },
- offset: 20,
- data: honorXAxisData,
+ axisLabel: {
+ textStyle: { fontSize: 18, color: "#02afff" },
},
- ],
+ axisLine: {
+ show: false,
+ },
+ axisTick: false,
+ },
series: [
{
- name: "用电量（单位：亿）",
- type: "bar",
- stack: "zongliang",
- barWidth: "35%",
- zlevel: 10,
- label: {
- normal: {
- show: true,
- position: "inside",
- textStyle: {
- color: "#fff",
- fontSize: 14,
- },
- },
- },
- data: honorData[0].data,
+ type: "pictorialBar",
+ barWidth: barWidth,
+ zlevel: 2,
+ data: data.map(function (item) {
+ return {
+ value: item,
+ symbol: bar,
+ };
+ }),
},
{
- name: "碳排放量（单位：万）",
- type: "bar",
- stack: "zongliang",
- barWidth: "35%",
- zlevel: 10,
+ type: "pictorialBar",
+ barWidth: barWidth,
+ data: data.map(function (item) {
+ return {
+ realValue: item,
+ value: maxNum,
+ symbol: bg,
+ };
+ }),
label: {
- normal: {
- show: true,
- position: "top",
- formatter: function (params) {
- console.log(params);
- // return params.seriesName + params.value ;
- return "完成" + params.value;
- },
- textStyle: {
- color: "#fff",
- fontSize: 12,
- },
+ show: true,
+ position: "right",
+ distance: 80,
+ align: "right",
+ formatter: function (params) {
+ return params.data.realValue + " 万";
},
+ color: "#02afff",
+ fontSize: 18,
},
- data: honorData[1].data,
},
],
};
@@ -2707,25 +2832,30 @@ export default {
type: "shadow",
},
},
+ // legend: {
+ // textStyle: {
+ // fontSize: 18, //字体大小
+ // color: "#ffffff", //字体颜色
+ // },
+
+ // data: ["配变名称"],
+ // },
xAxis: [
{
type: "category",
- data: ["2018", "2019", "2020", "2021", "2022"],
+ data: [
+ "钱南1配变",
+ "钱南2配变",
+ "钱南3配变",
+ "钱南4配变",
+ "钱南5配变",
+ ],
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
- fontSize: "18",
},
},
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- alignWithLabel: true,
- },
- splitArea: { show: false },
},
],
yAxis: [
@@ -2735,16 +2865,24 @@ export default {
axisLabel: {
textStyle: {
color: "#ffffff",
- fontSize: "18",
+ },
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ // color: 'rgba(66, 192, 255, .3)',
+ color: "rgba(102,102,102,0.6)",
+ width: 1,
},
},
},
],
series: [
{
- name: "预计年变化趋势",
+ name: "配变名称",
type: "bar",
- barWidth: 40,
+ barWidth: 40, // 柱子宽度核心代码
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(86,254,226,.2) " },
@@ -2754,9 +2892,6 @@ export default {
borderRadius: [7, 7, 0, 0], // 柱状图圆角
borderWidth: 0,
},
- emphasis: {
- focus: "series",
- },
data: [320, 332, 301, 334, 390],
},
],
@@ -2804,8 +2939,8 @@ export default {
// this.$refs.iframe.contentWindow.fullscreen(1);
document.getElementById("left").style.display = "none";
document.getElementById("right").style.display = "none";
- document.getElementById("middle").style.width = "100%";
- document.getElementById("middle").style.height = "100%";
+ // document.getElementById("middle").style.width = "100%";
+ // document.getElementById("middle").style.height = "100%";
document.getElementById("detailed").style.display = "none";
document.getElementById("threeModel").style.height = "100%";
document.getElementById("threeModel").style.width = "100%";
@@ -2836,8 +2971,8 @@ export default {
document.getElementById("left").style.width = "17.18%";
document.getElementById("right").style.display = "flex";
document.getElementById("right").style.width = "17.18%";
- document.getElementById("middle").style.width = "55.7%";
- document.getElementById("middle").style.height = "100%";
+ // document.getElementById("middle").style.width = "55.7%";
+ // document.getElementById("middle").style.height = "100%";
document.getElementById("detailed").style.display = "flex";
document.getElementById("detailed").style.height = "350px";
}
@@ -3084,35 +3219,49 @@ export default {
justify-content: space-between;
.line {
- width: 262px;
- display: flex;
+ width: 30%;
+ // display: flex;
flex-flow: column nowrap;
.total {
- display: flex;
+ // display: flex;
flex-flow: row nowrap;
justify-content: space-around;
margin-bottom: 15%;
-
+ height: 100%;
.num {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
color: #ffffff;
-
+ width: 100%;
+
+ .num1{
+ background: url("../assets/indexN/总数据标题框.png") no-repeat;
+ width: 100%;
+ height: 100%;
+ background-size: 100%;
+ line-height: 250%;
+ text-align: center;
+ }
.numText {
color: #ffffff;
+ background: url("../assets/indexN/总数据数据框.png") no-repeat;
+ background-size: 100%;
+ width: 100%;
+ height: 74px;
}
.numText:before {
content: attr(text);
position: absolute;
z-index: 10;
- color: rgb(86, 254, 246) !important;
+ color: rgb(254, 209, 86) !important;
-webkit-mask: linear-gradient(to top,
- rgb(86, 244, 254),
+ rgb(254, 162, 86),
transparent);
+
}
}
}
@@ -3294,95 +3443,98 @@ export default {
flex-flow: column nowrap;
justify-content: space-between;
.imgboxone {
- background: url("../assets/02/地图弹窗三个数据外框.png") no-repeat;
- background-size: 100%;
- float: right;
- width: 40vh;
- height: 25vh;
- position: relative;
- top: 5vh;
- right: 1vh;
+ background: url("../assets/indexN/中间总数据外框.png") no-repeat;
+ background-size: 100%;
+ width: 80%;
+ height: 20%;
+ position: relative;
+ top: -28%;
+ left: 19%;
.contents {
- padding: 10px 10px 10px 10px;
- box-sizing: border-box;
+ // height: 90%;
+ position: absolute;
+ padding: 10px;
+ height: 100%;
+ width: 96%;
display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
-
+ flex-direction: row;
+ /* 平分剩余空间 */
+ justify-content: space-around;
.lines {
- width: 100%;
- display: flex;
- flex-flow: column nowrap;
- background: url("../assets/02/弹窗里的小框子.png") no-repeat;
+ width: 106%;
+ padding: 10px 0 0 0px;
+ // background: url("../assets/index/总数据小框.png") no-repeat;
}
.total {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-around;
- margin-bottom: 15%;
-
.num {
- float: left;
- display: flex;
+ // display: flex;
flex-flow: column nowrap;
justify-content: center;
- align-items: center;
+ align-items: left;
color: #ffffff;
+ span {
+ font-size: 20px;
+ }
+ h5 {
+ font-size: 34px;
+ }
+ .yellow {
+ padding-top: 30px;
+ color: yellow;
+ font-size: 24px;
+ }
+ .orange {
+ padding-top: 30px;
+ color: orange;
+ font-size: 24px;
+ }
+ .yellows {
+ padding-top: 20px;
+ color: yellow;
+ font-size: 24px;
+ }
}
}
}
}
.imgboxtwo {
- padding: 0 0 0 20px;
- background: url("../assets/02/地图弹窗四个内容的框.png") no-repeat;
+ background: url("../assets/indexN/弹窗.png") no-repeat;
background-size: 100%;
- float: left;
- width: 40vh;
- height: 25vh;
+ float: right;
+ right: 2%;
+ top: 20%;
+ width: 28vh;
+ height: 100%;
position: relative;
- top: 52vh;
- left: 30vh;
- display: flex;
- .contentUl {
- display: flex;
- margin: 0;
- padding: 10px;
- width: 100%;
- height: 100%;
- /* flex布局 */
- display: flex;
- // 开启换行
- flex-wrap: wrap;
- // 主轴上两端对齐
+ .content {
+ padding: 5px;
+ box-sizing: border-box;
+ // display: flex;
+ flex-flow: row nowrap;
justify-content: space-between;
- // 副轴上两端对齐
- align-content: space-between;
- //li盒子大小设置
- li {
- h5 {
- float: left;
- }
- span {
- font-size: 30px;
- }
- width: 49.5%;
- //高度调整
- height: 49%;
- list-style: none;
+
+ .line {
+ width: 100%;
+ height: 100%;
+ margin-left: 5%;
+ text-align: left;
font-size: 24px;
color: #fff;
- background: url("../assets/02/弹窗里的小框子.png") no-repeat;
}
}
}
-
.map {
background: url("../assets/indexN/地图.png") no-repeat;
vertical-align: middle;
display: table-cell;
text-align: center;
margin-left: -20%;
+ .allimg {
+ position: relative;
+ left: 31%;
+ top: 35%;
+ }
}
}
@@ -3417,7 +3569,203 @@ export default {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
-
+ .contentUl {
+ display: flex;
+ flex-wrap: wrap;
+ height: 20%;
+ width: 100%;
+ position: relative;
+ .top {
+ position: relative;
+ flex-basis: calc(100% / 3);
+ height: 50%;
+ left: 33%;
+ img {
+ margin-top: 15%;
+ }
+ .texts {
+ color: orange;
+ position: absolute;
+ z-index: 2;
+ left: 32%;
+ top: 25%;
+ align-items: center;
+ font-size: 32px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ padding-top: 10%;
+ }
+ }
+ .top1 {
+ position: absolute;
+ flex-basis: calc(100% / 3);
+ height: 100%;
+ img {
+ margin-top: 30%;
+ }
+ .texts {
+ color: #fff;
+ position: absolute;
+ z-index: 2;
+ left: 0%;
+ top: 27%;
+ width: 87%;
+ height: 100%;
+ padding-top: 27%;
+ background: url("../assets/indexN/乡村图标2.png") no-repeat;
+ background-size: 100%;
+ align-items: center;
+ font-size: 24px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ padding-top: 130%;
+ }
+ }
+ .top2 {
+ position: absolute;
+ flex-basis: calc(100% / 3);
+ height: 100%;
+ left: 21%;
+ top: -33%;
+ img {
+ margin-top: 30%;
+ }
+ .texts {
+ color: #fff;
+ position: absolute;
+ z-index: 2;
+ left: 0%;
+ top: 27%;
+ width: 87%;
+ height: 100%;
+ padding-top: 27%;
+ background: url("../assets/indexN/乡村图标2.png") no-repeat;
+ background-size: 100%;
+ align-items: center;
+ font-size: 24px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ padding-top: 130%;
+ }
+ }
+ .top3 {
+ position: absolute;
+ flex-basis: calc(100% / 3);
+ height: 100%;
+ left: 29%;
+ top: 50%;
+ img {
+ margin-top: 30%;
+ }
+ .texts {
+ color: #fff;
+ position: absolute;
+ z-index: 2;
+ left: 0%;
+ top: 27%;
+ width: 87%;
+ height: 100%;
+ padding-top: 27%;
+ background: url("../assets/indexN/乡村图标2.png") no-repeat;
+ background-size: 100%;
+ align-items: center;
+ font-size: 24px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ padding-top: 130%;
+ }
+ }
+ .top4 {
+ position: absolute;
+ flex-basis: calc(100% / 3);
+ height: 100%;
+ left: 64%;
+ top: 15%;
+ img {
+ margin-top: 30%;
+ }
+ .texts {
+ color: #fff;
+ position: absolute;
+ z-index: 2;
+ left: 0%;
+ top: 27%;
+ width: 87%;
+ height: 100%;
+ padding-top: 27%;
+ background: url("../assets/indexN/乡村图标2.png") no-repeat;
+ background-size: 100%;
+ align-items: center;
+ font-size: 24px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ padding-top: 130%;
+ }
+ }
+ .top5 {
+ position: absolute;
+ flex-basis: calc(100% / 3);
+ height: 100%;
+ left: 82%;
+ top: -22%;
+ img {
+ margin-top: 30%;
+ }
+ .texts {
+ color: #fff;
+ position: absolute;
+ z-index: 2;
+ left: 0%;
+ top: 27%;
+ width: 87%;
+ height: 100%;
+ padding-top: 27%;
+ background: url("../assets/indexN/乡村图标2.png") no-repeat;
+ background-size: 100%;
+ align-items: center;
+ font-size: 24px;
+ }
+ h4 {
+ color: #fff;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ line-height: 1;
+ padding-top: 130%;
+ }
+ }
+ }
.line {
width: 262px;
display: flex;
![\"\"](\"../assets/indexN/大丰市选中.png\")
\r\n ![](\"../assets/indexN/图标1.png\")
\r\n ![](\"../assets/indexN/图标2.png\")
\r\n ![](\"../assets/indexN/图标3.png\")
\r\n ![](\"../assets/indexN/图标4.png\")
\r\n ![](\"../assets/indexN/乡村图标1.png\")
\r\n 
+ ![\"\"](\"./../assets/indexN/标题箭头.png\")
\r\n 盐城地区分布光伏运行监测\r\n ![\"\"](\"./../assets/indexN/标题箭头1.png\")
\r\n ![](\"../assets/images/baojing.png\")
\r\n ![](\"@/assets/images/close.png\")
\r\n 
+ 
+ 
+ 
+ 
+