修改

zhouwx

2026-02-10 c2b4a583f693fba8e10165d0ef706fb7683753fb

 src/views/menuPage.vue

@@ -1,202 +1,188 @@
<template>
  <div class="system-select-container">
    <!-- 顶部用户信息栏 -->
    <div class="user-info-bar">
      <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;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="password">
                <span>修改密码</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  <div class="multi-system-dashboard">
    <!-- 头部 -->
    <header>
      <div class="header-container">
        <div class="system-title">欢迎进入多体系建设信息化系统</div>

    <!-- 系统选择区域 -->
    <div class="systems-container">
      <div class="systems-grid">
        <div
            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 class="admin-info" @click="handleAdminClick" ref="adminInfoRef">-->
<!--          <div class="admin-icon">-->
<!--            <i class="fas fa-user-cog"></i>-->
<!--          </div>-->
<!--          <div class="admin-details">-->
<!--            <div class="admin-name">admin</div>-->
<!--            <div class="admin-role">系统管理员</div>-->
<!--          </div>-->
<!--        </div>-->

        <div class="admin-info">
          <div class="admin-icon">
            <img src="../assets/images/avator.png" class="user-avatar"  />
          </div>
          <h3>{{ system.name }}</h3>
          <p>{{ system.description }}</p>
          </div>
          <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
            <div class="admin-details">
              <div class="admin-name">{{userName}}</div>
              <div class="admin-role">{{userTypeName}}</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="password">
                  <span>修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="menu-container">
      <section class="welcome-section">
        <div class="welcome-decoration"></div>
        <h1 class="welcome-title">多体系建设信息化系统</h1>
        <p class="welcome-subtitle">
          本系统集成多个国际与国内管理体系标准，为企业提供全面、协同、高效的信息化管理平台。通过统一门户实现质量管理、信息安全、职业健康安全、项目管理等多体系的无缝集成与协同运作，助力企业标准化、数字化、智能化发展。
        </p>
      </section>

      <section class="systems-grid">
        <!-- 使用v-for循环渲染系统卡片 -->
        <div
            v-for="(system, index) in systems"
            :key="system.id"
            class="system-card"
            :class="`card-${index + 1}`"
            @click="handleSystemLinkClick(system.id)"
            @mouseenter="handleCardHover(system, true)"
            @mouseleave="handleCardHover(system, false)"
            ref="cardRefs"
        >
          <div class="card-decoration"></div>
          <div class="system-header">
            <div class="system-icon-container">
              <div class="system-icon" ref="iconRefs">
                <img :src="system.icon"/>
              </div>
              <h3 class="system-name">{{ system.name }}</h3>
            </div>
          </div>
          <p class="system-desc">{{ system.description }}</p>
          <a
              href="#"
              class="system-link"
              @click.stop="handleSystemLinkClick(system.id)"
          >
            进入系统 <el-icon><Right /></el-icon>
          </a>
        </div>
      </section>
    </div>
    <div class="sys-footer">
      <div class="footer-left">
        <img src="../assets/images/menuPageLogo.png"/>
        <span>中国科学院苏州纳米技术与纳米仿生研究所</span>

    <!-- 底部 -->
    <footer>
      <div class="footer-decoration"></div>
      <div class="footer-container">
        <div class="copyright-section">
          <div class="copyright">
            © 2025 多体系建设信息化系统 | 中国科学院苏州纳米技术与纳米仿生研究所 版权所有
          </div>
          <div class="version">版本号 V1.0.0</div>
        </div>
      </div>
      <div class="footer-right">
        系统版本：V1.0.0
      </div>
    </div>
    </footer>
    <user-dialog ref="reviewRef"></user-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {getToken, removeToken} from "@/utils/auth";
import Cookies from "js-cookie";
import { ref, onMounted, nextTick } from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import  useUserStore from '@/store/modules/user'
import {getToken, removeToken} from "@/utils/auth";
import userDialog from '@/views/build/conpanyFunctionConsult/staffManage/staffRegister/components/staffDialog.vue'
import menu1 from '@/assets/icons/menu1.png'
import menu2 from '@/assets/icons/menu2.png'
import menu3 from '@/assets/icons/menu3.png'
import menu4 from '@/assets/icons/menu4.png'
import menu5 from '@/assets/icons/menu5.png'
import menu6 from '@/assets/icons/menu6.png'
import shield from '@/assets/icons/shield-alt.png'
import lock from '@/assets/icons/lock.png'
import hat from '@/assets/icons/hard-hat.png'
import diagram from '@/assets/icons/project-diagram.png'
import clipboard from '@/assets/icons/clipboard-check.png'
import chartLine from '@/assets/icons/chart-line.png'

