media

src/views/website/components/layout/Footer.tsx

@@ -167,10 +167,45 @@ const FooterLayout = css`
     }
   }
   .copyright {
-    padding: 28px 0;
+    padding: 28px 20px;
     font-size: 12px;
+    line-height: 1.5;
     text-align: center;
     background-color: #242424;
     color: rgba(255, 255, 255, 0.6);
   }
+  @media screen and (max-width: 1440px) {
+    .lay_footer {
+      .footer_menu {
+        padding: 80px 20px;
+      }
+    }
+  }
+  @media screen and (max-width: 1280px) {
+    .lay_footer {
+      .footer_menu {
+        flex-direction: column;
+        .logo {
+          text-align: center;
+          border-right: none;
+          padding-right: 0;
+          img {
+            display: inline-block;
+          }
+        }
+        .menus {
+          display: none;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .footer_fix_link {
+      a {
+        font-size: 12px;
+        width: 32px;
+        height: 84px;
+      }
+    }
+  }
 `;

src/views/website/detail/DownloadPage.tsx

@@ -121,9 +121,6 @@ const page = css`
           flex: 1;
           width: 0;
           padding: 0 48px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
           font-size: 16px;
           font-weight: 400;
           color: #333333;
@@ -142,4 +139,24 @@ const page = css`
       }
     }
   }
+  @media screen and (max-width: 750px) {
+    .list_content {
+      .list_item {
+        padding: 16px 20px;
+        .info {
+          .time {
+            font-size: 12px;
+          }
+          .name {
+            font-size: 14px;
+            padding: 0 10px;
+          }
+        }
+        .download {
+          padding: 2px 8px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
 `;

src/views/website/detail/ListPage.tsx

@@ -242,6 +242,9 @@ const TeacherItemStyle = css`
       font-weight: 600;
     }
   }
+  @media screen and (max-width: 750px) {
+    height: 300px;
+  }
 `;
 const ListItemStyle = css`
   width: 100%;
@@ -322,6 +325,14 @@ const ListItemStyle = css`
     font-weight: 300;
     color: #999999;
   }
+  @media screen and (max-width: 750px) {
+    .list_img {
+      height: 220px;
+    }
+    img {
+      height: 220px;
+    }
+  }
 `;
 const DefItemStyle = css`
   .item {
@@ -344,4 +355,9 @@ const DefItemStyle = css`
       color: var(--vt-c-primary);
     }
   }
+  @media screen and (max-width: 750px) {
+    .item {
+      padding: 16px 20px;
+    }
+  }
 `;

src/views/website/detail/PageTabs.tsx

@@ -34,9 +34,11 @@ export default defineComponent({
   },
 });
 const page = css`
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow-x: auto;
   .tabs_item {
     position: relative;
     margin: 0 30px;
@@ -46,6 +48,7 @@ const page = css`
     font-weight: 400;
     color: #666666;
     cursor: pointer;
+    white-space: nowrap;
     transition: all 0.2s ease-in-out;
     &::after {
       content: "";
@@ -65,4 +68,12 @@ const page = css`
       }
     }
   }
+  @media screen and (max-width: 1200px) {
+    justify-content: flex-start;
+  }
+  @media screen and (max-width: 750px) {
+    .tabs_item {
+      margin: 0 20px;
+    }
+  }
 `;

src/views/website/detail/PageTabsLow.tsx

@@ -35,9 +35,11 @@ export default defineComponent({
   },
 });
 const page = css`
+  width: 100%;
   display: flex;
   align-items: center;
   margin-bottom: 25px;
+  overflow-x: auto;
   .tabs_item {
     position: relative;
     margin-right: 30px;
@@ -46,6 +48,7 @@ const page = css`
     font-size: 14px;
     font-weight: 400;
     color: #666666;
+    white-space: nowrap;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     .name {

src/views/website/detail/article.tsx

@@ -189,4 +189,24 @@ const page = css`
       display: inline;
     }
   }
