From ba054a7448567868309fc13471eca436bdd4e6a4 Mon Sep 17 00:00:00 2001 From: WenC <450292408@qq.com> Date: Mon, 18 Mar 2024 18:50:36 +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/no-data.png | Bin 0 -> 5931 bytes src/components/card/CardAgent.tsx | 10 +- src/components/card/CardProj.tsx | 57 ++++--- src/components/card/card-agent.css | 17 ++ src/components/card/card-proj-type.css | 8 +- src/components/card/card-proj.css | 7 + src/components/list/list-proj-agent.css | 4 +- src/components/list/list-proj.css | 4 +- src/components/step/step-proj-edit.css | 10 +- src/index.css | 4 +- src/route/agent/AgentSelect.tsx | 199 ++++++++++++++++-------- src/route/agent/agent-select.css | 26 +++- src/route/proj/ProjEdit.tsx | 2 +- src/route/proj/ProjNew.tsx | 2 +- 14 files changed, 228 insertions(+), 122 deletions(-) create mode 100644 src/assets/no-data.png diff --git a/src/assets/no-data.png b/src/assets/no-data.png new file mode 100644 index 0000000000000000000000000000000000000000..a7d3e74f480edcdb49e842230dfa5a3d5fd7dae4 GIT binary patch literal 5931 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 literal 0 HcmV?d00001 diff --git a/src/components/card/CardAgent.tsx b/src/components/card/CardAgent.tsx index fdd1d1d..39d81ef 100644 --- a/src/components/card/CardAgent.tsx +++ b/src/components/card/CardAgent.tsx @@ -6,24 +6,24 @@ import {AgentMedalEnum, IAgent} from "../../interfaces/card/ICardProj.ts"; export default function CardAgent(props: IAgent) { const renderMedal = () => { - if(props.medal == AgentMedalEnum.GOLD) { + if (props.medal == AgentMedalEnum.GOLD) { return 金牌; } - if(props.medal == AgentMedalEnum.SILVER) { + if (props.medal == AgentMedalEnum.SILVER) { return 银牌; } - if(props.medal == AgentMedalEnum.BRONZE) { + if (props.medal == AgentMedalEnum.BRONZE) { return 铜牌; } return 普通; } return ( -
{ +
{ props.handleSelect(); }}>
- {props.logo ? : <>} + {props.logo ? : <>} {props.name} {renderMedal()}
diff --git a/src/components/card/CardProj.tsx b/src/components/card/CardProj.tsx index 158396c..a5c3937 100644 --- a/src/components/card/CardProj.tsx +++ b/src/components/card/CardProj.tsx @@ -1,18 +1,6 @@ import './card-proj.css'; -import {DownOutlined, EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined} from '@ant-design/icons'; -import {MenuProps} from 'antd'; -import {Dropdown, Space} from 'antd'; - -const items: MenuProps['items'] = [ - { - key: '1', - label: ( - - 1st menu item - - ), - }, -]; +import {EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined, SettingOutlined, DownloadOutlined} from '@ant-design/icons'; +import {Button, ConfigProvider, Tag} from 'antd'; export default function CardProj() { return ( @@ -49,30 +37,37 @@ export default function CardProj() {
+
+
+ +
+ + + +
+
+ + + + +
+ +
) } \ No newline at end of file diff --git a/src/components/card/card-agent.css b/src/components/card/card-agent.css index a6ab169..60c4a27 100644 --- a/src/components/card/card-agent.css +++ b/src/components/card/card-agent.css @@ -1,6 +1,23 @@ .card-agent { } +.selected { + position: relative; +} + +.selected:before { + content: ''; + position: absolute; + width: 10px; + height: 10px; + border: 5px solid var(--color-red); + z-index: 10; + top: 0; + right: 0; + border-left: transparent; + border-bottom: transparent; +} + .card-agent .card-agent-head { padding: 10px 10px 5px 10px; display: flex; diff --git a/src/components/card/card-proj-type.css b/src/components/card/card-proj-type.css index 8fa1de6..2727e07 100644 --- a/src/components/card/card-proj-type.css +++ b/src/components/card/card-proj-type.css @@ -83,13 +83,13 @@ } .proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner { - border-color: var(--color-orange); + border-color: var(--color-primary); } .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); + border-color: var(--color-primary); + background-color: var(--color-primary); } .proj .proj-foot { @@ -103,7 +103,7 @@ text-align: center; margin: 0 5px; padding: 10px 0; - background-color: var(--color-orange); + background-color: var(--color-primary); color: var(--color-light); flex-basis: 100%; } diff --git a/src/components/card/card-proj.css b/src/components/card/card-proj.css index 4ca9b40..74d0aed 100644 --- a/src/components/card/card-proj.css +++ b/src/components/card/card-proj.css @@ -74,3 +74,10 @@ margin-left: 5px; } +.card-proj .foot { + position: unset; + background-color: transparent; + display: flex; + justify-content: space-between; + align-items: center; +} diff --git a/src/components/list/list-proj-agent.css b/src/components/list/list-proj-agent.css index 9405e30..19ced95 100644 --- a/src/components/list/list-proj-agent.css +++ b/src/components/list/list-proj-agent.css @@ -41,8 +41,8 @@ } .list-proj-agent .body .page .ant-pagination-item-active { - border-color: var(--color-orange); - background-color: var(--color-orange); + border-color: var(--color-primary); + background-color: var(--color-primary); } .list-proj-agent .body .page .ant-pagination-item-active a { diff --git a/src/components/list/list-proj.css b/src/components/list/list-proj.css index 6220e55..04de9b0 100644 --- a/src/components/list/list-proj.css +++ b/src/components/list/list-proj.css @@ -41,8 +41,8 @@ } .list-proj .body .page .ant-pagination-item-active { - border-color: var(--color-orange); - background-color: var(--color-orange); + border-color: var(--color-primary); + background-color: var(--color-primary); } .list-proj .body .page .ant-pagination-item-active a { diff --git a/src/components/step/step-proj-edit.css b/src/components/step/step-proj-edit.css index 046f3e6..4962f67 100644 --- a/src/components/step/step-proj-edit.css +++ b/src/components/step/step-proj-edit.css @@ -23,13 +23,13 @@ } .step-proj .step .complete { - border: 1px solid var(--color-blue); - color: var(--color-blue); + border: 1px solid var(--color-primary); + color: var(--color-primary); } .step-proj .step .processing { - border: 1px solid var(--color-blue); - background-color: var(--color-blue); + border: 1px solid var(--color-primary); + background-color: var(--color-primary); color: var(--color-light); } @@ -77,7 +77,7 @@ } .step-proj .step-line-complete { - border-color: var(--color-blue); + border-color: var(--color-primary); } .step-proj .step-card { diff --git a/src/index.css b/src/index.css index c92c5f5..08de4fe 100644 --- a/src/index.css +++ b/src/index.css @@ -2,7 +2,7 @@ --color-border: rgba(206, 206, 206, 0.4); --color-box-shadow: rgba(206, 206, 206, 0.4); --color-red: #ff5722; - --color-orange: rgba(252, 189, 0, 1); + --color-primary: rgba(252, 189, 0, 1); --color-green: rgba(129, 179, 55, 1); --color-blue: rgba(64, 149, 229, 1); --color-purple: #a233c6; @@ -55,7 +55,7 @@ ul { } .btn-orange { - background-color: var(--color-orange); + background-color: var(--color-primary); color: var(--color-light); } diff --git a/src/route/agent/AgentSelect.tsx b/src/route/agent/AgentSelect.tsx index f5a22b6..6906923 100644 --- a/src/route/agent/AgentSelect.tsx +++ b/src/route/agent/AgentSelect.tsx @@ -5,6 +5,7 @@ import CardAgent from "../../components/card/CardAgent.tsx"; import {errorImage} from "../../util/CommonUtil.ts"; import {useState} from "react"; import {AgentMedalEnum} from "../../interfaces/card/ICardProj.ts"; +import NoData from '../../assets/no-data.png'; export default function AgentSelect() { const [value, setValue] = useState(1); @@ -12,6 +13,121 @@ export default function AgentSelect() { // const params = useParams(); const height = window.innerHeight - 150; + const [selectedAgentId, setSelectedAgentId] = useState('0'); + const [selectedAgent, setSelectedAgent] = useState({}); + + // 列表 + const [agentList, setAgentList] = useState([{ + id: '1', + logo: '1', + name: '标题1', + desc: '描述1', + medal: AgentMedalEnum.GOLD, + certificateImg: '1', + selected: false + }, { + id: '2', + logo: '2', + name: '标题2', + desc: '描述2', + medal: AgentMedalEnum.GOLD, + certificateImg: '1', + selected: false + }]); + + const renderAgent = () => { + return agentList.map((item, index) => { + return ( + { + setSelectedAgentId(item.id); + setSelectedAgent(item); + }} + /> + ) + }) + } + + const renderSelectedAgent = () => { + if (Object.keys(selectedAgent).length == 0) { + return ( + <> +
+ + 请选择左侧机构 +
+ + ) + } + return ( + <> +
+
机构信息
+
+
北京九思恒源科技有限公司
+
+ 雄厚的技术与人才实力，赢得了客户的深厚信赖，获得了政府部门的高度认可，公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时，公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程，缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。 +
+ +
机构证书
+
+ + + + +
+ +
+
+ 联系人：XXXXXX + 联系电话：13888888888 +
+
+ 联系地址：内蒙古呼和浩特新城区XXXXXX +
+
+
+
+
+ 价格种类： + { + console.log('radio checked', e.target.value); + setValue(e.target.value); + }} value={value}> + 普通件：200 + 加急件：400 + +
+
+ +
+ + ) + } + return ( <>
- { - console.log('1') - }} - /> + {renderAgent()}
- +
-
-
-
机构信息
-
-
北京九思恒源科技有限公司
-
- 雄厚的技术与人才实力，赢得了客户的深厚信赖，获得了政府部门的高度认可，公司先后荣获“全国重合同守信用单位”、“先进施工企业”、“长沙市利税大户”等诸多荣誉称号。与此同时，公司承建的湖南中联重科起重机厂钢结构厂房、三一重工娄底基地车间、北京资源集团宁乡基地车间、双胞胎饲料集团长沙基地厂房、南昌西客站高铁钢结构候客大厅、江西送变电建设中超公司厂房等一大批各类钢结构优质工程，缔造了“鼎盛钢构”卓尔不群的品牌知名度和美誉度。 -
- -
机构证书
-
- - - - -
- -
-
- 联系人：XXXXXX - 联系电话：13888888888 -
-
- 联系地址：内蒙古呼和浩特新城区XXXXXX -
-
-
-
-
- 价格种类： - { - console.log('radio checked', e.target.value); - setValue(e.target.value); - }} value={value}> - 普通件：200 - 加急件：400 - -
-
+
{renderSelectedAgent()}
diff --git a/src/route/agent/agent-select.css b/src/route/agent/agent-select.css index 256eaf3..9ffde20 100644 --- a/src/route/agent/agent-select.css +++ b/src/route/agent/agent-select.css @@ -48,13 +48,27 @@ padding: 15px; height: calc(100% - 30px); overflow: auto; + width: 840px; +} + +.agent-select .agent-select-right .no-data { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.agent-select .agent-select-right .no-data span { + margin-top: 15px; + color: var(--color-dark); } .agent-select .agent-select-right .agent-info .agent-title { border: 1px solid var(--color-border); background-color: rgba(228,229,238,0.5); padding: 5px 15px; - font-weight: 600; + font-weight: bold; } .agent-select .agent-select-right .agent-info .agent-body { @@ -65,7 +79,7 @@ .agent-select .agent-select-right .agent-info .agent-body .agent-name { padding: 5px 0; - font-weight: 500; + font-weight: bold; } .agent-select .agent-select-right .agent-info .agent-body .agent-desc { @@ -103,6 +117,14 @@ padding: 15px; } +.agent-select .agent-select-right .agent-price .ant-radio-inner { + border: 1px solid var(--color-primary); +} + +.agent-select .agent-select-right .agent-price .ant-radio-checked .ant-radio-inner { + background-color: var(--color-primary); +} + .agent-select .agent-select-right .agent-price .label { font-weight: bold; } \ No newline at end of file diff --git a/src/route/proj/ProjEdit.tsx b/src/route/proj/ProjEdit.tsx index 0fb60d0..dad0dc5 100644 --- a/src/route/proj/ProjEdit.tsx +++ b/src/route/proj/ProjEdit.tsx @@ -74,7 +74,7 @@ export default function ProjEdit() {
-
diff --git a/src/route/proj/ProjNew.tsx b/src/route/proj/ProjNew.tsx index 14e1b5c..c0848db 100644 --- a/src/route/proj/ProjNew.tsx +++ b/src/route/proj/ProjNew.tsx @@ -80,7 +80,7 @@ export default function ProjNew() { -