更换轮播图

ruoyi-ui-app/pages/home/index.vue

@@ -18,24 +18,12 @@
               :key="banner.id"
               class="home-banner__item"
             >
-              <view
-                class="home-banner__slide"
-                :class="'home-banner__slide--' + banner.tone"
-                role="button"
-                hover-class="home-banner__slide--hover"
-                @click="onBanner(banner)"
-              >
+              <view class="home-banner__slide">
                 <image
-                  v-if="banner.image"
                   class="home-banner__img"
                   :src="banner.image"
                   mode="aspectFill"
                 />
-                <view class="home-banner__mask" />
-                <view class="home-banner__copy">
-                  <text class="home-banner__title text-body">{{ $t(banner.titleKey) }}</text>
-                  <text class="home-banner__desc text-body">{{ $t(banner.descKey) }}</text>
-                </view>
               </view>
             </swiper-item>
           </swiper>
@@ -69,6 +57,8 @@ import { useUserStore } from '@/store/user'
 
 const GRID_ICON = '#5f7168'
 
+const BANNER_IMAGE_DIR = '/static/banner'
+
 export default {
   components: {
     'up-icon': UIcon
@@ -78,62 +68,10 @@ export default {
     return {
       navTitleKey: 'nav.home',
       banners: [
-        {
-          id: 'news',
-          titleKey: 'homePage.bannerNewsTitle',
-          descKey: 'homePage.bannerNewsDesc',
-          tone: 'green',
-          url: '/package-a/breeding-news/index'
-        },
-        {
-          id: 'clinic',
-          titleKey: 'homePage.bannerClinicTitle',
-          descKey: 'homePage.bannerClinicDesc',
-          tone: 'teal',
-          url: '/package-a/online-clinic/index'
-        },
-        {
-          id: 'classroom',
-          titleKey: 'homePage.bannerClassTitle',
-          descKey: 'homePage.bannerClassDesc',
-          tone: 'olive',
-          url: '/package-a/agri-classroom/index'
-        },
-        {
-          id: 'market',
-          titleKey: 'homePage.bannerMarketTitle',
-          descKey: 'homePage.bannerMarketDesc',
-          tone: 'amber',
-          url: '/package-a/yak-market/index'
-        },
-        {
-          id: 'booking',
-          titleKey: 'homePage.bannerBookingTitle',
-          descKey: 'homePage.bannerBookingDesc',
-          tone: 'indigo',
-          url: '/package-a/booking-service/index'
-        },
-        {
-          id: 'ai',
-          titleKey: 'homePage.bannerAiTitle',
-          descKey: 'homePage.bannerAiDesc',
-          tone: 'violet',
-          url: '/package-a/ai-assistant/index'
-        },
-        {
-          id: 'medicine',
-          titleKey: 'homePage.bannerMedicineTitle',
-          descKey: 'homePage.bannerMedicineDesc',
-          tone: 'coral',
-          url: '/package-a/medicine-tools/index'
-        },
-        {
-          id: 'resource',
-          titleKey: 'homePage.bannerResourceTitle',
-          descKey: 'homePage.bannerResourceDesc',
-          tone: 'slate',
-          url: '/package-a/livestock-resources/index'
-        }
+        { id: 'banner-1', image: `${BANNER_IMAGE_DIR}/1.png` },
+        { id: 'banner-2', image: `${BANNER_IMAGE_DIR}/2.png` },
+        { id: 'banner-3', image: `${BANNER_IMAGE_DIR}/3.png` },
+        { id: 'banner-4', image: `${BANNER_IMAGE_DIR}/4.png` }
       ],
       gridItems: [
         {
@@ -225,10 +163,6 @@ export default {
     goEntry(item) {
       if (!item.url) return
       uni.navigateTo({ url: item.url })
-    },
-    onBanner(banner) {
-      if (!banner.url) return
-      uni.navigateTo({ url: banner.url })
     }
   }
 }
@@ -285,88 +219,15 @@ export default {
   height: 100%;
   min-width: 0;
   overflow: hidden;
+  background: $morandi-bg-card;
   box-sizing: border-box;
 }
 
-.home-banner__slide--hover {
-  opacity: 0.92;
-}
-
-.home-banner__slide--green {
-  background: linear-gradient(135deg, #3d9b6e 0%, #22c55e 55%, #86efac 100%);
-}
-
-.home-banner__slide--teal {
-  background: linear-gradient(135deg, #4a7c6f 0%, #5f7168 50%, #8fb09a 100%);
-}
-
-.home-banner__slide--olive {
-  background: linear-gradient(135deg, #5c6b4a 0%, #6b7f72 45%, #a8b89a 100%);
-}
-
-.home-banner__slide--amber {
-  background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #fde68a 100%);
-}
-
-.home-banner__slide--indigo {
-  background: linear-gradient(135deg, #3730a3 0%, #6366f1 48%, #a5b4fc 100%);
-}
-
-.home-banner__slide--violet {
-  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #ddd6fe 100%);
-}
-
-.home-banner__slide--coral {
-  background: linear-gradient(135deg, #be123c 0%, #f43f5e 48%, #fecdd3 100%);
-}
-
-.home-banner__slide--slate {
-  background: linear-gradient(135deg, #334155 0%, #64748b 50%, #cbd5e1 100%);
-}
-
 .home-banner__img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 52%;
-  height: 100%;
-  opacity: 0.35;
-}
-
-.home-banner__mask {
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 70%);
-}
-
-.home-banner__copy {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+  width: 100%;
   height: 100%;
-  padding: 32rpx 28rpx 40rpx;
-  gap: 10rpx;
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-.home-banner__title {
-  font-size: 34rpx;
-  font-weight: 600;
-  color: #ffffff;
-  line-height: 1.35;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-
-.home-banner__desc {
-  font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.88);
-  line-height: 1.45;
-  word-break: break-word;
-  overflow-wrap: anywhere;
 }
 
 .home-services {