jiangxucong
/
dq-emgms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面

Browse Source
main
wangyunfei 6 days ago
parent 468145cf43
commit cd4a3e2854
4 changed files with 140 additions and 103 deletions
Show Stats Download Patch File Download Diff File

19
src/assets/img/Frame.svg
Unescape Escape View File

@ -0,0 +1,19 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2082_23894)">
<path d="M3.86328 0.40625H11.4324C14.4796 0.40625 16.9496 2.87632 16.9496 5.92349V13.4926H9.38052C6.33335 13.4926 3.86328 11.0225 3.86328 7.97535V0.40625ZM31.546 0.40625V7.97535C31.546 11.0225 29.076 13.4926 26.0288 13.4926H18.4597V5.92349C18.4597 2.87632 20.9298 0.40625 23.9769 0.40625H31.546ZM3.86328 28.089V20.5199C3.86328 17.4727 6.33335 15.0027 9.38052 15.0027H16.9496V22.5718C16.9496 25.6189 14.4796 28.089 11.4324 28.089H3.86328ZM31.546 28.089H23.9769C20.9298 28.089 18.4597 25.6189 18.4597 22.5718V15.0027H26.0288C29.076 15.0027 31.546 17.4727 31.546 20.5199V28.089Z" fill="url(#paint0_linear_2082_23894)"/>
<path d="M0 4.26855H7.5691C10.6163 4.26855 13.0863 6.73862 13.0863 9.7858V17.3549H5.51724C2.47007 17.3549 0 14.8848 0 11.8377V4.26855ZM27.6828 4.26855V11.8377C27.6828 14.8848 25.2127 17.3549 22.1655 17.3549H14.5964V9.7858C14.5964 6.73862 17.0665 4.26855 20.1137 4.26855H27.6828ZM0 31.9513V24.3822C0 21.335 2.47007 18.865 5.51724 18.865H13.0863V26.4341C13.0863 29.4812 10.6163 31.9513 7.5691 31.9513H0ZM27.6828 31.9513H20.1137C17.0665 31.9513 14.5964 29.4812 14.5964 26.4341V18.865H22.1655C25.2127 18.865 27.6828 21.335 27.6828 24.3822V31.9513Z" fill="url(#paint1_linear_2082_23894)"/>
</g>
<defs>
<linearGradient id="paint0_linear_2082_23894" x1="17.7047" y1="0.40625" x2="17.7047" y2="28.089" gradientUnits="userSpaceOnUse">
<stop stop-color="#C8D2FB"/>
<stop offset="1" stop-color="#D6E0FC"/>
</linearGradient>
<linearGradient id="paint1_linear_2082_23894" x1="13.8414" y1="4.26855" x2="13.8414" y2="31.9513" gradientUnits="userSpaceOnUse">
<stop stop-color="#556FEB"/>
<stop offset="1" stop-color="#8DAAF7"/>
</linearGradient>
<clipPath id="clip0_2082_23894">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/img/backg01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

85
src/pages/business_emergencyPlan/EmergencyPlan.js
Unescape Escape View File

