imges

src/components/Banner/index.jsx

@@ -18,7 +18,7 @@ export default (props) => {
       {
         list && list.map((item, index) => (
           <SwiperItem key={item.bannerId} className='SwiperItem-img' >
-            <RatioItem ratio='5:3'>
+            <RatioItem ratio='4:3'>
               <Image className='swiper-img' src={item.image} mode='widthFix'></Image>
             </RatioItem>
           </SwiperItem>

src/components/Banner/style.less

@@ -1,30 +1,30 @@
+.swiper-container {
+  width: 100%;
+  overflow: hidden;
+  transform: translateY(0);
+  margin: auto;
+  height: 55vw;
 
-  .swiper-container {
+  // swiper.wxss
+  /* 默认指示点的样式 */
+  .SwiperItem-img {
     width: 100%;
-    overflow: hidden;
-    transform: translateY(0);
-    margin: auto;
-
-    // swiper.wxss
-    /* 默认指示点的样式 */
-    .SwiperItem-img {
-      width: 100%;
-      border-radius: 10px;
-    }
-    .wx-swiper-dot {
-      top: 2em;
-      width: 35px;
-      height: 5px;
-      border-radius: 0px;
-    }
+    border-radius: 10px;
+  }
+  .wx-swiper-dot {
+    top: 2em;
+    width: 35px;
+    height: 5px;
+    border-radius: 0px;
+  }
 
-    /* 选中指示点的样式 */
-    .wx-swiper-dot.wx-swiper-dot-active {
-      width: 35px;
-      height: 5px;
-      border-radius: 0px;
-    }
-    .swiper-img {
-      width: 100%;
-    }
+  /* 选中指示点的样式 */
+  .wx-swiper-dot.wx-swiper-dot-active {
+    width: 35px;
+    height: 5px;
+    border-radius: 0px;
+  }
+  .swiper-img {
+    width: 100%;
   }
+}