index data finish

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

@@ -50,9 +50,11 @@ export default defineComponent({
         } else {
           await uploader.uploadBlobImages(state.formData);
         }
-
-        let summary = state.formData.summary.substring(0, 60);
-        summary = summary.replace(/\n/g, "");
+        let summary = state.formData.summary;
+        if (summary) {
+          summary = summary.substring(0, 60);
+          summary = summary.replace(/\n/g, "");
+        }
         state.formData.summary = summary;
         modal.submit(state.formData);
       });

src/views/website/detail/ListPage.tsx

@@ -113,16 +113,16 @@ const ArticleItem = defineComponent({
     const router = useRouter();
     const route = useRoute();
     const renderTitle = (title?: string) => {
-      if (title && title.length > 30) {
+      if (title) {
         return title.substring(0, 30) + "...";
       }
-      return title;
+      return "";
     };
     const renderSummary = (summary?: string) => {
-      if (summary && summary.length > 60) {
+      if (summary) {
         return summary.substring(0, 60) + "...";
       }
-      return summary + "...";
+      return "";
     };
     return () => (
       <div class={ListItemStyle}>
@@ -249,16 +249,20 @@ const ListItemStyle = css`
     padding: 16px 12px;
   }
   .item_tit {
+    height: 56px;
     font-size: 16px;
     line-height: 24px;
     color: #333333;
+    overflow: hidden;
   }
   .item_desc {
+    height: 60px;
     margin-top: 16px;
     font-size: 12px;
     line-height: 20px;
     font-weight: 400;
     color: #666666;
+    overflow: hidden;
     word-break: break-all;
   }
   .item_date {

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

@@ -75,7 +75,10 @@ export default defineComponent({
         <Swiper
           class={"banner_swiper"}
           modules={[Autoplay]}
-          autoplay={false}
+          autoplay={{
+            delay: 5000,
+            disableOnInteraction: false,
+          }}
           loop={true}
           onSwiper={initSwiper}
           onSlideChange={(e) => {

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

@@ -1,13 +1,50 @@
 import { css } from "@linaria/core";
 
 import { ArrowRightOutlined } from "@ant-design/icons-vue";
-import { defineComponent } from "vue";
+import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 
 import { Swiper, SwiperSlide } from "swiper/vue";
 import Image from "@/components/Image";
+import { useArticle } from "@/modules";
+import { RouterLink, useRouter } from "vue-router";
 export default defineComponent({
   setup() {
-    const images = [1, 2, 3, 4, 5, 6];
+    const storeArt = useArticle();
+    const router = useRouter();
+    const categoryId = "6464ae7a8dcb7ddb98b57a28";
+    const state = reactive({
+      list: [],
+    });
+    const swiperRef = ref();
+    const initSwiper = (swiper: any) => {
+      swiperRef.value = swiper;
+    };
+    onMounted(() => {
+      getList();
+    });
+
+    const getList = async () => {
+      const query = {
+        page: 1,
+        size: 10,
+        query: JSON.stringify({ cid: categoryId }),
+      };
+      const res = await storeArt.getArticleList(query);
+      const list = res.list || [];
+      state.list = list;
+      nextTick(() => {
+        if (swiperRef.value) {
+          swiperRef.value.update();
+        }
+      });
+    };
+    const turnPage = (aid: string) => {
+      router.push({
+        name: "article",
+        params: { id: categoryId },
+        query: { aid },
+      });
+    };
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div>
@@ -20,14 +57,13 @@ export default defineComponent({
               class={"teachers_swiper"}
               spaceBetween={24}
               slidesPerView={5}
+              onSwiper={initSwiper}
             >
-              {images.map(() => {
+              {state.list.map((e: ArticleItem) => {
                 return (
                   <SwiperSlide>
-                    <div class={"teacher_item"}>
-                      <a>
-                        <Image src={""} />
-                      </a>
+                    <div class={"teacher_item"} onClick={() => turnPage(e._id)}>
+                      <Image src={e.cover} />
                     </div>
                   </SwiperSlide>
                 );
@@ -35,10 +71,10 @@ export default defineComponent({
             </Swiper>
           </div>
           <div class={"list_more"}>
-            <a>
+            <RouterLink to={`/detail/${categoryId}`}>
               查看更多
               <ArrowRightOutlined class={"arrow"} />
-            </a>
+            </RouterLink>
           </div>
         </div>
       </div>
@@ -55,6 +91,7 @@ const page = css`
     .teacher_item {
       width: 100%;
       height: 500px;
+      cursor: pointer;
       img {
         width: 100%;
         height: 100%;

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

@@ -1,15 +1,55 @@
 import { css } from "@linaria/core";
-import { defineComponent, reactive } from "vue";
+import { defineComponent, onMounted, reactive } from "vue";
 import { ArrowRightOutlined } from "@ant-design/icons-vue";
 import Image from "@/components/Image";
+import { RouterLink, useRouter } from "vue-router";
+import { useArticle } from "@/modules";
+import dayjs from "dayjs";
 export default defineComponent({
   setup() {
+    const storeArt = useArticle();
+    const router = useRouter();
     const state = reactive({
       newsId: "6464aef88dcb7ddb98b57a2e",
+      newsList: [],
       admissionsId: "6464b4ab8dcb7ddb98b57a47",
-      admissionsId: "6464b4ab8dcb7ddb98b57a47",
+      admissionsList: [],
+      partyId: "6464b0fa8dcb7ddb98b57a37",
+      partyList: [],
     });
-
+    onMounted(() => {
+      initList();
+    });
+    const initList = async () => {
+      const newsList = await getList(state.newsId, 5);
+      state.newsList = newsList;
+      const admissionsList = await getList(state.admissionsId, 7);
+      state.admissionsList = admissionsList;
+      const partyList = await getList(state.partyId, 7);
+      state.partyList = partyList;
+    };
+    const getList = async (id: string, size: number) => {
+      const query = { page: 1, size: size, query: JSON.stringify({ cid: id }) };
+      const res = await storeArt.getArticleList(query);
+      const list = res.list || [];
+      return list;
+    };
+    const turnPage = (aid: string, cid: string) => {
+      router.push({
+        name: "article",
+        params: { id: cid },
+        query: { aid },
+      });
+    };
+    const renderTitle = (title?: string) => {
+      if (title) {
+        if (title.length > 30) {
+          return title.substring(0, 30) + "...";
+        }
+        return title;
+      }
+      return title;
+    };
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>
@@ -24,81 +64,137 @@ export default defineComponent({
                 <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>
-                      国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                {state.newsList.map((e: ArticleItem, index: number) => {
+                  if (index == 0) {
+                    return (
+                      <div class={"list_item"}>
+                        <div
+                          class={"item"}
+                          onClick={() => {
+                            turnPage(e._id, state.newsId);
+                          }}
+                        >
+                          <div class={"cover"}>
+                            <Image src={e.cover} />
+                          </div>
+                          <div class={"first_date"}>
+                            {dayjs(e.createTime).format("YYYY.MM.DD")}
+                          </div>
+                          <div>{renderTitle(e.title)}</div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return (
+                    <div class={"list_item"}>
+                      <div
+                        class={"item"}
+                        onClick={() => {
+                          turnPage(e._id, state.newsId);
+                        }}
+                      >
+                        {renderTitle(e.title)}
+                      </div>
+                      <span>{dayjs(e.createTime).format("YYYY.MM.DD")}</span>
                     </div>
-                  </a>
-                </div>
-                <div class={"list_item"}>
-                  <a>
-                    分工会活动|“喜迎二十大·筑梦新征程”多媒体课件制作大赛圆满举行…
-                  </a>
-                  <span>2023.09.09</span>
-                </div>
+                  );
+                })}
               </div>
               <div class={"list_more"}>
-                <a href={`/detail/${state.newsId}`}>
+                <RouterLink to={`/detail/${state.newsId}`}>
                   查看更多
                   <ArrowRightOutlined class={"arrow"} />
-                </a>
+                </RouterLink>
               </div>
             </div>
             <div class={"news_lay_item"}>
               <div class={"news_tit"}>
-                招生就业<span>/</span>
-                <span>Admissions & employment</span>
+                党建工作<span>/</span>
+                <span>Party building</span>
               </div>
               <div class={"news_list_s"}>
-                <div class={"s_item"}>
-                  <a>
-                    <Image src={""} />
-                    <div class={"mt-10px"}>
-                      国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                {state.partyList.map((e: ArticleItem, index: number) => {
+                  if (index == 0) {
+                    return (
+                      <div class={"s_item mt-10px"}>
+                        <div
+                          class={"item"}
+                          onClick={() => {
+                            turnPage(e._id, state.partyId);
+                          }}
+                        >
+                          <div class={"cover"}>
+                            <Image src={e.cover} />
+                          </div>
+                          <div class={"mt-10px"}>{renderTitle(e.title)}</div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return (
+                    <div class={"s_item"}>
+                      <div
+                        class={"item"}
+                        onClick={() => {
+                          turnPage(e._id, state.partyId);
+                        }}
+                      >
+                        {renderTitle(e.title)}
+                      </div>
                     </div>
-                  </a>
-                </div>
-                <div class={"s_item"}>
-                  <a>
-                    美术与设计学院开展国家安全教育日暨国家安全教育月保密工作专题培训会
-                  </a>
-                </div>
+                  );
+                })}
               </div>
               <div class={"list_more"}>
-                <a href={`/detail/${state.admissionsId}`}>
+                <RouterLink to={`/detail/${state.partyId}`}>
                   查看更多
                   <ArrowRightOutlined class={"arrow"} />
-                </a>
+                </RouterLink>
               </div>
             </div>
             <div class={"news_lay_item"}>
               <div class={"news_tit"}>
-                学科建设<span>/</span>
-                <span>Discipline building</span>
+                招生就业<span>/</span>
+                <span>Admissions & employment</span>
               </div>
               <div class={"news_list_s"}>
-                <div class={"s_item mt-10px"}>
-                  <a>
-                    <Image src={""} />
-                    <div class={"mt-10px"}>
-                      国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
+                {state.admissionsList.map((e: ArticleItem, index: number) => {
+                  if (index == 0) {
+                    return (
+                      <div class={"s_item mt-10px"}>
+                        <div
+                          class={"item"}
+                          onClick={() => {
+                            turnPage(e._id, state.admissionsId);
+                          }}
+                        >
+                          <div class={"cover"}>
+                            <Image src={e.cover} />
+                          </div>
+                          <div class={"mt-10px"}>{renderTitle(e.title)}</div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return (
+                    <div class={"s_item"}>
+                      <div
+                        class={"item"}
+                        onClick={() => {
+                          turnPage(e._id, state.admissionsId);
+                        }}
+                      >
+                        {renderTitle(e.title)}
+                      </div>
                     </div>
-                  </a>
-                </div>
-                <div class={"s_item"}>
-                  <a>
-                    国家安全教育丨美术与设计学院深入开展学习贯彻总体国家安全观教育活动
-                  </a>
-                </div>
+                  );
+                })}
               </div>
               <div class={"list_more"}>
-                <a>
+                <RouterLink to={`/detail/${state.admissionsId}`}>
                   查看更多
                   <ArrowRightOutlined class={"arrow"} />
-                </a>
+                </RouterLink>
               </div>
             </div>
           </div>
@@ -128,6 +224,7 @@ const page = css`
       &:first-child {
         padding-left: 0;
         flex: 2;
+        max-width: 660px;
       }
       &:last-child {
         border-right: none;
@@ -139,6 +236,11 @@ const page = css`
           width: 100%;
           object-fit: cover;
         }
+        .cover {
+          height: 390px;
+          width: 100%;
+          overflow: hidden;
+        }
         padding: 18px 0;
         font-size: 16px;
         display: flex;
@@ -153,6 +255,18 @@ const page = css`
           padding-top: 0;
           font-size: 24px;
           line-height: 1.5;
+          .item {
+            padding-right: 0;
+            overflow: auto;
+            white-space: normal;
+          }
+        }
+
+        .item {
+          padding-right: 30px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
         }
       }
       .s_item {
@@ -161,6 +275,11 @@ const page = css`
           width: 100%;
           object-fit: cover;
         }
+        .cover {
+          height: 210px;
+          width: 100%;
+          overflow: hidden;
+        }
         padding: 18px 0;
         font-size: 16px;
         line-height: 28px;
@@ -171,11 +290,19 @@ const page = css`
           font-size: 18px;
         }
       }
-      a {
+      .item {
+        width: 100%;
         color: #333;
+        cursor: pointer;
+        overflow: hidden;
+        transition: all 0.2s ease-in-out;
         &:hover {
           color: var(--vt-c-primary);
           text-decoration: underline;
+          img {
+            transform: scale(1.2);
+            transition: all 0.2s ease-in-out;
+          }
         }
       }
       .list_more {

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

@@ -38,11 +38,17 @@ export default defineComponent({
       });
     };
     const renderTitle = (title?: string) => {
-      if (title && title.length > 30) {
+      if (title) {
         return title.substring(0, 30) + "...";
       }
       return title;
     };
+    const renderSummary = (summary?: string) => {
+      if (summary) {
+        return summary.substring(0, 60) + "...";
+      }
+      return "";
+    };
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>
@@ -66,7 +72,9 @@ export default defineComponent({
                       </div>
                       <div class={"info_box"}>
                         <div class={"item_tit"}>{renderTitle(e.title)}</div>
-                        <div class={"item_desc"}>{e.summary + "..."}</div>
+                        <div class={"item_desc"}>
+                          {renderSummary(e.summary)}
+                        </div>
                         <div class={"item_date"}>
                           {dayjs(e.createTime).format("YYYY.MM.DD")}
                         </div>
@@ -164,6 +172,8 @@ const page = css`
         overflow: hidden;
       }
       .item_desc {
+        height: 72px;
+        overflow: hidden;
         margin-top: 20px;
         font-size: 16px;
         line-height: 24px;

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

@@ -66,6 +66,12 @@ export default defineComponent({
       }
       return title;
     };
+    const renderSummary = (summary?: string) => {
+      if (summary) {
+        return summary.substring(0, 60) + "...";
+      }
+      return "";
+    };
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>
@@ -130,7 +136,7 @@ export default defineComponent({
                                       {renderTitle(e.title)}
                                     </div>
                                     <div class={"item_desc"}>
-                                      {e.summary + "..."}
+                                      {renderSummary(e.summary)}
                                     </div>
                                     <div class={"item_date"}>
                                       {dayjs(e.createTime).format("YYYY.MM.DD")}
@@ -277,6 +283,8 @@ const page = css`
           color: #333333;
         }
         .item_desc {
+          height: 72px;
+          overflow: hidden;
           margin-top: 20px;
           font-size: 16px;
           line-height: 24px;