样式调整，bug修复

src/components/BottomNav.vue

@@ -174,9 +174,17 @@ const backgroundImage = computed(() => {
 
 /* 最左边小球向右偏移 */
 .nav-item:first-child {
+  transform: translateX(12px);
+}
+
+.nav-item:nth-child(2) {
   transform: translateX(10px);
 }
 
+.nav-item:nth-child(4) {
+  transform: translateX(-5px);
+}
+
 /* 最右边小球向左偏移 */
 .nav-item:last-child {
   transform: translateX(-10px);

src/utils/api.js

@@ -169,7 +169,7 @@ const hideLoading = () => {
 
 // 生成不同的实例
 export const apiRequest = createRequest('/api')
-export const midRequest = createRequest('/mid')
+export const midRequest = createRequest('http://192.168.0.12:3005/mid')
 
 // 初始化时设置token
 const token = localStorage.getItem('token')
@@ -209,7 +209,8 @@ export const userAPI = {
 // 认证相关API
 export const authAPI = {
   // 登录
-  login: (data) => midRequest.post('/auth/login', data),
+  // login: (data) => midRequest.post('/auth/login', data),
+  login: (data) => apiRequest.post('/auth/login', data),
   
   // 注册
   register: (data) => midRequest.post('/auth/register', data),
@@ -224,10 +225,12 @@ export const authAPI = {
 // 验证码相关API
 export const captchaAPI = {
   // 生成验证码
-  generate: () => midRequest.get('/captcha/generate'),
+  // generate: () => midRequest.get('/captcha/generate'),
+  generate: () => apiRequest.get('/captcha/generate'),
   
   // 验证验证码
-  verify: (data) => midRequest.post('/captcha/verify', data)
+  // verify: (data) => midRequest.post('/captcha/verify', data)
+  verify: (data) => apiRequest.post('/captcha/verify', data)
 }
 
 // 文件上传API
@@ -275,6 +278,8 @@ export const paymentAPI = {
 // 购买商品
 export const buyAPI = {
   buy: (data) => midRequest.post('/payment/create-order', data),
+  pay: (outTradeNo, params) => midRequest.get(`/payment/query-status/${outTradeNo}`, {params}),
+  test : () => apiRequest.get('/payment/pay-product/test'),
 }
 
 // 转账相关API

src/views/MainPage.vue

@@ -46,7 +46,7 @@
             <img src="/imgs/mainpage/huoqurongdou1.png" alt="获取融豆" class="action-image2" />
           </router-link>
           <router-link to="/myshop" class="action-item">
-            <img src="/imgs/mainpage/shangcheng1.png" alt="商城" class="action-image3" />
+            <img src="/imgs/mainpage/jifenyue1.png" alt="商城" class="action-image3" />
           </router-link>
         </div>
       </div>
@@ -318,7 +318,7 @@ export default {
 
     // 处理系统公告点击事件
     const handleSystemAnnouncementClick = () => {
-      console.log('触发')
+      // console.log('触发')
       isSystemAnnouncementClick.value = true;
       showWelcomeDialog.value = true; // 无条件显示对话框
     };
@@ -531,7 +531,6 @@ export default {
   max-width: 180px;
   object-fit: contain;
   border-radius: 8px;
-  margin-left: -10px;
 }
 
 .action-image2 {
@@ -548,7 +547,6 @@ export default {
   height: auto;
   max-width: 180px;
   object-fit: contain;
-  margin-right: -10px;
 }
 
 .tips {

src/views/ProductDetail.vue

@@ -23,9 +23,9 @@
     <div v-loading="loading" class="product-content">
       <div v-if="product" class="product-detail">
         <!-- 商品图片 -->
-        <div class="product-images">
+        <!-- <div class="product-images">
           <el-carousel 
-            :interval="4000" 
+            :autoplay="false"
             type="card" 
             height="300px"
             indicator-position="outside"
@@ -37,6 +37,33 @@
           <div class="small-images">
             <img v-for="(image, index) in product.images" :key="index" :src="image" :alt="product.name" class="small-image" />
           </div>
+        </div> -->
+
+        <div class="product-images">
+          <el-carousel 
+            ref="carouselRef"
+            :autoplay="false"
+            :initial-index="currentIndex"
+            type="card" 
+            height="300px"
+            indicator-position="outside"
+            @change="handleCarouselChange"
+          >
+            <el-carousel-item v-for="(image, index) in product.images" :key="index">
+              <img :src="image" :alt="product.name" class="product-image" />
+            </el-carousel-item>
+          </el-carousel>
+          
+          <div class="small-images">
+            <img 
+              v-for="(image, index) in product.images" 
+              :key="index" 
+              :src="image" 
+              :alt="product.name" 
+              :class="['small-image', { active: currentIndex === index }]"
+              @click="handleSmallImageClick(index)"
+            />
+          </div>
         </div>
 
         <!-- 商品信息 -->
@@ -247,7 +274,7 @@ import {
 import api from '@/utils/api'
 import { getImageUrl } from '@/config'
 
-import { watch } from 'vue'
+import { watch, nextTick } from 'vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -271,6 +298,25 @@ const totalPoints = computed(() => {
   return product.value ? product.value.points * quantity.value : 0
 })
 
+const carouselRef = ref(null)
+const currentIndex = ref(0)
+
+// 点击小图切换大图
+const handleSmallImageClick = (index) => {
+  currentIndex.value = index
+  // 使用 nextTick 确保 DOM 更新后再设置轮播图
+  nextTick(() => {
+    if (carouselRef.value) {
+      carouselRef.value.setActiveItem(index)
+    }
+  })
+}
+
+// 轮播图切换时更新当前索引
+const handleCarouselChange = (current) => {
+  currentIndex.value = current
+}
+
 // 购物车相关计算属性已移除
 
 // 方法
@@ -503,6 +549,9 @@ watch(
   
   scrollbar-width: none;
   -ms-overflow-style: none;
+
+  justify-content: center;
+  justify-items: center;
 }
 
 .small-images::-webkit-scrollbar {

src/views/Shop.vue

@@ -22,7 +22,7 @@
 
     <div class="shop-content">
       <div class="product-content" v-for="item in products" :key="item.id" @click="$router.push(`/productsummary/${item.id}`)">
-        <img :src="item.img" :alt="item.name" class="product-content-img">
+        <img :src="item.image" :alt="item.name" class="product-content-img">
         <span class="product-content-name">{{ item.name }}</span>
         <div class="price-info">
           <el-icon><Coin /></el-icon>
@@ -224,7 +224,7 @@ onMounted(() => {
 }
 
 .product-content {
-  width: 100%;
+  width: 153px;
   height: 240px;
   border-radius: 5px;
   background-color: #fff;