From 522dfced1ad2c8ee51c7a1ab3e2008eac80dcea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=90=9D?= <xiaoluo@example.com>
Date: Wed, 29 Apr 2026 10:46:46 +0000
Subject: [PATCH] fix: move carousel indicators inside the banner

---
 frontend/src/views/scheme4/Home.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/scheme4/Home.vue b/frontend/src/views/scheme4/Home.vue
index b666184..230beb3 100644
--- a/frontend/src/views/scheme4/Home.vue
+++ b/frontend/src/views/scheme4/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-page">
     <div class="banner-section">
-      <el-carousel height="280px" :interval="5000" arrow="hover" indicator-position="outside">
+      <el-carousel height="280px" :interval="5000" arrow="hover" indicator-position="inside">
         <el-carousel-item v-for="(banner, index) in banners" :key="index">
           <div class="banner-slide" :style="{ background: banner.bg }">
             <div class="banner-content">
@@ -480,15 +480,21 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
-:deep(.el-carousel__indicators--outside) {
-  margin-top: 12px;
+:deep(.el-carousel__indicators--inside) {
+  bottom: 12px;
 }
 
 :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
+  transition: all 0.3s;
 }
 
 :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
+  width: 24px;
+  border-radius: 4px;
   background: #4e6ef2;
 }