talent

src/views/home/components/Banner.tsx

@@ -82,6 +82,7 @@ export default defineComponent({
 const page = css`
   position: relative;
   width: 100%;
+  height: 800px;
   max-height: 800px;
   .banner_swiper {
     height: 100%;

src/views/home/components/Faculty.tsx

@@ -1,21 +1,80 @@
 import { css } from "@linaria/core";
 
+import { ArrowRightOutlined } from "@ant-design/icons-vue";
 import { defineComponent } from "vue";
+
+import { Swiper, SwiperSlide } from "swiper/vue";
+import Image from "@/components/Image";
 export default defineComponent({
   setup() {
+    const images = [1, 2, 3, 4, 5, 6];
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
-          <div class={"home_lay_title"}>
+        <div>
+          <div class={"home_lay_title global-w"}>
             教师队伍<span>/</span>
             <span>FACUlTY</span>
           </div>
-          <div></div>
+          <div class={"teachers_box mt-40px"}>
+            <Swiper
+              class={"teachers_swiper"}
+              spaceBetween={24}
+              slidesPerView={5}
+            >
+              {images.map((e) => {
+                return (
+                  <SwiperSlide>
+                    <div class={"teacher_item"}>
+                      <a>
+                        <Image src={""} />
+                      </a>
+                    </div>
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+          </div>
+          <div class={"list_more"}>
+            <a>
+              查看更多
+              <ArrowRightOutlined class={"arrow"} />
+            </a>
+          </div>
         </div>
       </div>
     );
   },
 });
 const page = css`
-  margin-top: 120px;
+  padding-bottom: 60px;
+  background: linear-gradient(180deg, #f3fbf1 0%, #ffffff 100%);
+  .teachers_box {
+    .teachers_swiper {
+      width: 100%;
+      height: 500px;
+    }
+    .teacher_item {
+      width: 100%;
+      height: 500px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+  .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/News.tsx

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

src/views/home/components/Services.tsx

@@ -0,0 +1,136 @@
+import { css } from "@linaria/core";
+
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return () => (
+      <div class={[page, "home_lay_item_box"]}>
+        <div class={"global-w"}>
+          <div class={"home_lay_title"}>
+            学生服务<span>/</span>
+            <span>SERVICES</span>
+          </div>
+          <div class={"service_list mt-40px"}>
+            <div class={"ser_item"}>
+              <a href="http://www.lib.xhu.edu.cn/" target="_blank">
+                <div class={"ser_icon"}>
+                  <img src={getImageUrl("icons/icon_home_service_1.png")} />
+                </div>
+                <div class={"ser_tit"}>
+                  <p>图书馆</p>
+                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
+                </div>
+              </a>
+            </div>
+            <div class={"ser_item"}>
+              <a href="http://jwc.xhu.edu.cn/" target="_blank">
+                <div class={"ser_icon"}>
+                  <img src={getImageUrl("icons/icon_home_service_2.png")} />
+                </div>
+                <div class={"ser_tit"}>
+                  <p>教育系统</p>
+                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
+                </div>
+              </a>
+            </div>
+            <div class={"ser_item"}>
+              <a href="http://urp.xhu.edu.cn/" target="_blank">
+                <div class={"ser_icon"}>
+                  <img src={getImageUrl("icons/icon_home_service_3.png")} />
+                </div>
+                <div class={"ser_tit"}>
+                  <p>校园门户</p>
+                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
+                </div>
+              </a>
+            </div>
+            <div class={"ser_item"}>
+              <a href="http://eclass.xhu.edu.cn/" target="_blank">
+                <div class={"ser_icon"}>
+                  <img src={getImageUrl("icons/icon_home_service_4.png")} />
+                </div>
+                <div class={"ser_tit"}>
+                  <p>西华易班</p>
+                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
+                </div>
+              </a>
+            </div>
+            <div class={"ser_item"}>
+              <a href="mailto:msysj@mail.xhu.edu.cn" target="_blank">
+                <div class={"ser_icon"}>
+                  <img src={getImageUrl("icons/icon_home_service_5.png")} />
+                </div>
+                <div class={"ser_tit"}>
+                  <p>校长邮箱</p>
+                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
+                </div>
+              </a>
+            </div>
+            <div class={"ser_item"}>
+              <a href="http://oa.xhu.edu.cn/" target="_blank">
+                <div class={"ser_icon"}>
+                  <img src={getImageUrl("icons/icon_home_service_6.png")} />
+                </div>
+                <div class={"ser_tit"}>
+                  <p>办公OA</p>
+                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  position: relative;
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 40%;
+    width: 60%;
+    height: 200px;
+    background-color: rgba(53, 152, 107, 0.1);
+  }
+  .service_list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    z-index: 2;
+    .ser_item {
+      background-color: #fff;
+      a {
+        padding: 30px 50px;
+        display: flex;
+        align-items: center;
+        color: #333;
+
+        .ser_icon {
+          padding-right: 40px;
+          border-right: 1px solid #d3d9de;
+          img {
+            width: 108px;
+            height: 108px;
+            object-fit: contain;
+          }
+        }
+        .ser_tit {
+          flex: 1;
+          font-size: 24px;
+          padding-left: 40px;
+          p {
+            margin: 0;
+          }
+          .desc {
+            margin-top: 20px;
+            font-size: 16px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+`;

src/views/home/components/Speciality.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-
+import { ArrowRightOutlined } from "@ant-design/icons-vue";
 import { defineComponent } from "vue";
 export default defineComponent({
   setup() {
@@ -10,7 +10,7 @@ export default defineComponent({
             专业建设<span>/</span>
             <span>SPECIALITY</span>
           </div>
-          <div class={"spe_cards"}>
+          <div class={"spe_cards mt-40px"}>
             <div class={"cards_item card_a"}>
               <div class={"card_icon"}>
                 <img src={getImageUrl("icons/icon_home_specialty_1.png")} />
@@ -22,8 +22,16 @@ export default defineComponent({
                   <p>电子信息产品设计</p>
                   <p>家居文创产品设计</p>
                 </div>
-                <div class={""}>
-                  
+                <div class={"card_desc"}>
+                  <div class={"desc"}>
+                    产品设计专业（即原艺招“工业设计专业”），是四川省高校省级特色专业、四川省一流本科专业、四川省地方高校应用型本科示范专业，也是四川省教育体制机制改革立项的重要试点。
+                  </div>
+                  <div class={"more"}>
+                    <a>
+                      了解更多
+                      <ArrowRightOutlined class={"arrow"} />
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
@@ -37,6 +45,17 @@ export default defineComponent({
                   <p>视觉传达设计</p>
                   <p>设计与科技</p>
                 </div>
+                <div class={"card_desc"}>
+                  <div class={"desc"}>
+                    视觉传达设计系现有在校学生近500人，包含视觉传达设计和艺术与科技两个专业，专业教师18人，来自国内外专业院校，有美国、英国、日本、韩国等国的留学经历。
+                  </div>
+                  <div class={"more"}>
+                    <a>
+                      了解更多
+                      <ArrowRightOutlined class={"arrow"} />
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
             <div class={"cards_item card_c"}>
@@ -50,6 +69,17 @@ export default defineComponent({
                   <p>景观设计</p>
                   <p>空间设计</p>
                 </div>
+                <div class={"card_desc"}>
+                  <div class={"desc"}>
+                    环境设计专业创办于2000年，近22年的办学历史使环境设计系具有了深厚的文化底蕴和优良的教学传统。环境设计系现有在校生420多人，专职教师12人，其中副教授6人，讲师6人，博士2人，75%以上的教师具有硕士及以上学位。
+                  </div>
+                  <div class={"more"}>
+                    <a>
+                      了解更多
+                      <ArrowRightOutlined class={"arrow"} />
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
             <div class={"cards_item card_d"}>
@@ -63,6 +93,17 @@ export default defineComponent({
                   <p>中国画</p>
                   <p>综合绘画</p>
                 </div>
+                <div class={"card_desc"}>
+                  <div class={"desc"}>
+                    美术系成立于1992年。现有全日制在校学生300余人，专任教师16人，其中高级职称教师8人，其中教授2人、副教授6人。本系开设有油画、中国画和综合绘画三个不同的专业方向。
+                  </div>
+                  <div class={"more"}>
+                    <a>
+                      了解更多
+                      <ArrowRightOutlined class={"arrow"} />
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
             <div class={"cards_item card_e"}>
@@ -75,6 +116,17 @@ export default defineComponent({
                   <p>影视动画</p>
                   <p>游戏美术</p>
                 </div>
+                <div class={"card_desc"}>
+                  <div class={"desc"}>
+                    西华大学动画专业创建于2001年，最早在西华大学国际动画艺术学院招收动画专业，2010年回归西华大学本部办学，2017开始在设计学一级学科硕士点招收设计学动画与数字媒体艺术方向学术型研究生
+                  </div>
+                  <div class={"more"}>
+                    <a>
+                      了解更多
+                      <ArrowRightOutlined class={"arrow"} />
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -85,10 +137,10 @@ export default defineComponent({
 });
 const page = css`
   .spe_cards {
-    margin-top: 40px;
     display: flex;
     .cards_item {
       flex: 1;
+      margin: 0 1px;
       height: 520px;
       padding: 70px 20px 40px;
       color: #fff;
@@ -113,24 +165,71 @@ const page = css`
           }
         }
       }
+      .card_desc {
+        margin-top: 50px;
+        opacity: 0;
+        .desc {
+          font-size: 14px;
+          line-height: 24px;
+        }
+        .more {
+          margin-top: 20px;
+          a {
+            font-size: 16px;
+            color: #fff;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+          .arrow {
+            margin-left: 8px;
+            padding: 2px;
+            border: 1px solid #fff;
+            font-size: 12px;
+            border-radius: 50%;
+          }
+        }
+      }
       &.card_a {
-        background-color: #ad947c;
+        background: #ad947c url("@/assets/bg_home_specialty_1.png") no-repeat
+          center/cover;
       }
       &.card_b {
-        background-color: #da737b;
+        background: #da737b url("@/assets/bg_home_specialty_2.png") no-repeat
+          center/cover;
       }
       &.card_c {
-        background-color: #52a0a7;
+        background: #52a0a7 url("@/assets/bg_home_specialty_3.png") no-repeat
+          center/cover;
       }
       &.card_d {
-        background-color: #343e47;
+        background: #343e47 url("@/assets/bg_home_specialty_4.png") no-repeat
+          center/cover;
       }
       &.card_e {
-        background-color: #cb975b;
+        background: #cb975b url("@/assets/bg_home_specialty_5.png") no-repeat
+          center/cover;
       }
       &:hover {
         flex: 2;
+        .card_desc {
+          animation: fadeInUp 1s;
+          animation-fill-mode: forwards;
+        }
       }
     }
   }
+  @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

@@ -0,0 +1,251 @@
+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",
+      },
+    ];
+    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"}>
+                      人才培养<span>/</span>
+                      <span>Talent Training</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>
+                            <div>
+                              <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>
+                              <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>
+                              <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>
+                              <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>
+                    </TabPane>
+                  );
+                });
+              },
+            }}
+          </Tabs>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  position: relative;
+  &::after {
+    position: absolute;
+    content: "";
+    right: 0;
+    top: 20%;
+    width: 40%;
+    height: 200px;
+    background-color: rgba(53, 152, 107, 0.1);
+  }
+  .talent_tab {
+    z-index: 2;
+    .ant-tabs-nav {
+      margin-bottom: 40px;
+      &::before {
+        display: none;
+      }
+    }
+    .ant-tabs-tab {
+      padding: 14px 0;
+      font-size: 20px;
+      color: #343434;
+      & + .ant-tabs-tab {
+        margin: 0 0 0 60px;
+      }
+      &.ant-tabs-tab-active {
+        .ant-tabs-tab-btn {
+          color: #000;
+        }
+        &::after {
+          position: absolute;
+          content: "";
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 28px;
+          height: 2px;
+          background-color: var(--vt-c-primary);
+        }
+      }
+    }
+    .tab_list {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 24px;
+      .list_item {
+        width: 100%;
+        background-color: #fff;
+        overflow: hidden;
+        position: relative;
+
+        a {
+          display: block;
+        }
+        img {
+          width: 100%;
+          height: 390px;
+          object-fit: cover;
+        }
+        .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/index.tsx

@@ -4,6 +4,8 @@ import Banner from "./components/Banner";
 import News from "./components/News";
 import Speciality from "./components/Speciality";
 import Faculty from "./components/Faculty";
+import Talents from "./components/Talents";
+import Services from "./components/Services";
 
 export default defineComponent(() => {
   return () => (
@@ -12,6 +14,8 @@ export default defineComponent(() => {
       <News />
       <Speciality />
       <Faculty />
+      <Talents />
+      <Services />
     </div>
   );
 });
@@ -34,6 +38,7 @@ const page = css`
     }
   }
   .home_lay_item_box {
-    margin-bottom: 120px;
+    padding-top: 60px;
+    margin-bottom: 60px;
   }
 `;