free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

feat:首页轮播图

dev
zhaobing 2 years ago
parent
60dad3a4d5
commit
21c2a0e3af
2 changed files with 55 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  2. 23
      web/client/src/sections/quanju/containers/footer/operation/style.less

77
web/client/src/sections/quanju/containers/footer/guanli/index.js
View File

@ -136,46 +136,45 @@ const Guanli = (props) => {
// } // }
const renderContent = rightitemlist.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => { const renderContent = rightitemlist.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
return ( return (
<div key={index} style={{ width: '100%', }} className='carCard'> <div key={index} style={{}} className='carCardRight'>
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden', display: "flex" }}> {picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 10px" }}>
{picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 0px 0px 20px" }}> {picfile?.map(v => <div style={{ width: 200, height: 200 }}>
{picfile?.map(v => <div style={{ width: 200, height: 200 }}> <img className='picfileimg'
<img className='picfileimg' style={{ width: 200, height: 150, display: 'inline-block', }}
style={{ width: 200, height: 150, display: 'inline-block', }} // src={`/_file-server/${v.storageUrl}`}
// src={`/_file-server/${v.storageUrl}`} src={v.url}
src={v.url} width={`200px`}
width={`200px`} />
/> </div>)}
</div>)} </Carousel>
</Carousel> : <div style={{
: <div style={{ width: 200, height: 200, margin: "20px 0px 0px 20px",
width: 200, height: 200, margin: "20px 0px 0px 20px", }} />
}} /> }
} <div style={{ width: 240, marginLeft: 10, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
<div style={{ width: 240, marginLeft: 20, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}> <p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}> 执法日期:<span style={{
执法日期:<span style={{ color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>
}}> {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"} </span></p>
</span></p> <p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}> 执法道路:<span title={roadname} style={{
执法道路:<span title={roadname} style={{ color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160 }}>
}}> {roadname}
{roadname} </span></p>
</span></p> <p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}> 执法成果:<span title={enforcementreslt} style={{
执法成果:<span title={enforcementreslt} style={{ color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160 }}>
}}> {enforcementreslt}</span></p>
{enforcementreslt}</span></p>
</div>
</div> </div>
</div> </div>
) )
}) })
const renderLeftContent = () => { const renderLeftContent = () => {
@ -219,7 +218,7 @@ const Guanli = (props) => {
<div style={{ width: '50%', textAlign: "center", }}>执法成果</div> <div style={{ width: '50%', textAlign: "center", }}>执法成果</div>
</div> */} </div> */}
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent} {rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent}
containerStyle={{ position: "relative", height: "100%", }} containerStyle={{ position: "relative", height: "100%", margin: "20px" }}
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />} divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />}
{/* { {/* {

23
web/client/src/sections/quanju/containers/footer/operation/style.less
View File

@ -15,12 +15,11 @@
background: none; background: none;
// border: 1px solid rgba(10, 114, 255, 1); // border: 1px solid rgba(10, 114, 255, 1);
} }
} }
.busList::-webkit-scrollbar-track { .busList::-webkit-scrollbar-track {
background-color: rgba(3, 60, 158, 0.3); background-color: rgba(3, 60, 158, 0.3);
border-radius: 1px border-radius: 1px;
} }
.busList::-webkit-scrollbar { .busList::-webkit-scrollbar {
@ -29,7 +28,7 @@
.busList::-webkit-scrollbar-thumb { .busList::-webkit-scrollbar-thumb {
background-color: rgba(28, 96, 254, 1); background-color: rgba(28, 96, 254, 1);
border-radius: 1px border-radius: 1px;
} }
// //
@ -39,6 +38,16 @@
margin: 12px 0; margin: 12px 0;
padding: 0 -4px; padding: 0 -4px;
} }
.carCardRight {
background-image: url(/assets/images/leadership/beijinglan.png);
background-size: 100% 100%;
margin: 30px 0;
padding: 0 -4px;
display: flex;
&:first-child {
margin-top: 0;
}
}
//车辆视频监控样式 //车辆视频监控样式
.busInformation { .busInformation {
@ -65,10 +74,10 @@
font-size: 24px; font-size: 24px;
list-style: none; list-style: none;
margin-left: 4%; margin-left: 4%;
font-family: "YouSheBiaoTiHei"; font-family: 'YouSheBiaoTiHei';
display: block; display: block;
float: left; float: left;
text-shadow: 0px 0px 8px #07B9FE; text-shadow: 0px 0px 8px #07b9fe;
} }
h5 { h5 {
@ -77,10 +86,10 @@
font-size: 20px; font-size: 20px;
list-style: none; list-style: none;
margin-left: 5%; margin-left: 5%;
font-family: "YouSheBiaoTiHei"; font-family: 'YouSheBiaoTiHei';
display: block; display: block;
float: left; float: left;
text-shadow: 0px 0px 8px #07B9FE; text-shadow: 0px 0px 8px #07b9fe;
} }
} }
} }

Write Preview
Loading…
Cancel
Save