diff --git a/public/fonts/font-awesome/css/mixins.css b/public/fonts/font-awesome/css/mixins.css new file mode 100644 index 0000000..811a7e8 --- /dev/null +++ b/public/fonts/font-awesome/css/mixins.css @@ -0,0 +1 @@ +/*# sourceMappingURL=./mixins.css.map */ \ No newline at end of file diff --git a/src/components/card/CardProjType.tsx b/src/components/card/CardProjType.tsx index f01b5df..a2b3147 100644 --- a/src/components/card/CardProjType.tsx +++ b/src/components/card/CardProjType.tsx @@ -3,8 +3,10 @@ import { ICardProj, ICardProjChargeLine } from "../../interfaces/proj/ICardProj. import { Checkbox } from 'antd'; import { useState } from "react"; import { ProjAdditionalType } from "../../interfaces/proj/IProj.ts"; -import ProjCardHeadBg from '../../assets/proj-card-head-bg.png'; - +// import ProjCardHeadBg from '../../assets/proj-card-head-bg.png'; +import serveImg from '../../static/serve.png' +import useImg from '../../static/use.png' +import leftImg from '../../static/createPro/left.png' export default function CardProjType(props: ICardProj) { const [chargeAmount, setChargeAmount] = useState(0); @@ -17,12 +19,34 @@ export default function CardProjType(props: ICardProj) { {item} ); } + const renderNewContents = (lineIndex: number, contents: string[]) => { + return contents.map((item, index) =>
  • + + + + {item} +
    • ); + } const renderLines = () => { return props.bodyLineArray.map((line, index) => { return (
    -
    {line.title}
    + {/*
    {line.title}
    */} + +
    + +
    +
    + ) + }) + } + const renderNew = () => { + return props.newArray.map((line, index) => { + return ( +
    + {/*
    {line.title}
    */} +
    @@ -58,10 +82,12 @@ export default function CardProjType(props: ICardProj) {
    { props.chargeLineArray.map((line, index) => ( -
    +
    { onChargeChange(e.target.checked, line); - }}>{line.title} + }}> + {line.title} +
    )) } @@ -71,32 +97,90 @@ export default function CardProjType(props: ICardProj) { } const renderBuyBtn = () => { - return props.buyArray.map((buy, index) => { - return ( -
    -
    {buy.label}{(buy.price + chargeAmount) / 100} 元
    -
    -
    - + + return props.buyArray.map((buy, index) => { + return ( +
    +
    {buy.label}{(buy.price + chargeAmount) / 100} 元
    + {/*
    */} +
    + +
    -
    - ) - }) + ) + }) + } + + // const lprice = props.buyArray[0].price + // const llabel = props.buyArray[0].label + // return ( + //
    + //
    + //
    + // {llabel}{(lprice) / 100} 元 + //
    + //
    + // + //
    + //
    + //
    + //
    + // {llabel}{(lprice) / 100} 元 + //
    + //
    + // + //
    + //
    + //
    + // ) + + + + + + // return ( + //
    + //
    {buy.label}{(buy.price + chargeAmount) / 100} 元
    + // {/*
    */} + //
    + // + //
    + //
    + // ) + + return (
    -
    + {/*
    */} +
    {props.head}
    {renderLines()}
    +
    {renderNew()}
    {renderCharge()}
    diff --git a/src/components/card/card-proj-type.css b/src/components/card/card-proj-type.css index ebd9ac1..1d9d25a 100644 --- a/src/components/card/card-proj-type.css +++ b/src/components/card/card-proj-type.css @@ -1,39 +1,52 @@ .proj { width: 375px; - height: 842px; - position: relative; - background-color: pink; + /* height: 842px; */ + /* position: relative; */ + /* background-color: rgb(255, 255, 255); */ } -.projTop{ - height: 725px; + +.seruseImg { + width: 336px; + height: 38px; } + +.projTop { + height: 745px; + background-color: rgb(255, 255, 255); +} + .proj .proj-head { - font-size: 20px; + font-weight: bold; + font-size: 33px; + color: #492800; text-align: center; - 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; + /* background-image: url('./proj-card-head-bg.png'); */ + /* background-size: 100% 100%; */ + /* background-repeat: no-repeat; */ + /* position: absolute; */ + width: 100%; + height: 132px; + line-height: 132px; + /* left: 38px; */ + /* top: -4px; */ + /* background-color: aqua; */ } .proj .proj-body { - min-height: 385px; + /* min-height: 385px; */ margin-bottom: 15px; - padding: 60px 15px 15px 15px; + /* padding: 60px 15px 15px 15px; */ display: flex; flex-direction: column; - justify-content: space-between; - background-color: rgba(244,206,152,0.28); + /* justify-content: space-between; */ + align-items: center; + /* background-color: rgba(244, 206, 152, 0.28); */ border-radius: 10px; + position: relative; + height: 613px; } -.proj .proj-body .line .line-title { +/* .proj .proj-body .line .line-title { font-size: 16px; font-weight: bold; margin-top: 10px; @@ -43,15 +56,22 @@ .proj .proj-body .line:first-child .line-title { margin-top: 0; +} */ +.useline { + margin-top: 33px; } -.proj .proj-body .line .line-content ul { -} +.proj .proj-body .line .line-content ul {} .proj .proj-body .line .line-content ul li { display: flex; align-items: center; - margin-bottom: 5px; + margin-top: 27px; + font-family: PingFang SC; + font-weight: 500; + font-size: 18px; + color: #6F6F6F; + margin-left: 48px; } .proj .proj-body .line .line-content ul li:last-child { @@ -64,12 +84,18 @@ line-height: 20px; border-radius: 50%; display: inline-block; - background-color: rgba(251,176,59,1); + /* background-color: rgba(251, 176, 59, 1); */ + background: #F38F1E; text-align: center; color: var(--color-light); font-size: 12px; } +.proj .proj-body .line .line-content ul li .newIndex img { + width: 26px; + height: 20px; +} + .proj .proj-body .line .line-content ul li .title { margin-left: 10px; height: 20px; @@ -77,19 +103,35 @@ } .proj .proj-body .proj-charge { - margin-top: 10px; - padding-top: 10px; - border-top: 1px dotted var(--color-light); + /* margin-top: 10px; + padding-top: 10px; */ + /* border-top: 1px dotted var(--color-light); */ + /* margin-bottom: 48px; */ + position: absolute; + bottom: 45px; + left: 70px; + /* background-color: #F38F1E; */ + } .proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-inner { - background-color: transparent; + /* background-color: transparent; */ } .proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner { border-color: var(--color-primary); } +.chargeline { + margin-top: 20px; +} + +.chargeCon { + font-weight: 500; + font-size: 18px; + color: #989898; +} + .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-primary); @@ -98,40 +140,68 @@ .proj .proj-foot { /* margin-top: 749px; */ - padding: 0 10px; + /* padding: 0 10px; */ display: flex; - justify-content: center; - align-items: center; + /* justify-content: center; */ + /* align-items: center; */ margin-top: 23px; + width: 375px; height: 94px; - background-color: aqua; + /* background-color: pink; */ + } .proj .proj-foot .buy-btn { - text-align: center; + width: 100%; + height: 94px; + padding: 0 10px; + background: url(../../static/createPro/buyBack.png); + background-size: 100% 100%; + + /* text-align: center; margin: 0 5px; padding: 10px 0; background-color: var(--color-primary); color: var(--color-light); - flex-basis: 100%; + flex-basis: 100%; */ } -.proj .proj-foot .buy-btn hr { +/* .proj .proj-foot .buy-btn hr { margin: 5px auto; width: 80%; height: 1px; border: none; - background-color: var(--color-light); -} + background-color: red; +} */ .proj .proj-foot .buy-btn .price { -} -.proj .proj-foot .buy-btn .buy { + font-family: FZSuHeiS; + font-weight: 600; + font-size: 18px; + color: #FB6C15; + height: 46px; + text-align: center; + line-height: 46px; + /* background-color: antiquewhite; */ + border-bottom: 1px dashed #E3E3E3; } +.proj .proj-foot .buy-btn .buy {} + .proj .proj-foot .buy-btn .buy button { + height: 46px; + width: 100%; + border: none; cursor: pointer; - background-color: transparent; - color: var(--color-light); + background-color: rgb(255, 255, 255); + /* color: var(--color-light); */ + font-family: PingFang SC; + font-weight: 800; + font-size: 18px; + color: #696969; +} +.proj-foot .buy-btn:nth-child(2){ + /* background-color: red; */ + margin-left: 9px; } \ No newline at end of file diff --git a/src/components/step/StepProjEdit.tsx b/src/components/step/StepProjEdit.tsx index 478eb1e..f535b1c 100644 --- a/src/components/step/StepProjEdit.tsx +++ b/src/components/step/StepProjEdit.tsx @@ -7,20 +7,43 @@ export default function StepProjEdit(props: IStepProj) { const height = window.innerHeight - 390; const renderStepNo = () => { + // if (props.process == Process.COMPLETE) { + // return ( + //
    + // + //
    + // ) + // } else if (props.process == Process.PROCESSING) { + // return
    {props.step}
    + // } + // return ( + //
    + // {props.step} + //
    + // ) if (props.process == Process.COMPLETE) { return ( -
    - +
    + {props.step}
    ) } else if (props.process == Process.PROCESSING) { return
    {props.step}
    } return ( -
    +
    {props.step}
    ) + } const renderStepDesc = () => { @@ -28,14 +51,14 @@ export default function StepProjEdit(props: IStepProj) { return (
    {props.descTitle}
    -
    {props.descDetail}
    + {/*
    {props.descDetail}
    */}
    ) } return (
    {props.descTitle}
    -
    {props.descDetail}
    + {/*
    {props.descDetail}
    */}
    ) } @@ -52,10 +75,10 @@ export default function StepProjEdit(props: IStepProj) { return (
    -
    +
    {renderStepNo()} {renderStepDesc()} - {renderStepLine()} + {/* {renderStepLine()} */}
    {props.children}
    diff --git a/src/components/step/step-proj-edit.css b/src/components/step/step-proj-edit.css index 4962f67..1e9c8e2 100644 --- a/src/components/step/step-proj-edit.css +++ b/src/components/step/step-proj-edit.css @@ -3,57 +3,153 @@ position: relative; } +.step-proj .fiestStep { + width: 282px; + height: 56px; + background-color: pink; + position: relative; + display: flex; + align-items: center; +} +/* style={{ + background:props.process != Process.PENDING?'#3790FF':'#8B919D', + }} */ +.step-proj .fiestStep:before { + content: ""; + position: absolute; + right: -28px; + top: 0; + width: 0; + height: 0; + border-left: 28px solid ; + border-top: 28px solid transparent; + border-bottom: 28px solid transparent; +} + +.step-proj .fiestStep .complete { + margin-left: 10px; +} + .step-proj .step { - margin-top: 30px; + /* margin-top: 30px; display: flex; flex-direction: row; justify-content: center; align-items: start; + position: relative; */ + width: 282px; + height: 56px; + background-color: pink; position: relative; + display: flex; + align-items: center; +} + +.step-proj .step:after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0; + height: 0; + border-left: 28px solid var(--color-light); + border-top: 28px solid transparent; + border-bottom: 28px solid transparent; +} + +.step-proj .step:before { + content: ""; + position: absolute; + right: -28px; + top: 0; + width: 0; + height: 0; + border-left: 28px solid red; + border-top: 28px solid transparent; + border-bottom: 28px solid transparent; } .step-proj .step .no { - width: 38px; + /* width: 38px; height: 38px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; - justify-content: center; + justify-content: center; */ } -.step-proj .step .complete { +.step-proj .complete { + width: 30px; + height: 30px; + background-color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; border: 1px solid var(--color-primary); color: var(--color-primary); + color: #3790FF; } -.step-proj .step .processing { - border: 1px solid var(--color-primary); +.step-proj .processing { + /* border: 1px solid var(--color-primary); background-color: var(--color-primary); - color: var(--color-light); + color: var(--color-light); */ + width: 21px; + height: 21px; + border-radius: 50%; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + color: #B5B5B5; + } -.step-proj .step .pending { +.step-proj .notop { + width: 21px; + height: 21px; + border-radius: 50%; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + color: #B5B5B5; +} + +.step-proj .pending { border: 1px solid var(--color-disabled); color: var(--color-disabled); } -.step-proj .step .desc { +.step-proj .desc { margin-left: 15px; width: 150px; border: none; + /* background-color: #3790FF; */ + display: flex; + } -.step-proj .step .desc .title { - margin-top: 8px; +.step-proj .desc .title { font-weight: bold; + /* background-color: #3790FF; */ + } -.step-proj .step .pending .title { +.step-proj .fiestStep .desc .title { + margin-left: 60px; + font-weight: 300; + font-size: 16px; + color: #FFFFFF; +} + +.step-proj .pending .title { color: var(--color-text-disabled); } -.step-proj .step .desc .detail { +.step-proj .desc .detail { margin-top: 10px; font-size: 12px; width: 100%; diff --git a/src/interfaces/proj/ICardProj.ts b/src/interfaces/proj/ICardProj.ts index da83efe..d6c6cb6 100644 --- a/src/interfaces/proj/ICardProj.ts +++ b/src/interfaces/proj/ICardProj.ts @@ -26,4 +26,5 @@ export interface ICardProj { bodyLineArray: ICardProjBodyLine[]; chargeLineArray?: ICardProjChargeLine[]; buyArray: ICardProjBuy[]; + newArray:ICardProjBodyLine[]; } \ No newline at end of file diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx index 7e468e4..f0146a1 100644 --- a/src/route/index/Index.tsx +++ b/src/route/index/Index.tsx @@ -141,12 +141,16 @@ export default function Index() { useEffect(()=>{ // const nowname = sessionStorage.getItem('now') console.log( '路由名字', location.pathname); - if(location.pathname == '/home'){ + if(location.pathname.includes('/home') ){ setNow('首页') setPathArray([ { title: 首页 }]) - }else if(location.pathname == '/proj-create'){ + }else if(location.pathname.includes('/proj-create') ){ setNow('创建项目') - setPathArray([ { title: 首页 },{title: 创建}]) + setPathArray([ { title: 首页 },{title: 创建项目}]) + // + }else if(location.pathname.includes('/proj-edit')){ + setNow('编辑项目') + setPathArray([ { title: 首页 },{title: 创建项目},{title: 编辑项目}]) } },[location.pathname]) diff --git a/src/route/proj/ProjCreate.tsx b/src/route/proj/ProjCreate.tsx index 5006708..9525966 100644 --- a/src/route/proj/ProjCreate.tsx +++ b/src/route/proj/ProjCreate.tsx @@ -1,11 +1,11 @@ import './proj-create.css' -import { useNavigate } from "react-router-dom"; -import { message } from "antd"; +import { useNavigate } from "react-router-dom"; +import { message } from "antd"; import CardProjType from "../../components/card/CardProjType.tsx"; import { IProjCharge, ProjAdditionalType, ProjChargeType } from "../../interfaces/proj/IProj.ts"; import { useEffect, useState } from "react"; import { get } from "../../util/AjaxUtils.ts"; -import { Link } from "react-router-dom"; +// import { Link } from "react-router-dom"; export default function ProjCreate() { const [messageApi, contextHolder] = message.useMessage(); @@ -18,7 +18,7 @@ export default function ProjCreate() { free: 0, }, additional: { - pkg: 0, + pkg: 0, videoDemo: 0 } }); @@ -31,6 +31,8 @@ export default function ProjCreate() { url: '/api/proj/charge/get', onSuccess({ data }) { setCharge(data); + // console.log('后面的price',data.proj.materialAgent); + } }) // sessionStorage.setItem('pathArray', JSON.stringify([ { title: 首页 },{ title: '创建项目' }])); @@ -115,26 +117,27 @@ export default function ProjCreate() { {/* title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元`*/} {/* }*/} {/* ]}*/} - {/* buyArray={[*/} - {/* {*/} - {/* id: ProjChargeType.MATERIAL_AGENT,*/} - {/* label: '普件：',*/} - {/* price: charge.proj.materialAgent,*/} - {/* handleClick: (_title, additional) => {*/} - {/* nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)*/} - {/* }*/} - {/* },*/} - {/* {*/} - {/* id: ProjChargeType.MATERIAL_AGENT_URGENT,*/} - {/* label: '加急：',*/} - {/* price: charge.proj.materialAgentUrgent,*/} - {/* handleClick: (_title, additional) => {*/} - {/* nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`)*/} - {/* }*/} - {/* }*/} - {/* ]}*/} + {/* buyArray={[ + { + id: ProjChargeType.MATERIAL_AGENT, + label: '普件：', + price: charge.proj.materialAgent, + handleClick: (_title, additional) => { + nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`) + } + }, + { + id: ProjChargeType.MATERIAL_AGENT_URGENT, + label: '加急：', + price: charge.proj.materialAgentUrgent, + handleClick: (_title, additional) => { + nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`) + } + } + ]} */} {/*/>*/} - { + nav(`/proj-new/${ProjChargeType.MATERIAL}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`); + } + } + ]} + /> */} + + { + nav(`/proj-new/${ProjChargeType.ALL}`) + } + } + ]} + /> + { + nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`) + } + }, + { + id: ProjChargeType.MATERIAL_AGENT_URGENT, + label: '加急：', + price: charge.proj.materialAgentUrgent, + handleClick: (_title, additional) => { + nav(`/proj-new/${ProjChargeType.MATERIAL_AGENT_URGENT}?pkg=${additional.pkg}&videoDemo=${additional.videoDemo}`) + } + } + ]} + chargeLineArray={[ + { + id: ProjAdditionalType.PKG, + price: charge.additional.pkg, + title: `安装包 ${charge.additional.pkg / 100} 元` + }, + { + id: ProjAdditionalType.VIDEO_DEMO, + price: charge.additional.videoDemo, + title: `系统演示视频文件 ${charge.additional.videoDemo / 100} 元` + } + ]} + /> + - { - nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`) - } - } - ]} + { + nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`) + } + } + ]} />
    diff --git a/src/route/proj/ProjEdit.tsx b/src/route/proj/ProjEdit.tsx index ec24cf3..ba23eb2 100644 --- a/src/route/proj/ProjEdit.tsx +++ b/src/route/proj/ProjEdit.tsx @@ -1,6 +1,7 @@ import './proj-edit.css'; -import {Link, useNavigate, useParams} from "react-router-dom"; -import {Breadcrumb, Button, FloatButton, message, Modal} from "antd"; +// import {Link, useNavigate, useParams} from "react-router-dom"; +import { useNavigate, useParams} from "react-router-dom"; +import { Button, FloatButton, message, Modal} from "antd"; import StepProjEdit from "../../components/step/StepProjEdit.tsx"; import CardProjEdit from "../../components/card/CardProjEdit.tsx"; import {Process} from "../../interfaces/step/IStepProj.ts"; @@ -232,17 +233,17 @@ export default function ProjEdit() { useEffect(() => { renderData(); }, []) - + return ( - <> +
    {contextHolder} - 首页}, {title: 创建项目}, {title: '编辑项目'}, ]} - /> + /> */}
    - +
    ) } \ No newline at end of file diff --git a/src/route/proj/ProjEditAll.tsx b/src/route/proj/ProjEditAll.tsx index 6dc3988..a973ec6 100644 --- a/src/route/proj/ProjEditAll.tsx +++ b/src/route/proj/ProjEditAll.tsx @@ -100,7 +100,7 @@ export default function ProjEditAll() { renderData(); }, []) - return ( + return ( <> {contextHolder} + <> {contextHolder}