diff --git a/public/completed_performance.png b/public/completed_performance.png index b993cd8..77cc7ac 100644 Binary files a/public/completed_performance.png and b/public/completed_performance.png differ diff --git a/public/individual-propagation.png b/public/individual-propagation.png index b2fdba4..4d82ec4 100644 Binary files a/public/individual-propagation.png and b/public/individual-propagation.png differ diff --git a/public/team-propagation.png b/public/team-propagation.png index 72f3e3f..49dbc1b 100644 Binary files a/public/team-propagation.png and b/public/team-propagation.png differ diff --git a/src/App.vue b/src/App.vue index 15a04aa..5d2c926 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,7 +25,7 @@ @@ -108,7 +108,28 @@ .footer-content { font-size: 14px; - text-shadow: 1px 1px 10px black; + /* 雕刻效果:使用多层text-shadow创建凸起感 */ + text-shadow: + -1px -1px 0 rgba(255, 255, 255, 0.3), /* 高光 - 左上 */ + 1px 1px 0 rgba(0, 0, 0, 0.5), /* 阴影 - 右下 */ + 0 0 5px rgba(17, 17, 17, 0.5); /* 光晕 */ + /* 背景和内边距 */ + padding: 8px 16px; + border-radius: 4px; + + /* 添加轻微的3D效果 */ + transform: perspective(1000px) rotateX(0deg); + transition: all 0.3s ease; +} + +/* 鼠标悬停时增强3D效果 */ +.footer-content:hover { + transform: perspective(1000px) rotateX(2deg) translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + text-shadow: + -1px -1px 0 rgba(255, 255, 255, 0.4), + 1px 1px 0 rgba(0, 0, 0, 0.6), + 0 0 8px rgba(15, 15, 15, 0.7); } /* 针对1920x1080分辨率的banner精确定位 */ @@ -172,5 +193,20 @@ .app-logo { width: 200px; /* 移动设备上设置固定宽度为200px */ } + + /* 移动设备上的页脚雕刻效果适配 */ + .footer-content { + font-size: 12px; + padding: 6px 12px; + text-shadow: + -1px -1px 0 rgba(255, 255, 255, 0.2), + 1px 1px 0 rgba(0, 0, 0, 0.4), + 0 0 3px rgba(255, 215, 0, 0.4); + } + + .footer-content:hover { + transform: none; /* 移动设备上禁用悬停效果 */ + box-shadow: none; + } } diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue index cfbcfe2..07a7867 100644 --- a/src/views/BattleRanking.vue +++ b/src/views/BattleRanking.vue @@ -1329,11 +1329,11 @@ onUnmounted(() => { } .team-rankings-propagation-image { - width: 320px; + width: 220px; } .individual-rankings-propagation-image { - width: 320px; + width: 220px; } /* 隐藏倒计时模块 */ @@ -1938,10 +1938,7 @@ onUnmounted(() => { font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2); font-weight: bold; color: #fff2c4; - text-shadow: - 0 0 10px rgba(255, 215, 0, 0.5), - 0 0 20px rgba(255, 215, 0, 0.3), - 1px 1px 2px rgba(0, 0, 0, 0.8); + text-shadow: 0 0 10px rgba(0, 0, 0, .8), 0 0 20px rgb(16 16 16 / 30%), 1px 1px 2px rgba(0, 0, 0, .8); } .total-score-total-value {