spe

src/components/Image.tsx

@@ -0,0 +1,28 @@
+import { defineComponent, ref, reactive } from "vue";
+import { any } from "vue-types";
+
+const defaultImg = getImageUrl("image-error.svg");
+
+export default defineComponent({
+  props: {
+    src: any<string | undefined>().isRequired,
+  },
+
+  emits: ["click"],
+  setup(props, { emit }) {
+    const imgRef = ref();
+    const state = reactive({
+      error: false,
+    });
+    return () => (
+      <img
+        ref={imgRef}
+        src={props.src}
+        class={[state.error ? "image_error" : null]}
+        onMousedown={(e) => e.preventDefault()}
+        onError={() => (state.error = true)}
+        onClick={() => emit("click")}
+      />
+    );
+  },
+});

src/styles/main.css

@@ -11,3 +11,6 @@
   width: 100%;
   margin: 0 auto;
 }
+.image_error {
+  background: #f2f2f2 url("../assets/image_error.png") no-repeat center;
+}

src/views/home/components/Banner.tsx

@@ -113,6 +113,7 @@ const page = css`
       opacity: 0;
       transition: all 0.2s ease-in-out;
       cursor: pointer;
+      user-select: none;
     }
   }
   .swiper_prev {

src/views/home/components/Faculty.tsx

@@ -0,0 +1,21 @@
+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>FACUlTY</span>
+          </div>
+          <div></div>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  margin-top: 120px;
+`;

src/views/home/components/News.tsx

