diff --git a/src/pages/Container/Share/components/Header/index.less b/src/pages/Container/Share/components/Header/index.less index 72c911c..bfa12aa 100644 --- a/src/pages/Container/Share/components/Header/index.less +++ b/src/pages/Container/Share/components/Header/index.less @@ -1,7 +1,9 @@ .white_share_header{ - width: 100vw; + width: 100%; height: 86px; position: relative; + background-repeat: no-repeat; + background-size: 100% 100%; .title{ position: absolute; left: 50.5%; diff --git a/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js index 25382f8..d9b5453 100644 --- a/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js +++ b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js @@ -6,6 +6,7 @@ import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts"; import "./index.less"; +const block3_2TabsList = ["年度", "季度"]; function CenterPanel() { const [weatherData, setWeatherData] = useState({ text: "晴天", @@ -34,6 +35,7 @@ function CenterPanel() { { title: "自查", count1: 50, count2: 40 }, { title: "专项", count1: 50, count2: 40 }, ]); + const [block3_2Index, setBlock3_2Index] = useState(0); const chart1Instance = useRef(null); const main1Ref = useRef(null); @@ -156,6 +158,12 @@ function CenterPanel() { }; }); + const block3_2OptionsClick = (index) => { + if (index === block3_2Index) + return; + setBlock3_2Index(index); + }; + return (
@@ -266,7 +274,22 @@ function CenterPanel() {
- + <Title + title="隐患治理的环比与同比情况" + extra={( + <div className="tabs"> + {block3_2TabsList.map((item, index) => ( + <div + key={index} + className={`tab ${index === block3_2Index ? "active" : ""}`} + onClick={() => block3_2OptionsClick(index)} + > + {item} + </div> + ))} + </div> + )} + /> <div className="container"> <div ref={main5Ref} style={{ width: "100%", height: "225px" }} /> </div> diff --git a/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less index 2675375..be78cdf 100644 --- a/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less +++ b/src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less @@ -221,6 +221,26 @@ border: 1px solid #fff; background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%); box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48); + + .tabs { + display: flex; + + .tab { + background-color: #D6ECFF; + padding: 4px 16px; + border-radius: 2px; + color: #3C648D; + font-size: 14px; + border: 1px solid #A3CCFA; + cursor: pointer; + + &.active { + background-color: #6291fa; + border: 1px solid #6291fa; + color: #fff; + } + } + } } } } diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.js b/src/pages/Container/WhiteBranchOffice/components/Title/index.js index 496b8a0..1e91749 100644 --- a/src/pages/Container/WhiteBranchOffice/components/Title/index.js +++ b/src/pages/Container/WhiteBranchOffice/components/Title/index.js @@ -10,8 +10,7 @@ function Title(props) { </div> <div className="title">{props.title}</div> </div> - - <div className="more">更多 ></div> + <div className="extra">{props.extra}</div> </div> ); } diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.less b/src/pages/Container/WhiteBranchOffice/components/Title/index.less index 40eda7c..33c0b18 100644 --- a/src/pages/Container/WhiteBranchOffice/components/Title/index.less +++ b/src/pages/Container/WhiteBranchOffice/components/Title/index.less @@ -10,9 +10,11 @@ display: flex; justify-content: space-between; align-items: center; - .name{ + + .name { display: flex; align-items: center; + .decoration { width: 18px; height: 18px; @@ -27,10 +29,8 @@ padding-left: 10px; } } - .more{ - color: #3177be; + + .extra { margin-right: 10px; } - - } diff --git a/src/pages/Container/WhiteBranchOffice/index.js b/src/pages/Container/WhiteBranchOffice/index.js index 22f444a..e0d2e1d 100644 --- a/src/pages/Container/WhiteBranchOffice/index.js +++ b/src/pages/Container/WhiteBranchOffice/index.js @@ -1,6 +1,7 @@ import { useMount } from "ahooks"; import autoFit from "autofit.js"; import bg from "~/assets/images/public/white/bg.png"; +import Header from "~/pages/Container/Share/components/Header"; import CenterPanel from "~/pages/Container/WhiteBranchOffice/components/CenterPanel"; import LeftPanel from "~/pages/Container/WhiteBranchOffice/components/LeftPanel"; import RightPanel from "~/pages/Container/WhiteBranchOffice/components/RightPanel"; @@ -13,7 +14,7 @@ function WhiteBranchOffice() { return ( <div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}> - <div className="header"></div> + <Header /> <div className="white_branch_office_container"> <LeftPanel /> <CenterPanel /> diff --git a/src/pages/Container/WhiteBranchOffice/index.less b/src/pages/Container/WhiteBranchOffice/index.less index f7dae24..0f7233f 100644 --- a/src/pages/Container/WhiteBranchOffice/index.less +++ b/src/pages/Container/WhiteBranchOffice/index.less @@ -4,10 +4,6 @@ background-size: 100% 100%; background-repeat: no-repeat; - .header { - height: 75px; - } - .white_branch_office_container { margin-top: 30px; display: flex;