<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="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>
|
<h3>{{ system.name }}</h3>
|
<p>{{ system.description }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import {getToken, removeToken} from "@/utils/auth";
|
import Cookies from "js-cookie";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import useUserStore from '@/store/modules/user'
|
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'
|
|
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 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":
|
getInfo();
|
break;
|
case "logout":
|
logout();
|
break;
|
case "password":
|
editPsd();
|
break;
|
default:
|
break;
|
}
|
}
|
// 进入系统
|
const enterSystem = (systemId) => {
|
if(systemId == 1){
|
router.push({ path: "/menuIndex"});
|
}else{
|
ElMessage.warning('系统正在开发中...')
|
}
|
}
|
function getInfo() {
|
reviewRef.value.openDialog('view',userInfo.value)
|
}
|
function editPsd() {
|
reviewRef.value.openDialog('pwd',userInfo.value)
|
}
|
// 退出登录
|
function logout() {
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
removeToken()
|
location.href = '/homePage';
|
|
}).catch(() => { });
|
}
|
|
|
</script>
|
|
<style scoped lang="scss">
|
.system-select-container {
|
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;
|
}
|
}
|
|
.systems-grid {
|
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;
|
}
|
|
.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;
|
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 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: 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;
|
text-align: center;
|
transition: transform 0.3s;
|
}
|
|
.system-card p {
|
margin: 0;
|
color: #999;
|
font-size: 16px;
|
text-align: center;
|
transition: transform 0.3s;
|
}
|
|
.system-card:hover h3,
|
.system-card:hover p {
|
transform: translateZ(20px);
|
}
|
</style>
|