@@ -0,0 +1,193 @@
+import { css } from "@linaria/core";
+
+import { defineComponent } from "vue";
+import { ArrowRightOutlined } from "@ant-design/icons-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"}>
+            最新动态<span>/</span>
+            <span>NEWS</span>
+          </div>
+          <div class={"news_lay_box mt-20px"}>
+            <div class={"news_lay_item"}>
+              <div class={"news_tit"}>
+                学院新闻<span>/</span>
+                <span>College News</span>
+              </div>
+              <div class={"news_list"}>
+                <div class={"list_item"}>
+                  <a>
+                    <Image src={""} />
+                    <div class={"first_date"}>2023.09.09</div>
+                    <div>
+                      国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                    </div>
+                  </a>
+                </div>
+                <div class={"list_item"}>
+                  <a>
+                    分工会活动|“喜迎二十大·筑梦新征程”多媒体课件制作大赛圆满举行…
+                  </a>
+                  <span>2023.09.09</span>
+                </div>
+              </div>
+              <div class={"list_more"}>
+                <a>
+                  查看更多
+                  <ArrowRightOutlined class={"arrow"} />
+                </a>
+              </div>
+            </div>
+            <div class={"news_lay_item"}>
+              <div class={"news_tit"}>
+                招生就业<span>/</span>
+                <span>Admissions & employment</span>
+              </div>
+              <div class={"news_list_s"}>
+                <div class={"s_item"}>
+                  <a>
+                    <Image src={""} />
+                    <div class={"mt-10px"}>
+                      国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                    </div>
+                  </a>
+                </div>
+                <div class={"s_item"}>
+                  <a>
+                    美术与设计学院开展国家安全教育日暨国家安全教育月保密工作专题培训会
+                  </a>
+                </div>
+              </div>
+              <div class={"list_more"}>
+                <a>
+                  查看更多
+                  <ArrowRightOutlined class={"arrow"} />
+                </a>
+              </div>
+            </div>
+            <div class={"news_lay_item"}>
+              <div class={"news_tit"}>
+                学科建设<span>/</span>
+                <span>Discipline building</span>
+              </div>
+              <div class={"news_list_s"}>
+                <div class={"s_item mt-10px"}>
+                  <a>
+                    <Image src={""} />
+                    <div class={"mt-10px"}>
+                      国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                    </div>
+                  </a>
+                </div>
+                <div class={"s_item"}>
+                  <a>
+                    国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                  </a>
+                </div>
+              </div>
+              <div class={"list_more"}>
+                <a>
+                  查看更多
+                  <ArrowRightOutlined class={"arrow"} />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  margin-top: 120px;
+  .news_tit {
+    font-size: 18px;
+    color: #333;
+    line-height: 1;
+    margin-bottom: 14px;
+    span {
+      padding-left: 5px;
+      font-size: 14px;
+      color: #666666;
+    }
+  }
+  .news_lay_box {
+    display: flex;
+    .news_lay_item {
+      flex: 1;
+      padding: 0 70px;
+      border-right: 1px solid #e5e5e5;
+      &:first-child {
+        padding-left: 0;
+        flex: 2;
+      }
+      &:last-child {
+        border-right: none;
+        padding-right: 0;
+      }
+      .list_item {
+        img {
+          height: 390px;
+          width: 100%;
+          object-fit: cover;
+        }
+        padding: 18px 0;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #e5e5e5;
+        .first_date {
+          font-size: 16px;
+          margin: 8px 0;
+        }
+        &:first-child {
+          padding-top: 0;
+          font-size: 24px;
+          line-height: 1.5;
+        }
+      }
+      .s_item {
+        img {
+          height: 210px;
+          width: 100%;
+          object-fit: cover;
+        }
+        padding: 18px 0;
+        font-size: 16px;
+        line-height: 28px;
+        border-bottom: 1px solid #e5e5e5;
+
+        &:first-child {
+          padding-top: 0;
+          font-size: 18px;
+        }
+      }
+      a {
+        color: #333;
+        &:hover {
+          color: var(--vt-c-primary);
+          text-decoration: underline;
+        }
+      }
+      .list_more {
+        margin-top: 20px;
+        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/Speciality.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>SPECIALITY</span>
+          </div>
+          <div class={"spe_cards"}>
+            <div class={"cards_item card_a"}>
+              <div class={"card_icon"}>
+                <img src={getImageUrl("icons/icon_home_specialty_1.png")} />
+              </div>
+              <div class={"card_tit"}>
+                <div>产品设计系</div>
+                <div class={"sec_tit"}>
+                  <p>工业产品设计</p>
+                  <p>电子信息产品设计</p>
+                  <p>家居文创产品设计</p>
+                </div>
+                <div class={""}>
+                  
+                </div>
+              </div>
+            </div>
+            <div class={"cards_item card_b"}>
+              <div class={"card_icon"}>
+                <img src={getImageUrl("icons/icon_home_specialty_2.png")} />
+              </div>
+              <div class={"card_tit"}>
+                <div>视觉传达系</div>
+                <div class={"sec_tit"}>
+                  <p>视觉传达设计</p>
+                  <p>设计与科技</p>
+                </div>
+              </div>
+            </div>
+            <div class={"cards_item card_c"}>
+              <div class={"card_icon"}>
+                <img src={getImageUrl("icons/icon_home_specialty_3.png")} />
+              </div>
+              <div class={"card_tit"}>
+                <div>环境设计系</div>
+                <div class={"sec_tit"}>
+                  <p>室内设计</p>
+                  <p>景观设计</p>
+                  <p>空间设计</p>
+                </div>
+              </div>
+            </div>
+            <div class={"cards_item card_d"}>
+              <div class={"card_icon"}>
+                <img src={getImageUrl("icons/icon_home_specialty_4.png")} />
+              </div>
+              <div class={"card_tit"}>
+                <div>美术系</div>
+                <div class={"sec_tit"}>
+                  <p>油画</p>
+                  <p>中国画</p>
+                  <p>综合绘画</p>
+                </div>
+              </div>
+            </div>
+            <div class={"cards_item card_e"}>
+              <div class={"card_icon"}>
+                <img src={getImageUrl("icons/icon_home_specialty_5.png")} />
+              </div>
+              <div class={"card_tit"}>
+                <div>美术系</div>
+                <div class={"sec_tit"}>
+                  <p>影视动画</p>
+                  <p>游戏美术</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+const page = css`
+  .spe_cards {
+    margin-top: 40px;
+    display: flex;
+    .cards_item {
+      flex: 1;
+      height: 520px;
+      padding: 70px 20px 40px;
+      color: #fff;
+      transition: all 0.2s ease-in-out;
+      .card_icon {
+        img {
+          width: 72px;
+          height: 72px;
+          object-fit: contain;
+        }
+      }
+      .card_tit {
+        margin-top: 12px;
+        font-size: 20px;
+        .sec_tit {
+          margin-top: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 32px;
+          p {
+            margin: 0;
+          }
+        }
+      }
+      &.card_a {
+        background-color: #ad947c;
+      }
+      &.card_b {
+        background-color: #da737b;
+      }
+      &.card_c {
+        background-color: #52a0a7;
+      }
+      &.card_d {
+        background-color: #343e47;
+      }
+      &.card_e {
+        background-color: #cb975b;
+      }
+      &:hover {
+        flex: 2;
+      }
+    }
+  }
+`;

src/views/home/index.tsx

@@ -1,15 +1,39 @@
 import { css } from "@linaria/core";
 import { defineComponent } from "vue";
 import Banner from "./components/Banner";
+import News from "./components/News";
+import Speciality from "./components/Speciality";
+import Faculty from "./components/Faculty";
 
 export default defineComponent(() => {
   return () => (
     <div class={page}>
       <Banner />
+      <News />
+      <Speciality />
+      <Faculty />
     </div>
   );
 });
 const page = css`
   height: 100%;
-
+  .home_lay_title {
+    font-size: 30px;
+    color: #333;
+    line-height: 1;
+    &.white {
+      color: #fff;
+      span {
+        color: #fff;
+      }
+    }
+    span {
+      padding-left: 10px;
+      font-weight: 100;
+      color: rgba(123, 123, 123, 1);
+    }
+  }
+  .home_lay_item_box {
+    margin-bottom: 120px;
+  }
 `;