Speciality

src/modules/module/article/https.ts

@@ -0,0 +1,10 @@
+import { request } from "../../objects";
+
+export const https = {
+  getArticleList(query: any) {
+    return request("/article/list", {
+      method: "GET",
+      params: query,
+    });
+  },
+};

src/modules/module/article/index.ts

@@ -4,6 +4,7 @@ import { request } from "../../objects";
 import loading from "@/components/Provider/Loading";
 import { message } from "ant-design-vue";
 import Modal from "@/components/Provider/Modal";
+import { https } from "./https";
 export const useArticle = defineStore("article", {
   state: () => ({
     listController: new ListController(request),
@@ -94,5 +95,12 @@ export const useArticle = defineStore("article", {
       const src = firstImage.match(srcReg);
       return src ? src[1] : "";
     },
+    async getArticleList(query: any) {
+      const res = await https.getArticleList(query);
+      if (res.errorNo != 200) {
+        return false;
+      }
+      return res.result;
+    },
   },
 });

src/styles/base.css

@@ -38,7 +38,7 @@
   --section-gap: 160px;
 }
 
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
@@ -50,7 +50,7 @@
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
   }
-}
+} */
 
 *,
 *::before,

src/views/admin/detail/components/DetailEditor.tsx

@@ -49,7 +49,7 @@ export default defineComponent({
       }
       let summary = state.data.summary.substring(0, 60);
       summary = summary.replace(/\n/g, "");
-      state.data.summary = summary;
+      subData.summary = summary;
       artStore.addOrUpdateArticle(subData);
     };
 

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

@@ -1,10 +1,15 @@
 import { css } from "@linaria/core";
