list

src/components/layout/Footer.tsx

@@ -1,128 +0,0 @@
-import { css } from "@linaria/core";
-import { defineComponent } from "vue";
-import { FooterMenuConfig } from "./MenuConfig";
-import { RouterLink } from "vue-router";
-export default defineComponent(() => {
-  return () => (
-    <div class={FooterLayout}>
-      <div class={"lay_footer"}>
-        <div class={"global-w footer_menu"}>
-          <div class={"logo"}>
-            <div class={"footer_logo"}>
-              <img src={getImageUrl("logo_footer.png")} />
-            </div>
-            <div class={"footer_tips"}>
-              <img src={getImageUrl("footer_tips.png")} />
-            </div>
-            <div class={"contact_view"}>
-              <p class={"title"}>关注我们</p>
-              <p>电话 : 028-87723068</p>
-              <p>传真 : 028-87723068</p>
-              <p>中国四川省出都市西华大学艺术大楼</p>
-              <p class={"qrcode"}>
-                <img src={getImageUrl("footer_qrcode.png")} />
-              </p>
-            </div>
-          </div>
-          <div class={"menus"}>
-            {FooterMenuConfig.map((e: LayoutMenu) => {
-              const links =
-                e.children &&
-                e.children.length > 0 &&
-                e.children.map((item: LayoutMenu) => {
-                  return <RouterLink to={item.url}>{item.title}</RouterLink>;
-                });
-              return (
-                <div class={"menu_item"}>
-                  <div class={"links_title"}>{e.title}</div>
-                  <div class={"links"}>{links}</div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-      <div class={"copyright"}>
-        版权所有 2007-2023 西华大学美术与艺术学院 Copyright © 2007-2023 CAFA.
-        All Rights Reserved.
-      </div>
-    </div>
-  );
-});
-const FooterLayout = css`
-  .lay_footer {
-    background-color: #454847;
-    .footer_menu {
-      padding: 100px 140px;
-      display: flex;
-      .logo {
-        padding-right: 75px;
-        border-right: 1px solid rgba(112, 112, 112, 0.5);
-        .footer_logo {
-          img {
-            height: 65px;
-            object-fit: contain;
-          }
-        }
-        .footer_tips {
-          margin-top: 88px;
-          img {
-            height: 38px;
-            object-fit: contain;
-          }
-        }
-        .contact_view {
-          margin-top: 90px;
-          color: rgba(255, 255, 255, 1);
-          font-size: 14px;
-          p {
-            margin-top: 18px;
-          }
-          .title {
-            font-size: 18px;
-            margin-top: 0;
-          }
-          .qrcode {
-            margin-top: 35px;
-            img {
-              height: 120px;
-              object-fit: contain;
-            }
-          }
-        }
-      }
-      .menus {
-        flex: 1;
-        padding: 30px 100px 0;
-        display: grid;
-        gap: 100px;
-        grid-template-columns: repeat(4, 1fr);
-        .links_title {
-          font-size: 18px;
-          color: rgba(255, 255, 255, 1);
-        }
-        .links {
-          a {
-            margin-top: 18px;
-            display: block;
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.5);
-            &:hover {
-              color: rgba(255, 255, 255, 1);
-            }
-            &:first-child {
-              margin-top: 20px;
-            }
-          }
-        }
-      }
-    }
-  }
-  .copyright {
-    padding: 28px 0;
-    font-size: 12px;
-    text-align: center;
-    background-color: #242424;
-    color: rgba(255, 255, 255, 0.6);
-  }
-`;

src/components/layout/Header.tsx

@@ -1,59 +0,0 @@
-import { css } from "@linaria/core";
-import { Space } from "ant-design-vue";
-import { defineComponent } from "vue";
-import Menu from "./Menu";
-
-export default defineComponent(() => {
-  return () => (
-    <div class={HeaderLayout}>
-      <div class={"lay_top flex align-center justify-between"}>
-        <div>立足四川、面向全国，贴近行业，服务社会。</div>
-        <div>
-          <Space size={50}>
-            <a>西华首页</a>
-            <a>校友空间</a>
-            <a>师生作品</a>
-            <a>资料下载</a>
-          </Space>
-        </div>
-      </div>
-      <div class={"lay_menu flex"}>
-        <div class={"menu_logo"}>
-          <router-link to="/">
-            <img src={getImageUrl("logo_header.png")} />
-          </router-link>
-        </div>
-        <div class={"menu flex-1"}>
-          <Menu />
-        </div>
-      </div>
-    </div>
-  );
-});
-const HeaderLayout = css`
-  .lay_top {
-    padding: 10px 30px;
-    background: #242424;
-    color: var(--vt-c-white);
-
-    a {
-      color: var(--vt-c-white);
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-  .lay_menu {
-    padding: 22px 30px;
-    background: var(--vt-c-primary);
-    .menu_logo {
-      img {
-        height: 54px;
-        object-fit: contain;
-      }
-    }
-    .menu {
-      padding-left: 50px;
-    }
-  }
-`;

src/components/layout/MenuConfig.ts

@@ -1,308 +0,0 @@
-export const HeaderMenuConfig = [
-  {
-    title: "学院概述",
-    url: "",
-    children: [
-      {
-        title: "学院简介",
-        url: "",
-      },
-      {
-        title: "学院领导",
-        url: "",
-      },
-      {
-        title: "历史沿革",
-        url: "",
-      },
-      {
-        title: "组织机构",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "党建工作",
-    url: "",
-    children: [
-      {
-        title: "简介",
-        url: "",
-      },
-      {
-        title: "组织建设",
-        url: "",
-      },
-      {
-        title: "学习天地",
-        url: "",
-      },
-      {
-        title: "组织发展",
-        url: "",
-      },
-    ],
-  },
-  { title: "新闻公告", url: "" },
-  { title: "专业建设", url: "" },
-  {
-    title: "师资队伍",
-    url: "",
-    children: [
-      {
-        title: "教授",
-        url: "",
-      },
-      {
-        title: "副教授",
-        url: "",
-      },
-      {
-        title: "讲师",
-        url: "",
-      },
-      {
-        title: "助教",
-        url: "",
-      },
-    ],
-  },
-  { title: "人才培养", url: "" },
-  {
-    title: "招生就业",
-    url: "",
-    children: [
-      {
-        title: "招生",
-        url: "",
-      },
-      {
-        title: "就业",
-        url: "",
-      },
-      {
-        title: "就业去向",
-        url: "",
-      },
-    ],
-  },
-  { title: "学科建设", url: "" },
-  {
-    title: "科研创作",
-    url: "",
-    children: [
-      {
-        title: "科研机构",
-        url: "",
-      },
-      {
-        title: "科研动态",
-        url: "",
-      },
-      {
-        title: "科研获奖",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "学生工作",
-    url: "",
-    children: [
-      {
-        title: "学生新闻",
-        url: "",
-      },
-      {
-        title: "奖助勤贷",
-        url: "",
-      },
-      {
-        title: "学风建设",
-        url: "",
-      },
-      {
-        title: "团学活动",
-        url: "",
-      },
-      {
-        title: "第二课堂",
-        url: "",
-      },
-    ],
-  },
-];
-export const FooterMenuConfig = [
-  {
-    title: "学院概况",
-    url: "",
-    children: [
-      {
-        title: "简介",
-        url: "",
-      },
-      {
-        title: "学院领导",
-        url: "",
-      },
-      {
-        title: "历史沿革",
-        url: "",
-      },
-      {
-        title: "组织机构",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "教育教学",
-    url: "",
-    children: [
-      {
-        title: "本科生培养",
-        url: "",
-      },
-      {
-        title: "研究生培养",
-        url: "",
-      },
-      {
-        title: "招生信息",
-        url: "",
-      },
-      {
-        title: "学科专业",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "科研创作",
-    url: "",
-    children: [
-      {
-        title: "科研机构",
-        url: "",
-      },
-      {
-        title: "科研动态",
-        url: "",
-      },
-      {
-        title: "科研获奖",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "师资队伍",
-    url: "",
-    children: [
-      {
-        title: "教授",
-        url: "",
-      },
-      {
-        title: "副教授",
-        url: "",
-      },
-      {
-        title: "讲师",
-        url: "",
-      },
-      {
-        title: "助教",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "学生工作",
-    url: "",
-    children: [
-      {
-        title: "学生新闻",
-        url: "",
-      },
-      {
-        title: "奖助勤贷",
-        url: "",
-      },
-      {
-        title: "学风建设",
-        url: "",
-      },
-      {
-        title: "团学活动",
-        url: "",
-      },
-      {
-        title: "第二课堂",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "招生就业",
-    url: "",
-    children: [
-      {
-        title: "招生",
-        url: "",
-      },
-      {
-        title: "就业",
-        url: "",
-      },
-      {
-        title: "就业去向",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "党建工作",
-    url: "",
-    children: [
-      {
-        title: "简介",
-        url: "",
-      },
-      {
-        title: "组织建设",
-        url: "",
-      },
-      {
-        title: "学习天地",
-        url: "",
-      },
-      {
-        title: "组织发展",
-        url: "",
-      },
-    ],
-  },
-  {
-    title: "校友空间",
-    url: "",
-    children: [
-      {
-        title: "校友服务",
-        url: "",
-      },
-      {
-        title: "校友组织",
-        url: "",
-      },
-      {
-        title: "校友活动",
-        url: "",
-      },
-      {
-        title: "校友名录",
-        url: "",
-      },
-    ],
-  },
-];

src/modules/module/category/index.ts

@@ -25,7 +25,12 @@ function parseTreeData(categoryList: any) {
     let ret: any = {
       _id: item._id,
       name: item.name,
+      subName: item.subName,
       type: item.type,
+      pid: item.pid,
+      cover: item.cover,
+      sort: item.sort,
+      isHome: item.isHome,
     };
     if (item.children?.length) {
       ret.children = [];

src/styles/main.css

@@ -6,11 +6,16 @@
   background-color: #f0f2f5;
 }
 
-.global-w {
+.global_w {
   max-width: 1644px;
   width: 100%;
   margin: 0 auto;
 }
+.detail_page_w {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
 .image_error {
   background: #f2f2f2 url("../assets/image_error.png") no-repeat center;
 }

src/typings/asset.d.ts

@@ -1,15 +1,11 @@
 declare var getImageUrl: (url: IAssetURLs) => string;
 
-declare interface LayoutMenu {
-  title: string;
-  url: string;
-  children?: { title: string; url: string }[];
-}
 declare type CategoryItem = {
   _id: string;
   pid: string; // 分类的上层id // 默认为top
   name: string; //分类封面图
   cover: string; //分类名称
+  subName?: string;
   sort: number;
   type: string; // 分类类型 list,detail,download
   isHome: bool; // 是否展示到首页

src/views/website/App.tsx

@@ -2,36 +2,49 @@ import { css } from "@linaria/core";
 import { Layout } from "ant-design-vue";
 import { defineComponent } from "vue";
 const { Header, Content, Footer } = Layout;
-import HeaderComponent from "@/components/layout/Header";
-import FooterComponent from "@/components/layout/Footer";
+import HeaderComponent from "@/views/website/components/layout/Header";
+import FooterComponent from "@/views/website/components/layout/Footer";
 import { useArticle, useCategory } from "@/modules";
+import { Provider } from "@/components/Provider";
 export default defineComponent(() => {
   const storeCategory = useCategory();
   storeCategory.initCategories();
   const artStore = useArticle();
   artStore.initArticle();
   return () => (
-    <Layout>
-      <Header class={HeaderLayout}>
-        <HeaderComponent />
-      </Header>
-      <Content>
-        <router-view></router-view>
-      </Content>
-      <Footer class={FooterLayout}>
-        <FooterComponent />
-      </Footer>
-    </Layout>
+    <Provider>
+      <Layout>
+        <Header class={HeaderLayout}>
+          <HeaderComponent />
+        </Header>
+        <Content class={ContentLayout}>
+          <router-view></router-view>
+        </Content>
+        <Footer class={FooterLayout}>
+          <FooterComponent />
+        </Footer>
+      </Layout>
+    </Provider>
   );
 });
 const HeaderLayout = css`
   &.ant-layout-header {
+    /* position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    width: 100%; */
     height: auto;
     line-height: 1;
     padding: 0;
     background-color: transparent;
   }
 `;
+const ContentLayout = css`
+  &.ant-layout-content {
+    min-height: 100vh;   
+  }
+`;
 const FooterLayout = css`
   &.ant-layout-footer {
     height: auto;

src/views/website/components/layout/Footer.tsx

@@ -0,0 +1,176 @@
+import { useCategory } from "@/modules";
+import { css } from "@linaria/core";
+import { Space } from "ant-design-vue";
+import { defineComponent } from "vue";
+
+import { RouterLink } from "vue-router";
+
+export default defineComponent(() => {
+  const storeCategory = useCategory();
+  return () => {
+    const mainCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
+      return e.isHome == true;
+    });
+    return (
+      <div class={FooterLayout}>
+        <div class={"footer_fix_link"}>
+          <Space direction="vertical" size={24}>
+            <a
+              class={"xihua_link"}
+              href="http://www.xhu.edu.cn/"
+              target="_blank"
+            >
+              西华主页
+            </a>
+            <RouterLink class={"index_link"} to={"/"}>
+              学院主页
+            </RouterLink>
+          </Space>
+        </div>
+        <div class={"lay_footer"}>
+          <div class={"global_w footer_menu"}>
+            <div class={"logo"}>
+              <div class={"footer_logo"}>
+                <img src={getImageUrl("logo_footer.png")} />
+              </div>
+              <div class={"footer_tips"}>
+                <img src={getImageUrl("footer_tips.png")} />
+              </div>
+              <div class={"contact_view"}>
+                <p class={"title"}>关注我们</p>
+                <p>电话 : 028-87723068</p>
+                <p>传真 : 028-87723068</p>
+                <p>中国四川省出都市西华大学艺术大楼</p>
+                <p class={"qrcode"}>
+                  <img src={getImageUrl("footer_qrcode.png")} />
+                </p>
+              </div>
+            </div>
+            <div class={"menus"}>
+              {mainCate.map((e: CategoryItem) => {
+                const links =
+                  e.children &&
+                  e.children.length > 0 &&
+                  e.children.map((item: CategoryItem) => {
+                    return (
+                      <RouterLink to={`/detail/${item._id}`}>
+                        {item.name}
+                      </RouterLink>
+                    );
+                  });
+                return (
+                  <div class={"menu_item"}>
+                    <div class={"links_title"}>{e.name}</div>
+                    <div class={"links"}>{links}</div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <div class={"copyright"}>
+          版权所有 2007-2023 西华大学美术与艺术学院 Copyright © 2007-2023 CAFA.
+          All Rights Reserved.
+        </div>
+      </div>
+    );
+  };
+});
+const FooterLayout = css`
+  .footer_fix_link {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    z-index: 9;
+    a {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      writing-mode: vertical-lr;
+      width: 40px;
+      height: 105px;
+    }
+    .xihua_link {
+      background: url("@/assets/bg_links_1.png") no-repeat center/100%;
+    }
+    .index_link {
+      background: url("@/assets/bg_links_2.png") no-repeat center/100%;
+    }
+  }
+  .lay_footer {
+    background-color: #454847;
+    .footer_menu {
+      padding: 100px 140px;
+      display: flex;
+      .logo {
+        padding-right: 75px;
+        border-right: 1px solid rgba(112, 112, 112, 0.5);
+        .footer_logo {
+          img {
+            height: 65px;
+            object-fit: contain;
+          }
+        }
+        .footer_tips {
+          margin-top: 88px;
+          img {
+            height: 38px;
+            object-fit: contain;
+          }
+        }
+        .contact_view {
+          margin-top: 90px;
+          color: rgba(255, 255, 255, 1);
+          font-size: 14px;
+          p {
+            margin-top: 18px;
+          }
+          .title {
+            font-size: 18px;
+            margin-top: 0;
+          }
+          .qrcode {
+            margin-top: 35px;
+            img {
+              height: 120px;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+      .menus {
+        flex: 1;
+        padding: 30px 0 0 75px;
+        display: grid;
+        gap: 40px;
+        grid-template-columns: repeat(5, 1fr);
+        .links_title {
+          font-size: 18px;
+          color: rgba(255, 255, 255, 1);
+        }
+        .links {
+          a {
+            margin-top: 18px;
+            display: block;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.5);
+            &:hover {
+              color: rgba(255, 255, 255, 1);
+            }
+            &:first-child {
+              margin-top: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .copyright {
+    padding: 28px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: #242424;
+    color: rgba(255, 255, 255, 0.6);
+  }
+`;

src/views/website/components/layout/Header.tsx

@@ -0,0 +1,71 @@
+import { css } from "@linaria/core";
+import { Space } from "ant-design-vue";
+import { defineComponent } from "vue";
+import Menu from "./Menu";
+import { useCategory } from "@/modules";
+
+export default defineComponent(() => {
+  const storeCategory = useCategory();
+
+  return () => {
+    const topCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
+      return e.isHome == false;
+    });
+    const mainCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
+      return e.isHome == true;
+    });
+    return (
+      <div class={HeaderLayout}>
+        <div class={"lay_top flex align-center justify-between"}>
+          <div>立足四川、面向全国，贴近行业，服务社会。</div>
+          <div>
+            <Space size={50}>
+              {topCate.map((e) => {
+                return (
+                  <router-link to={`/detail/${e._id}`}>{e.name}</router-link>
+                );
+              })}
+            </Space>
+          </div>
+        </div>
+        <div class={"lay_menu flex"}>
+          <div class={"menu_logo"}>
+            <router-link to="/">
+              <img src={getImageUrl("logo_header.png")} />
+            </router-link>
+          </div>
+          <div class={"menu flex-1"}>
+            <Menu data={mainCate} />
+          </div>
+        </div>
+      </div>
+    );
+  };
+});
+const HeaderLayout = css`
+  .lay_top {
+    padding: 10px 30px;
+    background: #242424;
+    color: var(--vt-c-white);
+
+    a {
+      color: var(--vt-c-white);
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+  .lay_menu {
+    padding: 16px 30px;
+    background: var(--vt-c-primary);
+    .menu_logo {
+      img {
+        height: 54px;
+        object-fit: contain;
+      }
+    }
+    .menu {
+      padding-left: 50px;
+    }
+  }
+`;

src/components/layout/Menu.tsx → src/views/website/components/layout/Menu.tsx

@@ -1,14 +1,17 @@
 import { css } from "@linaria/core";
 import { Dropdown, Menu } from "ant-design-vue";
+
 import { defineComponent } from "vue";
 import { RouterLink } from "vue-router";
 import { any } from "vue-types";
-import { HeaderMenuConfig } from "./MenuConfig";
 export default defineComponent({
-  setup() {
+  props: {
+    data: any(),
+  },
+  setup(props) {
     return () => (
       <div class={MenuLayout}>
-        {HeaderMenuConfig.map((e: LayoutMenu) => {
+        {props.data.map((e: CategoryItem) => {
           return <Menus data={e} />;
         })}
       </div>
@@ -23,10 +26,10 @@ const Menus = defineComponent({
     const menuRender = (dropUrls: any) => {
       return (
         <Menu class={DropMenu}>
-          {dropUrls.map((e: LayoutMenu) => {
+          {dropUrls.map((e: CategoryItem) => {
             return (
               <Menu.Item>
-                <RouterLink to={e.url}>{e.title}</RouterLink>
+                <RouterLink to={`/detail/${e._id}`}>{e.name}</RouterLink>
               </Menu.Item>
             );
           })}
@@ -40,10 +43,10 @@ const Menus = defineComponent({
         <>
           {menu.children && menu.children.length > 0 ? (
             <Dropdown overlay={menuRender(menu.children)}>
-              <RouterLink to={menu.url}>{menu.title}</RouterLink>
+              <RouterLink to={`/detail/${menu._id}`}>{menu.name}</RouterLink>
             </Dropdown>
           ) : (
-            <RouterLink to={menu.url}>{menu.title}</RouterLink>
+            <RouterLink to={`/detail/${menu._id}`}>{menu.name}</RouterLink>
           )}
         </>
       );

src/views/website/detail/DetailPage.tsx

@@ -0,0 +1,48 @@
+import { useArticle } from "@/modules";
+import { css } from "@linaria/core";
+import loading from "@/components/Provider/Loading";
+import { defineComponent, onMounted, reactive } from "vue";
+import { object } from "vue-types";
+
+export default defineComponent({
+  props: {
+    data: object<CategoryItem>(),
+  },
+  setup(props, { emit }) {
+    const data: any = props.data || {};
+    const artStore = useArticle();
+    const state = reactive({
+      data: {} as any,
+    });
+
+    onMounted(() => {
+      initDetail();
+    });
+
+    const initDetail = async () => {
+      loading.show("");
+      artStore.listController.state.query = JSON.stringify({
+        cid: data._id,
+      });
+      await artStore.listController.loadPage(1);
+      const item = artStore.listController.state.list[0] || {};
+      if (item._id) {
+        const detRes = await artStore.getArticleDetail(item);
+        if (detRes) {
+          state.data = detRes;
+        }
+      }
+      loading.hidden();
+    };
+    return () => {
+      return (
+        <div class={page}>
+          <div class={"detail_page_w"} innerHTML={state.data.content}></div>
+        </div>
+      );
+    };
+  },
+});
+const page = css`
+  line-height: 1.5;
+`;

src/views/website/detail/PageTabs.tsx

@@ -0,0 +1,68 @@
+import { css } from "@linaria/core";
+
+import { defineComponent } from "vue";
+import { any, string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    data: any(),
+    activeKey: string(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    console.log(props.data);
+    return () => {
+      return (
+        <div class={page}>
+          {props.data &&
+            props.data.map((e: CategoryItem) => {
+              return (
+                <div
+                  class={["tabs_item", e._id == props.activeKey ? "cur" : ""]}
+                  key={e._id}
+                  onClick={() => {
+                    emit("change", e);
+                  }}
+                >
+                  {e.name}
+                </div>
+              );
+            })}
+        </div>
+      );
+    };
+  },
+});
+const page = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .tabs_item {
+    position: relative;
+    margin: 0 30px;
+    height: 64px;
+    line-height: 64px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #666666;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      border-bottom: 2px solid var(--vt-c-primary);
+      transition: width 0.2s ease-in-out;
+    }
+    &.cur {
+      font-weight: 500;
+      color: #333;
+      &::after {
+        width: 48px;
+      }
+    }
+  }
+`;

src/views/website/detail/index.tsx

@@ -0,0 +1,149 @@
+import { useCategory } from "@/modules";
+import { css } from "@linaria/core";
+
+import { defineComponent, onMounted, reactive, watch } from "vue";
+import { useRoute } from "vue-router";
+import PageTabs from "./PageTabs";
+import detail from "@/views/admin/detail";
+import DetailPage from "./DetailPage";
+
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const categoryStore = useCategory();
+    const state = reactive({
+      currChild: {} as any,
+      currTree: {} as any,
+      currBg: "",
+    });
+    watch(
+      () => categoryStore.listController.state.list,
+      () => {
+        initCategory();
+      }
+    );
+    watch(
+      () => route.params.id,
+      () => {
+        initCategory();
+      }
+    );
+    onMounted(() => {
+      initCategory();
+    });
+    const initCategory = () => {
+      const id = route.params.id;
+      const currCategory = categoryStore.listController.state.list.find(
+        (e: CategoryItem) => {
+          return e._id == id;
+        }
+      );
+      console.log(currCategory);
+      if (!currCategory) {
+        return;
+      }
+      if (currCategory.pid == "top") {
+        state.currTree = categoryStore.categoryTree.find((e) => {
+          return e._id == id;
+        });
+        state.currChild = state.currTree.children[0];
+        return;
+      }
+      state.currChild = currCategory;
+      state.currTree = categoryStore.categoryTree.find((e) => {
+        return e._id == currCategory.pid;
+      });
+    };
+    const changeCurrChild = (e: any) => {
+      state.currChild = e;
+      console.log(e);
+    };
+
+    return () => {
+      return (
+        <div class={page}>
+          <div
+            class={"page_title_box"}
+            style={{
+              backgroundImage: `url(${
+                state.currChild.cover
+                  ? state.currChild.cover
+                  : state.currTree.cover
+              })`,
+            }}
+          >
+            <div class={"title detail_page_w"}>
+              <h1>{state.currTree.name}</h1>
+              <h2>{state.currTree.subName}</h2>
+            </div>
+          </div>
+          <div class={"page_tabs_box"}>
+            <div class="detail_page_w">
+              <PageTabs
+                data={state.currTree.children}
+                activeKey={state.currChild._id}
+                onChange={changeCurrChild}
+              />
+            </div>
+          </div>
+          <div class={"page_content"}>
+            {/* {state.currChild.children&&<} */}
+            {state.currChild.type == "detail" && (
+              <DetailPage key={state.currChild._id} data={state.currChild} />
+            )}
+          </div>
+        </div>
+      );
+    };
+  },
+});
+const page = css`
+  .page_title_box {
+    position: relative;
+    height: 500px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    transition: all 0.2s ease-in-out;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 220px;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+      opacity: 0.7;
+      z-index: 1;
+    }
+    .title {
+      position: relative;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding-bottom: 28px;
+      z-index: 2;
+      h1 {
+        font-size: 36px;
+        font-weight: 400;
+        margin-bottom: 16px;
+        color: #fff;
+      }
+      h2 {
+        margin-bottom: 0;
+        height: 1em;
+        font-size: 14px;
+        font-weight: 300;
+        color: #fff;
+      }
+    }
+  }
+  .page_tabs_box {
+    background-color: #fff;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .page_content {
+    padding: 50px 0;
+  }
+`;

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

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

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

@@ -11,7 +11,7 @@ export default defineComponent({
     return () => (
       <div class={[page, "home_lay_item_box"]}>
         <div>
-          <div class={"home_lay_title global-w"}>
+          <div class={"home_lay_title global_w"}>
             教师队伍<span>/</span>
             <span>FACUlTY</span>
           </div>

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

@@ -7,7 +7,7 @@ export default defineComponent({
   setup() {
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
+        <div class={"global_w"}>
           <div class={"home_lay_title"}>
             最新动态<span>/</span>
             <span>News</span>

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

@@ -6,7 +6,7 @@ export default defineComponent({
   setup() {
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
+        <div class={"global_w"}>
           <div class={"home_lay_title white "}>
             科研创作<span>/</span>
             <span>Scientific Research</span>

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

@@ -6,7 +6,7 @@ export default defineComponent({
   setup() {
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
+        <div class={"global_w"}>
           <div class={"home_lay_title"}>
             学生服务<span>/</span>
             <span>Services</span>

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

@@ -6,7 +6,7 @@ export default defineComponent({
   setup() {
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
+        <div class={"global_w"}>
           <div class={"home_lay_title"}>
             专业建设<span>/</span>
             <span>Speciality</span>

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

@@ -26,7 +26,7 @@ export default defineComponent({
 
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
+        <div class={"global_w"}>
           <Tabs activeKey={state.activeKey} class={"talent_tab"}>
             {{
               renderTabBar: () => {

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

@@ -33,7 +33,7 @@ export default defineComponent({
 
     return () => (
       <div class={[page, "home_lay_item_box"]}>
-        <div class={"global-w"}>
+        <div class={"global_w"}>
           <Tabs activeKey={state.activeKey} class={"talent_tab"}>
             {{
               renderTabBar: () => {

src/views/website/router/index.ts

@@ -7,13 +7,21 @@ const router = createRouter({
       path: "/",
       name: "home",
       component: () => import("../home"),
-    },   
+    },
+    {
+      path: "/detail/:id",
+      name: "detail",
+      component: () => import("../detail"),
+    },
     {
       path: "/404",
       name: "404",
       component: () => import("../../404"),
     },
   ],
+  scrollBehavior() {
+    return { left: 0, top: 0 };
+  },
 });
 
 export default router;