@ -1,10 +1,12 @@
import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space, Tabs } from 'antd';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './EmergencyPlan.less';
import Swhpqy from './components/swhpqy'; //涉危化品企业
import Whp from './components/whp'; //危化品
import Sgla from './components/sgla'; //事故案例
import Flfg from './components/flfg'; //法律法规
import FrameSvg from '@/assets/img/Frame.svg';
import Backg01Png from '@/assets/img/backg01.png';
@ -15,39 +17,66 @@ const SafeMajorHazardList = () => {
setActiveTab(key);
};
const tabItems = [
{
key: 'swhpqy',
label: '涉危化品企业',
children: <Swhpqy />
},
{
key: 'whp',
label: '危化品',
children: <Whp />
},
{
key: 'sgla',
label: '事故案例',
children: <Sgla />
},
{
key: 'flfg',
label: '法律法规',
children: <Flfg />
const renderContent = () => {
switch(activeTab) {
case 'swhpqy':
return <Swhpqy />;
case 'whp':
return <Whp />;
case 'sgla':
return <Sgla />;
case 'flfg':
return <Flfg />;
default:
return <Swhpqy />;
}
];
};
return (
<div className={styles.container1}>
<div className={styles.TopButton}>
<Tabs
activeKey={activeTab}
onChange={handleTabChange}
items={tabItems}
className={styles.customTabs}
/>
<div className={styles.leftSection}>
<img src={FrameSvg} alt="Frame" className={styles.frameIcon} />
<span className={styles.titleText}>应急信息库</span>
<div className={styles.buttonGroup}>
<Button
type="default"
onClick={() => handleTabChange('swhpqy')}
className={`${styles.tabButton} ${activeTab === 'swhpqy' ? styles.active : ''}`}
>
涉危化品企业
</Button>
<Button
type="default"
onClick={() => handleTabChange('whp')}
className={`${styles.tabButton} ${activeTab === 'whp' ? styles.active : ''}`}
>
危化品
</Button>
<Button
type="default"
onClick={() => handleTabChange('sgla')}
className={`${styles.tabButton} ${activeTab === 'sgla' ? styles.active : ''}`}
>
事故案例
</Button>
<Button
type="default"
onClick={() => handleTabChange('flfg')}
className={`${styles.tabButton} ${activeTab === 'flfg' ? styles.active : ''}`}
>
法律法规
</Button>
</div>
</div>
<div className={styles.rightSection}>
<img src={Backg01Png} alt="Background" className={styles.backgroundImg} />
</div>
</div>
<div className={styles.content}>
{renderContent()}
</div>
</div>
);

139
src/pages/business_emergencyPlan/EmergencyPlan.less
Unescape Escape View File

@ -9,10 +9,70 @@
.TopButton {
background-color: #ebf0fe;
width: 100%;
height: 50px;
height: 60px;
display: flex;
gap: 24px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
padding: 0 40px;
.leftSection {
display: flex;
align-items: center;
gap: 24px;
.frameIcon {
height: 24px;
width: auto;
}
.titleText {
font-size: 16px;
font-weight: 500;
color: #333333;
margin-right: 20px;
}
.buttonGroup {
display: flex;
align-items: center;
gap: 24px;
}
}
.rightSection {
.backgroundImg {
height: 80px;
width: auto;
object-fit: cover;
}
}
.tabButton {
border-radius: 8px !important;
padding: 4px 16px !important;
height: auto !important;
font-size: 14px !important;
font-weight: 500 !important;
box-shadow: none !important;
border: none !important;
// 默认状态
background: transparent !important;
color: #333333 !important;
&:hover {
background: rgba(85, 111, 235, 0.1) !important;
color: #333333 !important;
box-shadow: none !important;
}
// 激活状态
&.active {
background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%) !important;
color: #ffffff !important;
box-shadow: none !important;
}
}
.TopButtonItem {
color: #333333 !important;
@ -41,85 +101,14 @@
color: #333333 !important;
border: none !important;
}
// &.active {
// color: #2E4CD4 !important;
// }
}
}
.content {
// ======== 内容区域样式 ========
// ======== 内容区域样式 =======
flex: 1; // ======== 占据剩余空间 ========
overflow-y: auto; // ======== 允许垂直滚动 ========
padding: 0; // ======== 无内边距 ========
}
// ======== 自定义Tabs样式 ========
.customTabs {
width: 100% !important;
:global(.ant-tabs-content-holder) {
width: 100% !important;
}
:global(.ant-tabs-tabpane) {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
:global(.ant-tabs-content) {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
:global(.ant-tabs-tab) {
color: #333333 !important;
font-family: 'PingFang SC', sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
border-radius: 8px !important;
padding: 4px 16px !important;
margin-right: 24px !important;
transition: all 0.3s ease !important;
}
:global(.ant-tabs-tab-active) {
color: #ffffff !important;
background: linear-gradient(180deg, #556FEB 0%, #8DAAF7 100%);
}
:global(.ant-tabs-tab-active .ant-tabs-tab-btn) {
color: #ffffff !important;
text-shadow: none !important;
}
:global(.ant-tabs-tab:hover) {
color: #333333 !important;
}
:global(.ant-tabs-tab-active:hover) {
color: #ffffff !important;
}
:global(.ant-tabs-tab-active:hover .ant-tabs-tab-btn) {
color: #ffffff !important;
text-shadow: none !important;
}
:global(.ant-tabs-ink-bar) {
display: none !important;
}
:global(.ant-tabs-nav-list) {
margin-left: 80px !important;
// padding-top: 2px !important;
// display: flex !important;
// align-items: center !important;
// text-align: center;
}
}
}
Write Preview
Loading…
Cancel
Save