import Cookies from "js-cookie";
import useUserStore from "@/store/modules/user";
import {useRouter} from "vue-router";

// 响应式数据
const systems = ref([
  {
    id: 1,
    name: '国军标9001C质量管理体系',
    description: '基于GJB9001C-2017标准，专为军工产品研制、生产、维修和服务单位设计。',
    icon: shield,
    color: '#1a56db'
  },
  {
    id: 2,
    name: 'ISO27001信息安全体系',
    description: '遵循ISO/IEC 27001:2022标准，帮助企业建立、实施、维护和持续改进信息安全管理体系。',
    icon: lock,
    color: '#0d9488'
  },
  {
    id: 3,
    name: 'ISO45001安全体系',
    description: '基于ISO45001:2018标准，系统化管理职业健康安全风险，预防工伤和健康损害。',
    icon: hat,
    color: '#10b981'
  },
  {
    id: 4,
    name: '项目管理控制',
    description: '集成PMBOK和PRINCE2最佳实践的项目管理平台，支持项目全生命周期管理。',
    icon: diagram,
    color: '#7c3aed'
  },
  {
    id: 5,
    name: '承制评价系统',
    description: '针对承制单位资格管理的综合系统，确保承制单位持续满足军用产品承制要求。',
    icon: clipboard,
    color: '#f97316'
  },
  {
    id: 6,
    name: '新体系评价系统',
    description: '面向新兴管理体系标准的评估与导入平台，支持新标准的适应性评估和实施规划。',
    icon: chartLine,
    color: '#ef4444'
  }
])

// Refs
const adminInfoRef = ref(null)
const cardRefs = ref([])
const iconRefs = ref([])
const router = useRouter()
const route = useRoute();
const reviewRef = ref();
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 ? '其他' : '学员'
  }

  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 handleAdminClick = () => {
  if (adminInfoRef.value) {
    adminInfoRef.value.style.transform = 'scale(0.94)'
    setTimeout(() => {
      if (adminInfoRef.value) {
        adminInfoRef.value.style.transform = ''
      }
      alert('管理员菜单已打开')
    }, 150)
  }
}

// 鼠标移动
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: '国军标9001C质量管理体系',
    description: '专注军工与高端装备制造领域的全生命周期质量管理与合规认证',
    icon: menu1
  },
  {
    id: 2,
    name: 'ISO27001信息安全体系',
    description: '构建全面信息安全管理框架，保障组织数据资产与业务运行的机密性、完整性和可用性',
    icon: menu2
  },
  {
    id: 3,
    name: 'ISO45001职业健康安全体系',
    description: '系统化管理职业健康安全风险，提升工作场所安全水平',
    icon: menu3
  },
  {
    id: 4,
    name: '项目管理控制',
    description: '实现项目全流程标准化管控，支持进度、资源与风险的可视化协同管理',
    icon: menu4
  },
  {
    id: 5,
    name: '承制评价系统',
    description: '基于资质标准与绩效数据，对承制单位进行科学评估与分级管理',
    icon: menu5
  },
  {
    id: 6,
    name: '新体系评价系统',
    description: '面向新兴领域与创新需求，提供灵活可配置的体系成熟度评估与改进向导',
    icon: menu6
  }
])
function handleCommand(command) {
  switch (command) {
    case "info":
@@ -212,14 +198,15 @@
      break;
  }
}
// 进入系统
const enterSystem = (systemId) => {

const handleSystemLinkClick = (systemId) => {
  if(systemId == 1){
    router.push({ path: "/menuIndex"});
  }else{
    ElMessage.warning('系统正在开发中...')
  }
}

function getInfo() {
  reviewRef.value.openDialog('view',userInfo.value)
}
@@ -239,206 +226,515 @@
  }).catch(() => { });
}

const handleCardHover = (system, isEnter) => {
  const cardIndex = systems.value.findIndex(s => s.id === system.id)
  if (cardIndex !== -1 && iconRefs.value[cardIndex]) {
    iconRefs.value[cardIndex].style.transform = isEnter ? 'scale(1.04)' : 'scale(1)'
    iconRefs.value[cardIndex].style.transition = 'transform 0.3s ease'
  }
}

