orion/FileCodeBoxFronted2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 优化 2026 主题移动端与详情体验

Browse Source
This commit is contained in:
Orion
2026-07-10 10:07:59 +08:00
parent 45a96112bc
commit 12738b874a
9 changed files with 184 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/BaseModal.vue
+5 -5
View File
@@ -16,7 +16,7 @@
<div class="flex min-h-full items-center justify-center p-4">
<div
ref="modalRef"
class="relative transform overflow-hidden rounded-[30px] shadow-xl transition-all"
class="relative flex max-h-[calc(100vh-2rem)] transform flex-col overflow-hidden rounded-[30px] shadow-xl transition-all"
:class="[
sizeClasses,
isDarkMode ? 'bg-gray-800' : 'bg-white'
@@ -26,7 +26,7 @@
<!-- 头部 -->
<div
v-if="$slots.header || title"
class="flex items-center justify-between px-6 py-4 border-b"
class="flex shrink-0 items-center justify-between border-b px-4 py-3 sm:px-6 sm:py-4"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<slot name="header">
@@ -37,7 +37,7 @@
<button
v-if="closable"
@click="$emit('close')"
class="rounded-md p-2 transition-colors"
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg transition-colors"
:class="[
isDarkMode
? 'text-gray-400 hover:text-gray-300 hover:bg-gray-700'
@@ -49,14 +49,14 @@
</div>
<!-- 内容 -->
<div class="px-6 py-4">
<div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6">
<slot></slot>
</div>
<!-- 底部 -->
<div
v-if="$slots.footer"
class="flex items-center justify-end space-x-3 px-6 py-4 border-t"
class="flex shrink-0 items-center justify-end space-x-3 border-t px-4 py-3 sm:px-6 sm:py-4"
:class="[isDarkMode ? 'border-gray-700 bg-gray-900/50' : 'border-gray-200 bg-gray-50']"
>
<slot name="footer"></slot>
src/components/common/StatCard.vue
+8 -8
View File
@@ -1,29 +1,29 @@
<template>
<div
class="theme-2026-card theme-2026-card-hover group rounded-[30px] p-6 shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
class="theme-2026-card theme-2026-card-hover group rounded-[24px] p-4 shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg sm:rounded-[30px] sm:p-6"
:class="[
isDarkMode
? 'hover:bg-gray-800 hover:shadow-black/20'
: 'hover:shadow-gray-200/80'
]"
>
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
<div class="flex items-center justify-between gap-3">
<div class="min-w-0">
<p class="truncate text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
{{ title }}
</p>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
<h3 class="mt-1 truncate text-xl font-bold tabular-nums sm:text-2xl" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ value }}
</h3>
</div>
<div
class="rounded-full p-3 transition-transform duration-300 group-hover:scale-105"
class="shrink-0 rounded-full p-2.5 transition-transform duration-300 group-hover:scale-105 sm:p-3"
:class="iconBgClass"
>
<component :is="icon" class="w-6 h-6" :class="iconClass" />
<component :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" :class="iconClass" />
</div>
</div>
<p class="text-sm mt-2" :class="descriptionClass">
<p class="mt-2 line-clamp-1 text-xs sm:text-sm" :class="descriptionClass">
<slot name="description"></slot>
</p>
</div>