marchglow/webgame-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加交互效果

Browse Source
This commit is contained in:
Azure
2026-06-18 11:40:51 +08:00
parent 3bd6e972ea
commit dd8157b723
5 changed files with 146 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/style/variables.scss
View File

@@ -22,7 +22,7 @@
// 从底层到顶层依次变亮，形成自然层级
--bg-body: #f1f5f9; /* 页面底色：最底层背景 */
--bg-surface: #ffffff; /* 卡片/面板背景：浮于页面之上的容器 */
--bg-surface-hover: #f8fafc; /* 卡片悬停：鼠标经过时的微变反馈 */
--bg-surface-hover: #eef2ff; /* 卡片/列表项悬停：鼠标经过时带品牌色微调，明显但不刺眼 */
--bg-sidebar: #f8fafc; /* 侧边栏背景：导航区域的专用底色 */
--bg-topbar: #ffffff; /* 顶部栏背景：顶部导航条的底色 */
--bg-elevated: #ffffff; /* 浮层背景：弹出菜单、下拉面板等最高层 */

44
src/components/baseLayouts/GameList.vue
View File

@@ -129,7 +129,8 @@ function selectGame(id: string) {
flex-shrink: 0;
padding: 8px 4px;
overflow-y: auto;
border-right: 1px solid var(--border-light);
/* 加粗分隔线，图标区与详情区边界分明 */
border-right: 2px solid var(--border-default);
}
.game-list__icon-item {
@@ -138,16 +139,34 @@ function selectGame(id: string) {
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color 0.2s ease;
transition: background-color 0.15s ease, transform 0.15s ease;
&:hover {
background-color: var(--bg-surface-hover);
transform: scale(1.08);
}
&:active {
transform: scale(0.95);
}
&--active {
background-color: var(--color-primary-light);
/* 选中态加左侧色条，视觉更突出 */
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 25%;
height: 50%;
width: 3px;
border-radius: 0 3px 3px 0;
background-color: var(--color-primary);
}
}
}
@@ -160,7 +179,7 @@ function selectGame(id: string) {
/* ===== 右侧详情面板 ===== */
.game-list__detail {
flex: 1;
padding: 16px;
padding: 20px 16px;
overflow-y: auto;
}
@@ -179,9 +198,15 @@ function selectGame(id: string) {
}
.game-list__detail-gameplay {
/* 玩法介绍卡片 — 浅底圆角，从详情区中独立出来 */
background-color: var(--bg-body);
border-radius: var(--radius-md);
padding: 14px 16px;
border: 1px solid var(--border-light);
h4 {
font-size: 16px;
font-weight: 500;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
}
@@ -195,10 +220,19 @@ function selectGame(id: string) {
.game-list__detail-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 8px;
color: var(--text-tertiary);
font-size: 14px;
/* 空状态图标 */
&::before {
content: '🎮';
font-size: 40px;
opacity: 0.4;
}
}
</style>

65
src/components/baseLayouts/UserBar.vue
View File

@@ -4,8 +4,12 @@
<el-popover trigger="click" :width="260">
<template #reference>
<div class="user-info">
<el-badge is-dot :offset="[-7, 29]" class="user-badge">
<el-avatar shape="circle" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
<el-badge is-dot :offset="[-4, 20]" class="user-badge">
<el-avatar
:size="28"
shape="circle"
src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
/>
</el-badge>
<div class="user-name">
<div class="user-title">MarchGlow</div>
@@ -36,6 +40,9 @@ import { Setting } from '@element-plus/icons-vue'
align-items: center;
}
.user-badge {
display: flex;
}
.user-badge :deep(.el-badge__content) {
width: 12px;
height: 12px;
@@ -58,35 +65,43 @@ import { Setting } from '@element-plus/icons-vue'
align-items: center;
height: 100%;
gap: 8px;
padding: 4px;
border-radius: 4px;
transition: background-color 0.2s ease;
padding: 4px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
min-width: 0;
transition: background-color 0.15s ease;
&:hover {
background-color: var(--bg-surface-hover);
}
}
.user-name {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 34px;
width: 120px;
gap: 2px;
/* 默认内容宽度，超长时上限 160px 触发省略 */
max-width: 160px;
min-width: 0;
}
.user-title {
line-height: 18px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
font-weight: 500;
font-size: 14px;
font-weight: 600;
text-align: left;
}
.user-state {
line-height: 12px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-size: 11px;
color: var(--text-tertiary);
text-align: left;
}
@@ -94,5 +109,29 @@ import { Setting } from '@element-plus/icons-vue'
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
color: var(--text-secondary);
transition:
background-color 0.15s ease,
color 0.15s ease;
&:hover {
background-color: var(--bg-surface-hover);
color: var(--text-primary);
/* 移入时缓动旋转 180°，完成后保持 */
:deep(.el-icon) {
transition: transform 0.6s cubic-bezier(0.6, 0, 1, 1);
transform: rotate(180deg);
}
}
/* 移出时无过渡，瞬间复位 */
:deep(.el-icon) {
transition: none;
}
}
</style>

