01

src/views/index/components/slideshow_card.vue

@@ -194,25 +194,32 @@ export default {
     background-color: #fff;
 
     .card_img {
-      width: 40rem;
-      height: 30rem;
+      width: 100%;
+      height: 75%;
 
       img {
-        border-radius:2rem 2rem 0 0;
+        border-radius: 2rem 2rem 0 0;
         display: inline-block;
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
-    .card_title{
+
+    .card_title {
+      width: 90%;
       font-size: 2rem;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #1C1C1C;
       text-align: left;
-      width: 36rem;
+      //width: 36rem;
       margin: 2rem auto;
+      overflow:hidden; //超出的文本隐藏
+      text-overflow:ellipsis; //溢出用省略号显示
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 2; //显示的行
     }
 
   }
@@ -255,7 +262,7 @@ export default {
   transform: scale(0.7);
 }
 
-.banner-card .left-btn ,.right-btn {
+.banner-card .left-btn, .right-btn {
   transition: 0.3s;
   position: absolute;
   top: 20rem;
@@ -276,4 +283,88 @@ export default {
   right: 10rem;
 }
 
+@media screen and (min-width: 1100px) and (max-width: 1400px) {
+  .banner-card {
+    height: 34rem;
+
+    li {
+      width: 28rem !important;
+      height: 28rem !important;
+
+      .card_title {
+        font-size: 1.6rem;
+        margin: 1rem 1rem;
+      }
+    }
+
+    .one {
+      left: -2.8rem;
+    }
+
+    .two {
+      left: 10rem;
+    }
+
+    .three {
+      left: 24rem;
+    }
+
+    .four {
+      left: 38rem;
+    }
+
+    .five {
+      left: 50.3rem;
+    }
+
+    .six {
+      left: 80rem;
+    }
+  }
+
+
+}
+
+@media screen and (max-width: 1100px) {
+  .banner-card {
+    height: 34rem;
+
+    li {
+      width: 22rem !important;
+      height: 22rem !important;
+
+      .card_title {
+        font-size: 1.6rem;
+        margin: 1rem 1rem;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 2; //显示的行
+      }
+    }
+
+    .one {
+      left: -2.6rem;
+    }
+
+    .two {
+      left: 6rem;
+    }
+
+    .three {
+      left: 16rem;
+    }
+
+    .four {
+      left: 26rem;
+    }
+
+    .five {
+      left: 34rem;
+    }
+
+    .six {
+      left: 80rem;
+    }
+  }
+}
 </style>