lishenfeng
/
ss-dp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改样式

qzc-dev
秦子超 2026-02-08 16:54:54 +08:00
parent c2153b2d0b
commit 36475743c9
7 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/Home/components/Business/SiYu/components/FloodPreview/count.js
View File

@ -7,19 +7,19 @@ const Page = ({data={}}) => {
<div className="forecast-section-count"> <div className="forecast-section-count">
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{1.18||0}<span style={{fontSize:"14px"}}>km²</span></div> <div className='forecast-section-countItem-num'>{1.18||0}<span>km²</span></div>
<div className='forecast-section-countItem-text'>受灾面积</div> <div className='forecast-section-countItem-text'>受灾面积</div>
</div> </div>
</div> </div>
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{2||0}<span style={{fontSize:"14px"}}>个</span></div> <div className='forecast-section-countItem-num'>{2||0}<span>个</span></div>
<div className='forecast-section-countItem-text'>受灾村庄</div> <div className='forecast-section-countItem-text'>受灾村庄</div>
</div> </div>
</div> </div>
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{217||0}<span style={{fontSize:"14px"}}>人</span></div> <div className='forecast-section-countItem-num'>{217||0}<span>人</span></div>
<div className='forecast-section-countItem-text'>受灾人口</div> <div className='forecast-section-countItem-text'>受灾人口</div>
</div> </div>
</div> </div>

5
src/views/Home/components/Business/SiYu/components/FloodPreview/index.js
View File

@ -70,9 +70,6 @@ const FloodPreview = ({setPlanData}) => {
setData(data||{}) setData(data||{})
}; };
console.log(radio);
return ( return (
<div className="flood-preview-section"> <div className="flood-preview-section">
<div className="section-title"> <div className="section-title">
@ -98,7 +95,7 @@ const FloodPreview = ({setPlanData}) => {
24小时降雨500mm（100年一遇） 24小时降雨500mm（100年一遇）
</div> </div>
<div className="section-title" style={{marginTop:'10px'}}> <div className="section-title marginTop10">
<img src={arrowIcon} alt="arrow" className="arrow-icon" /> <img src={arrowIcon} alt="arrow" className="arrow-icon" />
<span>淹没受灾统计</span> <span>淹没受灾统计</span>
</div> </div>

10
src/views/Home/components/Business/SiYu/components/FloodPreview/index.less
View File

@ -1,4 +1,7 @@
.flood-preview-section{ .flood-preview-section{
background: red;
overflow-x: hidden;
overflow-y: auto;
.section-title { .section-title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -17,6 +20,9 @@
text-shadow: 0 0 5px rgba(0, 160, 233, 0.5); text-shadow: 0 0 5px rgba(0, 160, 233, 0.5);
} }
} }
.marginTop10{
margin-top: 10px;
}
.flood-preview-section-radio{ .flood-preview-section-radio{
cursor: pointer; cursor: pointer;
@ -57,6 +63,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
span{
font-size: 14px;
}
} }
.forecast-section-countItem-text{ .forecast-section-countItem-text{
font-size: 13px; font-size: 13px;
@ -74,6 +83,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
height: 50px;
} }
.uav-button { .uav-button {
width: 70%; width: 70%;

5
src/views/Home/components/Business/SiYu/components/ForecastSection/charts.js
View File

@ -265,12 +265,11 @@ const Page = ({data=[]}) => {
return ( return (
<div style={{width:'100%',height:'400px',paddingTop:'10px',overflowY:'auto'}}> <div className='forecast-section-chart'>
{ {
option ? option ?
<ReactEcharts <ReactEcharts
option={option} option={option}
style={{width: "100%", height: "100%"}}
/> : <div style={{width:'100%',height: 'calc(100% - 50px)',display:'flex',alignItems:'center',justifyContent:'center'}}> /> : <div style={{width:'100%',height: 'calc(100% - 50px)',display:'flex',alignItems:'center',justifyContent:'center'}}>
<Empty description={"暂无数据"}/> <Empty description={"暂无数据"}/>
</div> </div>

8
src/views/Home/components/Business/SiYu/components/ForecastSection/count.js
View File

@ -7,25 +7,25 @@ const Page = ({data={}}) => {
<div className="forecast-section-count"> <div className="forecast-section-count">
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{data.ycSumFlood}<span style={{fontSize:"14px"}}>mm</span></div> <div className='forecast-section-countItem-num'>{data.ycSumFlood}<span>mm</span></div>
<div className='forecast-section-countItem-text'>预报面雨量</div> <div className='forecast-section-countItem-text'>预报面雨量</div>
</div> </div>
</div> </div>
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{data.ycMaxSwH}<span style={{fontSize:"14px"}}>m</span></div> <div className='forecast-section-countItem-num'>{data.ycMaxSwH}<span>m</span></div>
<div className='forecast-section-countItem-text'>最高水位</div> <div className='forecast-section-countItem-text'>最高水位</div>
</div> </div>
</div> </div>
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{data.ycMaxRkQ}<span style={{fontSize:"14px"}}>m³/s</span></div> <div className='forecast-section-countItem-num'>{data.ycMaxRkQ}<span>m³/s</span></div>
<div className='forecast-section-countItem-text'>最大入库流量</div> <div className='forecast-section-countItem-text'>最大入库流量</div>
</div> </div>
</div> </div>
<div className="forecast-section-countBox"> <div className="forecast-section-countBox">
<div className='forecast-section-countItem'> <div className='forecast-section-countItem'>
<div className='forecast-section-countItem-num'>{data.ycMaxCkQ}<span style={{fontSize:"14px"}}>m³/s</span></div> <div className='forecast-section-countItem-num'>{data.ycMaxCkQ}<span>m³/s</span></div>
<div className='forecast-section-countItem-text'>最大出库流量</div> <div className='forecast-section-countItem-text'>最大出库流量</div>
</div> </div>
</div> </div>

16
src/views/Home/components/Business/SiYu/components/ForecastSection/index.less
View File

@ -39,6 +39,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
span{
font-size: 14px;
}
} }
.forecast-section-countItem-text{ .forecast-section-countItem-text{
font-size: 13px; font-size: 13px;
@ -48,4 +51,17 @@
} }
} }
} }
.forecast-section-chart{
width: 100%;
height: 100%;
padding-top: 10px;
overflow-y: auto;
overflow-x: hidden;
.echarts-for-react {
width: 100%;
height: 400px!important;
}
}
} }

2
src/views/Home/mapToolBox/index.js
View File

@ -82,7 +82,7 @@ export default function Btn() {
} }
return ( return (
<div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}> <div className="mapToolBox" style={{right: showPanels?'23.5%':'10px'}}>
<div className='mapToolBtn'> <div className='mapToolBtn'>
<div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}> <div title={`${showPanels?'收起':'展开'}功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} /> <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/${showPanels?'shouqi.png':'zhankai.png'}`} />