+  @media screen and (max-width: 1280px) {
+    .page_title_box {
+      height: 400px;
+      .title {
+        h1 {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .page_title_box {
+      height: 320px;
+      .title {
+        h1 {
+          font-size: 24px;
+        }
+      }
+    }
+  }
 `;

src/views/website/detail/index.tsx

@@ -198,4 +198,24 @@ const page = css`
   .page_content {
     padding: 50px 0;
   }
+  @media screen and (max-width: 1280px) {
+    .page_title_box {
+      height: 400px;
+      .title {
+        h1 {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .page_title_box {
+      height: 320px;
+      .title {
+        h1 {
+          font-size: 24px;
+        }
+      }
+    }
+  }
 `;

src/views/website/home/components/Faculty.tsx

@@ -56,12 +56,12 @@ export default defineComponent({
             <Swiper
               class={"teachers_swiper"}
               spaceBetween={24}
-              slidesPerView={5}
+              slidesPerView={"auto"}
               onSwiper={initSwiper}
             >
               {state.list.map((e: ArticleItem) => {
                 return (
-                  <SwiperSlide>
+                  <SwiperSlide class={"teacher_slide"}>
                     <div class={"teacher_item"} onClick={() => turnPage(e._id)}>
                       <Image src={e.cover} />
                       <div class={"item_footer"}>
@@ -90,6 +90,9 @@ const page = css`
     .teachers_swiper {
       width: 100%;
       height: 500px;
+      .teacher_slide {
+        width: 370px;
+      }
     }
     .teacher_item {
       width: 100%;
@@ -146,4 +149,15 @@ const page = css`
       border-radius: 50%;
     }
   }
+  @media screen and (max-width: 1280px) {
+    .teachers_box {
+      .teachers_swiper {
+        width: 100%;
+        height: 400px;
+        .teacher_slide {
+          width: 290px;
+        }
+      }
+    }
+  }
 `;

src/views/website/home/components/News.tsx

@@ -324,6 +324,9 @@ const page = css`
     }
   }
   @media screen and (max-width: 1280px) {
+    .news_tit {
+      font-size: 16px;
+    }
     .news_lay_box {
       flex-direction: column;
       .news_lay_item {

src/views/website/home/components/Research.tsx

@@ -192,4 +192,28 @@ const page = css`
       border-radius: 50%;
     }
   }
+  @media screen and (max-width: 1280px) {
+    background-size: cover;
+    .tab_list {
+      grid-template-columns: repeat(2, 1fr);
+      .list_item {
+        .list_img {
+          height: 300px;
+        }
+      }
+    }
+    .list_more {
+      a {
+        color: #fff;
+      }
+      .arrow {
+        border-color: #fff;
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .tab_list {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
 `;

src/views/website/home/components/Services.tsx

@@ -52,7 +52,9 @@ export default defineComponent({
                 </div>
                 <div class={"ser_tit"}>
                   <p>西华易班</p>
-                  <p class={"desc"}>一站式学生事务网络平台，大学生网络互动社区</p>
+                  <p class={"desc"}>
+                    一站式学生事务网络平台，大学生网络互动社区
+                  </p>
                 </div>
               </a>
             </div>
@@ -127,6 +129,7 @@ const page = css`
           .desc {
             margin-top: 20px;
             font-size: 16px;
+            line-height: 20px;
             color: #999;
           }
         }
@@ -161,4 +164,54 @@ const page = css`
       transform: scale(1);
     }
   }
+  @media screen and (max-width: 1280px) {
+    .service_list {
+      grid-template-columns: repeat(2, 1fr);
+      .ser_item {
+        a {
+          padding: 18px 30px;
+          .ser_icon {
+            padding-right: 30px;
+            img {
+              width: 80px;
+              height: 80px;
+            }
+          }
+          .ser_tit {
+            padding-left: 30px;
+            font-size: 20px;
+          }
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 900px) {
+    .service_list {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .service_list {
+      .ser_item {
+        a {
+          padding: 14px 20px;
+          .ser_icon {
+            padding-right: 20px;
+            img {
+              width: 60px;
+              height: 60px;
+            }
+          }
+          .ser_tit {
+            padding-left: 20px;
+            font-size: 18px;
+            .desc {
+              margin-top: 10px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
 `;

src/views/website/home/components/Speciality.tsx

@@ -183,7 +183,7 @@ const page = css`
   }
   @media screen and (max-width: 1280px) {
     .spe_cards {
-      height: 800px;
+      height: 900px;
       flex-direction: column;
       .cards_item {
         height: auto;
@@ -195,20 +195,22 @@ const page = css`
         .card_tit {
           margin-top: 0;
           padding-left: 20px;
+          transition: all 0.3s ease-in-out;
         }
         &:hover {
           .card_icon {
             img {
-              width: 36px;
-              height: 36px;
+              width: 54px;
+              height: 54px;
+              transition: all 0.3s ease-in-out;
             }
           }
           .card_tit {
             padding-left: 10px;
-            font-size: 16px;
+            font-size: 18px;
           }
-          flex: 3;
-          padding: 10px 20px 40px;
+          flex: 2;
+          padding: 20px 20px 40px;
         }
         .card_desc {
           padding: 0 20px 20px;

src/views/website/home/components/Talents.tsx

@@ -75,7 +75,7 @@ export default defineComponent({
                       教育教学<span>/</span>
                       <span>Education & teaching</span>
                     </div>
-                    <div class={"ant-tabs-nav-wrap justify-end"}>
+                    <div class={"ant-tabs-nav-wrap"}>
                       <div class={"ant-tabs-nav-list"}>
                         {state.tabs.map((e: any) => {
                           return (
@@ -186,6 +186,9 @@ const page = css`
       .home_lay_title {
         margin-bottom: 0;
       }
+      .ant-tabs-nav-wrap {
+        justify-content: flex-end;
+      }
     }
     .ant-tabs-tab {
       padding: 14px 0;
@@ -310,4 +313,47 @@ const page = css`
       border-radius: 50%;
     }
   }
+  @media screen and (max-width: 1280px) {
+    .talent_tab {
+      .ant-tabs-nav {
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 20px;
+        .home_lay_title {
+          margin-bottom: 20px;
+        }
+        .ant-tabs-nav-wrap {
+          padding-bottom: 10px;
+          justify-content: flex-start;
+          overflow-x: auto;
+        }
+        .ant-tabs-tab {
+          font-size: 16px;
+          & + .ant-tabs-tab {
+            margin: 0 0 0 30px;
+          }
+        }
+      }
+      .tab_list {
+        grid-template-columns: repeat(2, 1fr);
+        .list_item {
+          .list_img {
+            height: 300px;
+          }
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .talent_tab {
+      .ant-tabs-nav {
+        .home_lay_title {
+          margin-bottom: 10px;
+        }
+      }
+      .tab_list {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
 `;

src/views/website/home/components/Works.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
                       师生作品<span>/</span>
                       <span>Works</span>
                     </div>
-                    <div class={"ant-tabs-nav-wrap justify-end"}>
+                    <div class={"ant-tabs-nav-wrap"}>
                       <div class={"ant-tabs-nav-list"}>
                         {state.tabs.map((e: CategoryItem) => {
                           return (
@@ -201,6 +201,9 @@ const page = css`
       .home_lay_title {
         margin-bottom: 0;
       }
+      .ant-tabs-nav-wrap {
+        justify-content: flex-end;
+      }
     }
     .ant-tabs-tab {
       padding: 14px 0;
@@ -316,4 +319,56 @@ const page = css`
       transform: translate3d(0, 0, 0);
     }
   }
+  @media screen and (max-width: 1280px) {
+    background-size: cover;
+    .talent_tab {
+      .ant-tabs-nav {
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 20px;
+        .home_lay_title {
+          margin-bottom: 20px;
+        }
+        .ant-tabs-nav-wrap {
+          padding-bottom: 10px;
+          justify-content: flex-start;
+          overflow-x: auto;
+        }
+        .ant-tabs-tab {
+          font-size: 16px;
+          & + .ant-tabs-tab {
+            margin: 0 0 0 30px;
+          }
+        }
+      }
+      .tab_list {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    .list_more {
+      a {
+        color: #fff;
+      }
+      .arrow {
+        border-color: #fff;
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .talent_tab {
+      .ant-tabs-nav {
+        .home_lay_title {
+          margin-bottom: 10px;
+        }
+      }
+      .tab_list {
+        grid-template-columns: repeat(1, 1fr);
+        .list_item {
+          &:first-child {
+            height: 388px;
+          }
+        }
+      }
+    }
+  }
 `;

src/views/website/home/index.tsx

@@ -57,7 +57,7 @@ const page = css`
   }
   @media screen and (max-width: 750px) {
     .home_lay_title {
-      font-size: 22px;
+      font-size: 20px;
       margin-bottom: 20px;
     }
     .home_lay_item_box {