26
src/layouts/AuthPageLayout.vue
View File

@@ -42,17 +42,16 @@
.auth-layout__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
154deg,
#07070915 30%,
color-mix(in srgb, var(--el-color-primary) 30%, transparent) 48%,
#07070915 64%
);
filter: blur(100px);
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background:
radial-gradient(ellipse at 30% 20%, rgba(79, 70, 229, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 40%);
filter: blur(80px);
pointer-events: none;
}
.auth-layout__card {
@@ -65,6 +64,11 @@
border-radius: var(--radius-lg);
padding: 40px 24px 40px 24px;
width: 100%;
/* 卡片浮起效果 */
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.06),
0 1px 4px rgba(0, 0, 0, 0.04);
border: 1px solid var(--border-light);
}
/* 平板端宽度 */

48
src/layouts/BaseLayout.vue
View File

@@ -56,10 +56,14 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
align-items: center;
justify-content: center;
width: 100%;
height: 30px;
height: 36px;
padding: 0 12px;
background-color: var(--bg-topbar);
border-bottom: 1px solid var(--border-default);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
/* 置顶，确保阴影覆盖下方内容 */
position: relative;
z-index: 10;
}
.base-layout__topbar-title {
@@ -72,7 +76,7 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
.base-layout__topbar-game-icon {
display: flex;
align-items: center;
font-size: 16px;
font-size: 18px;
line-height: 1;
height: 100%;
}
@@ -80,8 +84,8 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
.base-layout__topbar-game-name {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 500;
font-size: 14px;
font-weight: 600;
line-height: 1;
height: 100%;
color: var(--text-primary);
@@ -102,7 +106,9 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 100%;
padding: var(--space-sm);
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-default);
/* 右边框加粗 + 阴影，与内容区形成清晰分界 */
border-right: 2px solid var(--border-default);
z-index: 5;
}
.base-layout__sidebar-content {
@@ -111,6 +117,10 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 100%;
width: 100%;
padding-bottom: 72px;
/* 内容区用白色卡片承载，与侧边栏底色拉开层次 */
background-color: var(--bg-surface);
border-radius: var(--radius-md);
overflow: hidden;
}
.base-layout__sidebar-bottom {
@@ -131,21 +141,41 @@ const { activeGameIcon, activeGameName } = storeToRefs(baseLayoutStore)
height: 100%;
border-radius: var(--radius-md);
background-color: var(--bg-surface);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
/* 加重的阴影 + 微妙的品牌色顶边，让用户栏从侧边栏中"浮起" */
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
border-top: 2px solid var(--color-primary-light);
border-left: 1px solid var(--border-light);
border-right: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.base-layout__resize-handle {
position: absolute;
width: 4px;
width: 6px;
height: 100%;
top: 0;
right: 0;
cursor: ew-resize;
z-index: 10;
/* 默认微弱可见，提示可拖拽 */
background: linear-gradient(
90deg,
transparent 0%,
transparent 40%,
var(--border-default) 40%,
var(--border-default) 60%,
transparent 60%,
transparent 100%
);
transition: background-color 0.2s ease;
&:hover {
background-color: var(--border-default);
background-color: var(--color-primary-light);
background: none;
}
&:active {
background-color: var(--color-primary);
}
}