sladro
e35455fd78
- 添加丰富的项目描述和功能介绍内容 - 实现四大核心能力展示（多CAD管理、智能分析、导出支持、状态监控） - 集成技术特色说明和使用引导 - 使用响应式卡片布局，支持桌面和移动端 - 完全集成现有CSS变量主题系统和工业化配色 - 添加hover动画效果和视觉层次设计 - 修改默认页面状态，优化用户首次访问体验 - 更新项目文档，记录首页设计实现过程 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
181 lines
3.7 KiB
Vue
181 lines
3.7 KiB
Vue
<template>
|
|
<div :class="cardClasses">
|
|
<div v-if="$slots.header || title" class="card-header">
|
|
<h3 v-if="title" class="card-title">{{ title }}</h3>
|
|
<slot name="header" />
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<slot />
|
|
</div>
|
|
|
|
<div v-if="$slots.footer" class="card-footer">
|
|
<slot name="footer" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
shadow: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hover: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
glass: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
padding: {
|
|
type: String,
|
|
default: 'normal',
|
|
validator: (value) => ['none', 'small', 'normal', 'large'].includes(value)
|
|
}
|
|
})
|
|
|
|
const cardClasses = computed(() => {
|
|
return [
|
|
'card',
|
|
{
|
|
'card-shadow': props.shadow,
|
|
'card-hover': props.hover,
|
|
'card-glass': props.glass,
|
|
[`card-padding-${props.padding}`]: true
|
|
}
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--card-border-radius);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all var(--transition-duration) var(--transition-timing);
|
|
}
|
|
|
|
.card-shadow {
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
background: var(--color-bg-dark-95);
|
|
border-color: var(--color-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--color-shadow-hover);
|
|
}
|
|
|
|
.card-glass {
|
|
background: var(--color-white-rgb-05);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--color-white-rgb-1);
|
|
}
|
|
|
|
.card-glass:hover {
|
|
background: var(--color-white-rgb-05);
|
|
border-color: var(--color-white-rgb-15);
|
|
}
|
|
|
|
.card-header {
|
|
padding: var(--spacing-2xl);
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
background: var(--color-white-rgb-05);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.card-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: var(--spacing-xl) var(--spacing-2xl);
|
|
border-top: 1px solid var(--color-border-primary);
|
|
background: var(--color-white-rgb-05);
|
|
}
|
|
|
|
/* 内边距变体 */
|
|
.card-padding-none .card-header,
|
|
.card-padding-none .card-body,
|
|
.card-padding-none .card-footer {
|
|
padding: 0;
|
|
}
|
|
|
|
.card-padding-small .card-header,
|
|
.card-padding-small .card-body,
|
|
.card-padding-small .card-footer {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.card-padding-normal .card-header,
|
|
.card-padding-normal .card-body,
|
|
.card-padding-normal .card-footer {
|
|
padding: var(--spacing-2xl);
|
|
}
|
|
|
|
.card-padding-large .card-header,
|
|
.card-padding-large .card-body,
|
|
.card-padding-large .card-footer {
|
|
padding: var(--spacing-3xl);
|
|
}
|
|
|
|
.card-padding-none .card-header,
|
|
.card-padding-none .card-footer {
|
|
display: none;
|
|
}
|
|
|
|
.card-padding-small .card-header {
|
|
padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
|
|
}
|
|
|
|
.card-padding-small .card-footer {
|
|
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
|
|
}
|
|
|
|
.card-padding-large .card-header {
|
|
padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-2xl);
|
|
}
|
|
|
|
.card-padding-large .card-footer {
|
|
padding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-3xl);
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
.card-body::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.card-body::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.card-body::-webkit-scrollbar-thumb {
|
|
background: var(--color-scrollbar-thumb);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.card-body::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-scrollbar-thumb-hover);
|
|
}
|
|
</style> |