| | |
| | | <div class="system-select-container"> |
| | | <!-- 顶部用户信息栏 --> |
| | | <div class="user-info-bar"> |
| | | <div class="user-left"></div> |
| | | <h3 class="user-details">欢迎访问多体系建设信息化系统</h3> |
| | | <div class="user-left"> |
| | | 欢迎访问多体系建设信息化系统 |
| | | </div> |
| | | <div class="avatar-container"> |
| | | <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> |
| | | <div class="avatar-wrapper" style="display: flex;align-items: center"> |
| | | <img src="../assets/images/avator.png" class="user-avatar" /> |
| | | <span style="font-size: 16px">{{userName}}({{userTypeName}})</span> |
| | | <el-icon><caret-bottom /></el-icon> |
| | | <span style="font-size: 16px;color: #fff">{{userName}}({{userTypeName}})</span> |
| | | <el-icon color="#fff"><caret-bottom /></el-icon> |
| | | </div> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | |
| | | </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>--> |
| | | <user-dialog ref="reviewRef"></user-dialog> |
| | | </div> |
| | | </template> |
| | |
| | | const mousePX = state.mouseX / (state.width || 1) |
| | | const mousePY = state.mouseY / (state.height || 1) |
| | | |
| | | const rX = mousePX * 18 // 减小旋转角度,使效果更柔和 |
| | | const rY = mousePY * -18 |
| | | const rX = mousePX * 20 // 减小旋转角度,使效果更柔和 |
| | | const rY = mousePY * -20 |
| | | |
| | | const tX = mousePX * -20 |
| | | const tY = mousePY * -20 |
| | |
| | | const systems = ref([ |
| | | { |
| | | id: 1, |
| | | name: 'ISO 9000 质量管理体系', |
| | | name: '国军标9001C质量管理体系', |
| | | description: '确保产品和服务质量符合国际标准', |
| | | icon: menu1 |
| | | }, |
| | |
| | | // 进入系统 |
| | | const enterSystem = (systemId) => { |
| | | if(systemId == 1){ |
| | | router.push({ path: "/"}); |
| | | router.push({ path: "/menuIndex"}); |
| | | }else{ |
| | | ElMessage.warning('系统正在开发中...') |
| | | } |
| | |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10px 20px; |
| | | background-color: #ffffff; |
| | | background-color: rgb(16,66,143); |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| | | |
| | | .user-left{ |
| | | width: 20%; |
| | | } |
| | | |
| | | .user-details{ |
| | | width: 60%; |
| | | margin: 0; |
| | | color: #333; |
| | | text-align: center; |
| | | font-size: 28px; |
| | | letter-spacing: 2px; |
| | | width: 80%; |
| | | font-size: clamp(1rem, -0.143rem + 1.79vw, 2rem); |
| | | font-weight: bolder; |
| | | padding-left: 40px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .avatar-container { |
| | |
| | | |
| | | .systems-container { |
| | | flex: 1; |
| | | padding: 20px; |
| | | padding: 20px 60px; |
| | | overflow-y: auto; |
| | | margin-top: 60px; |
| | | } |
| | | |
| | | .sys-footer{ |
| | | height: 100px; |
| | | background: #e6e6e6; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .footer-left{ |
| | | display: flex; |
| | | justify-content: left; |
| | | align-items: center; |
| | | |
| | | img{ |
| | | width: 60px; |
| | | height: 60px; |
| | | } |
| | | span{ |
| | | font-size: 24px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .systems-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
| | | grid-template-columns: repeat(3,1fr); |
| | | gap: 30px; |
| | | max-width: 1500px; |
| | | max-width: 100%; |
| | | margin: 0 auto; |
| | | perspective: 1000px; |
| | | } |
| | | |
| | | .system-card { |
| | | position: relative; |
| | | height: 280px; |
| | | height: 320px; |
| | | background-color: #ffffff; |
| | | border-radius: 4px; |
| | | transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), |
| | |
| | | } |
| | | |
| | | .system-card:hover .system-icon img { |
| | | transform: scale(1.3); |
| | | transform: scale(1.4); |
| | | } |
| | | |
| | | .system-card h3 { |