From d35c171831ce84fb30e499ef921a086420ebef4c Mon Sep 17 00:00:00 2001 From: dengyinhuan Date: Fri, 22 Jul 2022 16:27:13 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=9A=84UI=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/footer/guanli/LeftItem.js | 91 +++++++++ .../quanju/containers/footer/guanli/index.js | 9 +- .../containers/footer/guanli/style.less | 177 ++++-------------- 3 files changed, 137 insertions(+), 140 deletions(-) create mode 100644 web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js diff --git a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js new file mode 100644 index 00000000..d774030c --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js @@ -0,0 +1,91 @@ +import React, { useEffect, useRef } from 'react'; +import './style.less' +import * as echarts from 'echarts'; +export default function LeftItem() { + const seasonChartRef = useRef(null); + useEffect(() => { + let chartInstance = echarts.init(seasonChartRef.current); + const seasonOption = { + title: [ + { + text: "已处理", + x: "center", + top: "55%", + textStyle: { + color: "#E9F7FF", + fontSize: 14, + }, + }, + { + text: "2333", + x: "center", + y: "35%", + textStyle: { + fontSize: "30", + color: "#FFFFFF", + fontFamily: "YouSheBiaoTiHei", + }, + }, + ], + polar: { + radius: ["78%", "86%"], + center: ["50%", "50%"], + }, + angleAxis: { + max: 100, + show: false, + }, + radiusAxis: { + type: "category", + show: true, + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + series: [ + { + name: "", + type: "bar", + roundCap: true, + barWidth: 30, + showBackground: true, + data: [40], + coordinateSystem: "polar", + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { + offset: 0, + color: "#AAC8FF", + }, + { + offset: 1, + color: "#0041BB", + }, + ]), + }, + }, + }, + ], + }; + chartInstance.setOption(seasonOption); + + }, []) + return ( +
+
+ 莲塘镇 +
244 个
+
+
+
+
+
+ ) +} diff --git a/web/client/src/sections/quanju/containers/footer/guanli/index.js b/web/client/src/sections/quanju/containers/footer/guanli/index.js index 1a12353f..88552520 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/index.js +++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js @@ -2,9 +2,11 @@ import React from 'react' import { Carousel } from 'antd' import AutoRollComponent from '../build/AutoRollComponent' import Module from '../../public/module' +import LeftItem from './LeftItem' import './style.less' const Guanli = () => { const datas = new Array(35) + const itemlist = [1,2,3] const renderContent = () => { datas.fill({ chepaihao:'苏LD1112121', @@ -27,7 +29,12 @@ const Guanli = () => { renderContent() return (
-
+
+ + {itemlist.map((item,index)=> + + )} +
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/style.less b/web/client/src/sections/quanju/containers/footer/guanli/style.less index a04a8639..c225f744 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/style.less +++ b/web/client/src/sections/quanju/containers/footer/guanli/style.less @@ -8,159 +8,58 @@ .guanli-left{ width: 25%; height: 100%; - background-color: pink; - .guanli-left-top{ - height: 100%; - width: 100%; + .guanli-left-item{ + box-sizing: border-box; + width: 85%; + height: 30%; + margin: 0 auto 3%; display: flex; - justify-content: center; align-items: center; - .guanli-left-top-center{ - width: 174px; - height: 146px; - margin: 0 10px; - } - .guanli-left-top-item{ - width: 25%; - height: 50%; - background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png'); - background-size: 95%; - background-repeat: no-repeat; + padding: 0 10%; + justify-content: space-between; + border: 2px solid rgba(28,96,254,0.5000); + .guanli-left-item-left{ + width: 30%; + height: 70%; 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; - - } + span{ + font-size: 20px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(216,240,255,0.8000); } - } - } - .guanli-left-center{ - width: 100%; - height: 100%; - - .guanli-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; - } - .guanli-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; + // align-items: ; + font-size: 34px; + font-family: YouSheBiaoTiHei; color: #FFFFFF; - line-height: 16px; - } - } - .guanli-left-center-content{ - width: 100%; - height: 100px!important; - .guanli-left-center-item{ - display: flex !important; - width: 100%!important; - height: 28px!important; + height: 60%; + width: 100%; + background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat; + background-size: 100% 80%; + background-position: center bottom; span{ - flex:1; - text-align: center; - font-size: 12px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - line-height: 16px; + font-size: 16px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + padding-top: 10%; + margin-left: 5px; + // height: 0; + color: rgba(216,240,255,0.8000); } } - .slick-list{ - height: 128px !important; - } + // background-color: pink; } - - - } - .guanli-left-bottom{ - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - + .guanli-left-item-right{ + width: 40%; + height: 60%; + // background-color: pink; + } + // background-color: pink; } } .guanli-right{