// 页面加载后计算高度并调整
const adjustLayout = () => {
  const bodyHeight = document.body.scrollHeight
  const windowHeight = window.innerHeight

  // 获取DOM元素
  const welcomeSection = document.querySelector('.welcome-section')
  const systemsGrid = document.querySelector('.systems-grid')
  const footer = document.querySelector('footer')

  // 如果内容超过屏幕高度，进行微调
  if (bodyHeight > windowHeight) {
    if (welcomeSection) welcomeSection.style.marginBottom = '1.5rem'
    if (systemsGrid) {
      systemsGrid.style.gap = '1.2rem'
      systemsGrid.style.marginBottom = '2rem'
    }
    if (footer) footer.style.padding = '1.2rem 1.8rem'
    if (welcomeSection) welcomeSection.style.padding = '1.8rem 1.5rem'
  }
}

// 生命周期钩子
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 ? '其他' : '学员'
  }

  const userStore = useUserStore()
  userStore.roles = []
  // 等待DOM更新完成后执行
  nextTick(() => {
    adjustLayout()

    // 渐显效果
    document.body.style.opacity = '0'
    document.body.style.transition = 'opacity 0.5s ease'

    setTimeout(() => {
      document.body.style.opacity = '1'
    }, 100)
  })

  // 监听窗口大小变化
  window.addEventListener('resize', adjustLayout)
})
</script>

<style scoped lang="scss">
.system-select-container {
<style lang="scss" scoped>
body {
  background-color: #f8fafc;
  color: #1f2937;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.multi-system-dashboard{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.user-info-bar {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: rgb(16,66,143);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  .user-left{
    width: 80%;
    font-size: 30px;
    font-weight: bolder;
    padding-left: 40px;
    color: #fff;
  }

  .avatar-container {
    width: 20%;
    display: flex;
    justify-content: center;

    .avatar-wrapper {
      position: relative;

      .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin-right: 15px;
      }

      i {
        cursor: pointer;
        position: absolute;
        right: -20px;
        font-size: 12px;
      }
    }
  }

}


.systems-container {
  flex: 1;
  padding: 60px;
  overflow-y: auto;
  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;
  .menu-container {
    flex: 1;
    overflow-y: auto;
    max-width: 1600px;
    width: 100%;
    margin: 1rem auto;
    padding: 0 1.8rem;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
}

.systems-grid {
/* 头部样式 - 更加紧凑 */
header {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 30px;
  margin: 0 auto;
  perspective: 1000px;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: white;
  padding: 0.8rem 1.8rem;
  box-shadow: 0 3px 10px rgba(30, 58, 138, 0.12);
}

.header-container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.system-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.admin-info:hover {
  background: rgba(255, 255, 255, 0.25);
}

.admin-icon {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  img{
    width: 100%;
    height: 100%;
  }
}

.admin-details {
  display: flex;
  flex-direction: column;
  color: #fff;
}

.admin-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.admin-role {
  font-size: 0.75rem;
  opacity: 0.9;
}


.welcome-section {
  position: relative;
  text-align: center;
  margin-bottom: 1rem;
  padding: 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 5px 15px -4px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.welcome-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
  #1a56db,
  #0d9488,
  #7c3aed,
  #f97316
  );
}

.welcome-title {
  font-size: 1.5rem;
  margin: 0 0 0.8rem;
  font-weight: 800;
  color: #1a56db;
}

.welcome-subtitle {
  font-size: 0.95rem;
  color: #4b5563;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 400;
}

/* 系统入口网格 - 更加紧凑 */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

/* 为每个系统卡片分配不同的颜色主题 */
.system-card.card-1 { --card-color: #1a56db; }
.system-card.card-2 { --card-color: #0d9488; }
.system-card.card-3 { --card-color: #10b981; }
.system-card.card-4 { --card-color: #7c3aed; }
.system-card.card-5 { --card-color: #f97316; }
.system-card.card-6 { --card-color: #ef4444; }

.system-card {
  position: relative;
  background-color: #ffffff;
  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;
  background: white;
  border-radius: 14px;
  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%);
  }
  box-shadow: 0 5px 15px -4px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
}

.system-card:hover {
  //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;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.card-content {

.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
  var(--card-color),
  color-mix(in srgb, var(--card-color) 70%, white)
  );
}

.system-header {
  padding: 0.8rem 1.5rem;
  position: relative;
  height: 100%;
}

.system-icon-container {
  display: flex;
  align-items: center;
  gap: 14px;

}

.system-icon {
  background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 80%, white));
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  img{
    width: 24px;
    height: 24px;
  }
}

.system-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--card-color);
  flex-grow: 1;
  line-height: 1.25;
}