-
-import { defineComponent } from "vue";
+import { defineComponent, reactive } from "vue";
 import { ArrowRightOutlined } from "@ant-design/icons-vue";
 import Image from "@/components/Image";
 export default defineComponent({
   setup() {
+    const state = reactive({
+      newsId: "6464aef88dcb7ddb98b57a2e",
+      admissionsId: "6464b4ab8dcb7ddb98b57a47",
+      admissionsId: "6464b4ab8dcb7ddb98b57a47",
+    });
+
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>
@@ -15,7 +20,7 @@ export default defineComponent({
           <div class={"news_lay_box"}>
             <div class={"news_lay_item"}>
               <div class={"news_tit"}>
-                学院新闻<span>/</span>
+                新闻公告<span>/</span>
                 <span>College News</span>
               </div>
               <div class={"news_list"}>
@@ -36,7 +41,7 @@ export default defineComponent({
                 </div>
               </div>
               <div class={"list_more"}>
-                <a>
+                <a href={`/detail/${state.newsId}`}>
                   查看更多
                   <ArrowRightOutlined class={"arrow"} />
                 </a>
@@ -63,7 +68,7 @@ export default defineComponent({
                 </div>
               </div>
               <div class={"list_more"}>
-                <a>
+                <a href={`/detail/${state.admissionsId}`}>
                   查看更多
                   <ArrowRightOutlined class={"arrow"} />
                 </a>

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

@@ -1,145 +1,106 @@
 import { css } from "@linaria/core";
 import { ArrowRightOutlined } from "@ant-design/icons-vue";
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, reactive, watch } from "vue";
+import { useArticle, useCategory } from "@/modules";
+import { RouterLink } from "vue-router";
 
 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={"card_desc"}>
-                  <div class={"desc"}>
-                    工业设计系（即原艺招“工业设计专业”），是四川省高校省级特色专业、四川省一流本科专业、四川省地方高校应用型本科示范专业，也是四川省教育体制机制改革立项的重要试点。
-                  </div>
-                  <div class={"more"}>
-                    <a>
-                      了解更多
-                      <ArrowRightOutlined class={"arrow"} />
-                    </a>
-                  </div>
-                </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 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"}>
-              <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 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"}>
-              <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 class={"card_desc"}>
-                  <div class={"desc"}>
-                    美术系成立于1992年。现有全日制在校学生300余人，专任教师16人，其中高级职称教师8人，其中教授2人、副教授6人。本系开设有油画、中国画和综合绘画三个不同的专业方向。
-                  </div>
-                  <div class={"more"}>
-                    <a>
-                      了解更多
-                      <ArrowRightOutlined class={"arrow"} />
-                    </a>
-                  </div>
-                </div>
-              </div>
+    const storeCategory = useCategory();
+
+    const storeArt = useArticle();
+    const specialityId = "64649b6e8dcb7ddb98b57a1a";
+    const state = reactive({
+      summarys: [] as any,
+      specialities: [],
+    });
+    watch(
+      () => storeCategory.categoryTree.length,
+      () => {
+        initSpeciality();
+      }
+    );
+    onMounted(() => {
+      initSpeciality();
+    });
+    const initSpeciality = async () => {
+      const speciality = storeCategory.categoryTree.find((e) => {
+        return e._id == specialityId;
+      });
+      if (!speciality) {
+        return;
+      }
+      const children = speciality.children;
+
+      const res = children.map((e: any) => {
+        return getCardSummary(e._id);
+      });
+      Promise.all(res).then((e) => {
+        state.summarys = e;
+        state.specialities = children;
+      });
+    };
+
+    const getCardSummary = (id: string) => {
+      return new Promise(async (resolve) => {
+        const query = { page: 1, size: 1, query: JSON.stringify({ cid: id }) };
+        const res = await storeArt.getArticleList(query);
+        const list = res.list || [];
+        if (list[0]) {
+          let summary = list[0].summary;
+          summary = summary.substring(0, 60) + "...";
+          resolve(summary);
+        }
+        resolve("");
+      });
+    };
+    return () => {
+      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={"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 class={"card_desc"}>
-                  <div class={"desc"}>
-                    西华大学动画专业创建于2001年，最早在西华大学国际动画艺术学院招收动画专业，2010年回归西华大学本部办学，2017开始在设计学一级学科硕士点招收设计学动画与数字媒体艺术方向学术型研究生
+            <div class={"spe_cards"}>
+              {state.specialities.map((e: any, index: number) => {
+                return (
+                  <div class={`cards_item card_${index + 1}`}>
+                    <div class={"card_icon"}>
+                      <img
+                        src={getImageUrl(
+                          `icons/icon_home_specialty_${index + 1}.png`
+                        )}
+                      />
+                    </div>
+                    <div class={"card_tit"}>
+                      <div>{e.name}</div>
+                    </div>
+                    <div class={"card_desc"}>
+                      <div class={"desc"}>{state.summarys[index]}</div>
+                      <div class={"more"}>
+                        <RouterLink to={`/detail/${e._id}`}>
+                          了解更多
+                          <ArrowRightOutlined class={"arrow"} />
+                        </RouterLink>
+                      </div>
+                    </div>
                   </div>
-                  <div class={"more"}>
-                    <a>
-                      了解更多
-                      <ArrowRightOutlined class={"arrow"} />
-                    </a>
-                  </div>
-                </div>
-              </div>
+                );
+              })}
             </div>
           </div>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });
 const page = css`
   .spe_cards {
     display: flex;
+    height: 520px;
     .cards_item {
+      position: relative;
       flex: 1;
       margin: 0 1px;
       height: 520px;
@@ -167,7 +128,11 @@ const page = css`
         }
       }
       .card_desc {
-        margin-top: 50px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 20px 40px;
         opacity: 0;
         .desc {
           font-size: 14px;
@@ -191,24 +156,24 @@ const page = css`
           }
         }
       }
-      &.card_a {
-        background: #ad947c url("@/assets/bg_home_specialty_1.png") no-repeat
+      &.card_1 {
+        background: #343e47 url("@/assets/bg_home_specialty_1.png") no-repeat
           center/cover;
       }
-      &.card_b {
-        background: #da737b url("@/assets/bg_home_specialty_2.png") no-repeat
+      &.card_2 {
+        background: #cb975b url("@/assets/bg_home_specialty_2.png") no-repeat
           center/cover;
       }
-      &.card_c {
-        background: #52a0a7 url("@/assets/bg_home_specialty_3.png") no-repeat
+      &.card_3 {
+        background: #ad947c url("@/assets/bg_home_specialty_3.png") no-repeat
           center/cover;
       }
-      &.card_d {
-        background: #343e47 url("@/assets/bg_home_specialty_4.png") no-repeat
+      &.card_4 {
+        background: #da737b url("@/assets/bg_home_specialty_4.png") no-repeat
           center/cover;
       }
-      &.card_e {
-        background: #cb975b url("@/assets/bg_home_specialty_5.png") no-repeat
+      &.card_5 {
+        background: #52a0a7 url("@/assets/bg_home_specialty_5.png") no-repeat
           center/cover;
       }
       &:hover {

yarn.lock

@@ -1896,16 +1896,11 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
-dayjs@^1.10.5:
+dayjs@^1.10.5, dayjs@^1.11.7:
   version "1.11.7"
   resolved "http://124.70.149.18:4873/dayjs/-/dayjs-1.11.7.tgz"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
-dayjs@^1.11.7:
-  version "1.11.7"
-  resolved "http://124.70.149.18:4873/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
-  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
-
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "http://124.70.149.18:4873/de-indent/-/de-indent-1.0.2.tgz"