src/views/About.vue

@@ -147,36 +147,117 @@ export default {
 .about{
     margin-top: 80px !important;
   } */
-@media screen and (max-width: 1970px) {
-    .headline p {
-        font-size: 28px!important;
-    }
-    .listtext{
-      font-size: 22px!important;
-    }
-    .leftbutton a {
-      font-size: 25px!important;
-    }
-}
 @media screen and (max-width: 1500px) {
-    .headline p {
-        font-size: 22px!important;
-    }
-    .listtext{
-      font-size: 17px!important;
-    }
-    .leftbutton a {
-      font-size: 20px!important;
-    }
+  .aboutus {
+    width: 60% !important;
+  }
+  .row {
+    display: block !important;
+  }
+  .imgright {
+    margin-left: 0% !important;
+    width: 103% !important;
+  }
+  .row img {
+    padding-right: 10px !important;
+    float: left !important;
+  }
+  .headline {
+    margin-left: 45% !important;
+    margin-right: 20px;
+  }
+  .leftmenu{
+    width: 190px!important;
+  }
+  .navBarWrap {
+    width: 190px!important;
+  }
+  .navBarWrap{
+    margin-left: 0px!important;
+  }
+}
+@media screen and (max-width: 920px) {
+  .aboutus {
+    width: 60% !important;
+  }
+  .row {
+    display: block !important;
+  }
+  .imgright {
+    margin-left: 0% !important;
+    width: 103% !important;
+  }
+  .row img {
+    padding-right: 10px !important;
+    float: left !important;
+  }
+  .headline {
+    margin-left: 45% !important;
+    margin-right: 20px;
+  }
+  .leftmenu{
+    width: 90px!important;
+  }
+  .navBarWrap {
+    width: 90px!important;
+  }
+  .navBarWrap{
+    margin-left: 0px!important;
+  }
+  .leftmenu img{
+    margin-left: -20px!important;
+    height: 300px!important;
+  }
+  .leftbutton{
+    margin-left: -15px!important;
+    height: 300px!important;
+  }
 }
+@media screen and (max-width: 415px) {
+  .aboutus {
+    width: 60% !important;
+  }
+  .row {
+    display: block !important;
+  }
+  .imgright {
+    margin-left: 0% !important;
+    width: 103% !important;
+  }
+  .row img {
+    padding-right: 10px !important;
+    float: left !important;
+  }
+  .headline {
+    margin-left: 45% !important;
+    margin-right: 20px;
+  }
+  .leftmenu{
+    display: none!important;
+  }
+  .navBarWrap {
+    width: 90px!important;
+  }
+  .navBarWrap{
+    margin-left: 0px!important;
+  }
+  .leftmenu img{
+    margin-left: -20px!important;
+    height: 300px!important;
+  }
+  .leftbutton{
+    margin-left: -15px!important;
+    height: 300px!important;
+  }
+}
+
 .navBarWrap {
   position: fixed;
   top: -60px;
   z-index: 999;
-  width: 13.62% !important;
 }
 .short {
-  width: 200px;
+  width: 50%;
   margin: auto;
 }
 .imgarea {
@@ -199,13 +280,12 @@ export default {
 }
 .listtext {
   text-indent: 2em;
-  font-size: 23px;
-  text-align: 2em;
+  font-size: 2.5rem;
   text-align: start;
   color: rgb(154, 154, 154);
 }
 .headline p {
-  font-size: 28px;
+  font-size: 2.9rem;
   color: rgb(0, 102, 153);
   font-weight: 600;
   margin-top: 0px;
@@ -214,6 +294,9 @@ export default {
 .headline-next {
   margin-top: 23px;
 }
+.short {
+  margin: auto !important;
+}
 .aboutus {
   width: 1440px;
   margin: auto;
@@ -283,10 +366,10 @@ export default {
   margin-top: 30px;
 }
 .leftmenu {
-  width: 20%;
+  width: 200px;
   /* width: 20%; */
   /* margin-left: 20px; */
-  margin-top: 150px;
+  margin-top: 100px;
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
@@ -309,11 +392,11 @@ export default {
   padding-bottom: 50px;
 }
 .leftbutton a {
-  font-size: 30px;
+  font-size: 2.5rem;
   color: black;
 }
 p {
-  font-size: 21px;
+  font-size: 2rem;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -336,16 +419,18 @@ button {
 
 .imgtext h1 {
   color: rgb(0, 102, 255);
-  font-size: 90px;
+  font-size: 10rem;
   margin: auto;
   font-weight: 600;
 }
 .righttext h2 {
   color: rgb(22, 102, 255);
   font-weight: 100;
-  font-size: 40px;
-  margin-left: 240px;
+  font-size: 4rem;
   margin-top: -144px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }
 .head {
   margin-top: 30px;

src/views/News.vue

@@ -40,7 +40,7 @@
             <p>{{ item.head }}</p>
             <p class="newscontent">{{ item.content }}</p>
           </div>
-          <div>
+          <div class="more">
             <p>MORE</p>
           </div>
         </div>
@@ -106,14 +106,88 @@ export default {
 };
 </script>
 <style scoped>
-/* @media only screen and (max-width: 479px) {
-  .news {
-    margin-top: 40px !important;
+@media screen and (max-width: 1970px) {
+    .newscenter,
+    .listcontent{
+      width: 1440px;
+    }
+    .headline p {
+        font-size: 28px!important;
+    }
+    .listtext{
+      font-size: 22px!important;
+    }
+    .leftbutton a {
+      font-size: 25px!important;
+    }
+}
+@media screen and (max-width: 1500px) {
+    .newscenter,
+    .listcontent{
+      width: 700px!important;
+    }
+    .block{
+      height: 300px!important;
+    }
+    .block img{
+      height: 250px!important;
+    }
+    .block p{
+      font-size: 15px!important;
+    }
+    .headline p {
+        font-size: 22px!important;
+    }
+    .listtext{
+      font-size: 17px!important;
+    }
+    .leftbutton a {
+      font-size: 20px!important;
+    }
+}
+@media screen and (max-width: 420px) {
+  .imgarea{
+    height: 200px!important;
   }
+    .imgtext h1{
+      font-size: 30px!important;
+    }
+    .days{
+      font-size: 10px!important;
+    }
+    .newslist{
+      margin-top: 3px;
+      margin-bottom: 5px!important;
+    }
+    .eachnews p,
+    .more p{
+      font-size: 10px!important;
+    }
+    .imgtext h2{
+      font-size: 25px!important;
+    }
+    .newscenter,
+    .listcontent{
+      width: 300px!important;
+    }
+    .newsblock{
+      display: flex;
+      flex-direction: column!important;
+    }
+    .block{
+      width:100%!important;
+      margin-bottom: 10px!important;
+    }
+    .headline p {
+        font-size: 17px!important;
+    }
+    .listtext{
+      font-size: 12px!important;
+    }
+    .leftbutton a {
+      font-size: 15px!important;
+    }
 }
-.news {
-  margin-top: 80px !important;
-} */
 * {
   text-align: left;
 }