<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Col, Row } from 'ant-design-vue';
|
|
defineOptions({ name: 'DashboardBizCards' });
|
|
const emit = defineEmits<{
|
navigate: [path: string];
|
}>();
|
|
interface ModuleCard {
|
id: string;
|
title: string;
|
desc: string;
|
path: string;
|
icon: string;
|
gradient: string;
|
shadow: string;
|
textColor: string;
|
}
|
|
/** 售后管理模块入口 */
|
const cards: ModuleCard[] = [
|
{ id: 'ticket', title: '售后工单', desc: '售后管理', path: '/aftersales/ticket', icon: 'lucide:wrench', gradient: 'from-cyan-500 to-teal-400', shadow: 'shadow-cyan-500/25', textColor: 'text-cyan-600 dark:text-cyan-400' },
|
{ id: 'return', title: '退货申请', desc: '售后管理', path: '/aftersales/return', icon: 'lucide:undo-2', gradient: 'from-pink-500 to-rose-400', shadow: 'shadow-pink-500/25', textColor: 'text-pink-600 dark:text-pink-400' },
|
{ id: 'problem', title: '问题库', desc: '售后管理', path: '/aftersales/problem', icon: 'lucide:book-open', gradient: 'from-amber-500 to-yellow-400', shadow: 'shadow-amber-500/25', textColor: 'text-amber-600 dark:text-amber-400' },
|
];
|
|
/** 3D 倾斜 */
|
interface TiltState { x: number; y: number }
|
const tilts = ref<Record<string, TiltState>>({});
|
|
function onMouseMove(e: MouseEvent, id: string) {
|
const el = e.currentTarget as HTMLElement;
|
const rect = el.getBoundingClientRect();
|
const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
|
const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
|
tilts.value[id] = { x: x * -5, y: y * 5 };
|
}
|
|
function onMouseLeave(id: string) {
|
tilts.value[id] = { x: 0, y: 0 };
|
}
|
|
function tiltStyle(id: string) {
|
const t = tilts.value[id] ?? { x: 0, y: 0 };
|
return {
|
transform: `perspective(500px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
|
transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
|
};
|
}
|
</script>
|
|
<template>
|
<Row :gutter="16">
|
<Col v-for="c in cards" :key="c.id" :lg="8" :md="8" :sm="12" :xl="8" :xs="24" class="mb-4">
|
<div
|
class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
|
:style="tiltStyle(c.id)"
|
@mousemove="(e: MouseEvent) => onMouseMove(e, c.id)"
|
@mouseleave="onMouseLeave(c.id)"
|
@click="emit('navigate', c.path)"
|
>
|
<div class="relative z-10 flex items-center gap-4 p-5">
|
<div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br transition-transform duration-300 group-hover:scale-110" :class="[c.gradient, c.shadow]">
|
<IconifyIcon class="size-6 text-white" :icon="c.icon" />
|
</div>
|
<div class="min-w-0 flex-1">
|
<div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
|
<div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
|
<div class="mt-1 text-xs text-gray-400">点击进入</div>
|
</div>
|
</div>
|
<div class="absolute -right-6 -top-6 size-24 rounded-full bg-pink-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
|
</div>
|
</Col>
|
</Row>
|
</template>
|
|
<style scoped>
|
.glass-tilt {
|
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
|
backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
border: 1px solid rgba(255,255,255,0.6);
|
box-shadow:
|
0 4px 24px rgba(0,0,0,0.04),
|
0 1px 4px rgba(0,0,0,0.02),
|
inset 0 1px 0 rgba(255,255,255,0.8);
|
transform-style: preserve-3d;
|
}
|
|
.dark .glass-tilt {
|
background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
|
border: 1px solid rgba(255,255,255,0.08);
|
box-shadow:
|
0 4px 24px rgba(0,0,0,0.3),
|
0 1px 4px rgba(0,0,0,0.2),
|
inset 0 1px 0 rgba(255,255,255,0.05);
|
}
|
</style>
|
