From 57313b52b84e3c368cb0ae138437d4d3e67eb3bf Mon Sep 17 00:00:00 2001 From: wanggeng <450292408@qq.com> Date: Sat, 16 Mar 2024 23:12:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {src/assets => public}/head-right-bg.png | Bin public/proj-card-head-bg.png | Bin 0 -> 1701 bytes src/App.tsx | 1 + src/components/card/CardProjType.tsx | 27 ++--- src/components/card/card-proj-agent.css | 9 +- src/components/card/card-proj-type.css | 92 +++++++++++++++--- src/components/card/card-proj.css | 8 +- src/components/list/ListProj.tsx | 5 +- src/components/list/list-proj-agent.css | 23 ++++- src/components/list/list-proj.css | 23 ++++- src/components/menu/MenuTreeWithTopButton.tsx | 2 +- src/components/menu/MenuWithTopButton.tsx | 4 +- src/components/menu/menu-with-top-button.css | 1 + src/index.css | 16 +-- src/interfaces/menu/IMenuWithTopButton.ts | 3 +- src/layout/head/Head.tsx | 73 ++++++++------ src/layout/head/head.css | 13 ++- src/main.tsx | 6 +- src/route/index/index.css | 6 +- src/route/index/index.tsx | 12 +-- src/route/proj/ProjNew.tsx | 2 +- 21 files changed, 229 insertions(+), 97 deletions(-) rename {src/assets => public}/head-right-bg.png (100%) create mode 100644 public/proj-card-head-bg.png diff --git a/src/assets/head-right-bg.png b/public/head-right-bg.png similarity index 100% rename from src/assets/head-right-bg.png rename to public/head-right-bg.png diff --git a/public/proj-card-head-bg.png b/public/proj-card-head-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..ac6abee1e3b271866e61d59399169a53b42d0dc1 GIT binary patch literal 1701 zcmV;W23q-vP)Px*Ur9tkRCr$Pom*@abrilq7rXk2aEgGi2_rR}vcO*jBvazB8;B^3LgUhNa@q&jYTZ%$* zwoA@j6gf`d!0`_B^j{l_!g*Dp=bu=2_80nX)1)<)#b4fz6%k?Hj0!7%j8DmNo?>4J zBqgx-=xM}_n^%&z>Io-R#hOno8!L_jm_A&!SyS&bN{aITcNR=K0}%*;93o(tCjK~b zdRWKA)NF^2lX00?R%}eKD3j17110-&n!tt59vo}Gn2bRu{koyzm1L@tu?5QPspVS% z$R%bnSh7E733OcU{-CY>(y`$HkV0nSMv9Xy-sC?FaHSKiXoNrx5-_yF=y+PXzblz{ z$DuQtYCdJ)^<)KQzYxep0t9rZzT#>0^v)q~T@Ga8JaoaDmzeQIE&>(LLLeCd1`g`u z^eS2$GLmT>hb|UeIG0%YD_KF=F9dRwzz#hSS?q0 zi}CK5y2wT+o*jqIE*1;=w-NJdCxt~L1agW1;YqzV(&EIktI$P*{-;#tolXjiMhN5( zftZ$GSW3%w-TI@;+W>GCI{vMhxBTjv~4xL>% z-sC?B@EoU2L?;BYm;h^?dI7y0iaPb^DRi-5&F92;)oBya34v@Sz`$N#Ao7?Sf8Ij( zga0)mwqNy;O$g*R0R zhc5b^f10ZDApiw#8j4m3WDfz_ryU3{paxiOJb4b?^;doJ!vN2B(@?ZRAX^A9)0@7! z@MgDuJcrJ16bsfoLX1{<$IdNw(PsgHs1~zIseVttTQ4bv&TbYD`kTSL!fj*G3xT_t z05gB%t80DHi-(j$7yI$?d1UdQ0L!xLUXFl_xjP9kE!OM8Aup3pIds?0cGc^_WIrHG zOFb_}WQ-6PDFOuSPy>+_1SDOkd8j$1B_!OkD9`AMw*x2}DdW;d2#f{+BI=D_Q|9E? z?>^zRe_BFkH}7j)I7#yI>ttk{5V-RR&^uaf_(LLZXF1zn+Cpa+iw3Kgt4!Mf z6yN#qWQIb(EdgrM1K~QiqXz5K8alhU5v*R$OhEv0VH(7RqfdYs7gbWLD6rf9y>ZH0+Cz6^M$sn!5|yn_Kr|!e zSxNyRFlq#-RkN%*TGe_XT~o+d=PWOBKguA?S(MuLFF3byOfiZxWf zJ(kXf84X<`c>AjK`04!Br0^C1`RSaz)Di+2BG74A{A^x{Z?}^_1aUiujEC;#?uLQhU`>V2cn^%FM0haWk1a9S>?wb^1c=) zgL>>|`_6g|QV|TY(CKMxVi0vPS#eL}8O%`r^)xndXUpt|rkb9{n{2Yh-k1T { return ( <> diff --git a/src/components/card/CardProjType.tsx b/src/components/card/CardProjType.tsx index 14163b0..ab2fa65 100644 --- a/src/components/card/CardProjType.tsx +++ b/src/components/card/CardProjType.tsx @@ -8,7 +8,10 @@ export default function CardProjType(props: ICardProj) { const [chargeAmount, setChargeAmount] = useState(0); const renderContents = (lineIndex: number, contents: string[]) => { - return contents.map((item, index) =>
  • {item}
    • ); + return contents.map((item, index) =>
  • + {index + 1} + {item} +
    • ); } const renderLines = () => { @@ -17,7 +20,7 @@ export default function CardProjType(props: ICardProj) {
    {line.title}
    -
      {renderContents(index, line.contents)}
    +
      {renderContents(index, line.contents)}
    ) @@ -38,15 +41,17 @@ export default function CardProjType(props: ICardProj) { } return ( <> -
    { - props.chargeLineArray.map((line, index) => ( -
    - { - onChargeChange(e.target.checked, line); - }}>{line.title} -
    - )) - }
    +
    + { + props.chargeLineArray.map((line, index) => ( +
    + { + onChargeChange(e.target.checked, line); + }}>{line.title} +
    + )) + } +
    ) } diff --git a/src/components/card/card-proj-agent.css b/src/components/card/card-proj-agent.css index 865df57..ce8019a 100644 --- a/src/components/card/card-proj-agent.css +++ b/src/components/card/card-proj-agent.css @@ -1,7 +1,6 @@ .card-proj-agent { - border-radius: 6px; - border: 1px solid var(--color-border); - padding: 15px; + background-color: var(--color-light); + padding: 5px 15px; } .card-proj-agent .left { @@ -24,8 +23,8 @@ border-left: 0; border-bottom: 0; border-right: 0; - margin-block-start: 10px; - margin-block-end: 10px; + margin-block-start: 5px; + margin-block-end: 5px; } .card-proj-agent .title .left { diff --git a/src/components/card/card-proj-type.css b/src/components/card/card-proj-type.css index 56fb5ba..8fa1de6 100644 --- a/src/components/card/card-proj-type.css +++ b/src/components/card/card-proj-type.css @@ -1,43 +1,99 @@ .proj { width: 250px; + position: relative; } .proj .proj-head { - margin-bottom: 15px; - padding: 15px; font-size: 20px; - font-weight: bold; text-align: center; - border: 1px solid var(--color-border); + background-image: url('./proj-card-head-bg.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + position: absolute; + width: 175px; + height: 40px; + line-height: 40px; + color: var(--color-light); + left: 38px; + top: -4px; } .proj .proj-body { - min-height: 360px; + min-height: 385px; margin-bottom: 15px; - padding: 15px; + padding: 60px 15px 15px 15px; display: flex; flex-direction: column; justify-content: space-between; - - border: 1px solid var(--color-border); + background-color: rgba(244,206,152,0.28); + border-radius: 10px; } .proj .proj-body .line .line-title { font-size: 16px; font-weight: bold; + margin-top: 10px; + margin-bottom: 10px; + padding-left: 30px; } -.proj .proj-body .line .line-content ol { - padding-left: 15px; +.proj .proj-body .line:first-child .line-title { + margin-top: 0; +} +.proj .proj-body .line .line-content ul { +} + +.proj .proj-body .line .line-content ul li { + display: flex; + align-items: center; + margin-bottom: 5px; +} + +.proj .proj-body .line .line-content ul li:last-child { + margin-bottom: 0; +} + +.proj .proj-body .line .line-content ul li .index { + width: 20px; + height: 20px; + line-height: 20px; + border-radius: 50%; + display: inline-block; + background-color: rgba(251,176,59,1); + text-align: center; + color: var(--color-light); + font-size: 12px; +} + +.proj .proj-body .line .line-content ul li .title { + margin-left: 10px; + height: 20px; + line-height: 20px; } .proj .proj-body .proj-charge { + margin-top: 10px; + padding-top: 10px; + border-top: 1px dotted var(--color-light); +} + +.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-inner { + background-color: transparent; +} + +.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner { + border-color: var(--color-orange); +} + +.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner, +.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner { + border-color: var(--color-orange); + background-color: var(--color-orange); } .proj .proj-foot { - padding: 15px; - border: 1px solid var(--color-border); + padding: 0 10px; display: flex; justify-content: center; align-items: center; @@ -46,9 +102,20 @@ .proj .proj-foot .buy-btn { text-align: center; margin: 0 5px; + padding: 10px 0; + background-color: var(--color-orange); + color: var(--color-light); flex-basis: 100%; } +.proj .proj-foot .buy-btn hr { + margin: 5px auto; + width: 80%; + height: 1px; + border: none; + background-color: var(--color-light); +} + .proj .proj-foot .buy-btn .price { } .proj .proj-foot .buy-btn .buy { @@ -58,4 +125,5 @@ border: none; cursor: pointer; background-color: transparent; + color: var(--color-light); } \ No newline at end of file diff --git a/src/components/card/card-proj.css b/src/components/card/card-proj.css index 6641104..4ca9b40 100644 --- a/src/components/card/card-proj.css +++ b/src/components/card/card-proj.css @@ -1,7 +1,7 @@ .card-proj { border-radius: 6px; - border: 1px solid var(--color-border); - padding: 15px; + background-color: var(--color-light); + padding: 5px 15px; } .card-proj .left { @@ -24,8 +24,8 @@ border-left: 0; border-bottom: 0; border-right: 0; - margin-block-start: 10px; - margin-block-end: 10px; + margin-block-start: 5px; + margin-block-end: 5px; } .card-proj .title .left { diff --git a/src/components/list/ListProj.tsx b/src/components/list/ListProj.tsx index ea26cc1..d90d132 100644 --- a/src/components/list/ListProj.tsx +++ b/src/components/list/ListProj.tsx @@ -4,6 +4,7 @@ import {useRef, MutableRefObject} from "react"; import {Input, Pagination} from 'antd'; import type {SearchProps} from 'antd/es/input/Search'; + const {Search} = Input; const onSearch: SearchProps['onSearch'] = (value, _e, info) => { @@ -15,7 +16,7 @@ export default function ListProj() { const listProjRef: MutableRefObject = useRef(null); const listRef: MutableRefObject = useRef(null); - const domHeight = window.innerHeight - 301; + const domHeight = window.innerHeight - 280; return (
    @@ -32,7 +33,7 @@ export default function ListProj() {
    - +
    diff --git a/src/components/list/list-proj-agent.css b/src/components/list/list-proj-agent.css index 981abfc..9405e30 100644 --- a/src/components/list/list-proj-agent.css +++ b/src/components/list/list-proj-agent.css @@ -1,13 +1,13 @@ .list-proj-agent { width: 100%; - padding: 15px 0; } .list-proj-agent .top { - padding: 0 15px 15px 15px; + padding: 10px 15px; display: flex; justify-content: right; border-bottom: 1px solid var(--color-border); + background-color: var(--color-light); } .list-proj-agent .body { @@ -16,7 +16,7 @@ } .list-proj-agent .list { - padding: 15px; + padding: 15px 0; overflow: auto; } @@ -29,7 +29,22 @@ .list-proj-agent .body .page { border-top: 1px solid var(--color-border); - padding-top: 15px; + padding: 10px 15px; display: flex; justify-content: right; + background-color: var(--color-light); +} + +.list-proj-agent .body .page .ant-pagination-item { + border-color: var(--color-border); + color: var(--color-dark); +} + +.list-proj-agent .body .page .ant-pagination-item-active { + border-color: var(--color-orange); + background-color: var(--color-orange); +} + +.list-proj-agent .body .page .ant-pagination-item-active a { + color: var(--color-light); } \ No newline at end of file diff --git a/src/components/list/list-proj.css b/src/components/list/list-proj.css index 48d9c30..6220e55 100644 --- a/src/components/list/list-proj.css +++ b/src/components/list/list-proj.css @@ -1,13 +1,13 @@ .list-proj { width: 100%; - padding: 15px 0; } .list-proj .top { - padding: 0 15px 15px 15px; + padding: 10px 15px; display: flex; justify-content: right; border-bottom: 1px solid var(--color-border); + background-color: var(--color-light); } .list-proj .body { @@ -16,7 +16,7 @@ } .list-proj .list { - padding: 15px; + padding: 15px 0; overflow: auto; } @@ -29,7 +29,22 @@ .list-proj .body .page { border-top: 1px solid var(--color-border); - padding-top: 15px; + padding: 10px 15px; display: flex; justify-content: right; + background-color: var(--color-light); +} + +.list-proj .body .page .ant-pagination-item { + border-color: var(--color-border); + color: var(--color-dark); +} + +.list-proj .body .page .ant-pagination-item-active { + border-color: var(--color-orange); + background-color: var(--color-orange); +} + +.list-proj .body .page .ant-pagination-item-active a { + color: var(--color-light); } \ No newline at end of file diff --git a/src/components/menu/MenuTreeWithTopButton.tsx b/src/components/menu/MenuTreeWithTopButton.tsx index 716be14..0673ee6 100644 --- a/src/components/menu/MenuTreeWithTopButton.tsx +++ b/src/components/menu/MenuTreeWithTopButton.tsx @@ -33,7 +33,7 @@ export default function MenuTreeWithTopButton() { return (
    -