.system-desc {
  padding: 0 1.5rem 1.2rem;
  flex-grow: 1;
  color: #4b5563;
  line-height: 1.5;
  font-size: 0.9rem;
  margin: 0;
}

.system-link {
  display: block;
  padding: 0.8rem;
  text-align: center;
  background: linear-gradient(90deg,
  var(--card-color),
  color-mix(in srgb, var(--card-color) 80%, white)
  );
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.system-link:hover {
  background: linear-gradient(90deg,
  color-mix(in srgb, var(--card-color) 90%, black),
  var(--card-color)
  );
}

/* 底部样式 - 更加紧凑 */
footer {
  width: 100%;
  height: 100px;
  background: linear-gradient(90deg, #111827 0%, #1f2937 100%);
  color: white;
  padding: 1.5rem 1.8rem;
  margin-top: auto;
  position: relative;
}

.footer-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
  #1a56db,
  #0d9488,
  #7c3aed
  );
}

.footer-container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  z-index: 2;
  transform-style: preserve-3d;
  gap: 0.8rem;
}

.system-icon img {
  width: 100px;
  height: 100px;
  margin-bottom: clamp(0.375rem, -2.054rem + 3.79vw, 2.5rem);
  transition: transform 0.5s;
}

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

.system-card h3 {
  margin: 0 0 12px;
  color: #333;
  font-size: clamp(0.875rem, 0.161rem + 1.12vw, 1.5rem);
  font-weight: bolder;
.copyright-section {
  text-align: center;
  transition: transform 0.3s;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.system-card p {
  margin: 0;
  color: #999;
  font-size: 16px;
  text-align: center;
  transition: transform 0.3s;
.copyright {
  font-size: 0.9rem;
  color: #d1d5db;
  line-height: 1.3;
}

.system-card:hover h3,
.system-card:hover p {
  transform: translateZ(20px);
.version {
  display: inline-block;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

/* 响应式调整 */
@media (max-width: 1300px) {
  .systems-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  header {
    padding: 0.7rem 1.5rem;
  }

  .system-title {
    font-size: 1.4rem;
  }

  .menu-container {
    padding: 0 1.5rem;
    margin: 0.8rem auto;
  }

  .welcome-section {
    padding: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .welcome-title {
    font-size: 1.3rem;
  }

  .welcome-subtitle {
    font-size: 0.9rem;
  }

  .systems-grid {
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .system-header {
    padding: 0.6rem 1.3rem;
  }

  .system-desc {
    padding: 0 1.3rem 1rem;
    font-size: 0.85rem;
  }

  .system-link {
    padding: 0.7rem;
  }
}

@media (max-width: 700px) {
  .systems-grid {
    grid-template-columns: 1fr;
  }

  .header-container {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }

  .admin-info {
    padding: 7px 14px;
  }

  .welcome-title {
    font-size: 1.2rem;
  }

  .system-name {
    font-size: 1.2rem;
  }

  footer {
    padding: 1.2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .menu-container {
    padding: 0 1.2rem;
  }

  .welcome-section {
    padding: 1rem 1.2rem;
  }

  .welcome-title {
    font-size: 1rem;
  }

  .system-header {
    padding: 0.5rem 1.2rem;
  }

  .system-icon {
    width: 42px;
    height: 42px;
  }

  .system-name {
    font-size: 1.15rem;
  }

  .copyright {
    font-size: 0.85rem;
  }

  .version {
    font-size: 0.8rem;
  }
}

/* 确保在一个屏幕内显示 */
@media (min-height: 900px) {
  .menu-container {
    margin: 1rem auto;
  }

  .welcome-section {
    margin-bottom: 1rem;
    padding: 2rem;
  }

  .systems-grid {
    gap: 1rem;
    margin-bottom: 3rem;
  }
}
</style>