轮播图修改

src/layout/user-layout.vue

@@ -243,7 +243,7 @@ function logout() {
 }
 }
 
 
 .app-main {
 .app-main {
-  padding-top: 64px;
+  padding-top: 90px;
   height: 100%;
   height: 100%;
   //height: calc(100vh - 64px);
   //height: calc(100vh - 64px);
   overflow-y: auto;
   overflow-y: auto;

src/views/index.vue

 <template>
 <template>
   <div class="app-container home">
   <div class="app-container home">
     <div class="banner">
     <div class="banner">
-      <el-carousel height="1064px" :indicator-position="bannerImgList.length <= 1 ? 'none':'' ">
-        <el-carousel-item v-for="item in bannerImgList" :key="item" @click="handleCarousel(item.url)">
-          <!--          <img :src="baseUrl + item.image" alt="">-->
-          <img :src="item.image" alt=""/>
+      <el-carousel :height="carouselHeight + 'px'" :indicator-position="bannerImgList.length <= 1 ? 'none':'' ">
+        <el-carousel-item
+            v-for="item in bannerImgList"
+            :key="item"
+            @click="handleCarousel(item.url)"
+        >
+          <div class="carousel-image">
+            <img :src="item.image" alt=""/>
+          </div>
         </el-carousel-item>
         </el-carousel-item>
       </el-carousel>
       </el-carousel>
     </div>
     </div>
@@ -340,6 +345,25 @@ const dialogTitle = ref('')
 const iframeSrc = ref('')
 const iframeSrc = ref('')
 const iframeShow = ref(false)
 const iframeShow = ref(false)
 const myCarousel = ref(null)
 const myCarousel = ref(null)
+const carouselHeight = ref(500); // 默认高度
+function updateHeight() {
+  // 根据窗口宽度计算高度
+  const width = window.innerWidth;
+  if (width < 768) {
+    carouselHeight.value = width * 0.6; // 移动设备上高度为宽度的60%
+  } else {
+    carouselHeight.value = width * 0.4; // 桌面设备上高度为宽度的40%
+  }
+}
+
+onMounted(() => {
+  updateHeight();
+  window.addEventListener('resize', updateHeight);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateHeight);
+});
 
 
 function getBanner() {
 function getBanner() {
   banner().then(res => {
   banner().then(res => {
@@ -502,6 +526,12 @@ function handleCarousel(url) {
 </script>
 </script>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
+.carousel-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .view-more-text {
 .view-more-text {
   position: sticky;
   position: sticky;
   text-align: center;
   text-align: center;