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

建设大屏部分模块

release_0.0.1
dengyinhuan 3 years ago
parent
55aac653c7
commit
38d1f13b65
2 changed files with 256 additions and 21 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. 102
      web/client/src/sections/quanju/containers/footer/build/index.js
  2. 175
      web/client/src/sections/quanju/containers/footer/build/style.less

102
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -1,10 +1,11 @@
import React from 'react'
import LeftTop from './Lefttop'
import LeftCenter from './Leftcenter'
import LeftBottom from './Leftbottom'
import RightTop from './Righttop'
import Rightcenter from './Rightcenter'
import Rightbottom from './Rightbottom'
// import LeftTop from './Lefttop'
// import LeftCenter from './Leftcenter'
// import LeftBottom from './Leftbottom'
// import RightTop from './Righttop'
// import Rightcenter from './Rightcenter'
// import Rightbottom from './Rightbottom'
import { Carousel } from 'antd'
import Module from '../../public/module'
import './style.less'
const Build = () => {
@ -14,13 +15,87 @@ const Build = () => {
<Module title={"各种状态公路数量统计"} style={{ width: "100%",
height:" 33%"
}}>
<div>
在建公路数量
</div>
<div className='build-left-top'>
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
<span/>
<span>在建公路数量</span>
</div>
<div>6200</div>
</div>
<img src='/assets/images/quanju/zhuangtaigonglui.png' className='build-left-top-center'/>
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
<span/>
<span>已建公路数量</span>
</div>
<div>6200</div>
</div>
</div>
</Module>
<Module title={"各乡镇道路占比统计"} style={{ width: "100%",
height:" 33%",marginTop:'3%'
}}></Module>
}}>
<div className='build-left-center'>
<div className='build-left-center-top'>
<div>
<img src='/assets/images/quanju/gonglugongli.png'></img>
<div>
<span>公路公里数/公里</span>
<span>1234,123</span>
</div>
</div>
<div>
<img src='/assets/images/quanju/gongluzong.png'></img>
<div>
<span>公路公里数/公里</span>
<span>1234,123</span>
</div>
</div>
</div>
<div className='build-left-center-titile'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<div className='build-left-center-content'>
<Carousel dotPosition='left' autoplay={true} dots={false}>
<div className='build-left-center-item'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<div className='build-left-center-item'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<div className='build-left-center-item'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<div className='build-left-center-item'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<div className='build-left-center-item'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<div className='build-left-center-item'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
</Carousel>
</div>
</div>
</Module>
<Module title={"道路统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%'
}}></Module>
@ -29,7 +104,12 @@ const Build = () => {
<div className='bgbuild-right'>
<Module title={"宣传栏"} style={{ width: "100%",
height:" 33%"
}}></Module>
}}>
<div className='build-right-top'>
<img src='/assets/images/quanju/xuanchuanlan.jpg'></img>
<h2>全面建设好农村公路，切实发挥先行官作用</h2>
</div>
</Module>
<Module title={"各乡镇在建公路工程"} style={{ width: "100%",
height:" 33%",marginTop:'3%'
}}></Module>

175
web/client/src/sections/quanju/containers/footer/build/style.less
View File

@ -9,21 +9,154 @@
width: 25%;
height: 100%;
.build-left-top{
height: 100%;
width: 100%;
height: 33%;
background-color: pink;
margin-bottom: 3%;
display: flex;
justify-content: center;
align-items: center;
.build-left-top-center{
width: 174px;
height: 146px;
margin: 0 10px;
}
.build-left-top-item{
width: 25%;
height: 50%;
background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
background-size: 95%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// text-align: center;
div{
&:nth-child(1){
display: flex;
justify-content: center;
align-items: center;
span{
&:nth-child(1){
width: 8px;
height: 8px;
margin-right: 5px;
background: #07B9FE;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
transform: rotate(134deg);
}
&:nth-child(2){
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E9F7FF;
line-height: 22px;
}
}
}
&:nth-child(2){
// width: 80%;
// height: 100%;
// margin: 1% auto 0;
font-size: 38px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
text-align: center;
// line-height: 49px;
text-shadow: 0px 2px 4px #1C60FE;
}
}
}
}
.build-left-center{
width: 100%;
height: 33%;
background-color: pink;
margin-bottom: 3%;
height: 100%;
.build-left-center-top{
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
div{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img{
height: 50px;
width: 78px;
}
div{
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
margin-left: 10px;
span{
&:nth-child(1){
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #C2EEFF;
letter-spacing: 1px;
}
&:nth-child(2){
font-size: 28px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 36px;
text-shadow: 0px 0px 4px #07B9FE;
}
}
}
}
// background-color: pink;
}
.build-left-center-titile{
display: flex;
margin-bottom: 10px;
span{
flex:1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 16px;
}
}
.build-left-center-content{
width: 100%;
height: 100px!important;
.build-left-center-item{
display: flex !important;
width: 100%!important;
height: 28px!important;
span{
flex:1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 16px;
}
}
.slick-list{
height: 128px !important;
}
}
}
.build-left-bottom{
width: 100%;
height: 30%;
background-color: pink;
background-color: rgba(0,33,98,0.8);
}
}
@ -31,10 +164,32 @@
width: 25%;
height: 100%;
.build-right-top{
width: 100%;
height: 33%;
background-color: pink;
margin-bottom: 3%;
height: 100%;
padding: 0 10px 10px;
img{
width: 100%;
height: 65%;
margin-bottom: 5%;
}
h2{
height: 30%;
width: 100%;
padding-left: 15px;
font-size: 24px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
display: flex;
align-items: center;
line-height: 31px;
background-image: url('/assets/images/quanju/bgxuanchuanlan.png');
background-size: 100% 100%;
}
}
.build-right-center{
width: 100%;

Write Preview
Loading…
Cancel
Save