| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="sys-footer"> |
| | | <div class="footer-left"> |
| | | <img src="../assets/images/menuPageLogo.png"/> |
| | | <span>中国科学院苏州纳米技术与纳米仿生研究所</span> |
| | | </div> |
| | | <div class="footer-right"> |
| | | 系统版本:V1.0.0 |
| | | </div> |
| | | </div> |
| | | <!-- <div class="sys-footer">--> |
| | | <!-- <div class="footer-left">--> |
| | | <!-- <img src="../assets/images/menuPageLogo.png"/>--> |
| | | <!-- <span>中国科学院苏州纳米技术与纳米仿生研究所</span>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="footer-right">--> |
| | | <!-- 系统版本:V1.0.0--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <user-dialog ref="reviewRef"></user-dialog> |
| | | </div> |
| | | </template> |
| | |
| | | { |
| | | id: 1, |
| | | name: '国军标9001C质量管理体系', |
| | | description: '专注军工与高端装备制造领域的全生命周期质量管理与合规认证', |
| | | description: '确保产品和服务质量符合国际标准', |
| | | icon: menu1 |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: 'ISO27001信息安全体系', |
| | | description: '构建全面信息安全管理框架,保障组织数据资产与业务运行的机密性、完整性和可用性', |
| | | name: 'ISO 27001 信息安全体系', |
| | | description: '保护企业信息资产安全与机密性', |
| | | icon: menu2 |
| | | }, |
| | | { |
| | | id: 3, |
| | | name: 'ISO45001职业健康安全体系', |
| | | description: '系统化管理职业健康安全风险,提升工作场所安全水平', |
| | | name: 'ISO 45001 安全体系', |
| | | description: '实现企业安全的持续改进', |
| | | icon: menu3 |
| | | }, |
| | | { |
| | | id: 4, |
| | | name: '项目管理控制', |
| | | description: '实现项目全流程标准化管控,支持进度、资源与风险的可视化协同管理', |
| | | description: '标准化项目管理流程与方法', |
| | | icon: menu4 |
| | | }, |
| | | { |
| | | id: 5, |
| | | name: '承制评价系统', |
| | | description: '基于资质标准与绩效数据,对承制单位进行科学评估与分级管理', |
| | | name: '承制评价体系', |
| | | description: '供应商与承包商能力评估标准', |
| | | icon: menu5 |
| | | }, |
| | | { |
| | | id: 6, |
| | | name: '新体系评价系统', |
| | | description: '面向新兴领域与创新需求,提供灵活可配置的体系成熟度评估与改进向导', |
| | | name: '新体系评价', |
| | | description: '新体系评价', |
| | | icon: menu6 |
| | | } |
| | | ]) |
| | |
| | | |
| | | .user-info-bar { |
| | | display: flex; |
| | | height: 80px; |
| | | height: 100px; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10px 20px; |
| | |
| | | |
| | | .user-left{ |
| | | width: 80%; |
| | | font-size: 30px; |
| | | font-size: clamp(1rem, -0.143rem + 1.79vw, 2rem); |
| | | font-weight: bolder; |
| | | padding-left: 40px; |
| | | color: #fff; |
| | |
| | | |
| | | .systems-container { |
| | | flex: 1; |
| | | padding: 60px; |
| | | padding: 20px 60px; |
| | | overflow-y: auto; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: 60px; |
| | | } |
| | | |
| | | .sys-footer{ |
| | | height: 100px; |
| | | background: #e6e6e6; |
| | | padding: 0 40px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | |
| | | display: flex; |
| | | justify-content: left; |
| | | align-items: center; |
| | | |
| | | img{ |
| | | width: 80px; |
| | | height: 80px; |
| | | width: 60px; |
| | | height: 60px; |
| | | } |
| | | span{ |
| | | font-size: 28px; |
| | | font-weight: bolder; |
| | | margin-left: 20px; |
| | | font-size: 24px; |
| | | } |
| | | } |
| | | .footer-right{ |
| | | font-size: 22px; |
| | | } |
| | | } |
| | | |
| | | .systems-grid { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: grid; |
| | | grid-template-columns: repeat(3,1fr); |
| | | grid-template-rows: repeat(2,1fr); |
| | | gap: 30px; |
| | | max-width: 100%; |
| | | margin: 0 auto; |
| | | perspective: 1000px; |
| | | } |
| | | |
| | | .system-card { |
| | | position: relative; |
| | | height: 320px; |
| | | background-color: #ffffff; |
| | | border-radius: 12px; |
| | | border-radius: 4px; |
| | | transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), |
| | | box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1); |
| | | transform-style: preserve-3d; |
| | |
| | | } |
| | | |
| | | .system-icon img { |
| | | width: 100px; |
| | | height: 100px; |
| | | margin-bottom: clamp(0.375rem, -2.054rem + 3.79vw, 2.5rem); |
| | | width: 80px; |
| | | height: 80px; |
| | | margin-bottom: 30px; |
| | | transition: transform 0.5s; |
| | | } |
| | | |
| | | .system-card:hover .system-icon img { |
| | | transform: scale(1.3); |
| | | transform: scale(1.4); |
| | | } |
| | | |
| | | .system-card h3 { |
| | | margin: 0 0 12px; |
| | | color: #333; |
| | | font-size: clamp(0.875rem, 0.161rem + 1.12vw, 1.5rem); |
| | | font-weight: bolder; |
| | | font-size: 24px; |
| | | text-align: center; |
| | | transition: transform 0.3s; |
| | | } |
| | |
| | | .system-card p { |
| | | margin: 0; |
| | | color: #999; |
| | | font-size: 16px; |
| | | font-size: 15px; |
| | | text-align: center; |
| | | transition: transform 0.3s; |
| | | } |