From 40a29e1c59601e6aff61c1752a4104c6b796e97a Mon Sep 17 00:00:00 2001
From: 祖安之光 <11848914+light-of-zuan@user.noreply.gitee.com>
Date: Wed, 24 Dec 2025 14:46:32 +0800
Subject: [PATCH] 修改新增
---
src/views/menuPage.vue | 245 ++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 203 insertions(+), 42 deletions(-)
diff --git a/src/views/menuPage.vue b/src/views/menuPage.vue
index 4ee3d9e..f3539e1 100644
--- a/src/views/menuPage.vue
+++ b/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>
\ No newline at end of file
+
+.system-card:hover h3,
+.system-card:hover p {
+ transform: translateZ(20px);
+}
+</style>
--
Gitblit v1.9.2