layout

src/App.tsx

@@ -3,6 +3,7 @@ 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";
 export default defineComponent(() => {
   return () => (
     <Layout>
@@ -12,7 +13,9 @@ export default defineComponent(() => {
       <Content>
         <router-view></router-view>
       </Content>
-      <Footer></Footer>
+      <Footer class={FooterLayout}>
+        <FooterComponent />
+      </Footer>
     </Layout>
   );
 });
@@ -24,3 +27,11 @@ const HeaderLayout = css`
     background-color: transparent;
   }
 `;
+const FooterLayout = css`
+  &.ant-layout-footer {
+    height: auto;
+    line-height: 1;
+    padding: 0;
+    background-color: transparent;
+  }
+`;

src/components/layout/Footer.tsx

@@ -0,0 +1,128 @@
+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,6 +1,7 @@
 import { css } from "@linaria/core";
 import { Space } from "ant-design-vue";
 import { defineComponent } from "vue";
+import Menu from "./Menu";
 
 export default defineComponent(() => {
   return () => (
@@ -22,7 +23,9 @@ export default defineComponent(() => {
             <img src={getImageUrl("logo_header.png")} />
           </router-link>
         </div>
-        <div class={"menu flex-1"}></div>
+        <div class={"menu flex-1"}>
+          <Menu />
+        </div>
       </div>
     </div>
   );
@@ -49,5 +52,8 @@ const HeaderLayout = css`
         object-fit: contain;
       }
     }
+    .menu {
+      padding-left: 50px;
+    }
   }
 `;

src/components/layout/Menu.tsx

@@ -1,54 +1,115 @@
 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";
-const menuConfig = [
-  {
-    title: "学院概述",
-    url: "",
-    children: [
-      {
-        title: "学院简介",
-        url: "",
-      },
-      {
-        title: "学院领导",
-        url: "",
-      },
-      {
-        title: "历史沿革",
-        url: "",
-      },
-      {
-        title: "组织机构",
-        url: "",
-      },
-    ],
-  },
-  { title: "党建工作", url: "" },
-  { title: "新闻公告", url: "" },
-  { title: "专业建设", url: "" },
-  { title: "师资队伍", url: "" },
-  { title: "人才培养", url: "" },
-  { title: "招生就业", url: "" },
-  { title: "学科建设", url: "" },
-  { title: "科研创作", url: "" },
-  { title: "学生工作", url: "" },
-];
+import { HeaderMenuConfig } from "./MenuConfig";
 export default defineComponent({
-  stup() {
+  setup() {
     return () => (
       <div class={MenuLayout}>
-        {menuConfig.map((e) => {
-          return <MenuItem data={e} />;
+        {HeaderMenuConfig.map((e: LayoutMenu) => {
+          return <Menus data={e} />;
         })}
       </div>
     );
   },
 });
-const MenuItem = defineComponent({
+const Menus = defineComponent({
   props: {
     data: any(),
   },
-  setup() {},
+  setup(props) {
+    const menuRender = (dropUrls: any) => {
+      return (
+        <Menu class={DropMenu}>
+          {dropUrls.map((e: LayoutMenu) => {
+            return (
+              <Menu.Item>
+                <RouterLink to={e.url}>{e.title}</RouterLink>
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      );
+    };
+
+    return () => {
+      const menu = props.data;
+      return (
+        <>
+          {menu.children && menu.children.length > 0 ? (
+            <Dropdown overlay={menuRender(menu.children)}>
+              <RouterLink to={menu.url}>{menu.title}</RouterLink>
+            </Dropdown>
+          ) : (
+            <RouterLink to={menu.url}>{menu.title}</RouterLink>
+          )}
+        </>
+      );
+    };
+  },
 });
-const MenuLayout = css``;
+const MenuLayout = css`
+  display: flex;
+  align-items: center;
+  a {
+    flex: 1;
+    position: relative;
+    margin-top: 14px;
+    padding-bottom: 24px;
+    font-size: 16px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.8);
+    &:hover {
+      color: rgba(255, 255, 255, 1);
+      &::before {
+        width: 24px;
+      }
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 2px;
+      background-color: rgba(255, 255, 255, 1);
+      transition: width 0.2s ease-in-out;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 16px;
+      border-right: 1px solid rgba(255, 255, 255, 0.3);
+      transform: skewX(-15deg);
+    }
+    &:last-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+`;
+const DropMenu = css`
+  &.ant-dropdown-menu {
+    padding: 10px 0;
+    border-radius: 0;
+    .ant-dropdown-menu-item {
+      padding: 0;
+      &:hover {
+        a {
+          color: var(--vt-c-primary);
+        }
+      }
+      a {
+        padding: 8px 12px;
+        display: block;
+        text-align: center;
+      }
+    }
+  }
+`;

src/components/layout/MenuConfig.ts

@@ -0,0 +1,308 @@
+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/styles/main.css

@@ -4,3 +4,9 @@
   width: 100%;
   height: 100%;
 }
+
+.global-w {
+  max-width: 1644px;
+  width: 100%;
+  margin: 0 auto;
+}

src/typings/asset.d.ts

@@ -1 +1,7 @@
 declare var getImageUrl: (url: IAssetURLs) => string;
+
+declare interface LayoutMenu {
+  title: string;
+  url: string;
+  children?: { title: string; url: string }[];
+}