list

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

@@ -0,0 +1,192 @@
+import { css } from "@linaria/core";
+import Image from "@/components/Image";
+import { renderSummary, renderTitle } from "@/modules/objects";
+import { ArrowRightOutlined } from "@ant-design/icons-vue";
+import { Empty } from "ant-design-vue";
+import dayjs from "dayjs";
+import { defineComponent } from "vue";
+import { RouterLink, useRouter } from "vue-router";
+import { any, string } from "vue-types";
+export default defineComponent({
+  props: {
+    categoryId: string(),
+    list: any(),
+  },
+  setup(props) {
+    const router = useRouter();
+
+    const turnPage = (aid: string) => {
+      router.push({
+        name: "article",
+        params: { id: props.categoryId },
+        query: { aid },
+      });
+    };
+    return () => (
+      <div class={ListRoot}>
+        {props.list.length > 0 ? (
+          <div class={"tab_list"}>
+            {props.list.map((e: ArticleItem) => {
+              return (
+                <div class={"list_item"}>
+                  <div
+                    class={"item"}
+                    onClick={() => {
+                      turnPage(e._id);
+                    }}
+                  >
+                    <div class={"list_img"}>
+                      <Image src={e.cover} />
+                    </div>
+                    <div class={"info_box"}>
+                      <div class={"item_tit"}>{renderTitle(e.title)}</div>
+                      <div class={"item_desc"}>{renderSummary(e.summary)}</div>
+                      <div class={"item_date"}>
+                        {dayjs(e.createTime).format("YYYY.MM.DD")}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div class={"ant-list-empty-text"}>
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </div>
+        )}
+        <div class={"list_more"}>
+          <RouterLink to={`/detail/${props.categoryId}`}>
+            查看更多
+            <ArrowRightOutlined class={"arrow"} />
+          </RouterLink>
+        </div>
+      </div>
+    );
+  },
+});
+const ListRoot = css`
+  .tab_list {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+    .list_item {
+      width: 100%;
+      background-color: #fff;
+      overflow: hidden;
+      position: relative;
+      .item {
+        position: relative;
+        display: block;
+        border-bottom: 2px solid rgba(159, 159, 159, 0.5);
+        cursor: pointer;
+        &::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 {
+        height: 56px;
+        font-size: 20px;
+        line-height: 28px;
+        color: #333333;
+        overflow: hidden;
+      }
+      .item_desc {
+        height: 72px;
+        overflow: hidden;
+        margin-top: 20px;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+        color: #666666;
+        word-break: break-all;
+      }
+      .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%;
+    }
+  }
+  @media screen and (max-width: 1280px) {
+    background-size: cover;
+    .tab_list {
+      grid-template-columns: repeat(2, 1fr);
+      .list_item {
+        .list_img {
+          height: 300px;
+        }
+      }
+    }
+    .list_more {
+      a {
+        color: #fff;
+      }
+      .arrow {
+        border-color: #fff;
+      }
+    }
+  }
+  @media screen and (max-width: 750px) {
+    .tab_list {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+`;

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

@@ -1,17 +1,11 @@
 import { css } from "@linaria/core";
 
-import Image from "@/components/Image";
 import { useArticle } from "@/modules";
-import { ArrowRightOutlined } from "@ant-design/icons-vue";
-import { Empty } from "ant-design-vue";
-import dayjs from "dayjs";
 import { defineComponent, onMounted, reactive } from "vue";
-import { RouterLink, useRouter } from "vue-router";
-import { renderSummary, renderTitle } from "@/modules/objects";
+import CompList from "./CompList";
 export default defineComponent({
   setup() {
     const storeArt = useArticle();
-    const router = useRouter();
     const categoryId = "6464b7398dcb7ddb98b57a60";
     const state = reactive({
       list: [],
@@ -31,13 +25,7 @@ export default defineComponent({
       const list = res.list || [];
       state.list = list;
     };
-    const turnPage = (aid: string) => {
-      router.push({
-        name: "article",
-        params: { id: categoryId },
-        query: { aid },
-      });
-    };
+
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div class={"global_w"}>
@@ -45,46 +33,7 @@ export default defineComponent({
             科研创作<span>/</span>
             <span>Scientific Research</span>
           </div>
-          {state.list.length > 0 ? (
-            <div class={"tab_list"}>
-              {state.list.map((e: ArticleItem) => {
-                return (
-                  <div class={"list_item"}>
-                    <div
-                      class={"item"}
-                      onClick={() => {
-                        turnPage(e._id);
-                      }}
-                    >
-                      <div class={"list_img"}>
-                        <Image src={e.cover} />
-                      </div>
-                      <div class={"info_box"}>
-                        <div class={"item_tit"}>{renderTitle(e.title)}</div>
-                        <div class={"item_desc"}>
-                          {renderSummary(e.summary)}
-                        </div>
-                        <div class={"item_date"}>
-                          {dayjs(e.createTime).format("YYYY.MM.DD")}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div class={"ant-list-empty-text"}>
-              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            </div>
-          )}
-
-          <div class={"list_more"}>
-            <RouterLink to={`/detail/${categoryId}`}>
-              查看更多
-              <ArrowRightOutlined class={"arrow"} />
-            </RouterLink>
-          </div>
+          <CompList list={state.list} categoryId={categoryId} />
         </div>
       </div>
     );
@@ -93,127 +42,8 @@ export default defineComponent({
 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;
-      .item {
-        position: relative;
-        display: block;
-        border-bottom: 2px solid rgba(159, 159, 159, 0.5);
-        cursor: pointer;
-        &::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 {
-        height: 56px;
-        font-size: 20px;
-        line-height: 28px;
-        color: #333333;
-        overflow: hidden;
-      }
-      .item_desc {
-        height: 72px;
-        overflow: hidden;
-        margin-top: 20px;
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 400;
-        color: #666666;
-        word-break: break-all;
-      }
-      .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%;
-    }
-  }
+
   @media screen and (max-width: 1280px) {
     background-size: cover;
-    .tab_list {
-      grid-template-columns: repeat(2, 1fr);
-      .list_item {
-        .list_img {
-          height: 300px;
-        }
-      }
-    }
-    .list_more {
-      a {
-        color: #fff;
-      }
-      .arrow {
-        border-color: #fff;
-      }
-    }
-  }
-  @media screen and (max-width: 750px) {
-    .tab_list {
-      grid-template-columns: repeat(1, 1fr);
-    }
   }
 `;

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

@@ -8,6 +8,7 @@ import { useArticle, useCategory } from "@/modules";
 import { RouterLink, useRouter } from "vue-router";
 import dayjs from "dayjs";
 import { renderSummary, renderTitle } from "@/modules/objects";
+import CompList from "./CompList";
 export default defineComponent({
   setup() {
     const storeCategory = useCategory();
@@ -112,48 +113,11 @@ export default defineComponent({
                   const list = state.allList.get(currId);
                   return (
                     <TabPane tab={item.name} key={item._id}>
-                      {list && list.length > 0 ? (
-                        <div class={"tab_list"}>
-                          {list.map((e: ArticleItem) => {
-                            return (
-                              <div class={"list_item"}>
-                                <div
-                                  class={"item"}
-                                  onClick={() => {
-                                    turnPage(e._id, item._id);
-                                  }}
-                                >
-                                  <div class={"list_img"}>
-                                    <Image src={e.cover} />
-                                  </div>
-                                  <div class={"info_box"}>
-                                    <div class={"item_tit"}>
-                                      {renderTitle(e.title)}
-                                    </div>
-                                    <div class={"item_desc"}>
-                                      {renderSummary(e.summary)}
-                                    </div>
-                                    <div class={"item_date"}>
-                                      {dayjs(e.createTime).format("YYYY.MM.DD")}
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      ) : (
-                        <div class={"ant-list-empty-text"}>
-                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-                        </div>
-                      )}
-
-                      <div class={"list_more"}>
-                        <RouterLink to={`/detail/${item._id}`}>
-                          查看更多
-                          <ArrowRightOutlined class={"arrow"} />
-                        </RouterLink>
-                      </div>
+                      <CompList
+                        key={item._id}
+                        list={list}
+                        categoryId={item._id}
+                      />
                     </TabPane>
                   );
                 });
@@ -213,106 +177,16 @@ const page = css`
         }
       }
     }
-    .tab_list {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 24px;
-      .list_item {
-        width: 100%;
-        background-color: #fff;
-        overflow: hidden;
-        position: relative;
-        .item {
-          position: relative;
-          display: block;
-          border-bottom: 2px solid rgba(159, 159, 159, 0.5);
-          cursor: pointer;
-          &::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: 28px;
-          height: 56px;
-          overflow: hidden;
-          color: #333333;
-        }
-        .item_desc {
-          height: 72px;
-          overflow: hidden;
-          margin-top: 20px;
-          font-size: 16px;
-          line-height: 24px;
-          font-weight: 400;
-          color: #666666;
-          word-break: break-all;
-        }
-        .item_date {
-          font-size: 14px;
-          margin-top: 30px;
-          font-weight: 300;
-          color: #999999;
-        }
+    .list_more {
+      a {
+        color: var(--vt-c-primary);
+      }
+      .arrow {
+        border-color: var(--vt-c-primary);
       }
     }
   }
-  .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%;
-    }
-  }
+
   @media screen and (max-width: 1280px) {
     .talent_tab {
       .ant-tabs-nav {
@@ -334,14 +208,6 @@ const page = css`
           }
         }
       }
-      .tab_list {
-        grid-template-columns: repeat(2, 1fr);
-        .list_item {
-          .list_img {
-            height: 300px;
-          }
-        }
-      }
     }
   }
   @media screen and (max-width: 750px) {
@@ -351,9 +217,6 @@ const page = css`
           margin-bottom: 10px;
         }
       }
-      .tab_list {
-        grid-template-columns: repeat(1, 1fr);
-      }
     }
   }
 `;