diff --git a/web/client/src/sections/quanju/containers/footer/build/index.js b/web/client/src/sections/quanju/containers/footer/build/index.js index 5c923bdd..7653fb63 100644 --- a/web/client/src/sections/quanju/containers/footer/build/index.js +++ b/web/client/src/sections/quanju/containers/footer/build/index.js @@ -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 = () => { -
- 在建公路数量 -
+
+
+
+ {/* */} + + 在建公路数量 +
+
6200
+
+ +
+
+ {/* */} + + 已建公路数量 +
+
6200
+
+
+ }}> +
+
+
+ +
+ 公路公里数/公里 + 1234,123 +
+
+
+ +
+ 公路公里数/公里 + 1234,123 +
+
+
+
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+ +
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+ 乡镇名称 + 公路数量/条 + 公里 +
+
+
+
+ @@ -29,7 +104,12 @@ const Build = () => {
+ }}> +
+ +

全面建设好农村公路,切实发挥先行官作用

+
+ diff --git a/web/client/src/sections/quanju/containers/footer/build/style.less b/web/client/src/sections/quanju/containers/footer/build/style.less index d42865be..2c87a47d 100644 --- a/web/client/src/sections/quanju/containers/footer/build/style.less +++ b/web/client/src/sections/quanju/containers/footer/build/style.less @@ -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%;