修改新增

祖安之光

2025-12-24 40a29e1c59601e6aff61c1752a4104c6b796e97a

 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,7 +162,7 @@
const systems = ref([
  {
    id: 1,
    name: 'ISO 9000 质量管理体系',
    name: '国军标9001C质量管理体系',
    description: '确保产品和服务质量符合国际标准',
    icon: menu1
  },
@@ -205,7 +215,7 @@
// 进入系统
const enterSystem = (systemId) => {
  if(systemId == 1){
    router.push({ path: "/"});
    router.push({ path: "/menuIndex"});
  }else{
    ElMessage.warning('系统正在开发中...')
  }
@@ -246,20 +256,15 @@
  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 {
@@ -292,23 +297,44 @@

.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),
@@ -384,7 +410,7 @@
}

.system-card:hover .system-icon img {
  transform: scale(1.3);
  transform: scale(1.4);
}

.system-card h3 {
@@ -407,4 +433,4 @@
.system-card:hover p {
  transform: translateZ(20px);
}
</style>
</style>