优化首页布局，添加立即入驻按钮和轮播图

pages/index/index.js

@@ -46,6 +46,23 @@ Page({
     });
   },
 
+  // 跳转到立即入驻页面
+  navigateToSettlement() {
+    wx.navigateTo({
+      url: '/pages/settlement/index',
+      success: function() {
+        console.log('成功跳转到立即入驻页面');
+      },
+      fail: function(error) {
+        console.error('跳转到立即入驻页面失败:', error);
+        wx.showToast({
+          title: '跳转失败，请稍后重试',
+          icon: 'none'
+        });
+      }
+    });
+  },
+
   onLoad() {
     console.log('首页初始化')
   },

pages/index/index.wxml

@@ -1,9 +1,35 @@
 <view class="container">
-  <image src="/images/生成鸡蛋贸易平台图片.png" style="width: 100%; height: 425rpx; margin: -280rpx auto 20rpx; display: block;"></image>
-  <view class="title" style="margin-top: 60rpx;">中国最专业的鸡蛋现货交易平台</view>
-  <view class="btn-container">
-    <button class="btn message-btn" bindtap="navigateToChat">消息中心</button>
-    <button class="btn service-btn" bindtap="navigateToCustomerService">联系客服</button>
+  <view class="title">中国最专业的鸡蛋现货交易平台</view>
+  <!-- 滚动图片区域 -->
+  <view class="swiper-container">
+    <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="1000" circular="{{true}}" style="width: 100%; height: 300rpx;">
+      <swiper-item>
+        <image src="/images/轮播图1.jpg" style="width: 100%; height: 100%;" mode="aspectFill"></image>
+      </swiper-item>
+      <swiper-item>
+        <image src="/images/轮播图2.jpg" style="width: 100%; height: 100%;" mode="aspectFill"></image>
+      </swiper-item>
+      <swiper-item>
+        <image src="/images/轮播图3.jpg" style="width: 100%; height: 100%;" mode="aspectFill"></image>
+      </swiper-item>
+    </swiper>
+    <!-- 图片提示框 -->
+    <view class="swiper-hint">
+      <text class="hint-text">💡 提示：您可以将自己的图片替换到 /images/ 目录下，命名为轮播图1.jpg、轮播图2.jpg、轮播图3.jpg</text>
+    </view>
+  </view>
+  <!-- 按钮区域 -->
+  <view class="buttons-section">
+    <!-- 第一行 -->
+    <view class="btn-row">
+      <button class="btn message-btn" bindtap="navigateToChat">消息中心</button>
+      <button class="btn settlement-btn" bindtap="navigateToSettlement">立即入驻</button>
+    </view>
+    <!-- 第二行 -->
+    <view class="btn-row full-width">
+      <button class="btn service-btn" bindtap="navigateToCustomerService">我要买蛋</button>
+      <button class="btn service-btn" bindtap="navigateToCustomerService">我要卖蛋</button>
+    </view>
   </view>
   <view class="desc" style="margin: 30rpx 0; text-align: center; padding: 0 20rpx;">
     

pages/index/index.wxss

@@ -9,9 +9,13 @@ page {
 }
 
 .container {
-  padding: 0;
+  padding: 40rpx 0;
   margin: 0;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  min-height: calc(100vh - 100rpx);
 }
 .scrollarea {
   flex: 1;
@@ -68,16 +72,29 @@ page {
   background: rgba(76, 175, 80, 0.15);
 }
 
-/* 按钮容器样式，用于并排显示按钮 */
-.btn-container {
+/* 按钮区域样式 */
+.buttons-section {
+  width: 80%;
+  margin: 20rpx auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  flex: 0 1 auto;
+}
+
+/* 按钮行样式 */
+.btn-row {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
-  margin: 30rpx auto 0;
-  width: 80%;
+  justify-content: space-between;
   gap: 20rpx;
 }
 
+/* 全宽按钮行样式 */
+.btn-row.full-width {
+  justify-content: center;
+}
+
 /* 消息按钮样式 */
 .message-btn {
   color: #FF6B6B;
@@ -98,6 +115,8 @@ page {
 .settlement-btn {
   color: #2196F3;
   background: rgba(33, 150, 243, 0.15);
+  margin: 0;
+  width: 100%;
 }
 
 /* 按钮点击效果 */
@@ -280,12 +299,64 @@ page {
   color: #1677ff;
 }
 
+/* 滚动图片区域样式 */
+.swiper-container {
+  width: 80%;
+  margin: 20rpx auto;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1);
+  position: relative;
+  flex: 0 1 auto;
+}
+
+/* 轮播图指示器样式 */
+.swiper-container .wx-swiper-dots {
+  bottom: 15rpx;
+}
+
+.swiper-container .wx-swiper-dot {
+  width: 12rpx;
+  height: 12rpx;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.swiper-container .wx-swiper-dot-active {
+  width: 36rpx;
+  background: #fff;
+}
+
+/* 图片提示框样式 */
+.swiper-hint {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 15rpx;
+  border-radius: 0 0 20rpx 20rpx;
+  font-size: 24rpx;
+  text-align: center;
+  margin-top: -10rpx;
+}
+
+.hint-text {
+  display: block;
+  line-height: 1.4;
+}
+
+/* 顶部横幅图片样式 */
+.top-banner {
+  width: 100%;
+  height: 425rpx;
+  margin: -280rpx auto 10rpx;
+  display: block;
+}
+
 /* 标题样式 */
 .title {
   font-size: 40rpx;
   font-weight: bold;
   text-align: center;
   color: #333;
-  margin-top: 20rpx;
-  margin-bottom: 10rpx;
+  margin: 20rpx auto;
+  padding: 0 20rpx;
+  flex: 0 1 auto;
 }