diff --git a/src/pages/Container/Share/components/Left/index.js b/src/pages/Container/Share/components/LeftPanel/index.js similarity index 99% rename from src/pages/Container/Share/components/Left/index.js rename to src/pages/Container/Share/components/LeftPanel/index.js index 5bc8faf..df5bbd3 100644 --- a/src/pages/Container/Share/components/Left/index.js +++ b/src/pages/Container/Share/components/LeftPanel/index.js @@ -185,6 +185,7 @@ function WhiteShareLeft() {
{item.unNumber}
{item.rectificationRate}
+ ))} diff --git a/src/pages/Container/Share/components/Left/index.less b/src/pages/Container/Share/components/LeftPanel/index.less similarity index 99% rename from src/pages/Container/Share/components/Left/index.less rename to src/pages/Container/Share/components/LeftPanel/index.less index f47ad8b..59a82c1 100644 --- a/src/pages/Container/Share/components/Left/index.less +++ b/src/pages/Container/Share/components/LeftPanel/index.less @@ -2,6 +2,7 @@ width: 500px; color: #305683; + .block1{ width: 100%; @@ -67,7 +68,7 @@ border: 2px solid transparent; border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; border-radius: 2px; - padding: 5px; + .top{ width: 100%; display: flex; diff --git a/src/pages/Container/Share/components/MiddlePanel/index.js b/src/pages/Container/Share/components/MiddlePanel/index.js new file mode 100644 index 0000000..75281e8 --- /dev/null +++ b/src/pages/Container/Share/components/MiddlePanel/index.js @@ -0,0 +1,76 @@ + +import "./index.less"; +import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; +import cake from "~/assets/images/public/white/img7.png"; +import {useState} from "react"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +function WhiteShareMiddle() { + const [block1List, setBlock1List] = useState([ + { name: "综合应急预案", num: "13" }, + { name: "现场处置方案", num: "75" }, + { name: "应急应对措施", num: "58" }, + { name: "应急救援队伍", num: "3" }, + ]); + const [block2List, setBlock2List] = useState([ + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" }, + + ]); + + return ( +
+
+ + <div className="block1_content"> + <div className="emergency_left"> + <div className="top"> + { + block1List.map((item, index) => ( + <div key={index} className="item"> + <p className="name">{item.name}</p> + <div className="num">{item.num}</div> + </div> + )) + } + </div> + <div className="emergency_left_main"> + <div className="table"> + <div className="tr"> + <div className="th">单位名称</div> + <div className="th">姓名</div> + <div className="th">职务</div> + <div className="th">电话</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block2List} step={0.5}> + {block2List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.unitName}</div> + <div className="td">{item.name}</div> + <div className="td">{item.duties}</div> + <div className="td">{item.phone}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + + </div> + </div> + </div> + + </div> + + + + </div> + + ); +} + +export default WhiteShareMiddle; diff --git a/src/pages/Container/Share/components/MiddlePanel/index.less b/src/pages/Container/Share/components/MiddlePanel/index.less new file mode 100644 index 0000000..c502a00 --- /dev/null +++ b/src/pages/Container/Share/components/MiddlePanel/index.less @@ -0,0 +1,111 @@ +.white_share_middle{ + width: 840px; + .block1{ + width: 840px; + .block1_content{ + width: 100%; + background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%); + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + border-radius: 2px; + display: flex; + .emergency_left{ + width: 480px; + .top{ + width: 100%; + display: flex; + justify-content: space-between; + padding: 5px; + box-sizing: border-box; + + .item{ + border-width: 1px; + border-color: rgb(255, 255, 255); + border-style: solid; + background-color: rgba(197, 224, 246, 0.8); + box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3); + padding: 5px 12px; + text-align: center; + color: #3d5882; + border-radius: 4px; + p{ + padding: 0; + margin: 0; + } + .num{ + font-size: 20px; + color: #4387d6; + } + } + } + .emergency_left_main{ + width: 470px; + margin: 0 5px 5px; + border-style: solid; + border-width: 1px; + border-color: #b5d7f7; + border-radius: 4px; + background-color: rgb(205, 233, 255); + padding: 5px; + box-sizing: border-box; + + + + .table-style(109px, 1fr 1fr 1fr 1fr); + } + } + } + } +} + + + +.table-style(@height, @grid-template-columns) { + .table { + border: 1px solid #fff; + + .scroll { + height: @height; + overflow-y: hidden; + + .tr { + &:nth-child(odd) { + background-color: transparent; + } + } + } + + .tr { + display: grid; + grid-template-columns: @grid-template-columns; + background-color: #C4E2F8; + + &:not(:last-child) { + border-bottom: 1px solid #fff; + } + + .td, .th { + text-align: center; + font-size: 14px; + color: #3B445C; + border-right: 1px solid #fff; + height: 28px; + line-height: 28px; + + &:last-child { + border-right: none; + } + } + + .th { + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + } + } +} diff --git a/src/pages/Container/Share/index.js b/src/pages/Container/Share/index.js index dcb23a2..4221f72 100644 --- a/src/pages/Container/Share/index.js +++ b/src/pages/Container/Share/index.js @@ -2,7 +2,8 @@ import bg from "~/assets/images/public/white/bg.png"; import "./index.less"; import Header from "~/pages/Container/Share/components/Header"; -import Left from "~/pages/Container/Share/components/Left"; +import Left from "pages/Container/Share/components/LeftPanel"; +import Middle from "pages/Container/Share/components/MiddlePanel"; function WhiteShareOffice() { return ( @@ -11,6 +12,10 @@ function WhiteShareOffice() { <div className="white_share_office_content"> <div className="left"> <Left/> + + </div> + <div className="middle"> + <Middle/> </div> </div> </div> diff --git a/src/pages/Container/Share/index.less b/src/pages/Container/Share/index.less index ae29635..a575903 100644 --- a/src/pages/Container/Share/index.less +++ b/src/pages/Container/Share/index.less @@ -8,7 +8,11 @@ display: flex; .left{ width: 500px; - margin-left: 20px; + margin-left: 10px; + } + .middle{ + width: 840px; + margin-left: 10px; } } }