[捉药师] 修复轮播图片变形问题

pages/index/index.vue

@@ -9,7 +9,7 @@
 			<!-- 轮播图 -->
 			<swiper class="swiper" circular autoplay>
 				<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>
+					<view class="swiper-item"><image class="swiper-item-image" :src="item.image_url" mode="aspectFill" @load="onImageLoad($event, item, index)"></image></view>
 				</swiper-item>
 			</swiper>
 			<!-- 公告 -->
@@ -71,6 +71,7 @@ const items = ref(['', '标签2']);
 const list = ref([]);
 const banner_list = ref([]);
 const notice_list=ref([]);
+const imgHeight= ref('auto'); // 初始高度
 
 const clickClass = ({ id }) => {
 	router.push({
@@ -87,7 +88,13 @@ const toReal = (item) => {
 		params: item
 	});
 };
-
+const onImageLoad = (e, item, index) => {
+  const { width, height } = e.detail;
+  const ratio = height / width;
+  const systemInfo = uni.getSystemInfoSync();
+  const imgHeightValue = systemInfo.windowWidth * ratio;
+  imgHeight.value = imgHeightValue + 'px';
+};
 onMounted(async () => {
 	const res = await request('api/question_bank/question_reception/chapter/get', {}, 'POST');
 	list.value = arrayToTree({
@@ -121,23 +128,32 @@ onMounted(async () => {
 		justify-content: center;
 		gap: 80rpx;
 	}
-
 	.swiper {
-		height: 320rpx;
-		// border: 1rpx solid #000000;
+	  width: 100%;
+	  height: v-bind(imgHeight);
+	  /* 关键修复样式 */
+	  overflow: hidden;
+	  transform-style: preserve-3d;
+	  
+	  .swiper-item {
 		width: 100%;
-		.swiper-item {
-			display: block;
-			height: 320rpx;
-			line-height: 320rpx;
-			text-align: center;
-			// background-color: red;
-			border-radius: 30rpx;
-			.swiper-item-image {
-				// border-radius: 5%;
-				width: 100%;
-			}
+		height: 100%;
+		overflow: hidden;
+		border-radius: 30rpx;
+		/* 确保变换不影响子元素 */
+		transform: translateZ(0);
+		
+		.swiper-item-image {
+		  width: 100%;
+		  height: 100%;
+		  display: block;
+		  border-radius: 30rpx;
+		  /* 防止图片变形 */
+		  object-fit: cover;
+		  /* 确保层级 */
+		  position: relative;
 		}
+	  }
 	}
 
 	.notice {