diff --git a/src/assets/images/V-2504/left-bottom-status-bg.png b/src/assets/images/V-2504/left-bottom-status-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..73c26eade322884144aa01b49992f4db74861346 Binary files /dev/null and b/src/assets/images/V-2504/left-bottom-status-bg.png differ diff --git a/src/assets/images/V-2504/main-complaint.png b/src/assets/images/V-2504/main-complaint.png new file mode 100644 index 0000000000000000000000000000000000000000..c8f8b8fd444bed683d577d5c2e88601dce50fa41 Binary files /dev/null and b/src/assets/images/V-2504/main-complaint.png differ diff --git a/src/assets/images/V-2504/main-drainage.png b/src/assets/images/V-2504/main-drainage.png new file mode 100644 index 0000000000000000000000000000000000000000..f89143391007e5de7ab3127a3c104fe1f4a4ce5d Binary files /dev/null and b/src/assets/images/V-2504/main-drainage.png differ diff --git a/src/assets/images/V-2504/main-lighting.png b/src/assets/images/V-2504/main-lighting.png new file mode 100644 index 0000000000000000000000000000000000000000..389b85783e585e5a3e1c5ae8a606e80413a7e0bf Binary files /dev/null and b/src/assets/images/V-2504/main-lighting.png differ diff --git a/src/assets/images/V-2504/main-manhole.png b/src/assets/images/V-2504/main-manhole.png new file mode 100644 index 0000000000000000000000000000000000000000..4714135b1aa25b90e6aa4d23263c3d58e64a25ff Binary files /dev/null and b/src/assets/images/V-2504/main-manhole.png differ diff --git a/src/assets/images/V-2504/main-online.png b/src/assets/images/V-2504/main-online.png new file mode 100644 index 0000000000000000000000000000000000000000..fca9c0af2080bb2026512f03cf4f7888db923046 Binary files /dev/null and b/src/assets/images/V-2504/main-online.png differ diff --git a/src/assets/images/V-2504/main-panel-diamond.png b/src/assets/images/V-2504/main-panel-diamond.png new file mode 100644 index 0000000000000000000000000000000000000000..0e54b9d3528e823dde8cb07c9b2a0e782b6044a9 Binary files /dev/null and b/src/assets/images/V-2504/main-panel-diamond.png differ diff --git a/src/assets/images/V-2504/main-patrol.png b/src/assets/images/V-2504/main-patrol.png new file mode 100644 index 0000000000000000000000000000000000000000..900ef4b8ca5f12a378b58be26cf03fb7f4018424 Binary files /dev/null and b/src/assets/images/V-2504/main-patrol.png differ diff --git a/src/assets/images/V-2504/main-restaurant.png b/src/assets/images/V-2504/main-restaurant.png new file mode 100644 index 0000000000000000000000000000000000000000..f96820451c551909116e7fc8a3b0d43f36f918f2 Binary files /dev/null and b/src/assets/images/V-2504/main-restaurant.png differ diff --git a/src/assets/images/V-2504/main-toilet.png b/src/assets/images/V-2504/main-toilet.png new file mode 100644 index 0000000000000000000000000000000000000000..3ef1b6bc300323a0e028e0780d80595dd8a83498 Binary files /dev/null and b/src/assets/images/V-2504/main-toilet.png differ diff --git a/src/components/StatusCard/index.less b/src/components/StatusCard/index.less index 14f298d60af4dadc6b77c9271e85ab7785e6fe44..732d162b59344d5f96a8cfd6f5af3ada553b37a1 100644 --- a/src/components/StatusCard/index.less +++ b/src/components/StatusCard/index.less @@ -32,12 +32,32 @@ display: flex; justify-content: center; flex-grow: 1; + position: relative; +} + +.bgIcon { + width: 91px; + height: 91px; + object-fit: contain; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); } .icon { - width: 48px; - height: 43px; + // width: 48px; + // height: 43px; + // width: 48px; + // height: 43px; object-fit: contain; + position: absolute; + top: 50%; + left: 50%; + // top: 25px; + // transform: translateX(-50%); + transform: translate(-50%, -50%); + // margin-top: 92.5px; } .title { @@ -47,7 +67,7 @@ font-weight: 400; line-height: 22px; text-align: center; - margin-bottom: 14px; + margin-bottom: 16px; } .rightSection { @@ -55,7 +75,7 @@ display: flex; flex-direction: column; justify-content: flex-start; - padding: 16px 17px 0 0; + padding: 16px 17px 0 22px; gap: 10px; } @@ -98,7 +118,7 @@ .unit { position: absolute; - right: 10px; + right: 17px; color: rgb(255, 255, 255); font-family: 思源黑体; font-size: 16px; diff --git a/src/components/StatusCard/index.tsx b/src/components/StatusCard/index.tsx index 42932f228d390196c67a380555003bed98a2b9b7..c791acbce997fe89d00e98ca03c9e35c50a64305 100644 --- a/src/components/StatusCard/index.tsx +++ b/src/components/StatusCard/index.tsx @@ -1,12 +1,15 @@ import React from 'react'; import classNames from 'classnames'; +import CountUp from 'react-countup'; import styles from './index.less'; +import bgIcon from '@/assets/images/V-2504/left-bottom-status-bg.png'; export interface DataRow { label: string; value: string | number; unit: string; status?: 'normal' | 'warning' | 'error'; // normal (default), warning (超标), error (告警) + decimals?: number; } export interface StatusCardProps { @@ -14,6 +17,7 @@ export interface StatusCardProps { iconSrc: string; dataRows: DataRow[]; isActive?: boolean; + iconStyle?: React.CSSProperties; onClick?: () => void; } @@ -23,6 +27,7 @@ const StatusCard: React.FC = ({ dataRows, isActive = false, onClick, + iconStyle, }) => { return (
= ({ >
- {title} + + {title}
{title}
@@ -46,7 +62,15 @@ const StatusCard: React.FC = ({ [styles.errorValue]: row.status === 'error' })} > - {row.value} + {typeof row.value === 'number' ? ( + + ) : ( + row.value + )}
{row.unit}
diff --git a/src/pages/Home_v_2504/components/LeftBottom/index.tsx b/src/pages/Home_v_2504/components/LeftBottom/index.tsx index 5319915f100eedb77765f30aebe79a3c45f43bd3..576759d3a7bad2865a23d490f16f3900dcb818a2 100644 --- a/src/pages/Home_v_2504/components/LeftBottom/index.tsx +++ b/src/pages/Home_v_2504/components/LeftBottom/index.tsx @@ -4,11 +4,20 @@ import styles from './index.less'; // 导入图标 - 暂时都使用bike图标 import bikeIcon from '@/assets/images/V-2504/main-bike.png'; +import restaurantIcon from '@/assets/images/V-2504/main-restaurant.png'; +import drainageIcon from '@/assets/images/V-2504/main-drainage.png'; +import toiletIcon from '@/assets/images/V-2504/main-toilet.png'; +import lightingIcon from '@/assets/images/V-2504/main-lighting.png'; +import manholeIcon from '@/assets/images/V-2504/main-manhole.png'; +import patrolIcon from '@/assets/images/V-2504/main-patrol.png'; +import onlineIcon from '@/assets/images/V-2504/main-online.png'; +import complaintIcon from '@/assets/images/V-2504/main-complaint.png'; interface CardConfig { id: string; title: string; iconSrc: string; + iconStyle?: React.CSSProperties; dataRows: DataRow[]; } @@ -21,148 +30,175 @@ const LeftBottom: React.FC = () => { id: 'bike', title: '共享单车', iconSrc: bikeIcon, + iconStyle: { width: '68px', height: '63.5px' }, + // iconStyle: { width: '48px', height: '43px', objectFit: 'contain', position: 'absolute', top: '25px', left: '50%', transform: 'translateX(-50%)' }, + dataRows: [ { label: '在线', value: 95.25, unit: '万辆', + decimals: 2 }, { label: '今日告警', value: 562, unit: '次', status: 'error', + decimals: 0 }, ], }, { id: 'restaurant', title: '餐饮油烟', - iconSrc: bikeIcon, + iconSrc: restaurantIcon, + iconStyle: { width: '43.5px', height: '51.5px' }, dataRows: [ { label: '在线', value: 95.25, unit: '个', + decimals: 2 }, { label: '今日超标', value: 562, unit: '次', status: 'warning', + decimals: 0 }, ], }, { id: 'drainage', title: '智慧管廊', - iconSrc: bikeIcon, + iconSrc: drainageIcon, + iconStyle: { width: '60px', height: '55.5px' }, dataRows: [ { label: '在线', value: 95.25, unit: '个', + decimals: 2 }, { label: '今日告警', value: 562, unit: '次', status: 'error', + decimals: 0 }, ], }, { id: 'toilet', title: '智慧公厕', - iconSrc: bikeIcon, + iconSrc: toiletIcon, + iconStyle: { width: '54px', height: '61px' }, dataRows: [ { label: '在线', value: 95.25, unit: '个', + decimals: 2 }, { label: '今日告警', value: 562, unit: '次', status: 'error', + decimals: 0 }, ], }, { id: 'lighting', title: '智慧照明', - iconSrc: bikeIcon, + iconSrc: lightingIcon, + iconStyle: { width: '60px', height: '64px' }, dataRows: [ { label: '在线', value: 9525, unit: '个', + decimals: 0 }, { label: '今日告警', value: 562, unit: '次', status: 'error', + decimals: 0 }, ], }, { id: 'manhole', title: '智慧井盖', - iconSrc: bikeIcon, + iconSrc: manholeIcon, + iconStyle: { width: '54.5px', height: '54.5px' }, dataRows: [ { label: '在线', value: 9525, unit: '个', + decimals: 0 }, { label: '今日告警', value: 562, unit: '次', status: 'error', + decimals: 0 }, ], }, { id: 'patrol', title: '数字巡查', - iconSrc: bikeIcon, + iconSrc: patrolIcon, + iconStyle: { width: '59px', height: '59px' }, dataRows: [ { label: '智能上报', value: 9525, unit: '件', + decimals: 0 }, { label: '人工上报', value: 562, unit: '件', + decimals: 0 }, ], }, { id: 'online', title: '网络舆情', - iconSrc: bikeIcon, + iconSrc: onlineIcon, + iconStyle: { width: '68.5px', height: '54px' }, dataRows: [ { label: '今日发现', value: 5623, unit: '件', + decimals: 0 }, ], }, { id: 'complaint', title: '百姓投诉', - iconSrc: bikeIcon, + iconSrc: complaintIcon, + iconStyle: { width: '57px', height: '60px' }, dataRows: [ { label: '今日投诉', value: 1563, unit: '次', + decimals: 0 }, ], }, @@ -183,6 +219,7 @@ const LeftBottom: React.FC = () => { dataRows={card.dataRows} isActive={activeCardId === card.id} onClick={() => handleCardClick(card.id)} + iconStyle={card.iconStyle} /> ))} diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.less b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.less index d662563b305733aa9785b49119ba378ca6b5217c..6045ee0d9d8f719de764fdf74ea7671f4cf29bd5 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.less +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.less @@ -2,8 +2,8 @@ padding: 10px 20px 20px 20px; .dataBox { - width: 161px; - height: 92px; + width: 157px; + height: 70px; background: rgba(57, 122, 183, 0.2); border-radius: 10px; position: relative; @@ -13,24 +13,24 @@ width: 65px; height: 50px; position: absolute; - right: 10px; - bottom: 2px; + right: 2px; + top: 10px; pointer-events: none; } .bgImage1 { width: 45px; height: 45px; position: absolute; - right: 8px; - bottom: 2px; + right: 3px; + top: 16px; pointer-events: none; } .bgImage2 { width: 46px; height: 50px; position: absolute; - right: 6px; - bottom: 2px; + right: 7px; + top: 12px; pointer-events: none; } } diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.tsx index 155b826ba7194a4efa49a227459a743d579e8859..917473265eb0ba46166616dc3402efe95d2014f8 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.tsx +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Advertisement/index.tsx @@ -34,6 +34,7 @@ const Advertisement: React.FC = () => { color: '#BCCEE9', fontSize: '16px', fontWeight: 400, + marginTop: '-8px', // 添加这行来缩短间距 }; const commonUnitStyle = { @@ -43,7 +44,7 @@ const Advertisement: React.FC = () => { const commonStyle = { // marginBottom: '-10px' - marginTop: '-10px', + marginTop: '-16px', padding: '10px 0 0 10px', }; @@ -54,7 +55,7 @@ const Advertisement: React.FC = () => { objectId: areaId, }; services.Physicalsign.getNormalEventCountApi(params).then((res: any) => { - console.log(res); + // console.log(res); if (res.code === 200) { setEventCount(res.data?.problemCount); } @@ -84,14 +85,14 @@ const Advertisement: React.FC = () => { } style={{ justifyContent: 'start' }} direction={'horizontal'} - onClick={() => { - dispatch.push('SanitationDisp', { - title: '市容广告问题处置情况', - props: { - industry: '01', - }, - }); - }} + // onClick={() => { + // dispatch.push('SanitationDisp', { + // title: '市容广告问题处置情况', + // props: { + // industry: '01', + // }, + // }); + // }} /> diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Card/index.less b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Card/index.less index fd4608b71cc02f7eaf1fe446335865cd2a63103c..7b0c0a5fbaa7f658ba5e4fb1a0e8ce55caa1d71a 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Card/index.less +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/Card/index.less @@ -9,7 +9,15 @@ // background: rgba(8, 24, 63, 0.7); border-radius: 15px; + cursor: pointer; // padding: 20px + &:active { + background: rgba(74, 161, 255, 0.3); + border: 2px solid rgb(59, 198, 254); + // border-radius: 15px; + box-sizing: border-box; + box-shadow: inset 0px 0px 30px 0px rgba(59, 198, 254, 0.8); + } .cardTitle { color: #bdcee9; @@ -19,7 +27,7 @@ line-height: 26px; position: relative; padding: 0px 0px 0px 20px; - margin-top: 16px; + margin-top: 15px; &::before { content: ''; @@ -35,8 +43,8 @@ } .rightBtn { - margin-right: 13px; - margin-top: 16px; + margin-right: 14px; + margin-top: 18px; cursor: pointer; &.bindClick { diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.less b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.less index 3aa00f2a3483658991c7862d31cd060ae08df104..243270d05c55a364eb12e1a00c68801af16da3ee 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.less +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.less @@ -1,21 +1,21 @@ .container { - padding: 10px 20px 30px 20px; + padding: 0px 20px 30px 20px; .dataBox { - width: 245px; - height: 92px; + width: 242px; + height: 70px; background: rgba(57, 122, 183, 0.2); border-radius: 10px; position: relative; - padding: 16px; + padding: 15px; .bgImage { width: 52px; height: 52px; position: absolute; - right: 14px; - bottom: 2px; + right: 20px; + top: 10px; pointer-events: none; } } diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.tsx index a63c475515a201c7d48047dea7a214ea7433bddb..ad922fb908adf54ef95b86e2fcca186824db8448 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.tsx +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/CityLighting/index.tsx @@ -22,8 +22,9 @@ const CityLighting: React.FC = () => { const commonValueStyle1 = { ...commonValueStyle, - marginLeft: 15, + marginLeft: 115, }; + const commonLabelStyle = { color: '#BCCEE9', @@ -36,10 +37,14 @@ const CityLighting: React.FC = () => { fontSize: '16px', }; + const commonUnitStyle1 = { + ...commonUnitStyle, + marginRight: 31, + }; const commonStyle = { // marginBottom: '-10px' - marginTop: '-10px', - padding: '0px 0 0 10px', + marginTop: '-6px', + // padding: '0px 0 0 10px', }; const [dataSource, setDataSource] = useState<{ @@ -94,13 +99,13 @@ const CityLighting: React.FC = () => { direction={'horizontal'} style={{ justifyContent: 'start', marginBottom: '6px' }} // style={{width: '265px', marginBottom: '6px'}} - onClick={() => { - dispatch.push('UrbanLighting', { - props: { - metaData: dataSource, - }, - }); - }} + // onClick={() => { + // dispatch.push('UrbanLighting', { + // props: { + // metaData: dataSource, + // }, + // }); + // }} /> {/* 数据展示区 */} @@ -111,16 +116,17 @@ const CityLighting: React.FC = () => { value={dataSource?.yesterdayLightRate} name="昨日亮灯率" unit="%" - onClick={() => { - dispatch.push('UrbanLighting', { - props: { - metaData: dataSource, - }, - }); - }} + // onClick={() => { + // dispatch.push('UrbanLighting', { + // props: { + // metaData: dataSource, + // }, + // }); + // }} valueStyle={commonValueStyle} labelStyle={commonLabelStyle} unitStyle={commonUnitStyle} + direction={'horizontal'} decimals={2} style={commonStyle} /> @@ -133,12 +139,13 @@ const CityLighting: React.FC = () => { unit="件" valueStyle={commonValueStyle} labelStyle={commonLabelStyle} - unitStyle={commonUnitStyle} + unitStyle={commonUnitStyle1} + direction={'horizontal'} decimals={0} style={commonStyle} - onClick={() => { - dispatch.push('LightingFaultDisposal', {}); - }} + // onClick={() => { + // dispatch.push('LightingFaultDisposal', {}); + // }} /> diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.less b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.less index 51467d5b7a6b7b811575909a0dc05aafca081488..b628d44f320616cde3d13cc1ad3d50a4e7706c88 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.less +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.less @@ -2,8 +2,8 @@ padding: 10px 20px 20px 20px; .dataBox { - width: 245px; - height: 92px; + width: 242px; + height: 70px; background: rgba(57, 122, 183, 0.2); border-radius: 10px; position: relative; @@ -14,7 +14,7 @@ height: 50px; position: absolute; right: 14px; - bottom: 2px; + top: 3px; pointer-events: none; } } diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx index 340c94a754bb6fdd1c0b52be993ce2e57085bc5e..3827116901fe25db96666195ab5da7a00494ebe5 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx @@ -41,8 +41,8 @@ const EnvironmentalHealth: React.FC = () => { }; const commonStyle = { - marginTop: '-10px', - padding: '0px 0 0 10px', + marginTop: '-4px', + padding: '0px 0 0 4px', }; const getData = () => { @@ -109,9 +109,9 @@ const EnvironmentalHealth: React.FC = () => { : 2 } direction={'horizontal'} - onClick={() => { - dispatch.push('SanitationDisp'); - }} + // onClick={() => { + // dispatch.push('SanitationDisp'); + // }} value={convertUnits(Number(eventCount))?.num} /> @@ -136,13 +136,14 @@ const EnvironmentalHealth: React.FC = () => { unitStyle={commonUnitStyle} style={commonStyle} decimals={2} - onClick={() => { - dispatch.push('SanitationResource', { - // props: { - // data: selected, - // indexs: indexs, - }); - }} + direction={'horizontal'} + // onClick={() => { + // dispatch.push('SanitationResource', { + // // props: { + // // data: selected, + // // indexs: indexs, + // }); + // }} />
@@ -161,14 +162,15 @@ const EnvironmentalHealth: React.FC = () => { unitStyle={commonUnitStyle} style={commonStyle} decimals={2} - onClick={() => { - dispatch.push('SanitationResource', { - // props: { - // data: selected, - // indexs: indexs, - // }, - }); - }} + direction={'horizontal'} + // onClick={() => { + // dispatch.push('SanitationResource', { + // // props: { + // // data: selected, + // // indexs: indexs, + // // }, + // }); + // }} />
diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.less b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.less index cf9a6902d56f04c759e1a693f8a775de62e5d622..1b55e0202bc91fc49e45fa9d9321d5445a34b9d9 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.less +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.less @@ -2,8 +2,8 @@ padding: 20px; .dataBox { - width: 161px; - height: 140px; + width: 157px; + height: 107px; background: linear-gradient(180deg, rgba(57, 122, 183, 0.2), rgba(57, 122, 183, 0) 100%); border-radius: 10px; position: relative; @@ -15,7 +15,7 @@ position: absolute; left: 50%; transform: translateX(-50%); - bottom: 2px; + top: 55px; pointer-events: none; } } diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.tsx index d35bb6a0ca70797594de47e34052da6245dc0c14..719996c91c4fae5b4771aa108d3fb0fe3351e1f9 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.tsx +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/LawEnforcement/index.tsx @@ -25,6 +25,7 @@ const LawEnforcement: React.FC = () => { color: '#BCCEE9', fontSize: '16px', fontWeight: 400, + marginTop: '-4px', // 添加这行来缩短间距 }; const commonUnitStyle = { diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.less b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.less index 7482b6fc9859b15716931003f7f73bfa4df5415e..6afc16f2c834987200e9ab24211a718c22271c90 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.less +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.less @@ -2,7 +2,7 @@ padding: 10px 20px 20px 20px; .section { - margin-bottom: 16px; + margin-bottom: 7px; display: flex; align-items: center; gap: 20px; @@ -18,8 +18,8 @@ } .dataBox { - width: 433px; - height: 66px; + width: 423px; + height: 49px; background: rgba(57, 122, 183, 0.2); border-radius: 10px; position: relative; @@ -29,8 +29,8 @@ width: 65px; height: 50px; position: absolute; - right: 14px; - bottom: 2px; + right: 5px; + top: 14px; pointer-events: none; } } diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.tsx index 21d43569612c90b9b693300c6acdf048a0f73a6d..fea5e35f1b07500ed56fdfca7c5b631112dbc373 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.tsx +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/MunicipalFacilities/index.tsx @@ -19,24 +19,24 @@ const MunicipalFacilities: React.FC = () => { WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontFamily: 'D-DIN', - fontSize: '26px', + fontSize: '22px', fontWeight: 700, }; const commonLabelStyle = { color: '#BCCEE9', - fontSize: '16px', + fontSize: '14px', fontWeight: 400, marginTop: '-8px', // 添加这行来缩短间距 }; const commonUnitStyle = { color: '#BCCEE9', - fontSize: '16px', + fontSize: '14px', }; const commonStyle = { - marginTop: '-14px', + marginTop: '-19px', // padding: '0px 0 0 0px', // width: '100px', // height: '20px', @@ -117,7 +117,7 @@ const MunicipalFacilities: React.FC = () => { src={industryTitle3} alt="城市道桥" className={styles.titleImage} - onClick={handleBridgeClick} + // onClick={handleBridgeClick} />
@@ -141,7 +141,7 @@ const MunicipalFacilities: React.FC = () => { })?.unit == '座' ? 0 : 2 } style={commonStyle} - onClick={handleBridgeClick} + // onClick={handleBridgeClick} /> { })?.unit == '条' ? 0 : 2 } style={commonStyle} - onClick={handleRoadClick} + // onClick={handleRoadClick} /> { unitStyle={commonUnitStyle} decimals={formatNumber(Number(total))?.unit == '件' ? 0 : 2} style={commonStyle} - onClick={() => { - dispatch.push('BridgeMaintenanceList'); - }} + // onClick={() => { + // dispatch.push('BridgeMaintenanceList'); + // }} />
@@ -188,13 +188,13 @@ const MunicipalFacilities: React.FC = () => { src={industryTitle4} alt="综合管廊" className={styles.titleImage} - onClick={() => { - dispatch.push('PipelinePassage'); - }} + // onClick={() => { + // dispatch.push('PipelinePassage'); + // }} />
- + { unitStyle={commonUnitStyle} decimals={0} style={commonStyle} - onClick={() => { - dispatch.push('PipelinePassage'); - }} + // onClick={() => { + // dispatch.push('PipelinePassage'); + // }} /> { WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontFamily: 'D-DIN', - fontSize: '26px', + fontSize: '22px', fontWeight: 700, }; const commonLabelStyle = { color: '#BCCEE9', - fontSize: '16px', + fontSize: '14px', fontWeight: 400, marginTop: '-8px', // 添加这行来缩短间距 }; const commonUnitStyle = { color: '#BCCEE9', - fontSize: '16px', + fontSize: '14px', }; const commonStyle = { - marginTop: '-14px', + marginTop: '-19px', padding: '0px 0 0 0px', }; @@ -112,7 +112,7 @@ const WasteDisposal: React.FC = () => { src={industryTitle1} alt="生活垃圾" className={styles.titleImage} - onClick={handleLivingGarbageClick} + // onClick={handleLivingGarbageClick} />
@@ -125,7 +125,7 @@ const WasteDisposal: React.FC = () => { labelStyle={commonLabelStyle} unitStyle={commonUnitStyle} decimals={2} - onClick={handleLivingGarbageClick} + // onClick={handleLivingGarbageClick} style={commonStyle} /> { unitStyle={commonUnitStyle} decimals={2} style={commonStyle} - onClick={handleLivingGarbageClick} + // onClick={handleLivingGarbageClick} /> { unitStyle={commonUnitStyle} decimals={2} style={commonStyle} - onClick={handleLivingGarbageClick} + // onClick={handleLivingGarbageClick} />
@@ -160,7 +160,7 @@ const WasteDisposal: React.FC = () => { src={industryTitle2} alt="建筑垃圾" className={styles.titleImage} - onClick={()=>{handleClick('1')}} + // onClick={()=>{handleClick('1')}} />
@@ -174,7 +174,7 @@ const WasteDisposal: React.FC = () => { unitStyle={commonUnitStyle} decimals={2} style={commonStyle} - onClick={()=>{handleClick('1')}} + // onClick={()=>{handleClick('1')}} /> { unitStyle={commonUnitStyle} decimals={0} style={commonStyle} - onClick={()=>{ - handleClick('2') - }} + // onClick={()=>{ + // handleClick('2') + // }} />
diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/index.tsx index ba5a1767945a0d758eba171fc600d71231e4a29b..144c19dec891a981e4491d0a01b6c3f07cd6431d 100644 --- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/index.tsx +++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/index.tsx @@ -118,8 +118,8 @@ const IndustryOverview: React.FC = () => {
*/}
- - + + {cards.slice(0, 3).map((card) => ( { ))} - + {cards.slice(3).map((card) => ( = ({ title, moreText, modalName }) =
{title}
-
+ {/*
*/} +
{moreText && (