free-sun
/
Highways4Good
15
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
Split 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) => {
return (
<div key={index} style={{ width: '100%', }} className='carCard'>
<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 0px 0px 20px" }}>
{picfile?.map(v => <div style={{ width: 200, height: 200 }}>
<img className='picfileimg'
style={{ width: 200, height: 150, display: 'inline-block', }}
// src={`/_file-server/${v.storageUrl}`}
src={v.url}
width={`200px`}
/>
</div>)}
</Carousel>
: <div style={{
width: 200, height: 200, margin: "20px 0px 0px 20px",
}} />
}
<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" }}>
执法日期:<span style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
}}>
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
</span></p>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法道路:<span title={roadname} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{roadname}
</span></p>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法成果:<span title={enforcementreslt} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{enforcementreslt}</span></p>
</div>
<div key={index} style={{}} className='carCardRight'>
{picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 10px" }}>
{picfile?.map(v => <div style={{ width: 200, height: 200 }}>
<img className='picfileimg'
style={{ width: 200, height: 150, display: 'inline-block', }}
// src={`/_file-server/${v.storageUrl}`}
src={v.url}
width={`200px`}
/>
</div>)}
</Carousel>
: <div style={{
width: 200, height: 200, margin: "20px 0px 0px 20px",
}} />
}
<div style={{ width: 240, marginLeft: 10, 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" }}>
执法日期:<span style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
}}>
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
</span></p>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法道路:<span title={roadname} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{roadname}
</span></p>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法成果:<span title={enforcementreslt} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{enforcementreslt}</span></p>
</div>
</div>
)
})
const renderLeftContent = () => {
@ -219,7 +218,7 @@ const Guanli = (props) => {
<div style={{ width: '50%', textAlign: "center", }}>执法成果</div>
</div> */}
{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%" }} />}
{/* {

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

@ -15,12 +15,11 @@
background: none;
// border: 1px solid rgba(10, 114, 255, 1);
}
}
.busList::-webkit-scrollbar-track {
background-color: rgba(3, 60, 158, 0.3);
border-radius: 1px
border-radius: 1px;
}
.busList::-webkit-scrollbar {
@ -29,7 +28,7 @@
.busList::-webkit-scrollbar-thumb {
background-color: rgba(28, 96, 254, 1);
border-radius: 1px
border-radius: 1px;
}
//
@ -39,6 +38,16 @@
margin: 12px 0;
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 {
@ -65,10 +74,10 @@
font-size: 24px;
list-style: none;
margin-left: 4%;
font-family: "YouSheBiaoTiHei";
font-family: 'YouSheBiaoTiHei';
display: block;
float: left;
text-shadow: 0px 0px 8px #07B9FE;
text-shadow: 0px 0px 8px #07b9fe;
}
h5 {
@ -77,10 +86,10 @@
font-size: 20px;
list-style: none;
margin-left: 5%;
font-family: "YouSheBiaoTiHei";
font-family: 'YouSheBiaoTiHei';
display: block;
float: left;
text-shadow: 0px 0px 8px #07B9FE;
text-shadow: 0px 0px 8px #07b9fe;
}
}
}

Write Preview
Loading…
Cancel
Save