静态页面

src/pages/index/components/HotRecommend/index.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import Taro from '@tarojs/taro'
 import { queryActivityList } from '@/services/activity'
+import { Swiper, SwiperItem } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
@@ -61,11 +62,26 @@ export default function HotRecommend (props) {
           }
         </view>
         <view className='Content' onClick={toDetail}>
-          <view className='flex-h'>
+          {/* <view className='flex-h'>
             <text className='flex-item'>{CurrentContentInfo.title || '暂无活动'}</text>
             <text onClick={ToMore}>{CurrentId === 'dymic' ? '更多活动' : '更多团房'}</text>
           </view>
-          <text>{CurrentContentInfo.halfTitle}</text>
+          <text>{CurrentContentInfo.halfTitle}</text> */}
+          <Swiper autoplay interval={5000} vertical>
+            {
+              list.map((item, index) => (
+                <SwiperItem key={`Banner-${index}`}>
+                  <view className='swiper-item'>
+                    <view className='flex-h'>
+                      <text className='flex-item'>{item.title || '暂无活动'}</text>
+                      <text onClick={ToMore}>{CurrentId === 'dymic' ? '更多活动' : '更多团房'}</text>
+                    </view>
+                    <text>{item.halfTitle}</text>
+                  </view>
+                </SwiperItem>
+              ))
+            }
+          </Swiper>
         </view>
       </view>
     </view>

src/pages/index/components/HotRecommend/index.scss

@@ -26,38 +26,42 @@
     > .Content {
       box-sizing: border-box;
       border: 2px solid #eee;
-      padding: 20px;
-      > .flex-h {
-        align-items: center;
-        margin-top: 10px;
-        > .flex-item {
-          font-size: 30px;
-          color: #193c83;
-          font-weight: bold;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-right: 20px;
-          & + text {
-            font-size: 28px;
+      padding: 30px 20px 20px;
+      height: 166px;
+      position: relative;
+      overflow: hidden;
+      .swiper-item {
+        > .flex-h {
+          align-items: center;
+          > .flex-item {
+            font-size: 30px;
             color: #193c83;
-            line-height: 56px;
-            box-sizing: border-box;
-            border: 2px solid #193c83;
-            border-radius: 30px;
-            width: 144px;
-            text-align: center;
+            font-weight: bold;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-right: 20px;
+            & + text {
+              font-size: 28px;
+              color: #193c83;
+              line-height: 56px;
+              box-sizing: border-box;
+              border: 2px solid #193c83;
+              border-radius: 30px;
+              width: 144px;
+              text-align: center;
+            }
           }
         }
-      }
-      >text {
-        font-size: 26px;
-        line-height: 1;
-        display: block;
-        padding-bottom: 20px;
-        margin-top: 6px;
-        text-indent: 26px;
-        color: #7F7F7F;
+        > text {
+          font-size: 26px;
+          line-height: 1;
+          display: block;
+          padding-bottom: 20px;
+          margin-top: 6px;
+          text-indent: 26px;
+          color: #7f7f7f;
+        }
       }
     }
   }