[捉药师] 前端banner图接入

pages/index/index.vue

@@ -8,14 +8,8 @@
       </view>
       <!-- 轮播图 -->
       <swiper class="swiper" circular autoplay>
-        <swiper-item>
-          <view class="swiper-item">A</view>
-        </swiper-item>
-        <swiper-item>
-          <view class="swiper-item">B</view>
-        </swiper-item>
-        <swiper-item>
-          <view class="swiper-item">C</view>
+        <swiper-item v-for="(item, index) in banner_list" :key="index">
+          <view class="swiper-item"><image class="swiper-item-image"  :src="item.image_url" mode="aspectFill"></image></view>
         </swiper-item>
       </swiper>
       <!-- 公告 -->
@@ -82,6 +76,8 @@ import { arrayToTree } from "../../utils";
 const current = ref(0);
 const items = ref(["", "标签2"]);
 const list = ref([]);
+const banner_list=ref([]);
+
 
 const clickClass = ({ id }) => {
   router.push({
@@ -109,6 +105,14 @@ onMounted(async () => {
     list: res.data,
   });
   items.value[0] = list.value[0].name;
+  
+  // 首页轮播
+  const banner_res = await request(
+    "api/question_bank/question_reception/banner/list",
+    {},
+    "POST"
+  );
+  banner_list.value = banner_res.data.data;
 });
 </script>
 
@@ -127,14 +131,19 @@ onMounted(async () => {
 
   .swiper {
     height: 320rpx;
-    border: 1rpx solid #000000;
+    // border: 1rpx solid #000000;
     width: 100%;
     .swiper-item {
       display: block;
       height: 320rpx;
       line-height: 320rpx;
       text-align: center;
-      background-color: red;
+      // background-color: red;
+	  border-radius: 30rpx;
+	  .swiper-item-image{
+		// border-radius: 5%;
+		width: 100%;
+	  }
     }
   }