zcloud_gbs
/
zcloud-gbs-bi-react
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

股份

master
鲁洪霞 2026-01-14 11:12:21 +08:00
parent 97bed0725b
commit 63e93da0c8
6 changed files with 201 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Container/Share/components/Left/index.js → src/pages/Container/Share/components/LeftPanel/index.js
View File

@ -185,6 +185,7 @@ function WhiteShareLeft() {
<div className="td">{item.unNumber}</div>
<div className="td">{item.rectificationRate}</div>
</div>
))}
</SeamlessScroll>
</div>

3
src/pages/Container/Share/components/Left/index.less → src/pages/Container/Share/components/LeftPanel/index.less
View File

@ -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;

76
src/pages/Container/Share/components/MiddlePanel/index.js Normal file
View File

@ -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="white_share_middle">
<div className="block1">
<Title title={"应急管理"} />
<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;

111
src/pages/Container/Share/components/MiddlePanel/index.less Normal file
View File

@ -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;
}
}
}
}

7
src/pages/Container/Share/index.js
View File

@ -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>

6
src/pages/Container/Share/index.less
View File

@ -8,7 +8,11 @@
display: flex;
.left{
width: 500px;
margin-left: 20px;
margin-left: 10px;
}
.middle{
width: 840px;
margin-left: 10px;
}
}
}