home

src/components/layout/Menu.tsx

@@ -76,7 +76,7 @@ const MenuLayout = css`
       width: 0;
       height: 2px;
       background-color: rgba(255, 255, 255, 1);
-      transition: width 0.2s ease-in-out;
+      transition: width 0.3s ease-in-out;
     }
     &::after {
       content: "";

src/views/home/components/Banner.tsx

@@ -112,7 +112,7 @@ const page = css`
       height: 66px;
       object-fit: contain;
       opacity: 0;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.3s ease-in-out;
       cursor: pointer;
       user-select: none;
     }
@@ -143,7 +143,7 @@ const page = css`
         margin: 0 4px;
         border-radius: 6px;
         background-color: rgba(255, 255, 255, 0.6);
-        transition: all 0.2s ease-in-out;
+        transition: all 0.3s ease-in-out;
         cursor: pointer;
         &.active {
           width: 24px;

src/views/home/components/Faculty.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
             教师队伍<span>/</span>
             <span>FACUlTY</span>
           </div>
-          <div class={"teachers_box mt-40px"}>
+          <div class={"teachers_box"}>
             <Swiper
               class={"teachers_swiper"}
               spaceBetween={24}
@@ -46,7 +46,6 @@ export default defineComponent({
   },
 });
 const page = css`
