修改新增

祖安之光

2025-12-24 40a29e1c59601e6aff61c1752a4104c6b796e97a

 src/views/menuPage.vue

@@ -2,20 +2,21 @@
  <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>
              <el-dropdown-item command="info">
                <span>基本信息</span>
              </el-dropdown-item>
<!--              <el-dropdown-item command="info">-->
<!--                <span>基本信息</span>-->
<!--              </el-dropdown-item>-->
              <el-dropdown-item command="password">
                <span>修改密码</span>
              </el-dropdown-item>
@@ -35,17 +36,32 @@
            v-for="system in systems"
            :key="system.id"
            class="system-card"
            @mouseenter="handleCardEnter($event, system.id)"
            @mousemove="handleCardMove($event, system.id)"
            @mouseleave="handleCardLeave(system.id)"
            @click="enterSystem(system.id)"
            :style="getCardStyle(system.id)"
        >
          <div class="card-content">
          <div class="system-icon">
            <img :src="system.icon"/>
          </div>
          <h3>{{ system.name }}</h3>
          <p>{{ system.description }}</p>
          </div>
        </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>

@@ -70,22 +86,83 @@
const userInfo = ref();
const userName = ref('')
const userTypeName = ref('')
const cardStates = ref({})
// 组件挂载时获取用户信息和系统列表
onMounted(() => {
  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()
  userStore.roles = []
  systems.value.forEach(system => {
    cardStates.value[system.id] = {
      mouseX: 0,
      mouseY: 0,
      width: 0,
      height: 0,
      hover: false
    }
  })
})


// 鼠标进入卡片
const handleCardEnter = (event, id) => {
  const card = event.currentTarget
  cardStates.value[id] = {
    ...cardStates.value[id],
    width: card.offsetWidth,
    height: card.offsetHeight,
    hover: true
  }
}

// 鼠标移动
const handleCardMove = (event, id) => {
  if (!cardStates.value[id]?.hover) return

  const card = event.currentTarget
  const rect = card.getBoundingClientRect()

  cardStates.value[id].mouseX = event.clientX - rect.left - cardStates.value[id].width / 2
  cardStates.value[id].mouseY = event.clientY - rect.top - cardStates.value[id].height / 2
}

// 鼠标离开
const handleCardLeave = (id) => {
  cardStates.value[id].hover = false;
  // 立即开始归位动画，不使用setTimeout延迟
  cardStates.value[id].mouseX = 0;
  cardStates.value[id].mouseY = 0;
}

// 获取卡片样式
const getCardStyle = (id) => {
  const state = cardStates.value[id] || {}
  const mousePX = state.mouseX / (state.width || 1)
  const mousePY = state.mouseY / (state.height || 1)

  const rX = mousePX * 20 // 减小旋转角度，使效果更柔和
  const rY = mousePY * -20

  const tX = mousePX * -20
  const tY = mousePY * -20

  return {
    transform: `rotateY(${rX}deg) rotateX(${rY}deg)`,
    '--bg-transform': `translateX(${tX}px) translateY(${tY}px)`
  }
}


// 系统列表
const systems = ref([
  {
    id: 1,
    name: 'ISO 9000 质量管理体系',
    name: '国军标9001C质量管理体系',
    description: '确保产品和服务质量符合国际标准',
    icon: menu1
  },
@@ -138,7 +215,7 @@
// 进入系统
const enterSystem = (systemId) => {
  if(systemId == 1){
    router.push({ path: "/"});
    router.push({ path: "/menuIndex"});
  }else{
    ElMessage.warning('系统正在开发中...')
  }
@@ -179,18 +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;
    width: 80%;
    font-size: clamp(1rem, -0.143rem + 1.79vw, 2rem);
    font-weight: bolder;
    padding-left: 40px;
    color: #fff;
  }

  .avatar-container {
@@ -199,7 +273,6 @@
    justify-content: center;

    .avatar-wrapper {
      margin-top: 15px;
      position: relative;

      .user-avatar {
@@ -224,52 +297,140 @@

.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(500px, 1fr));
  gap: 20px;
  max-width: 1500px;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
  max-width: 100%;
  margin: 0 auto;
  perspective: 1000px;
}

.system-card {
  display: flex;
  height: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  height: 320px;
  background-color: #ffffff;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
  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;
  cursor: pointer;
  overflow: hidden;

  &:hover{
    border-radius: 16px;
  }

  &::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 4px; /* 比卡片小1px */
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
    pointer-events: none; /* 确保不影响鼠标事件 */
    z-index: 3; /* 确保在内容之上 */
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    background: #fff;
    transform: var(--bg-transform, translateX(0) translateY(0));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
  }
  &:hover::after {
    border-color: rgba(37,99,235,1); /* 使用蓝色描边 */
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); /* 可选：添加内发光效果 */
  }
  &:hover::before {
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(20,20,20,0.05) 100%);
  }
}

.system-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(100, 100, 100, 0.1);
  //transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15),
  0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.card-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  z-index: 2;
  transform-style: preserve-3d;
}

.system-icon img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
  transition: transform 0.5s;
}

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

.system-card h3 {
  margin: 0 0 10px;
  margin: 0 0 12px;
  color: #333;
  font-size: 24px;
  text-align: center;
  transition: transform 0.3s;
}

.system-card p {
  margin: 0;
  color: #666;
  font-size: 14px;
  color: #999;
  font-size: 15px;
  text-align: center;
  transition: transform 0.3s;
}
</style>

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