重构

apps/player/src/components/BannerCarousel.vue

@@ -123,14 +123,23 @@ onUnmounted(stopAutoPlay);
             class="slide"
             @click="onBannerClick(banner)"
           >
-            <img
-              v-if="imageUrl(banner)"
-              :src="imageUrl(banner)"
-              :alt="title(banner)"
-              class="slide-img"
-              :loading="i === 0 ? 'eager' : 'lazy'"
-              @error="onImgError"
-            />
+            <template v-if="imageUrl(banner)">
+              <img
+                :src="imageUrl(banner)"
+                alt=""
+                class="slide-backdrop"
+                aria-hidden="true"
+                :loading="i === 0 ? 'eager' : 'lazy'"
+                @error="onImgError"
+              />
+              <img
+                :src="imageUrl(banner)"
+                :alt="title(banner)"
+                class="slide-img"
+                :loading="i === 0 ? 'eager' : 'lazy'"
+                @error="onImgError"
+              />
+            </template>
             <div v-else class="slide-fallback">{{ title(banner) }}</div>
           </div>
         </div>
@@ -157,40 +166,81 @@ onUnmounted(stopAutoPlay);
 <style scoped>
 .carousel {
   position: relative;
-  margin: 0 -16px 14px;
+  margin: -12px -16px 14px;
   overflow: hidden;
 }
 
 .media {
   position: relative;
   overflow: hidden;
+  background: #05080d;
 }
 
 .viewport {
   overflow: hidden;
   width: 100%;
+  height: clamp(148px, 41.86vw, 180px);
 }
 
 .track {
   display: flex;
+  height: 100%;
   transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .slide {
+  position: relative;
   flex: 0 0 100%;
   min-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background:
+    linear-gradient(135deg, rgba(7, 18, 31, 0.94), rgba(6, 8, 12, 0.98)),
+    #070d15;
   cursor: pointer;
 }
 
-.slide-img {
-  width: 100%;
-  height: 180px;
+.slide::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.03) 48%, rgba(0, 0, 0, 0.18));
+  box-shadow: inset 0 -1px 0 rgba(212, 175, 55, 0.16);
+  pointer-events: none;
+}
+
+.slide-backdrop {
+  position: absolute;
+  inset: -18px;
+  width: calc(100% + 36px);
+  height: calc(100% + 36px);
   object-fit: cover;
+  filter: blur(16px);
+  opacity: 0.42;
+  transform: scale(1.04);
+  pointer-events: none;
+}
+
+.slide-img {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
   display: block;
 }
 
 .slide-fallback {
-  height: 180px;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -210,6 +260,7 @@ onUnmounted(stopAutoPlay);
   background: rgba(0, 0, 0, 0.55);
   color: var(--primary-light);
   border: 1px solid var(--border);
+  padding-bottom: 5px;
   font-size: 22px;
   line-height: 1;
   display: flex;