移动端适配

src/components/swiper-about.vue

@@ -157,6 +157,13 @@
     .swiper-wrapper img {
       width: 100%;
       height: 150px;
+      object-fit:cover;
+      border-radius:0;
+    }
+    .swiper-wrapper{
+      width: 100%;
+      height:auto;
+      object-fit: cover;
     }
   }
 </style>

src/views/About.vue

@@ -10,7 +10,7 @@
         <div class="content-left">
             <div class="about-title">关于我们</div>
             <div class="about-en">ABOUT US</div>
-            <div v-for="item in aboutList" class="about-list">
+            <div v-for="item in aboutList" :key="item.content" class="about-list">
               <img src="./new-img/rect-icon.png" alt="">
               <div>{{item.content}}</div>
             </div>
@@ -81,18 +81,18 @@ export default {
   }
   .about-center-box {
     width: 100%;
-    height: 600px;
+    height: 520px;
     background: #fff;
   }
   .about-content {
-    width: 85%;
+    width: 65%;
     height: 540px;
     background: #FFFFFF;
     box-shadow: 0 8px 30px 0 rgba(36,44,49,0.10);
     border-radius: 10px;
     position: absolute;
     bottom: 175px;
-    left: 8%;
+    left: 18%;
     display: flex;
   }
   .content-left {
@@ -119,7 +119,7 @@ export default {
     margin-top: 0.6%;
   }
   .about-list {
-    margin-top: 3.2%;
+    margin-top: 6%;
     display: flex;
   }
   .about-list img {
@@ -141,9 +141,9 @@ export default {
     object-fit: cover;
   }
   .about-award{
-    width: 85%;
+    width: 65%;
     margin-top: 28%;
-    margin-left: 8%;
+    margin-left: 18%;
     text-align: left;
   }
   .award-title {
@@ -187,334 +187,229 @@ export default {
 .about{
     margin-top: 80px !important;
   } */
-@media screen and (max-width: 1500px) {
-  .aboutus {
-    width: 60% !important;
+@media screen and (max-width: 1600px) {
+  .about-content {
+    width: 65%;
+    height: 465px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 30px 0 rgba(36,44,49,0.10);
+    border-radius: 10px;
+    position: absolute;
+    bottom: 175px;
+    left: 18%;
+    display: flex;
   }
-  .row {
-    display: block !important;
+  .about-list div {
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    color: #999999;
+    text-align: justify;
+    line-height: 30px;
   }
-  .imgright {
-    margin-left: 0% !important;
-    width: 103% !important;
+  .about-list img {
+    margin-right: 0.7%;
+    margin-top: 1.3%;
+    width: 8px;
+    height: 15px;
   }
-  .row img {
-    padding-right: 10px !important;
-    padding-bottom: 2rem!important;
-    float: left !important;
+  .award-list-box div {
+    width:280px;
+    height:210px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 20px 0 rgba(0,0,0,0.10);
+    margin-top: 4%;
+    text-align: center;
+    line-height: 210px;
+    border-radius: 10px;
   }
-  .headline {
-    margin-left: 45% !important;
-    margin-right: 20px;
+  .award-list-box div img {
+    width:240px;
+    height:170px;
+    object-fit: cover;
   }
-  .leftmenu{
-    width: 180px!important;
+}
+@media screen and (max-width: 479px) {
+  .about-content {
+    width: 80%;
+    height: 655px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 30px 0 rgba(36,44,49,0.10);
+    border-radius: 10px;
+    position: absolute;
+    bottom: -180px;
+    left: 10%;
+    display: flex;
+    flex-direction: column;
   }
-  .navBarWrap {
-    width: 180px!important;
+  .content-left {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 4%;
+    text-align: left;
   }
-  .navBarWrap{
-    margin-left: 0px!important;
+  .content-right {
+    width: 100%;
+    margin-top: 5%;
   }
-}
-@media screen and (max-width: 1440px) {
-  .aboutus {
-    width: 60% !important;
+  .about-title {
+    font-size: 28px;
+    margin-top: 2%;
   }
-  .row {
-    display: block !important;
+  .about-en{
+    font-size: 16px;
   }
-  .imgright {
-    margin-left: 0% !important;
-    width: 103% !important;
+  .about-list div {
+    font-family: PingFangSC-Regular;
+    font-size: 13px;
+    color: #999999;
+    text-align: justify;
+    line-height: 30px;
   }
-  .row img {
-    padding-right: 10px !important;
-    float: left !important;
+  .about-list img {
+    margin-right: 0.7%;
+    margin-top: 3%;
+    width: 8px;
+    height: 12px;
   }
-  .righttext h2{
-    margin-top: -6rem!important;
+  .swiper-wrapper{
+    width: 100%;
+    height:auto;
+    object-fit: cover;
   }
-  .headline {
-    margin-left: 45% !important;
-    margin-right: 20px;
+  .about-award{
+    width: 80%;
+    margin-top: 165%;
+    margin-left: 10%;
+    text-align: center;
   }
-  .leftmenu{
-    width: 90px!important;
+  .about-center-box{
+    height:auto;
   }
-  .navBarWrap {
-    width: 90px!important;
+  .award-list-box {
+    flex-direction: column;
+    margin-bottom: 10%;
   }
-  .navBarWrap{
-    margin-left: 0px!important;
+  .award-title {
+    font-size: 28px;
   }
-  .leftmenu img{
-    margin-left: -20px!important;
-    height: 300px!important;
+  .award-en{
+    font-size: 16px;
   }
-  .leftbutton{
-    margin-left: -15px!important;
-    height: 300px!important;
+  .award-list-box div {
+    width:280px;
+    height:210px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 20px 0 rgba(0,0,0,0.10);
+    margin-top: 4%;
+    text-align: center;
+    line-height: 210px;
+    border-radius: 10px;
+  }
+  .award-list-box div img {
+    width:240px;
+    height:170px;
+    object-fit: cover;
   }
 }
-@media screen and (max-width: 479px) {
-  .hidecontent{
-    display: none!important;
+@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
+  .about-content {
+    bottom: -240px;
   }
-  .content{
-    justify-content: space-around!important;
+  .about-award {
+    margin-top: 155%;
+  }
+}
+@media only screen and (device-width: 375px) and (max-device-height: 900px) and (-webkit-device-pixel-ratio: 3) {
+  .about-content {
+    bottom: -10%;
+  }
+  .about-award {
+    margin-top: 155%;
+  }
+  }
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
+  .about-content {
+    width: 80%;
+    height: 655px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 30px 0 rgba(36,44,49,0.10);
+    border-radius: 10px;
+    position: absolute;
+    bottom: 5%;
+    left: 10%;
+    display: flex;
+    flex-direction: column;
   }
-  .aboutus {
-    width: 90% !important;
+  .content-left {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 4%;
+    text-align: left;
   }
-  .row {
-    display: block !important;
-    align-content: center!important;
+  .content-right {
+    width: 100%;
+    margin-top: 5%;
   }
-  .row img{
-    padding-right: 0px!important;
-    margin: auto !important;
-    width: 100%!important;
-    margin-top: 0px!important;
-    clear: both!important;
+  .about-title {
+    font-size: 28px;
+    margin-top: 2%;
   }
-  .imgarea{
-    height: 20rem!important;
+  .about-en{
+    font-size: 16px;
   }
-  .imgright {
-    margin-left: 0% !important;
-    width: 103% !important;
+  .about-list div {
+    font-family: PingFangSC-Regular;
+    font-size: 13px;
+    color: #999999;
+    text-align: justify;
+    line-height: 30px;
   }
-  .imgrow{
-    flex-direction: column!important;
+  .about-list img {
+    margin-right: 0.7%;
+    margin-top: 1.5%;
+    width: 8px;
+    height: 12px;
   }
-  .imgrow img{
-    width: 95%!important;
-    margin: auto!important;
-    margin-bottom: 1rem!important;
+  .swiper-wrapper{
+    width: 100%;
+    height:auto;
+    object-fit: cover;
   }
-  .rightcontent{
-    margin-top: 1rem!important;
+  .about-award{
+    width: 80%;
+    margin-top: 130%;
+    margin-left: 10%;
+    text-align: center;
   }
-  .row img {
-    padding-right: 0px !important;
-    float: left !important;
+  .about-center-box{
+    height:auto;
   }
-  .headline {
-    margin: auto!important;
+  .award-list-box {
+    flex-direction: column;
+    margin-bottom: 10%;
   }
-  .leftmenu{
-    display: none!important;
+  .award-title {
+    font-size: 28px;
   }
-  .navBarWrap {
-    width: 84px!important;
+  .award-en{
+    font-size: 16px;
   }
-  .navBarWrap{
-    margin-left: 0px!important;
+  .award-list-box div {
+    width:280px;
+    height:210px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 20px 0 rgba(0,0,0,0.10);
+    margin-top: 4%;
+    text-align: center;
+    line-height: 210px;
+    border-radius: 10px;
   }
-  .leftmenu img{
-    margin-left: -20px!important;
-    height: 300px!important;
+  .award-list-box div img {
+    width:240px;
+    height:170px;
+    object-fit: cover;
   }
-  .leftbutton{
-    margin-left: -15px!important;
-    height: 300px!important;
   }
-}
-
-.navBarWrap {
-  position: fixed;
-  top: -60px;
-  z-index: 999;
-}
-.short {
-  width: 50%;
-  margin: auto;
-}
-.imgarea {
-  position: relative;
-  width: 100%;
-  height: 400px;
-}
-.block1,
-.block2,
-.block3 {
-  padding-left: 2rem;
-  padding-top: 1rem;
-  padding-right: 2rem;
-  padding-bottom: 30px;
-  border: 1px solid rgb(242, 242, 242);
-  margin-bottom: 1rem;
-}
-.headline {
-  width: fit-content;
-  border-bottom: 3px solid rgb(0, 102, 153);
-}
-.listtext {
-  text-indent: 2em;
-  font-size: 3rem;
-  text-align: start;
-  color: rgb(154, 154, 154);
-}
-.headline p {
-  font-size: 3.1rem;
-  color: rgb(0, 102, 153);
-  font-weight: 600;
-  margin-top: 0px;
-  text-align: center;
-}
-.headline-next {
-  margin-top: 23px;
-}
-.short {
-  margin: auto !important;
-}
-.aboutus {
-  width: 1440px;
-  margin: auto;
-  position: relative;
-}
-.imgright {
-  margin-top: 20px;
-  margin-left: 10%;
-  width: 45%;
-}
-.block3 img {
-  display: block;
-  width: 50%;
-  text-align: center;
-  margin: auto;
-}
-.block2 img {
-  width: 80%;
-  margin: auto;
-  display: block;
-}
-.block2 img,
-.block3 img {
-  margin-top: 25px;
-}
-.content {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.hidecontent {
-  width: 20%;
-}
-.widthimg {
-  display: flex;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.head {
-  border-bottom: 1px solid rgb(228, 228, 228);
-  padding-bottom: 7px;
-}
-.head p {
-  width: 13rem;
-  padding-left: 1.2rem;
-  font-size: 2.2rem;
-  display: flex;
-  justify-content: flex-start;
-  border-bottom: 1px solid rgb(121, 121, 121);
-  margin-bottom: -7px;
-}
-.imgrow {
-  margin-top: 30px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.row {
-  align-items: flex-start;
-  padding-left: 1%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-.row img {
-  width: 40%;
-  margin-top: 30px;
-}
-.leftmenu {
-  width: 200px;
-  /* width: 20%; */
-  /* margin-left: 20px; */
-  margin-top: 8rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-.rightcontent {
-  margin-top: 5rem;
-  width: 80%;
-}
-.leftmenu img {
-  height: 400px;
-}
-.leftbutton {
-  height: 400px;
-  padding-top: 23px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-bottom: 50px;
-}
-.leftbutton a {
-  font-size: 3rem;
-  color: black;
-}
-p {
-  font-size: 2rem;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-.imgrow img {
-  width: 25%;
-}
-.imgtext {
-  position: absolute;
-  text-align: center;
-  vertical-align: middle;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-button {
-  margin-top: 10px;
-}
-
-.imgtext h1 {
-  color: rgb(0, 102, 255);
-  font-size: 10rem;
-  margin: auto;
-  margin-bottom: 13rem;
-  font-weight: 600;
-}
-.righttext h2 {
-  color: rgb(22, 102, 255);
-  font-weight: 100;
-  font-size: 4rem;
-  margin-top: -9rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  padding-left: 50%;
-}
-.head {
-  margin-top: 30px;
-}
-.button {
-  background: none;
-}
-.righttext {
-  margin-top: -32px;
-}
-hr {
-  color: rgb(215, 215, 215);
-}
 </style>