zcloud_gbs
/
zcloud-gbs-bi-react
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

master
LiuJiaNan 2026-01-21 10:16:36 +08:00
parent 5281d4e4af
commit fb5c81f758
6 changed files with 53 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Container/Map/components/Content/IndexInfo/Bottom/index.less
View File

@ -1,14 +1,12 @@
.index_info_container {
.bottom-container_con {
flex: 1;
width: calc(100% - 880px);
height: 240px;
padding: 20px;
box-sizing: border-box;
margin-top: 750px;
margin-left: 10px;
margin-right: 10px;
position: absolute;
z-index: 2;
bottom: -1030px;
left: 50%;
transform: translateX(-50%);
.top_container {
display: flex;
@ -27,10 +25,10 @@
background: rgba(1, 50, 115, 0.5);
line-height: 30px;
margin-left: 2px;
font-size: 13px;
.item {
padding: 0 10px;
font-size: 13px;
&:hover {
cursor: pointer;
@ -47,17 +45,17 @@
.bottom-container {
display: flex;
justify-content: space-between;
gap: 10px;
.left {
width: 60%;
width: 66%;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
padding: 10px;
margin-right: 10px;
.main {
width: 100%;
width: 870px;
height: 160px;
background-size: 100% 100%;
margin-top: 10px;
@ -105,7 +103,7 @@
}
.right {
width: 40%;
width: 33%;
background: rgba(0, 41, 82, 0.68);
border-radius: 4px;
border: 1px solid rgba(44, 105, 172, 0.6);
@ -159,3 +157,4 @@
}
}
}

6
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.js
View File

@ -4,12 +4,12 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img9 from "~/assets/images/public/bigScreen/bg9.png";
import img8 from "~/assets/images/public/bigScreen/bg10.png";
import img7 from "~/assets/images/public/bigScreen/ico3.png";
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
import img2 from "~/assets/images/public/weather/1.png";
import left from "~/assets/images/public/bigScreen/leftbg.png";
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
import { initEcharts1 } from "./echarts";
import "./index.less";
@ -67,7 +67,7 @@ function LeftScreen() {
return (
<div className="left-container">
<div className="left-container_bg" style={{ backgroundImage: `url(${left})` }}></div>
<div className="left-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
<div className="block1">
<Title title="天气预报情况" />
<div className="main">
@ -174,7 +174,7 @@ function LeftScreen() {
<div className="block3">
<Title title="领域整改情况统计" />
<div className="main">
<div ref={main1Ref} style={{ width: "400px", height: "180px" }} />
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
</div>
</div>
<div className="block4">

45
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.less
View File

@ -1,24 +1,25 @@
.index_info_container {
.left-container {
width: 400px;
margin-top: 60px;
.left-container_bg{
width: 100%;
width: 600px;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.left-container {
width: 400px;
position: absolute;
left: 20px;
top: 60px;
max-height: calc(100vh - 75px);
.block1 {
border-radius: 4px;
.main {
display: flex;
align-items: center;
@ -63,8 +64,7 @@
grid-template-columns: 1fr 1fr 2fr;
color: #ffffff;
padding: 5px;
background-size: 100% 100%;
font-size: 12px;
}
.scroll {
@ -76,7 +76,7 @@
grid-template-columns: 1fr 1fr 2fr;
color: #ffffff;
padding: 5px;
font-size: 12px;
margin: 5px auto;
.fc1 {
@ -96,11 +96,9 @@
}
.block2 {
margin-top: 20px;
margin-top: 10px;
border-radius: 4px;
.main {
.warning {
border-style: solid;
@ -124,7 +122,7 @@
justify-content: space-between;
.list {
width: 49%;
width: 48%;
background-size: 100% 100%;
padding: 5px;
color: #ffffff;
@ -142,7 +140,7 @@
.item {
width: 50%;
margin: 2px 0;
font-size: 12px;
.fcr {
color: #f90102;
@ -157,9 +155,8 @@
.main_con1 {
.item {
margin: 2px 0;
font-size: 12px;
line-height: 22px;
word-break: break-all;
width: 100%;
.fcr {
color: #f90102;
@ -171,6 +168,7 @@
display: flex;
justify-content: space-between;
border-bottom: 1px solid #163682;
font-size: 12px;
line-height: 30px;
.info {
@ -193,17 +191,14 @@
}
.block3 {
margin-top: 0;
margin-top: 10px;
border-radius: 4px;
width: 100%;
}
.block4 {
margin-top: 20px;
margin-top: 10px;
border-radius: 4px;
.main {
.table {
margin-top: 10px;
@ -213,13 +208,13 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
color: #ffffff;
padding: 5px;
font-size: 12px;
background: rgba(39, 101, 175, 0.5);
text-align: center;
background-size: 100% 100%;
}
.scroll {
height: 100px;
height: 120px;
overflow-y: hidden;
.table-container {
@ -227,7 +222,7 @@
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
color: #ffffff;
padding: 5px;
font-size: 12px;
margin: 5px auto;
background: rgba(17, 51, 122, 0.5);
text-align: center;

10
src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.less
View File

@ -3,17 +3,20 @@
width: 600px;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
position: fixed;
top: 0;
right: 0;
z-index: -1;
transform: rotate(180deg);
}
.right-container {
width: 400px;
margin-top: 60px;
position: absolute;
right: 20px;
top: 60px;
max-height: calc(100vh - 75px);
.block1 {
@ -190,3 +193,4 @@
}
}
}

2
src/pages/Container/Map/components/Content/IndexInfo/index.js
View File

@ -8,11 +8,9 @@ import "./index.less";
function IndexInfo(props) {
return (
<div className="index_info_container">
<div className="index_info_con">
<LeftPanel />
<Bottom />
<RightPanel />
</div>
<Search />
<Btn history={props.history} />
</div>

11
src/pages/Container/Map/components/Content/IndexInfo/index.less
View File

@ -1,14 +1,3 @@
.index_info_container {
overflow: hidden;
.index_info_con{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
}