环保活动菜单
wangyunfei888
19 hours ago
parent
ab67b32c25
commit
b928cb3316
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.28533 14.5336C2.128 14.5336 2 14.4056 2 14.2483V12.6883C2.00267 11.8696 2.29067 11.0643 2.808 10.4243L3.08 10.0696C3.45333 9.60559 3.98133 9.26426 4.568 9.11759L4.97867 9.01359C5.19467 8.96026 5.41867 8.93359 5.64533 8.93359H8.4C8.45333 8.94426 8.47467 8.96826 8.488 8.98693C8.49867 9.00559 8.512 9.03493 8.504 9.07226C8.49333 9.10959 8.45333 9.14693 8.40533 9.15759L5.488 9.88826C5.04267 10.0029 4.768 10.4589 4.87733 10.9043C4.98933 11.2856 5.328 11.5389 5.704 11.5389C5.78133 11.5389 5.856 11.5283 5.93067 11.5096L8.096 10.9789C8.55467 10.8643 9.008 10.7096 9.43733 10.5229L9.80533 10.3629C9.92533 10.3016 10.0107 10.2296 10.0773 10.1443C10.2693 9.88026 10.5467 9.68826 10.856 9.60293L13.2453 9.00559L13.8267 8.93626C13.9253 8.94426 14 9.02693 14 9.12826V9.21093C14 9.26959 13.968 9.33093 13.912 9.36559L11.1493 11.2669C10.1681 11.9377 9.07562 12.4289 7.92267 12.7176L5.13333 13.4163C4.90526 13.4732 4.69301 13.581 4.51246 13.7315C4.33191 13.8821 4.18772 14.0715 4.09067 14.2856C4.02667 14.4376 3.88533 14.5336 3.728 14.5363H2.28533V14.5336Z" fill="white"/>
|
||||
<path d="M5.64423 9.3332H6.06023L5.38556 9.5012C4.72956 9.6692 4.3269 10.3412 4.4869 10.9972L4.49223 11.0159L4.49756 11.0345C4.57557 11.294 4.73476 11.5215 4.95173 11.6838C5.16869 11.846 5.43198 11.9344 5.7029 11.9359C5.80956 11.9359 5.91623 11.9225 6.02023 11.8959L8.19356 11.3625C8.67356 11.2425 9.14556 11.0825 9.59623 10.8852L9.96423 10.7252L9.98556 10.7145L10.0069 10.7039C10.1589 10.6265 10.2922 10.5145 10.3936 10.3812L10.4016 10.3785L10.4069 10.3705C10.5402 10.1865 10.7376 10.0505 10.9562 9.9892L13.0656 9.4612L10.9322 10.9305C9.98937 11.5757 8.93922 12.048 7.8309 12.3252L5.04156 13.0239C4.75488 13.0953 4.48812 13.2308 4.26134 13.4202C4.03456 13.6095 3.85365 13.8479 3.73223 14.1172L3.74023 14.1252L3.7349 14.1332H2.40156V12.6905C2.40423 11.9599 2.66023 11.2425 3.1189 10.6745L3.12423 10.6665L3.12956 10.6585L3.3909 10.3172C3.71627 9.91441 4.16355 9.62807 4.66556 9.5012L5.07356 9.3972C5.26023 9.3572 5.45223 9.3332 5.64423 9.3332ZM5.64423 8.5332C5.38556 8.5332 5.12956 8.5652 4.88156 8.62654L4.4709 8.73054C3.79623 8.89854 3.1989 9.2852 2.76423 9.82654L2.49756 10.1732C1.92156 10.8852 1.6069 11.7732 1.60156 12.6879V14.2479C1.60156 14.4296 1.67377 14.6039 1.80229 14.7325C1.93082 14.861 2.10513 14.9332 2.2869 14.9332H3.7349C4.04956 14.9279 4.33223 14.7385 4.45756 14.4479C4.60423 14.1252 4.88956 13.8879 5.23356 13.7999L8.0229 13.1012C9.2229 12.7999 10.3589 12.2905 11.3802 11.5919L14.1349 9.69587C14.3002 9.58654 14.3989 9.4052 14.4016 9.20787V9.1252C14.4016 8.7972 14.1376 8.5332 13.8096 8.5332L13.1722 8.61054L10.7509 9.21587C10.3509 9.3252 10.0016 9.56787 9.7589 9.9012C9.72956 9.9412 9.68956 9.9732 9.6469 9.99454L9.2789 10.1545C8.86556 10.3359 8.4389 10.4799 8.00156 10.5892L5.82556 11.1225C5.70996 11.154 5.58662 11.139 5.48196 11.0807C5.37729 11.0224 5.29961 10.9254 5.26556 10.8105C5.20956 10.5759 5.3509 10.3385 5.58556 10.2772L8.4869 9.5492C8.6869 9.50654 8.84423 9.35454 8.8949 9.1572C8.9094 9.09101 8.91069 9.0226 8.89868 8.95591C8.88668 8.88921 8.86163 8.82555 8.82496 8.76856C8.78829 8.71157 8.74073 8.66239 8.685 8.62383C8.62927 8.58527 8.56648 8.5581 8.50023 8.54387C8.46823 8.53854 8.43623 8.5332 8.40156 8.5332H5.64423Z" fill="white"/>
|
||||
<path d="M9.04664 7.07213C9.01351 7.06322 8.9844 7.04333 8.96405 7.01572C8.94371 6.9881 8.93334 6.9544 8.93464 6.92013V6.7948C8.93464 6.44259 8.79472 6.10481 8.54567 5.85576C8.29663 5.60671 7.95884 5.4668 7.60664 5.4668C5.9853 5.4668 4.66797 4.14946 4.66797 2.52813V1.95746C4.66797 1.68813 4.8893 1.4668 5.15864 1.4668H5.7293C6.87864 1.4668 7.9293 2.14146 8.40664 3.18413C8.4813 3.34146 8.60664 3.46946 8.7613 3.54146C8.85997 3.5868 8.9613 3.6108 9.06797 3.6108C9.35064 3.6108 9.61197 3.44546 9.73197 3.1868C10.2093 2.14146 11.26 1.4668 12.4066 1.4668H12.9773C13.2466 1.4668 13.468 1.68813 13.468 1.95746V2.52813C13.468 4.14946 12.1506 5.4668 10.5293 5.4668C10.1771 5.4668 9.83931 5.60671 9.59026 5.85576C9.34122 6.10481 9.2013 6.44259 9.2013 6.7948V6.93346L9.19864 6.9628C9.18797 7.0268 9.13197 7.0748 9.06797 7.0748C9.06797 7.0748 9.05197 7.0748 9.04664 7.07213Z" fill="white"/>
|
||||
<path d="M12.975 1.86641C13.0256 1.86641 13.0656 1.90641 13.0656 1.95707V2.52774C13.0656 3.92774 11.927 5.06641 10.527 5.06641C9.91362 5.06641 9.37229 5.38907 9.06562 5.87174C8.90953 5.62534 8.69375 5.42235 8.43829 5.28157C8.18284 5.14079 7.89597 5.06678 7.60429 5.06641C6.20429 5.06641 5.06562 3.92774 5.06562 2.52774V1.95707C5.06562 1.90641 5.10562 1.86641 5.15629 1.86641H5.72962C6.72162 1.86641 7.62829 2.44774 8.04162 3.35441C8.13171 3.55002 8.27614 3.7156 8.45769 3.83144C8.63924 3.94727 8.85027 4.00847 9.06562 4.00774C9.50562 4.00774 9.90829 3.75174 10.0923 3.34907C10.2959 2.90696 10.6218 2.53239 11.0315 2.26964C11.4412 2.00689 11.9176 1.86697 12.4043 1.86641H12.975ZM5.72962 1.06641H5.15629C4.66562 1.06641 4.26562 1.46641 4.26562 1.95707V2.52774C4.26562 4.37041 5.76162 5.86641 7.60429 5.86641C8.11629 5.86641 8.53229 6.28241 8.53229 6.79441V6.90374C8.52163 7.17574 8.70829 7.41307 8.97496 7.46641C9.05217 7.47959 9.13133 7.47563 9.20684 7.45481C9.28236 7.43399 9.35236 7.39682 9.41191 7.34593C9.47145 7.29504 9.51907 7.23167 9.5514 7.16033C9.58372 7.08898 9.59996 7.01139 9.59896 6.93307V6.79441C9.59896 6.28241 10.015 5.86641 10.527 5.86641C12.3696 5.86641 13.8656 4.37041 13.8656 2.52774V1.95707C13.8656 1.46641 13.4656 1.06641 12.975 1.06641H12.4043C11.0976 1.06641 9.91096 1.82907 9.36696 3.01841C9.31096 3.13841 9.19096 3.21041 9.06562 3.21041C9.02029 3.21041 8.97229 3.19974 8.92696 3.17841C8.85496 3.14641 8.79896 3.08774 8.76696 3.01841C8.50093 2.43622 8.07322 1.94273 7.53475 1.59667C6.99628 1.25061 6.36971 1.06655 5.72962 1.06641Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,62 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import styles from './EnvironmentalActivities.less';
|
||||
import ActivityCalendar from './components/ActivityCalendar';
|
||||
import ActivityManagement from './components/ActivityManagement';
|
||||
import EventReport from './components/EventReport';
|
||||
import StatisticsAnalysis from './components/StatisticsAnalysis';
|
||||
|
||||
const EnvironmentalActivities = () => {
|
||||
const [activeModule, setActiveModule] = useState('1');
|
||||
|
||||
const renderModule = () => {
|
||||
switch (activeModule) {
|
||||
case '1':
|
||||
return <ActivityCalendar />;
|
||||
case '2':
|
||||
return <ActivityManagement />;
|
||||
case '3':
|
||||
return <EventReport />;
|
||||
case '4':
|
||||
return <StatisticsAnalysis />;
|
||||
default:
|
||||
return <ActivityCalendar />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.TopButton}>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === '1' ? styles.active : ''}`}
|
||||
onClick={() => setActiveModule('1')}
|
||||
>
|
||||
活动日历
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === '2' ? styles.active : ''}`}
|
||||
onClick={() => setActiveModule('2')}
|
||||
>
|
||||
活动管理
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === '3' ? styles.active : ''}`}
|
||||
onClick={() => setActiveModule('3')}
|
||||
>
|
||||
事件上报
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === '4' ? styles.active : ''}`}
|
||||
onClick={() => setActiveModule('4')}
|
||||
>
|
||||
统计分析
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
{renderModule()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnvironmentalActivities;
|
||||
@ -0,0 +1,67 @@
|
||||
.container {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.TopButton {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
padding: 8px 15px 5px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
.TopButtonItem {
|
||||
background-color: #FFFFFF !important;
|
||||
color: #999999 !important;
|
||||
font-family: 'PingFang SC', sans-serif !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 100% !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 4px 16px !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
position: relative !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
gap: 5px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
color: #999999 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: #999999 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(98.03deg, #00E49C 0.68%, #00D2D2 98.3%) !important;
|
||||
box-shadow: 0px 2px 2px 0px #AEEDDE !important;
|
||||
color: #FFFFFF !important;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 28px;
|
||||
height: 5px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import styles from './ActivityCalendar.less';
|
||||
|
||||
const ActivityCalendar = () => {
|
||||
return (
|
||||
<div className={styles.placeholder}>
|
||||
活动日历 待开发
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityCalendar;
|
||||
@ -0,0 +1,8 @@
|
||||
.placeholder {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 72vh;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import styles from './ActivityManagement.less';
|
||||
|
||||
const ActivityManagement = () => {
|
||||
return (
|
||||
<div className={styles.placeholder}>
|
||||
活动管理 待开发
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityManagement;
|
||||
@ -0,0 +1,8 @@
|
||||
.placeholder {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 72vh;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import styles from './EventReport.less';
|
||||
|
||||
const EventReport = () => {
|
||||
return (
|
||||
<div className={styles.placeholder}>
|
||||
事件上报 待开发
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventReport;
|
||||
@ -0,0 +1,8 @@
|
||||
.placeholder {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 72vh;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import styles from './StatisticsAnalysis.less';
|
||||
|
||||
const StatisticsAnalysis = () => {
|
||||
return (
|
||||
<div className={styles.placeholder}>
|
||||
统计分析 待开发
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatisticsAnalysis;
|
||||
@ -0,0 +1,8 @@
|
||||
.placeholder {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 72vh;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
Loading…
Reference in New Issue