多体系建设信息化条统-前端
祖安之光
2025-12-24 ec18b89ef6e401e8d6746838f7e924eeaf650fe1
src/views/menuPage.vue
@@ -2,14 +2,15 @@
  <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>
@@ -51,7 +52,16 @@
        </div>
      </div>
    </div>
    <user-dialog ref="reviewRef" ></user-dialog>
    <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>
@@ -82,7 +92,7 @@
  if(getToken()){
    userInfo.value = JSON.parse(Cookies.get('userInfo'))
    userName.value = userInfo.value.username
    userTypeName.value = userInfo.value.userType == 0 ? '系统管理员' : userInfo.value.userType == 1 ? '企业管理员' :userInfo.value.userType == 2 ? '部门级':userInfo.value.userType == 3 ? '车间级' :userInfo.value.userType == 6 ? '企业用户' :userInfo.value.userType == 4 ? '其他' : '学员'
    userTypeName.value = userInfo.value.userType == 0 ? '系统管理员' : (userInfo.value.userType == 1 ||  userInfo.value.userType == 2 || userInfo.value.userType == 3) ? '企业用户' :userInfo.value.userType == 6 ? '企业管理员' :userInfo.value.userType == 4 ? '其他' : '学员'
  }
  const userStore = useUserStore()
@@ -135,8 +145,8 @@
  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
@@ -152,38 +162,38 @@
const systems = ref([
  {
    id: 1,
    name: 'ISO 9000 质量管理体系',
    description: '确保产品和服务质量符合国际标准',
    name: '国军标9001C质量管理体系',
    description: '专注军工与高端装备制造领域的全生命周期质量管理与合规认证',
    icon: menu1
  },
  {
    id: 2,
    name: 'ISO 27001 信息安全体系',
    description: '保护企业信息资产安全与机密性',
    name: 'ISO27001信息安全体系',
    description: '构建全面信息安全管理框架,保障组织数据资产与业务运行的机密性、完整性和可用性',
    icon: menu2
  },
  {
    id: 3,
    name: 'ISO 45001 安全体系',
    description: '实现企业安全的持续改进',
    name: 'ISO45001职业健康安全体系',
    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
  }
])
@@ -205,7 +215,7 @@
// 进入系统
const enterSystem = (systemId) => {
  if(systemId == 1){
    router.push({ path: "/"});
    router.push({ path: "/menuIndex"});
  }else{
    ElMessage.warning('系统正在开发中...')
  }
@@ -242,24 +252,19 @@
.user-info-bar {
  display: flex;
  height: 100px;
  height: 80px;
  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: 30px;
    font-weight: bolder;
    padding-left: 40px;
    color: #fff;
  }
  .avatar-container {
@@ -292,26 +297,54 @@
.systems-container {
  flex: 1;
  padding: 20px;
  padding: 60px;
  overflow-y: auto;
  margin-top: 60px;
  display: flex;
  align-items: center;
}
.sys-footer{
  height: 100px;
  background: #e6e6e6;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .footer-left{
    display: flex;
    justify-content: left;
    align-items: center;
    img{
      width: 80px;
      height: 80px;
    }
    span{
      font-size: 28px;
      font-weight: bolder;
      margin-left: 20px;
    }
  }
  .footer-right{
    font-size: 22px;
  }
}
.systems-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 30px;
  max-width: 1500px;
  margin: 0 auto;
  perspective: 1000px;
}
.system-card {
  position: relative;
  height: 280px;
  background-color: #ffffff;
  border-radius: 4px;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
  border-radius: 12px;
  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;
  cursor: pointer;
@@ -355,7 +388,7 @@
  }
  &:hover::before {
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(50,50,50,0.05) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(20,20,20,0.05) 100%);
  }
}
@@ -377,9 +410,9 @@
}
.system-icon img {
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
  width: 100px;
  height: 100px;
  margin-bottom: clamp(0.375rem, -2.054rem + 3.79vw, 2.5rem);
  transition: transform 0.5s;
}
@@ -390,7 +423,8 @@
.system-card h3 {
  margin: 0 0 12px;
  color: #333;
  font-size: 24px;
  font-size: clamp(0.875rem, 0.161rem + 1.12vw, 1.5rem);
  font-weight: bolder;
  text-align: center;
  transition: transform 0.3s;
}
@@ -398,7 +432,7 @@
.system-card p {
  margin: 0;
  color: #999;
  font-size: 15px;
  font-size: 16px;
  text-align: center;
  transition: transform 0.3s;
}
@@ -407,4 +441,4 @@
.system-card:hover p {
  transform: translateZ(20px);
}
</style>
</style>