From aade2fd0c456fb77956ae991771dd3196dd35494 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E6=B4=AA=E9=9C=9E?= Date: Tue, 13 Jan 2026 16:52:23 +0800 Subject: [PATCH] =?UTF-8?q?=E8=82=A1=E4=BB=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/public/white/img7.png | Bin 0 -> 17318 bytes src/assets/images/public/white/more.png | Bin 0 -> 1038 bytes .../Share/components/Header/index.js | 40 ++- .../Share/components/Header/index.less | 82 ++++++ .../Container/Share/components/Left/index.js | 136 +++++++++ .../Share/components/Left/index.less | 271 ++++++++++++++++++ src/pages/Container/Share/index.js | 6 + src/pages/Container/Share/index.less | 12 +- .../components/Title/index.js | 10 +- .../components/Title/index.less | 33 ++- 10 files changed, 562 insertions(+), 28 deletions(-) create mode 100644 src/assets/images/public/white/img7.png create mode 100644 src/assets/images/public/white/more.png create mode 100644 src/pages/Container/Share/components/Left/index.js create mode 100644 src/pages/Container/Share/components/Left/index.less diff --git a/src/assets/images/public/white/img7.png b/src/assets/images/public/white/img7.png new file mode 100644 index 0000000000000000000000000000000000000000..6a9a9b87d4383948eb44115ebcaae343d3d087ab GIT binary patch literal 17318 zcmaI6b97}+Lzb11Q2SSU{kuKkVE#RCEs&W175MIwI_~ODmhN7r zt`=aTKqoT`GFb;xD+@IXQ=pH_q=f(&7$lXAhK{?Aq5_|}lLM3Ke`uJz9i0E6!N3HB zy`4?X?JV5M%q*;I90dVaJ^cVO8=xRSn^TcR(OKNW+D69L)k57@NyFUN&YTwr5Edd6 z@aFr+z`?@Zl+4?~-qDTETM+PHeEI&>|I^J3Ap0*8cRNAA|58dvQH4z0$<>04lZlJb zoRx!|6A6- zmLR~|-QAgwnc2(Bi^+?f$;s70B)`G0eeuy8YX zwQ+X0adIU44@XloCl7Z)z&}m@*AN_>{|{S7xBop&|0ayt+titvm5Jp)L;7z*MaBPr zQU{0sL+$3SX7PXZ{r_a_rs3mk!K`NC=H%gO{?BlhDnG4i=8?|BVIyU#!Ici2aW{ zI5_{4EMehl<7okua&>Yb`>$d1+5FGCi2jfK{x=r*KkFj)KVq5xDZ~69diDUbkeF|z`BXiQW2-7HouG;a0CM5*L?4O8ASlo# zULPO&dOUs$SAMT~)9~n*MuTv%bX2?Ye7b13Y*4o{mJ_(0pl!M#h38xY@9B6alG_5i z^jk0$6|NS3Wr$8fW2CKVW{wDpxK$%ul=N>*G;li3g%{#8`Q zp~9lVs-tkca5a)5E^4n^m}y7rljJ>k0N(_}0|O`2yA!JjIr(&?2`SKqw%6age7ar< z@IHsx+#=TB4GPYMIbB(u9R(+pFg+F9yp#)E)MtapSSry0tWF$cp`lkjII*GM%TbiV z5&5BF>_#FAr8J*14CKC0v^41hPBN}p9EGAU40F=oJ7Jj+B(61y3XYwZX0aEs?b{BB z!a(MkVC02}@*M4z5o0Gf5DjT4L7uaR!AjuxY>(wf%SU?PJv+ZiU7nQerES5l`-z=Z z148bCDOBN)B~s$aG4PjC3D{#c#lnBEMrgea?KLmnTP(3ij!BX{1(35uphQkV@tl~0 zv}};B%gN*MO-f@WC|>z6`kbFkq?6y65e-mbcgW!|^44w*{H^8=^U+x_mOwd6QUfU+ z4YUrdawBT05ZE)dKf4UUPX1OPMYB$(+c2~T+aK_n8q;St%r;OCY|)VypCNyxhxA}~ z5Z+uc4{C3Vx@y8K9^hd(ulm+BvmXfk8P`fB zlYy2!}5IqcMe_p--{QO7Ol3~gHb4olQn-t}~urOaxCja<^^U9^)H?_^6w4IE3# z;U1?`hiC$rHlzu0h>x!x;`Q;2l+jBnhu!Sx)TxQ-wJF*zjgm(&Ue(9kHjr?*n1uG* z?RcgPB|W>-26m1OU_yvE%W8}$$n)R<_6IRyghnQs4<3a-7~`kXWY()nqRkcvL$@{w z*3xY5Oc3}Z*ul%#e*^VA*xrV+1>c`??EjpFj75>;2lH-M#XcIK*yhGlI?3%^h6no+ zm1ph)a;qGemCk<}jH1Q($Wn#tR*SxttxnfPFe-rq8FbI+%bOj3a?v6h>StyQz<%#L zRh0RARJH~f1}RiA+nfOxy8-*?u$u#~#X>G-}+Ix=vB2Xm)KoWj}v zCahkDlMR&}5~J{yEz6w3BQvq=k7rSr?M5J%+>8PaqnpaR2T&--AU_|&3v}TG5sh$# zI4~+&0KO>G%mf#vcbf}T4muWL;Kl<_n(mO~agOJPveAmOo6f(9TWXeGRfcwwa9lnJ zJ#<{(4#&0Jsvz@m+3oCI$0+ZHefd$G$mM!Lh^t>nrX;?Sn`2WgxKWlavpoupnw`YT zT%bLfI?e5S3X>3x#!=n$RHKdF)5z51*y4ouZbiK&(8RnIPh+FgI6w?J5`98Y>U4Vg_Xu_~k4q*m zzlw99%%~c67`m&eUI@eNu4I0i9>&u?5TotLX|LGSzCD3+@8`3u1iS6&I;+5U zoF4BK4P1NS5lp=sR-DNRyc?h1x-ds#%j-pz^;O4?h*II6-wRIAqOC57PBB4yoPMys z3yvm_P{ppf=?ijyOWn6(#-}7g*;Uk;NMoj!2-Zv5n*kwP5Wezc%CM4%5-&Q744ikd zIzW+zO=C#$dM7C$2e+xEF@ja8X2I|aJD~eu7{7T^KiKc!T?8F`Ta1Y|_ZdpZp=FmW zXfMBU!`0x$%#qpy`>7vt!5<_-`_)73Z1|r5j1+7{?P(!~taNETEL9W#aIi|Rae^Ro=7V>|<2(aBy>Tr3mnT=IJcY+}_b@8D6N<>?`X>BKYFj(?Y z3a`ohe&0o8M2!=(O&ulH{iQSp?}qc)H}9$!jZ_q8|6}#=gm*J5)U#{*Yv;uYz5!ld zrDx{>hG`+`4uo1zQzt!?1)ojy4I`h+=VW!MP=zho+wa;RgS2rJ6Er>i3#Uh_2&M&E zil8U-N^@s6`D*y}H4rYXTER_5(UZ3YLy}kKC$PhY|u4Im%AZ1(#MgLW~yrtVX0O|I_6EqvD*M; zXlnF+F~h}>%n)e4`L71$Twk<)<$jz|QdG{(+cUC`AurNcPMmX7<+UHbHyrrJZsT}u zuL30jCW%CMTkJntrhX`ZtEE(wTKG*}HHm2w zM;ucua0Tjn?o$K?=fynuQ9NQzeAtCnq|Jv8mva11Kv` zp>I^PVY{!h6XtO$kK9d@yZFJ5rRU3FuqGR#@(X7P<){Gj4`Q@YA!q`1_>+n3#38ia z1#pUwM~^?;lG>YL4xt4tvHqR$8fC+cwU|E(lH9vtlr{CRngolj`os0bZ`I|ypq^0U z9*j)yfS18=5sKdv>J-%O^8Z=rq2SvLms*X)TSxhgycu8C zfX!Nt>#uq!!gviXrR7W($T;R%eO$a6FOBdbFrE7=2I1Gw14SP2N?VWBd0~XUtKt;~ z!Slir38AQdhmdV)MfxDPYKqI_+KX$mdQDYI%WMGUUO<;mdSZ`UcomXJMVYNms&>HAvj_Lk=*{5Ny&9wmX0wo?>Y9GMvAlI z=I#Za6y>;-!4_Ls z_)($yB|_u2IHmW6T_3dgH$u>>)y_=sF4x-g+ChjZCTF?`Irhegs(=4}iSHch$wm0u z$%Fg${G4Jc?`7bzT}4<8q8~Dk%R}wi*$hm*Hi6x&q!}d@=NPi?MmMbZ_6 z*KU3W2LT0cz*zmX!tqg# zYzd4oeKtI|^YGHfKiVn6q_GAi(uF2m6|i(d(8lmW7dx(dyB2MK6D(i(PNWpr1PIMlo_ zTY+7=ewBmu{Ls(>n96@=$kJxpm$;qJxOldGKOt?K(K59+^c-Xi>knCO4@3L2(o>V5 zW&t|54A*h;VS7EALNZm7*?b&l47^4VKj)_zSdI+!3FJ_r+JQo+1uEz$1qj$;V{C3?RJW#DU> z1IBBQ+>4itJyy}Qe2}01-HbYuT(_YFrYyL(!D%&XX4IX8meh*t&)ZE5lTH%YEH%RD z+f8?aVm3wVkgt0v{?AtRyP_FFALYi*%M243)D#dqeh?f$Mg6% G+k`#YgZv==@Wo5~t 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 literal 0 HcmV?d00001 diff --git a/src/pages/Container/Share/components/Header/index.js b/src/pages/Container/Share/components/Header/index.js index 0e0f293..c4bba93 100644 --- a/src/pages/Container/Share/components/Header/index.js +++ b/src/pages/Container/Share/components/Header/index.js @@ -1,21 +1,37 @@ -import { useMount } from "ahooks"; -import autoFit from "autofit.js"; -import bg from "~/assets/images/public/white/bg.png"; -import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; + +import bg from "~/assets/images/public/white/titlebg.png"; +import title from "~/assets/images/public/white/title.png"; +import more from "~/assets/images/public/white/more.png"; import "./index.less"; -function WhiteShareOffice() { - useMount(() => { - autoFit.init({ dw: 1920, dh: 1080, el: ".white_branch_office", resize: true }); - }); +function WhiteShareHead() { return ( -
-
- + <div className="white_share_header" style={{ backgroundImage: `url(${bg})` }}> + <div className="left"> + <div className="list">已安全生产 365 天</div> + <div className="list">10~27℃ 多云 星期三</div> + </div> + <div className="title"> + <img src={title} alt=""/> + </div> + <div className="right"> + <div className="top"> + <div className="name">股份公司数据统计</div> + <div className="more"> + <img src={more} alt=""/> + </div> + <div className="down_main"> + <div className="list">二公司</div> + <div className="list">六公司</div> + <div className="list">七公司</div> + <div className="list">九公司</div> + </div> + </div> + </div> </div> ); } -export default WhiteShareOffice; +export default WhiteShareHead; diff --git a/src/pages/Container/Share/components/Header/index.less b/src/pages/Container/Share/components/Header/index.less index e69de29..72c911c 100644 --- a/src/pages/Container/Share/components/Header/index.less +++ b/src/pages/Container/Share/components/Header/index.less @@ -0,0 +1,82 @@ +.white_share_header{ + width: 100vw; + height: 86px; + position: relative; + .title{ + position: absolute; + left: 50.5%; + transform: translateX(-50%); + top: 25px; + } + .left{ + position: absolute; + top: 30px; + left: 20px; + display: flex; + .list{ + padding: 6px 15px; + border-radius: 23px; + background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%); + background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%); + background-image: -ms-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.75); + margin-right: 10px; + color: #465683; + opacity: 0.8; + } + } + .right{ + position: absolute; + right: 20px; + top:25px; + border-radius: 23px; + background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%); + background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%); + background-image: -ms-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.75); + padding: 6px 15px; + color: #465683; + + + .top{ + display: flex; + justify-content: space-between; + position: relative; + .name{ + margin-right: 20px; + font-weight: bold; + } + .more{ + cursor: pointer; + } + .down_main{ + width: 150px; + position: absolute; + top: 30px; + left: 0; + background: #ddf1fe; + border: 1px solid #b8dcf3; + border-radius: 4px; + opacity: 0; + .list{ + font-weight: bold; + border-bottom: 1px solid #d4e3f7; + line-height: 36px; + padding: 0 10px; + text-align: center; + font-size: 12px; + cursor: pointer; + &:hover{ + background: #def1ff; + } + } + } + &:hover{ + .down_main{ + opacity: 1; + } + } + } + + } +} diff --git a/src/pages/Container/Share/components/Left/index.js b/src/pages/Container/Share/components/Left/index.js new file mode 100644 index 0000000..c2f86e9 --- /dev/null +++ b/src/pages/Container/Share/components/Left/index.js @@ -0,0 +1,136 @@ + +import "./index.less"; +import Title from "~/pages/Container/WhiteBranchOffice/components/Title"; +import cake from "~/assets/images/public/white/img7.png"; +import bg1 from "~/assets/images/public/white/bg1.png"; +import img1 from "~/assets/images/public/white/img1.png"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import {useState} from "react"; + + +function WhiteShareLeft() { + const [block3List, setBlock3List] = useState([ + { id: 1, level: "二级", name: "东区一号罐", state: "正常"}, + { id: 2, level: "二级", name: "东区一号罐", state: "正常"}, + { id: 3, level: "二级", name: "东区一号罐", state: "正常"}, + { id: 4, level: "二级", name: "东区一号罐", state: "正常"}, + { id: 5, level: "二级", name: "东区一号罐", state: "正常"}, + { id: 6, level: "二级", name: "东区一号罐", state: "正常"}, + + ]); + return ( + <div className="white_share_left"> + <div className="block1"> + <Title title={"风险辨识管控情况"} /> + <div className="white_share_left_conten"> + <div className="cake"> + <img src={cake} alt="" /> + </div> + <div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}> + <div className="item"> + <div className="title">重大风险</div> + <div className="num fcr">467</div> + </div> + <div className="item"> + <div className="title">较大风险</div> + <div className="num fco">467</div> + </div> + <div className="item"> + <div className="title">一般风险</div> + <div className="num fcc">467</div> + </div> + <div className="item"> + <div className="title">低风险</div> + <div className="num fcb">9809</div> + </div> + </div> + </div> + </div> + <div className="block2"> + <Title title={"重大危险源安全情况"} /> + <div className="white_share_left_conten"> + <div className="top"> + <div className="item"> + <div className="title">二级重大危险源（1个）</div> + <div className="item_container"> + <span>储罐数: <span className="fcb">3</span> </span> + <span>在用数: <span className="fcg">3</span> </span> + <span>停用数: <span className="fcr">0</span></span> + </div> + </div> + <div className="item"> + <div className="title">三级重大危险源（2个）</div> + <div className="item_container"> + <span>储罐数: <span className="fcb">10</span> </span> + <span>在用数: <span className="fcg">10</span> </span> + <span>停用数: <span className="fcr">0</span></span> + </div> + </div> + </div> + + <div className="container"> + <div className="left_table"> + <div className="table"> + <div className="tr"> + <div className="th">级别</div> + <div className="th">名称</div> + <div className="th">状态</div> + + </div> + <div className="scroll"> + <SeamlessScroll list={block3List} step={0.5}> + {block3List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.level}</div> + <div className="td">{item.name}</div> + <div className="td">{item.state}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + <div className="info"> + <div className="title"><img src={img1} alt=""/> 东区二号罐液位过低</div> + <div className="comment"> + <p>温度待处置数/报警个数：<span>0/0</span> </p> + <p>压力待处置数/报警个数：<span>0/0</span></p> + <p>液位待处置数/报警个数：<span> <span className="fcr">1</span>/1</span></p> + </div> + </div> + + + + + </div> + </div> + + </div> + <div className="block3"> + <Title title={"隐患排查治理情况"} /> + <div className="white_share_left_conten"> + <div className="top"> + <div className="item"> + <div className="content"> + <div className="title">股份<br/>公司</div> + <div className="info"> + <div className="list"> + <div className="name">隐患总数</div> + <div className="num">1398</div> + </div> + </div> + </div> + </div> + + </div> + + </div> + </div> + + + </div> + + ); +} + +export default WhiteShareLeft; diff --git a/src/pages/Container/Share/components/Left/index.less b/src/pages/Container/Share/components/Left/index.less new file mode 100644 index 0000000..609ed52 --- /dev/null +++ b/src/pages/Container/Share/components/Left/index.less @@ -0,0 +1,271 @@ +.white_share_left{ + width: 500px; + color: #305683; + + .block1{ + width: 100%; + + .white_share_left_conten{ + 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%); + padding: 5px; + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + display: flex; + align-items: center; + border-radius: 2px; + + + .cake_contant{ + width: 100%; + background-size: 100% 100%; + background-repeat: no-repeat; + margin-left: 20px; + display: flex; + flex-wrap: wrap; + + .item{ + width: 50%; + text-align: center; + margin: 5px 0; + .title{ + font-size: 14px; + font-weight: bold; + color: #2b4977; + } + .num{ + font-size: 24px; + + } + .fcb{ + color: #5daaff; + } + .fcc{ + color: #ffa801; + } + .fco{ + color: #ff6000; + } + .fcr{ + color: #ff2709; + } + } + + } + } + } + .block2{ + margin-top: 10px; + .white_share_left_conten{ + 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%); + padding: 5px; + 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; + justify-content: space-between; + .item{ + text-align: center; + border-style: solid; + border-width: 1px; + border-color: rgb(255, 255, 255); + border-radius: 4px; + background-color: rgba(1, 162, 255, 0); + width: 49%; + + box-shadow: 0 2px 2px 0 rgba(114, 163, 191, 0.45); + padding: 10px; + .title{ + font-weight: bold; + color: #305683; + } + .item_container{ + color: #51719c; + margin-top: 5px; + .fcb{ + color: #0097f7; + } + .fcg{ + color: #0a9503; + } + .fcr{ + color: #ff2100; + } + } + + + } + + } + .container{ + width: 100%; + display: flex; + margin-top: 10px; + .left_table{ + width: 50%; + .table-style(109px, 1fr 1.2fr 1fr); + } + .info{ + width: 50%; + margin-left: 10px; + .title{ + font-size: 14px; + border-width: 1px; + border-color: rgb(255, 255, 255); + border-style: solid; + background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%); + background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%); + background-image: -ms-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); + border-radius: 50px; + padding: 5px 10px; + font-weight: bold; + color: #38688e; + } + .comment{ + padding-left: 10px; + margin-top: 10px; + p{ + margin: 0; + line-height: 30px; + color: #305683; + span{ + color: #00aeff; + font-weight: bold; + + .fcr{ + color: #f90102; + + } + } + } + + } + } + + } + } + } + + .block3{ + margin-top: 10px; + .white_share_left_conten{ + 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%); + padding: 5px; + border: 2px solid transparent; + border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1; + display: flex; + align-items: center; + border-radius: 2px; + + .top{ + width: 100%; + .item{ + width: 100%; + border-style: solid; + border-width: 1px; + border-color:#aacbed; + border-radius: 4px; + background-color: rgb(205, 233, 255); + padding: 4px; + .content{ + width: 100%; + border-style: solid; + border-width: 1px; + border-color: rgb(255, 255, 255); + border-radius: 4px; + background-color: rgb(215, 236, 254); + box-shadow: 0 1px 1px 0 rgba(114, 163, 191, 0.45); + display: flex; + align-items: center; + .title{ + font-size: 18px; + color: #457fc0; + font-weight: bold; + border-style: solid; + border-width: 2px; + border-color: #c6e6fe; + background-image: -moz-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%); + background-image: -webkit-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%); + background-image: -ms-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%); + text-align: center; + padding: 5px 10px; + line-height: 20px; + } + .info{ + flex: 1; + .list{ + text-align: center; + width: 25%; + .name{ + font-size: 12px; + } + } + } + } + + } + + } + } + } +} +.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 683c4a0..dcb23a2 100644 --- a/src/pages/Container/Share/index.js +++ b/src/pages/Container/Share/index.js @@ -2,11 +2,17 @@ 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"; function WhiteShareOffice() { return ( <div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}> <Header /> + <div className="white_share_office_content"> + <div className="left"> + <Left/> + </div> + </div> </div> ); } diff --git a/src/pages/Container/Share/index.less b/src/pages/Container/Share/index.less index d21391e..ae29635 100644 --- a/src/pages/Container/Share/index.less +++ b/src/pages/Container/Share/index.less @@ -1,7 +1,15 @@ -.white_branch_office{ +.white_share_office{ width: 100vw; height: 100vh; background-size: 100% 100%; background-repeat: no-repeat; - overflow: hidden; + .white_share_office_content{ + width: 100%; + display: flex; + .left{ + width: 500px; + margin-left: 20px; + } + } } + diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.js b/src/pages/Container/WhiteBranchOffice/components/Title/index.js index e3d5af9..496b8a0 100644 --- a/src/pages/Container/WhiteBranchOffice/components/Title/index.js +++ b/src/pages/Container/WhiteBranchOffice/components/Title/index.js @@ -4,10 +4,14 @@ import "./index.less"; function Title(props) { return ( <div className="white_bi_title"> - <div className="decoration"> - <img src={titlebg} alt="" /> + <div className="name"> + <div className="decoration"> + <img src={titlebg} alt="" /> + </div> + <div className="title">{props.title}</div> </div> - <div className="title">{props.title}</div> + + <div className="more">更多 ></div> </div> ); } diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.less b/src/pages/Container/WhiteBranchOffice/components/Title/index.less index 7debac6..40eda7c 100644 --- a/src/pages/Container/WhiteBranchOffice/components/Title/index.less +++ b/src/pages/Container/WhiteBranchOffice/components/Title/index.less @@ -8,18 +8,29 @@ background-image: linear-gradient(0deg, rgb(206, 227, 246) 0%, rgb(188, 219, 244) 100%); box-shadow: 0.5px 0.866px 2px 0px rgba(44, 91, 162, 0.28), inset 0px 1px 1px 0px rgba(168, 194, 219, 0.82); display: flex; - padding-top: 5px; + justify-content: space-between; + align-items: center; + .name{ + display: flex; + align-items: center; + .decoration { + width: 18px; + height: 18px; + padding-left: 5px; + margin-top: -5px; + } - .decoration { - width: 18px; - height: 18px; - padding-left: 10px; + .title { + font-size: 15px; + color: #3F4554; + font-weight: bold; + padding-left: 10px; + } + } + .more{ + color: #3177be; + margin-right: 10px; } - .title { - font-size: 16px; - color: #3F4554; - font-weight: bold; - padding-left: 18px; - } + }