-  padding-bottom: 60px;
   background: linear-gradient(180deg, #f3fbf1 0%, #ffffff 100%);
   .teachers_box {
     .teachers_swiper {

src/views/home/components/News.tsx

@@ -10,9 +10,9 @@ export default defineComponent({
         <div class={"global-w"}>
           <div class={"home_lay_title"}>
             最新动态<span>/</span>
-            <span>NEWS</span>
+            <span>News</span>
           </div>
-          <div class={"news_lay_box mt-40px"}>
+          <div class={"news_lay_box"}>
             <div class={"news_lay_item"}>
               <div class={"news_tit"}>
                 学院新闻<span>/</span>
@@ -103,7 +103,6 @@ export default defineComponent({
   },
 });
 const page = css`
-  margin-top: 60px;
   .news_tit {
     font-size: 18px;
     color: #333;
@@ -116,7 +115,7 @@ const page = css`
     }
   }
   .news_lay_box {
-    display: flex;    
+    display: flex;
     .news_lay_item {
       flex: 1;
       padding: 0 70px;

src/views/home/components/Research.tsx

@@ -0,0 +1,188 @@
+import { css } from "@linaria/core";
+
+import { ArrowRightOutlined } from "@ant-design/icons-vue";
+import { defineComponent, reactive } from "vue";
+import { TabPane, Tabs } from "ant-design-vue";
+import Image from "@/components/Image";
+export default defineComponent({
+  setup() {
+    return () => (
+      <div class={[page, "home_lay_item_box"]}>
+        <div class={"global-w"}>
+          <div class={"home_lay_title white "}>
+            科研创作<span>/</span>
+            <span>Scientific Research</span>
+          </div>
+          <div class={"tab_list"}>
+            <div class={"list_item"}>
+              <a>
+                <div class={"list_img"}>
+                  <Image src={""} />
+                </div>
+                <div class={"info_box"}>
+                  <div class={"item_tit"}>
+                    美术与设计学院赴深圳市牧本工业设计有限公司走访交流
+                  </div>
+                  <div class={"item_desc"}>
+                    4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
+                  </div>
+                  <div class={"item_date"}>2023.04.03</div>
+                </div>
+              </a>
+            </div>
+            <div class={"list_item"}>
+              <a>
+                <div class={"list_img"}>
+                  <Image src={""} />
+                </div>
+                <div class={"info_box"}>
+                  <div class={"item_tit"}>
+                    美术与设计学院赴深圳市牧本工业设计有限公司走访交流
+                  </div>
+                  <div class={"item_desc"}>
+                    4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
+                  </div>
+                  <div class={"item_date"}>2023.04.03</div>
+                </div>
+              </a>
+            </div>
+            <div class={"list_item"}>
+              <a>
+                <div class={"list_img"}>
+                  <Image src={""} />
+                </div>
+                <div class={"info_box"}>
+                  <div class={"item_tit"}>
+                    美术与设计学院赴深圳市牧本工业设计有限公司走访交流
+                  </div>
+                  <div class={"item_desc"}>
+                    4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
+                  </div>
+                  <div class={"item_date"}>2023.04.03</div>
+                </div>
+              </a>
+            </div>
+            <div class={"list_item"}>
+              <a>
+                <div class={"list_img"}>
+                  <Image src={""} />
+                </div>
+                <div class={"info_box"}>
+                  <div class={"item_tit"}>
+                    美术与设计学院赴深圳市牧本工业设计有限公司走访交流
+                  </div>
+                  <div class={"item_desc"}>
+                    4月21日下午，西华大学美术与设计学院、美丽乡村建设与发展研究中心邀请四川大学周波教授来校作多路径的“乡土再造”探索主题讲座…
+                  </div>
+                  <div class={"item_date"}>2023.04.03</div>
+                </div>
+              </a>
+            </div>
+          </div>
+          {/* <div class={"list_more"}>
+            <a>
+              查看更多
+              <ArrowRightOutlined class={"arrow"} />
+            </a>
+          </div> */}
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  position: relative;
+  background: url("@/assets/bg_research.png") no-repeat center top/100% auto;
+  .tab_list {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+    .list_item {
+      width: 100%;
+      background-color: #fff;
+      overflow: hidden;
+      position: relative;
+      a {
+        position: relative;
+        display: block;
+        border-bottom: 2px solid rgba(159, 159, 159, 0.5);
+        &::before {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          border-width: 6px;
+          border-color: transparent rgba(159, 159, 159, 0.5)
+            rgba(159, 159, 159, 0.5) transparent;
+        }
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: -2px;
+          right: 0;
+          width: 0;
+          height: 2px;
+          background-color: var(--vt-c-primary);
+          transition: width 0.3s ease-in-out;
+        }
+        &:hover {
+          &::before {
+            border-color: transparent var(--vt-c-primary) var(--vt-c-primary)
+              transparent;
+          }
+          &::after {
+            width: 100%;
+          }
+          img {
+            transform: scale(1.2);
+          }
+        }
+      }
+      .list_img {
+        width: 100%;
+        height: 390px;
+        overflow: hidden;
+      }
+      img {
+        width: 100%;
+        height: 390px;
+        object-fit: cover;
+        transition: all 0.3s ease-in-out;
+      }
+      .info_box {
+        padding: 20px 18px;
+      }
+      .item_tit {
+        font-size: 20px;
+        line-height: 32px;
+        color: #333333;
+      }
+      .item_desc {
+        margin-top: 20px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #666666;
+      }
+      .item_date {
+        font-size: 14px;
+        margin-top: 30px;
+        font-weight: 300;
+        color: #999999;
+      }
+    }
+  }
+  .list_more {
+    margin-top: 35px;
+    text-align: center;
+    a {
+      color: var(--vt-c-primary);
+    }
+    .arrow {
+      margin-left: 8px;
+      padding: 2px;
+      border: 1px solid var(--vt-c-primary);
+      font-size: 12px;
+      border-radius: 50%;
+    }
+  }
+`;

src/views/home/components/Services.tsx

@@ -9,9 +9,9 @@ export default defineComponent({
         <div class={"global-w"}>
           <div class={"home_lay_title"}>
             学生服务<span>/</span>
-            <span>SERVICES</span>
+            <span>Services</span>
           </div>
-          <div class={"service_list mt-40px"}>
+          <div class={"service_list"}>
             <div class={"ser_item"}>
               <a href="http://www.lib.xhu.edu.cn/" target="_blank">
                 <div class={"ser_icon"}>
@@ -130,7 +130,35 @@ const page = css`
             color: #999;
           }
         }
+        &:hover {
+          .ser_icon {
+            img {
+              animation: heartBeat 2s ease-in-out infinite;
+            }
+          }
+        }
       }
     }
   }
+  @keyframes heartBeat {
+    0% {
+      transform: scale(1);
+    }
+
+    14% {
+      transform: scale(1.2);
+    }
+
+    28% {
+      transform: scale(1);
+    }
+
+    42% {
+      transform: scale(1.2);
+    }
+
+    70% {
+      transform: scale(1);
+    }
+  }
 `;

src/views/home/components/Speciality.tsx

@@ -8,9 +8,9 @@ export default defineComponent({
         <div class={"global-w"}>
           <div class={"home_lay_title"}>
             专业建设<span>/</span>
-            <span>SPECIALITY</span>
+            <span>Speciality</span>
           </div>
-          <div class={"spe_cards mt-40px"}>
+          <div class={"spe_cards"}>
             <div class={"cards_item card_a"}>
               <div class={"card_icon"}>
                 <img src={getImageUrl("icons/icon_home_specialty_1.png")} />
@@ -144,7 +144,7 @@ const page = css`
       height: 520px;
       padding: 70px 20px 40px;
       color: #fff;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.3s ease-in-out;
       .card_icon {
         img {
           width: 72px;
@@ -213,7 +213,7 @@ const page = css`
       &:hover {
         flex: 2;
         .card_desc {
-          animation: fadeInUp 1s;
+          animation: fadeInUp 0.3s ease-in-out;
           animation-fill-mode: forwards;
         }
       }
@@ -222,13 +222,11 @@ const page = css`
   @keyframes fadeInUp {
     from {
       opacity: 0;
-      -webkit-transform: translate3d(0, 100%, 0);
       transform: translate3d(0, 100%, 0);
     }
 
     to {
       opacity: 1;
-      -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
     }
   }

src/views/home/components/Talents.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
                       <div class={"tab_list"}>
                         <div class={"list_item"}>
                           <a>
-                            <div>
+                            <div class={"list_img"}>
                               <Image src={""} />
                             </div>
                             <div class={"info_box"}>
@@ -87,7 +87,7 @@ export default defineComponent({
                         </div>
                         <div class={"list_item"}>
                           <a>
-                            <div>
+                            <div class={"list_img"}>
                               <Image src={""} />
                             </div>
                             <div class={"info_box"}>
@@ -103,7 +103,7 @@ export default defineComponent({
                         </div>
                         <div class={"list_item"}>
                           <a>
-                            <div>
+                            <div class={"list_img"}>
                               <Image src={""} />
                             </div>
                             <div class={"info_box"}>
@@ -119,7 +119,7 @@ export default defineComponent({
                         </div>
                         <div class={"list_item"}>
                           <a>
-                            <div>
+                            <div class={"list_img"}>
                               <Image src={""} />
                             </div>
                             <div class={"info_box"}>
@@ -157,7 +157,7 @@ const page = css`
     position: absolute;
     content: "";
     right: 0;
-    top: 20%;
+    top: 40%;
     width: 40%;
     height: 200px;
     background-color: rgba(53, 152, 107, 0.1);
@@ -169,11 +169,14 @@ const page = css`
       &::before {
         display: none;
       }
+      .home_lay_title {
+        margin-bottom: 0;
+      }
     }
     .ant-tabs-tab {
       padding: 14px 0;
-      font-size: 20px;
-      color: #343434;
+      font-size: 18px;
+      color: rgba(0, 0, 0, 0.8);
       & + .ant-tabs-tab {
         margin: 0 0 0 60px;
       }
@@ -204,12 +207,51 @@ const page = css`
         position: relative;
 
         a {
+          position: relative;
           display: block;
+          border-bottom: 2px solid rgba(159, 159, 159, 0.5);
+          &::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            border-width: 6px;
+            border-color: transparent rgba(159, 159, 159, 0.5)
+              rgba(159, 159, 159, 0.5) transparent;
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: -2px;
+            right: 0;
+            width: 0;
+            height: 2px;
+            background-color: var(--vt-c-primary);
+            transition: width 0.3s ease-in-out;
+          }
+          &:hover {
+            &::before {
+              border-color: transparent var(--vt-c-primary) var(--vt-c-primary)
+                transparent;
+            }
+            &::after {
+              width: 100%;
+            }
+            img {
+              transform: scale(1.2);
+            }
+          }
+        }
+        .list_img {
+          width: 100%;
+          height: 390px;
+          overflow: hidden;
         }
         img {
           width: 100%;
           height: 390px;
           object-fit: cover;
+          transition: all 0.3s ease-in-out;
         }
         .info_box {
           padding: 20px 18px;

src/views/home/components/Works.tsx

@@ -0,0 +1,296 @@
+import { css } from "@linaria/core";
+
+import { ArrowRightOutlined } from "@ant-design/icons-vue";
+import { defineComponent, reactive } from "vue";
+import { TabPane, Tabs } from "ant-design-vue";
+import Image from "@/components/Image";
+export default defineComponent({
+  setup() {
+    const tabs = [
+      {
+        title: "产品设计",
+        key: "1",
+      },
+      {
+        title: "视觉传达",
+        key: "2",
+      },
+      {
+        title: "美术艺术",
+        key: "3",
+      },
+      {
+        title: "环境设计",
+        key: "4",
+      },
+      {
+        title: "动画",
+        key: "5",
+      },
+    ];
+    const state = reactive({
+      activeKey: "1",
+    });
+
+    return () => (
+      <div class={[page, "home_lay_item_box"]}>
+        <div class={"global-w"}>
+          <Tabs activeKey={state.activeKey} class={"talent_tab"}>
+            {{
+              renderTabBar: () => {
+                return (
+                  <div class={"ant-tabs-nav"}>
+                    <div class={"home_lay_title white"}>
+                      师生作品<span>/</span>
+                      <span>Works</span>
+                    </div>
+                    <div class={"ant-tabs-nav-wrap justify-end"}>
+                      <div class={"ant-tabs-nav-list"}>
+                        {tabs.map((e) => {
+                          return (
+                            <div
+                              class={`ant-tabs-tab ${
+                                state.activeKey == e.key
+                                  ? "ant-tabs-tab-active"
+                                  : ""
+                              }`}
+                              key={e.key}
+                            >
+                              <div
+                                class={"ant-tabs-tab-btn"}
+                                onClick={() => {
+                                  state.activeKey = e.key;
+                                }}
+                              >
+                                {e.title}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                );
+              },
+              default: () => {
+                return tabs.map((item) => {
+                  return (
+                    <TabPane tab={item.title} key={item.key}>
+                      <div class={"tab_list"}>
+                        <div class={"list_item"}>
+                          <a class={"item_link"}>
+                            <img src={getImageUrl("temp_works_1.png")} />
+                            <div class={"item_txt"}>
+                              <div class={"name"}>骨科手术导航机器人</div>
+                              <div class={"authors"}>作者：张小碗</div>
+                            </div>
+                          </a>
+                        </div>
+                        <div class={"list_item"}>
+                          <div class={"item_lay"}>
+                            <a class={"item_link"}>
+                              <img src={getImageUrl("temp_works_2.png")} />
+                              <div class={"item_txt"}>
+                                <div class={"name"}>骨科手术导航机器人</div>
+                                <div class={"authors"}>作者：张小碗</div>
+                              </div>
+                            </a>
+                          </div>
+                          <div class={"item_lay"}>
+                            <a class={"item_link"}>
+                              <img src={getImageUrl("temp_works_2.png")} />
+                              <div class={"item_txt"}>
+                                <div class={"name"}>骨科手术导航机器人</div>
+                                <div class={"authors"}>作者：张小碗</div>
+                              </div>
+                            </a>
+                          </div>
+                        </div>
+                        <div class={"list_item"}>
+                          {" "}
+                          <div class={"item_lay"}>
+                            <a class={"item_link"}>
+                              <img src={getImageUrl("temp_works_2.png")} />
+                              <div class={"item_txt"}>
+                                <div class={"name"}>骨科手术导航机器人</div>
+                                <div class={"authors"}>作者：张小碗</div>
+                              </div>
+                            </a>
+                          </div>
+                          <div class={"item_lay"}>
+                            <a class={"item_link"}>
+                              <img src={getImageUrl("temp_works_2.png")} />
+                              <div class={"item_txt"}>
+                                <div class={"name"}>骨科手术导航机器人</div>
+                                <div class={"authors"}>作者：张小碗</div>
+                              </div>
+                            </a>
+                          </div>
+                        </div>
+                        <div class={"list_item"}>
+                          <div class={"item_lay"}>
+                            <a class={"item_link"}>
+                              <img src={getImageUrl("temp_works_2.png")} />
+                              <div class={"item_txt"}>
+                                <div class={"name"}>骨科手术导航机器人</div>
+                                <div class={"authors"}>作者：张小碗</div>
+                              </div>
+                            </a>
+                          </div>
+                          <div class={"item_lay"}>
+                            <a class={"item_link"}>
+                              <img src={getImageUrl("temp_works_2.png")} />
+                              <div class={"item_txt"}>
+                                <div class={"name"}>骨科手术导航机器人</div>
+                                <div class={"authors"}>作者：张小碗</div>
+                              </div>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <div class={"list_more"}>
+                        <a>
+                          查看更多
+                          <ArrowRightOutlined class={"arrow"} />
+                        </a>
+                      </div>
+                    </TabPane>
+                  );
+                });
+              },
+            }}
+          </Tabs>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  position: relative;
+  background: url("@/assets/bg_works.png") no-repeat center top/100% auto;
+
+  .talent_tab {
+    z-index: 2;
+    .ant-tabs-nav {
+      margin-bottom: 40px;
+      &::before {
+        display: none;
+      }
+      .home_lay_title {
+        margin-bottom: 0;
+      }
+    }
+    .ant-tabs-tab {
+      padding: 14px 0;
+      font-size: 18px;
+      color: rgba(255, 255, 255, 0.8);
+      & + .ant-tabs-tab {
+        margin: 0 0 0 60px;
+      }
+      &.ant-tabs-tab-active {
+        .ant-tabs-tab-btn {
+          color: #fff;
+        }
+        &::after {
+          position: absolute;
+          content: "";
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 28px;
+          height: 2px;
+          background-color: #fff;
+        }
+      }
+    }
+    .tab_list {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 24px;
+      .list_item {
+        height: 800px;
+        .item_lay {
+          height: 388px;
+          &:first-child {
+            margin-bottom: 24px;
+          }
+        }
+        .item_link {
+          display: block;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          .item_txt {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            padding: 30px 40px;
+            width: 100%;
+            color: #fff;
+            background: linear-gradient(
+              180deg,
+              rgba(0, 0, 0, 0) 0%,
+              #000000 100%
+            );
+            opacity: 0;
+            overflow: hidden;
+            .name {
+              font-size: 20px;
+              font-weight: 600;
+              width: 100%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .authors {
+              margin-top: 4px;
+              font-size: 14px;
+              font-weight: 400;
+            }
+          }
+          &:hover {
+            img {
+              transform: scale(1.2);
+            }
+            .item_txt {
+              animation: fadeInUp 0.3s ease-in-out;
+              animation-fill-mode: forwards;
+            }
+          }
+        }
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: all 0.3s ease-in-out;
+        }
+      }
+    }
+  }
+  .list_more {
+    margin-top: 35px;
+    text-align: center;
+    a {
+      color: var(--vt-c-primary);
+    }
+    .arrow {
+      margin-left: 8px;
+      padding: 2px;
+      border: 1px solid var(--vt-c-primary);
+      font-size: 12px;
+      border-radius: 50%;
+    }
+  }
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+`;

src/views/home/index.tsx

@@ -5,6 +5,8 @@ import News from "./components/News";
 import Speciality from "./components/Speciality";
 import Faculty from "./components/Faculty";
 import Talents from "./components/Talents";
+import Research from "./components/Research";
+import Works from "./components/Works";
 import Services from "./components/Services";
 
 export default defineComponent(() => {
@@ -15,6 +17,8 @@ export default defineComponent(() => {
       <Speciality />
       <Faculty />
       <Talents />
+      <Research />
+      <Works />
       <Services />
     </div>
   );
@@ -22,6 +26,7 @@ export default defineComponent(() => {
 const page = css`
   height: 100%;
   .home_lay_title {
+    margin-bottom: 40px;
     font-size: 30px;
     color: #333;
     line-height: 1;
@@ -32,13 +37,13 @@ const page = css`
       }
     }
     span {
+      text-transform: uppercase;
       padding-left: 10px;
       font-weight: 100;
       color: rgba(123, 123, 123, 1);
     }
   }
   .home_lay_item_box {
-    padding-top: 60px;
-    margin-bottom: 60px;
+    padding: 60px 0;
   }
 `;