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

增加建设大屏适配1280屏幕

release_0.0.1
dengyinhuan 3 years ago
parent
b124c2b2c1
commit
6f15fb0fc9
5 changed files with 153 additions and 106 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. 48
      web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
  2. 45
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  3. 52
      web/client/src/sections/quanju/containers/footer/build/index.js
  4. 112
      web/client/src/sections/quanju/containers/footer/build/style.less
  5. 2
      web/client/src/sections/quanju/containers/footer/guanli/index.js

48
web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
View File

@ -1,6 +1,5 @@
import './style.less' import './style.less'
import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react'; // import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
@ -34,24 +33,26 @@ function Leftbottom() {
}, },
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`, formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
}, },
title: { // title: {
text:titleNum,//主标题文本 // text:titleNum,//主标题文本
left:'center', // left:'10%',
top:'35%', // top:'35%',
subtext:chartTitle,//副标题文本 // subtext:chartTitle,//副标题文本
textStyle:{ // textStyle:{
fontFamily : "YouSheBiaoTiHei", // fontFamily : "YouSheBiaoTiHei",
fontSize: 20, // fontSize: 20,
color:'#FFFFFF', // color:'#FFFFFF',
// align:'center' // marginLeft:'20%',
}, // align:'center'
subtextStyle:{ // },
fontFamily : "PingFangSC-Medium PingFang SC", // subtextStyle:{
fontSize: 12, // fontFamily : "PingFangSC-Medium PingFang SC",
fontWeight:500, // fontSize: 12,
color:'#E9F7FF', // fontWeight:500,
} // color:'#E9F7FF',
},
// }
// },
legend: [ legend: [
{ {
@ -80,7 +81,8 @@ function Leftbottom() {
{ {
name: '道路统计', name: '道路统计',
type: 'pie', type: 'pie',
radius: ['60%', '75%'], radius: ['50%', '63%'],
center: ["30%", "50%"],
// emphasis: { // 设置高亮时显示标签 // emphasis: { // 设置高亮时显示标签
// label: { // label: {
// show: true // show: true
@ -157,8 +159,12 @@ function Leftbottom() {
return ( return (
<div className='build-left-bottom'> <div className='build-left-bottom'>
<div className='build-left-bottom-title'>
<h2>3234.23</h2>
<span>道路总公里</span>
</div>
<img src='/assets/images/quanju/chart-circle.png'></img> <img src='/assets/images/quanju/chart-circle.png'></img>
<div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div> <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
</div> </div>
); );
} }

45
web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
View File

@ -37,24 +37,24 @@ function Rightbottom() {
}, },
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`, formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
}, },
title: { // title: {
text:titleNum,//主标题文本 // text:titleNum,//主标题文本
left:'center', // left:'center',
top:'35%', // top:'35%',
subtext:chartTitle,//副标题文本 // subtext:chartTitle,//副标题文本
textStyle:{ // textStyle:{
fontFamily : "YouSheBiaoTiHei", // fontFamily : "YouSheBiaoTiHei",
fontSize: 20, // fontSize: 20,
color:'#FFFFFF', // color:'#FFFFFF',
// align:'center' // // align:'center'
}, // },
subtextStyle:{ // subtextStyle:{
fontFamily : "PingFangSC-Medium PingFang SC", // fontFamily : "PingFangSC-Medium PingFang SC",
fontSize: 12, // fontSize: 12,
fontWeight:500, // fontWeight:500,
color:'#E9F7FF', // color:'#E9F7FF',
} // }
}, // },
// graphic: { // graphic: {
// elements: [ // elements: [
// { // {
@ -121,7 +121,8 @@ function Rightbottom() {
{ {
name: '公路等级统计', name: '公路等级统计',
type: 'pie', type: 'pie',
radius: ['60%', '75%'], radius: ['50%', '63%'],
center:['30%','50%'],
// emphasis: { // 设置高亮时显示标签 // emphasis: { // 设置高亮时显示标签
// label: { // label: {
// show: true // show: true
@ -198,8 +199,12 @@ function Rightbottom() {
return ( return (
<div className='build-right-bottom'> <div className='build-right-bottom'>
<div className='build-right-bottom-title'>
<h2>3234.23</h2>
<span>道路总公里</span>
</div>
<img src='/assets/images/quanju/chart-circle.png'></img> <img src='/assets/images/quanju/chart-circle.png'></img>
<div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div> <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
</div> </div>
); );
} }

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

@ -8,8 +8,24 @@ import Rightcenter from './Rightcenter'
import { Carousel } from 'antd' import { Carousel } from 'antd'
import Module from '../../public/module' import Module from '../../public/module'
import RightBottom from './Rightbottom' import RightBottom from './Rightbottom'
import AutoRollComponent from './AutoRollComponent'
import './style.less' import './style.less'
const Build = () => { const Build = () => {
const datas = new Array(15)
datas.fill({
name:"东乡镇",
number:"11111",
gongli:'9999'
},0,15)
const rendercontent = ()=>{
return (<div className='build-left-center-content'>
{datas.map(({name,number,gongli},index)=><div className='build-left-center-item' key={index}>
<span>{name}</span>
<span>{number}</span>
<span>{gongli}</span>
</div>)}
</div>)
}
return ( return (
<div className='bgbuild'> <div className='bgbuild'>
<div className='bgbuild-left'> <div className='bgbuild-left'>
@ -61,40 +77,8 @@ const Build = () => {
<span>公路数量/条</span> <span>公路数量/条</span>
<span>公里</span> <span>公里</span>
</div> </div>
<div className='build-left-center-content'> <AutoRollComponent content = {rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
<Carousel dotPosition='left' autoplay={true} dots={false}> divHeight={"100%"} divId={"chart"} />
<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> </div>
</Module> </Module>
<Module title={"道路统计"} style={{ width: "100%", <Module title={"道路统计"} style={{ width: "100%",

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

@ -1,3 +1,8 @@
@media screen and (max-width:1281px){
html{
font-size: 10px;
}
}
.bgbuild{ .bgbuild{
// box-sizing: border-box; // box-sizing: border-box;
padding: 0 15px 0 15px; padding: 0 15px 0 15px;
@ -15,8 +20,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.build-left-top-center{ .build-left-top-center{
width: 174px; width: 35%;
height: 146px; height: 50%;
margin: 0 10px; margin: 0 10px;
} }
.build-left-top-item{ .build-left-top-item{
@ -45,11 +50,11 @@
transform: rotate(134deg); transform: rotate(134deg);
} }
&:nth-child(2){ &:nth-child(2){
font-size: 16px; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #E9F7FF; color: #E9F7FF;
line-height: 22px; // line-height: 22px;
} }
} }
@ -58,7 +63,7 @@
// width: 80%; // width: 80%;
// height: 100%; // height: 100%;
// margin: 1% auto 0; // margin: 1% auto 0;
font-size: 38px; font-size: 2.375rem;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
@ -85,8 +90,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{ img{
height: 50px; // height: 15%;
width: 78px; width: 25%;
} }
div{ div{
@ -97,14 +102,14 @@
margin-left: 10px; margin-left: 10px;
span{ span{
&:nth-child(1){ &:nth-child(1){
font-size: 12px; font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #C2EEFF; color: #C2EEFF;
letter-spacing: 1px; letter-spacing: 1px;
} }
&:nth-child(2){ &:nth-child(2){
font-size: 28px; font-size: 1.75rem;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
color: #FFFFFF; color: #FFFFFF;
line-height: 36px; line-height: 36px;
@ -130,12 +135,12 @@
} }
} }
.build-left-center-content{ .build-left-center-content{
width: 100%; // width: 100%;
height: 100px!important; // height:40%;
.build-left-center-item{ .build-left-center-item{
display: flex !important; display: flex ;
width: 100%!important; width: 100%;
height: 28px!important; height: 28px;
span{ span{
flex:1; flex:1;
text-align: center; text-align: center;
@ -146,9 +151,9 @@
line-height: 16px; line-height: 16px;
} }
} }
.slick-list{ // .slick-list{
height: 128px !important; // height: 128px !important;
} // }
} }
@ -160,10 +165,33 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
.build-left-bottom-title{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 27%;
top:38%;
h2{
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span{
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
img{ img{
width: 19%;
position: absolute; position: absolute;
left: 38%; left: 26.5%;
top:26% top:29%
} }
} }
@ -185,7 +213,7 @@
height: 30%; height: 30%;
width: 100%; width: 100%;
padding-left: 15px; padding-left: 15px;
font-size: 24px; font-size: 1.5rem;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
color: #FFFFFF; color: #FFFFFF;
display: flex; display: flex;
@ -206,23 +234,24 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
img{ img{
width:12% ; width:14% ;
height: 80%; // height: 80%;
} }
div{ div{
font-size: 16px; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #C2EEFF; color: #C2EEFF;
line-height: 22px; transform: translateX(-1.5rem);
letter-spacing: 1px // line-height: 22px;
letter-spacing: 0.0625rem;
} }
h2{ h2{
font-size: 28px; font-size: 1.75rem;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
color: #FFFFFF; color: #FFFFFF;
margin-bottom : 0!important; margin-bottom : 0!important;
text-shadow: 0px 0px 4px #07B9FE; text-shadow: 0px 0px 0.25rem #07B9FE;
} }
} }
} }
@ -233,10 +262,33 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
img{ .build-right-bottom-title{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 27%;
top:38%;
h2{
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span{
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
img{
width: 19%;
position: absolute; position: absolute;
left: 38%; left: 26.5%;
top:26% top:29%
} }
} }
} }

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

@ -26,7 +26,7 @@ const Guanli = () => {
})} })}
</div> </div>
} }
renderContent() // renderContent()
return ( return (
<div className='guanli'> <div className='guanli'>
<div className='guanli-left'> <div className='guanli-left'>

Write Preview
Loading…
Cancel
Save