Home Explore Help
Register Sign In
bianjiang
/
xihuaDesign
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

media

bianjiang 1 year ago
parent
a68f734aee
commit
7251869211
13 changed files with 357 additions and 53 deletions
Split View Show Diff Stats
  1. 4 1
      index.html
  2. 11 6
      src/views/website/App.tsx
  3. 71 14
      src/views/website/components/layout/Header.tsx
  4. 8 3
      src/views/website/components/layout/Menu.tsx
  5. 120 0
      src/views/website/components/layout/MobileMenu.tsx
  6. 1 1
      src/views/website/detail/List.tsx
  7. 22 0
      src/views/website/home/components/Banner.tsx
  8. 29 0
      src/views/website/home/components/News.tsx
  9. 6 6
      src/views/website/home/components/Services.tsx
  10. 49 10
      src/views/website/home/components/Speciality.tsx
  11. 13 11
      src/views/website/home/components/Works.tsx
  12. 18 0
      src/views/website/home/index.tsx
  13. 5 1
      vite.config.ts

+ 4 - 1
index.html
View File 

@@ -3,7 +3,10 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <link rel="shortcut icon " type="images/x-icon" href="/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width, initial-scale=1.0,user-scalable=no"
 
+    />
 
     <title>西华大学美术与设计学院</title>
 
   </head>
 
   <body>

+ 11 - 6
src/views/website/App.tsx
View File 

@@ -29,20 +29,25 @@ export default defineComponent(() => {
 
 });
 
 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;
 
+    @media screen and (max-width: 1280px) {
 
+      position: fixed;
 
+      left: 0;
 
+      top: 0;
 
+      z-index: 99;
 
+      width: 100%;
 
+    }
 
   }
 
 `;
 
 const ContentLayout = css`
 
   &.ant-layout-content {
 
-    min-height: 100vh;   
+    min-height: 100vh;
 
+    @media screen and (max-width: 1280px) {
 
+      padding-top: 62px;
 
+    }
 
   }
 
 `;
 
 const FooterLayout = css`

+ 71 - 14
src/views/website/components/layout/Header.tsx
View File 

@@ -1,12 +1,16 @@
 
 import { css } from "@linaria/core";
 
-import { Space } from "ant-design-vue";
 
-import { defineComponent } from "vue";
 
+import { MenuOutlined } from "@ant-design/icons-vue";
 
+import { defineComponent, reactive } from "vue";
 
 import Menu from "./Menu";
 
 import { useCategory } from "@/modules";
 
+import { Drawer } from "ant-design-vue";
 
+import MobileMenu from "./MobileMenu";
 
 
 export default defineComponent(() => {
 
   const storeCategory = useCategory();
 
-
 
+  const state = reactive({
 
+    visible: false,
 
+  });
 
   return () => {
 
     const topCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
 
       return e.isHome == false;
 
@@ -17,15 +21,13 @@ export default defineComponent(() => {
 
     return (
 
       <div class={HeaderLayout}>
 
         <div class={"lay_top flex align-center justify-between"}>
 
-          <div>立足四川、面向全国，贴近行业，服务社会。</div>
 
+          <div class={"tips"}>立足四川、面向全国，贴近行业，服务社会。</div>
 
           <div class={"top_links"}>
 
-            <Space size={0}>
 
-              {topCate.map((e) => {
 
-                return (
 
-                  <router-link to={`/detail/${e._id}`}>{e.name}</router-link>
 
-                );
 
-              })}
 
-            </Space>
 
+            {topCate.map((e) => {
 
+              return (
 
+                <router-link to={`/detail/${e._id}`}>{e.name}</router-link>
 
+              );
 
+            })}
 
           </div>
 
         </div>
 
         <div class={"lay_menu flex"}>
 
@@ -37,6 +39,27 @@ export default defineComponent(() => {
 
           <div class={"menu flex-1"}>
 
             <Menu data={mainCate} />
 
           </div>
 
+          <div class={"mobileMenu"}>
 
+            <MenuOutlined
 
+              onClick={() => {
 
+                state.visible = true;
 
+              }}
 
+            />
 
+          </div>
 
+          <Drawer
 
+            width={200}
 
+            closable={false}
 
+            visible={state.visible}
 
+            onClose={() => {
 
+              state.visible = false;
 
+            }}
 
+          >
 
+            <MobileMenu
 
+              onChange={() => {
 
+                state.visible = false;
 
+              }}
 
+            />
 
+          </Drawer>
 
         </div>
 
       </div>
 
     );
 
@@ -47,7 +70,9 @@ const HeaderLayout = css`
 
     padding: 10px 30px;
 
     background: #242424;
 
     color: var(--vt-c-white);
 
-
 
+    .tips {
 
+      width: 300px;
 
+    }
 
     a {
 
       color: var(--vt-c-white);
 
       &:hover {
 
@@ -55,8 +80,13 @@ const HeaderLayout = css`
 
       }
 
     }
 
     .top_links {
 
-      .ant-space-item {
 
-        width: 130px;
 
+      flex: 1;
 
+      padding-left: 50px;
 
+      text-align: right;
 
+      a {
 
+        display: inline-block;
 
+        width: 10%;
 
+        max-width: 130px;
 
         text-align: center;
 
       }
 
     }
 
@@ -67,12 +97,39 @@ const HeaderLayout = css`
 
     background: var(--vt-c-primary);
 
     .menu_logo {
 
       img {
 
+        max-width: 300px;
 
         height: 54px;
 
         object-fit: contain;
 
       }
 
     }
 
+    .mobileMenu {
 
+      display: none;
 
+    }
 
     .menu {
 
       padding-left: 50px;
 
     }
 
   }
 
+  @media screen and (max-width: 1280px) {
 
+    .lay_top {
 
+      display: none;
 
+    }
 
+    .lay_menu {
 
+      padding: 16px 20px;
 
+      justify-content: space-between;
 
+      .menu_logo {
 
+        img {
 
+          height: 30px;
 
+        }
 
+      }
 
+      .menu {
 
+        display: none;
 
+      }
 
+      .mobileMenu {
 
+        display: block;
 
+        color: #fff;
 
+        cursor: pointer;
 
+        font-size: 28px;
 
+      }
 
+    }
 
+  }
 
 `;

+ 8 - 3
src/views/website/components/layout/Menu.tsx
View File 

@@ -54,17 +54,22 @@ const Menus = defineComponent({
 
   },
 
 });
 
 const MenuLayout = css`
 
-  display: flex;
 
+  /* display: flex;
 
   align-items: center;
 
-  justify-content: flex-end;
 
+  justify-content: flex-end; */
 
+  text-align: right;
 
+  width: 100%;
 
+  overflow: hidden;
 
   a {
 
-    flex: 1;
 
+    width: 10%;
 
+    display: inline-block;
 
     max-width: 130px;
 
     position: relative;
 
     margin-top: 16px;
 
     padding-bottom: 22px;
 
     font-size: 16px;
 
     text-align: center;
 
+    white-space: nowrap;
 
     color: rgba(255, 255, 255, 0.8);
 
     &:hover {
 
       color: rgba(255, 255, 255, 1);

+ 120 - 0
src/views/website/components/layout/MobileMenu.tsx
View File 

@@ -0,0 +1,120 @@
 
+import { css } from "@linaria/core";
 
+import { Menu } from "ant-design-vue";
 
+
 
+import { useCategory } from "@/modules";
 
+import { defineComponent } from "vue";
 
+import { useRouter } from "vue-router";
 
+
 
+export default defineComponent({
 
+  emits: ["change"],
 
+  setup(props, { emit }) {
 
+    const router = useRouter();
 
+    const categoryStore = useCategory();
 
+    const MenuRender = (item: CategoryItem) => {
 
+      if (item.children) {
 
+        return (
 
+          <Menu.SubMenu key={item._id} title={item.name}>
 
+            {item.children.map((subItem: any) => {
 
+              return (
 
+                <Menu.Item key={`/detail/${subItem._id}`}>
 
+                  <router-link to={`/detail/${subItem._id}`}>
 
+                    {subItem.name}
 
+                  </router-link>
 
+                </Menu.Item>
 
+              );
 
+            })}
 
+          </Menu.SubMenu>
 
+        );
 
+      } else {
 
+        return (
 
+          <Menu.Item key={`/detail/${item._id}`}>
 
+            <router-link to={`/detail/${item._id}`}>{item.name}</router-link>
 
+          </Menu.Item>
 
+        );
 
+      }
 
+    };
 
+    return () => (
 
+      <div class={MenuRoot}>
 
+        <Menu
 
+          mode="inline"
 
+          inlineIndent={12}
 
+          selectedKeys={[router.currentRoute.value.path]}
 
+          onClick={() => {
 
+            emit("change");
 
+          }}
 
+        >
 
+          {categoryStore.categoryTree.map((item: any) => {
 
+            return MenuRender(item);
 
+          })}
 
+        </Menu>
 
+      </div>
 
+    );
 
+  },
 
+});
 
+const MenuRoot = css`
 
+  .ant-menu {
 
+    font-size: 16px;
 
+    color: #333;
 
+    &.ant-menu-inline {
 
+      border-right: none;
 
+      .ant-menu-item {
 
+        &::after {
 
+          display: none;
 
+        }
 
+        a {
 
+          &:hover {
 
+            color: #333;
 
+          }
 
+        }
 
+      }
 
+      .ant-menu-submenu-title {
 
+        &:hover {
 
+          color: #333;
 
+        }
 
+      }
 
+      .ant-menu-submenu {
 
+        &:hover {
 
+          & > .ant-menu-submenu-title {
 
+            color: #333;
 
+            & > .ant-menu-submenu-arrow {
 
+              color: #333;
 
+            }
 
+          }
 
+        }
 
+        &.ant-menu-submenu-selected {
 
+          color: var(--vt-c-primary);
 
+          .ant-menu-submenu-title {
 
+            color: var(--vt-c-primary);
 
+            .ant-menu-submenu-arrow {
 
+              color: var(--vt-c-primary);
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .ant-menu-item {
 
+      &:hover {
 
+        color: #333;
 
+      }
 
+      &.ant-menu-item-selected {
 
+        background-color: var(--vt-c-primary);
 
+        a {
 
+          color: #fff;
 
+          &:hover {
 
+            color: #fff;
 
+          }
 
+        }
 
+      }
 
+    }
 
+
 
+    .ant-menu-sub {
 
+      &.ant-menu-inline {
 
+        background-color: #fff;
 
+      }
 
+    }
 
+  }
 
+
 
+  a {
 
+    display: block;
 
+  }
 
+`;

+ 1 - 1
src/views/website/detail/List.tsx
View File 

@@ -23,7 +23,7 @@ export default defineComponent({
 
       const { dataSource, actions, gridType } = props;
 
       const grid =
 
         gridType == "article"
 
-          ? { gutter: 18, xs: 2, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }
 
+          ? { gutter: 18, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }
 
           : { column: 1, gutter: 0 };
 
       return (
 
         <div class={ListContent}>

+ 22 - 0
src/views/website/home/components/Banner.tsx
View File 

@@ -212,4 +212,26 @@ const page = css`
 
       }
 
     }
 
   }
 
+  @media screen and (max-width: 1280px) {
 
+    height: 500px;
 
+    max-height: 500px;
 
+    .swiper_prev,
 
+    .swiper_next {
 
+      display: none;
 
+    }
 
+    .banner_swiper {
 
+      img {
 
+        height: 500px;
 
+      }
 
+    }
 
+  }
 
+  @media screen and (max-width: 750px) {
 
+    height: 300px;
 
+    max-height: 300px;
 
+    .banner_swiper {
 
+      img {
 
+        height: 300px;
 
+      }
 
+    }
 
+  }
 
 `;

+ 29 - 0
src/views/website/home/components/News.tsx
View File 

@@ -221,6 +221,7 @@ const page = css`
 
       flex: 1;
 
       padding: 0 70px;
 
       border-right: 1px solid #e5e5e5;
 
+      overflow: hidden;
 
       &:first-child {
 
         padding-left: 0;
 
         flex: 2;
 
@@ -322,4 +323,32 @@ const page = css`
 
       }
 
     }
 
   }
 
+  @media screen and (max-width: 1280px) {
 
+    .news_lay_box {
 
+      flex-direction: column;
 
+      .news_lay_item {
 
+        flex: auto;
 
+        max-width: 100%;
 
+        border-right: none;
 
+        padding: 0;
 
+        margin-bottom: 50px;
 
+        .list_item {
 
+          .cover {
 
+            height: 210px;
 
+          }
 
+          img {
 
+            height: 210px;
 
+          }
 
+          &:first-child {
 
+            font-size: 18px;
 
+            line-height: 28px;
 
+          }
 
+        }
 
+        &:first-child {
 
+          max-width: 100%;
 
+          padding: 0;
 
+        }
 
+      }
 
+    }
 
+  }
 
 `;

+ 6 - 6
src/views/website/home/components/Services.tsx
View File 

@@ -19,7 +19,7 @@ export default defineComponent({
 
                 </div>
 
                 <div class={"ser_tit"}>
 
                   <p>图书馆</p>
 
-                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
 
+                  <p class={"desc"}>丰富馆藏，为师生提供各学科信息查阅服务</p>
 
                 </div>
 
               </a>
 
             </div>
 
@@ -30,7 +30,7 @@ export default defineComponent({
 
                 </div>
 
                 <div class={"ser_tit"}>
 
                   <p>教育系统</p>
 
-                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
 
+                  <p class={"desc"}>线上教育系统，为师生提供网上教学服务</p>
 
                 </div>
 
               </a>
 
             </div>
 
@@ -41,7 +41,7 @@ export default defineComponent({
 
                 </div>
 
                 <div class={"ser_tit"}>
 
                   <p>校园门户</p>
 
-                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
 
+                  <p class={"desc"}>校园网的主入口，提供校园各类信息服务</p>
 
                 </div>
 
               </a>
 
             </div>
 
@@ -52,7 +52,7 @@ export default defineComponent({
 
                 </div>
 
                 <div class={"ser_tit"}>
 
                   <p>西华易班</p>
 
-                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
 
+                  <p class={"desc"}>一站式学生事务网络平台，大学生网络互动社区</p>
 
                 </div>
 
               </a>
 
             </div>
 
@@ -63,7 +63,7 @@ export default defineComponent({
 
                 </div>
 
                 <div class={"ser_tit"}>
 
                   <p>校长邮箱</p>
 
-                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
 
+                  <p class={"desc"}>学校领导和师生员工互动交流渠道</p>
 
                 </div>
 
               </a>
 
             </div>
 
@@ -74,7 +74,7 @@ export default defineComponent({
 
                 </div>
 
                 <div class={"ser_tit"}>
 
                   <p>办公OA</p>
 
-                  <p class={"desc"}>图书馆图书馆图书馆图书馆图书馆图书馆</p>
 
+                  <p class={"desc"}>方便学校师生快捷地共享信息，高效协同工作</p>
 
                 </div>
 
               </a>
 
             </div>

+ 49 - 10
src/views/website/home/components/Speciality.tsx
View File 

@@ -41,15 +41,17 @@ export default defineComponent({
 
               {state.specialities.map((e: ArticleItem, 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.title}</div>
 
+                    <div class={"card_top"}>
 
+                      <div class={"card_icon"}>
 
+                        <img
 
+                          src={getImageUrl(
 
+                            `icons/icon_home_specialty_${index + 1}.png`
 
+                          )}
 
+                        />
 
+                      </div>
 
+                      <div class={"card_tit"}>
 
+                        <div>{e.title}</div>
 
+                      </div>
 
                     </div>
 
                     <div class={"card_desc"}>
 
                       <div class={"desc"}>{renderSummary(e.summary)}</div>
 
@@ -89,6 +91,7 @@ const page = css`
 
       color: #fff;
 
       transition: all 0.3s ease-in-out;
 
       .card_icon {
 
+        line-height: 1;
 
         img {
 
           width: 72px;
 
           height: 72px;
 
@@ -96,8 +99,9 @@ const page = css`
 
         }
 
       }
 
       .card_tit {
 
-        margin-top: 12px;
 
+        margin-top: 20px;
 
         font-size: 20px;
 
+        line-height: 1;
 
         .sec_tit {
 
           margin-top: 20px;
 
           font-size: 14px;
 
@@ -177,4 +181,39 @@ const page = css`
 
       transform: translate3d(0, 0, 0);
 
     }
 
   }
 
+  @media screen and (max-width: 1280px) {
 
+    .spe_cards {
 
+      height: 800px;
 
+      flex-direction: column;
 
+      .cards_item {
 
+        height: auto;
 
+        padding: 40px 20px;
 
+        .card_top {
 
+          display: flex;
 
+          align-items: center;
 
+        }
 
+        .card_tit {
 
+          margin-top: 0;
 
+          padding-left: 20px;
 
+        }
 
+        &:hover {
 
+          .card_icon {
 
+            img {
 
+              width: 36px;
 
+              height: 36px;
 
+            }
 
+          }
 
+          .card_tit {
 
+            padding-left: 10px;
 
+            font-size: 16px;
 
+          }
 
+          flex: 3;
 
+          padding: 10px 20px 40px;
 
+        }
 
+        .card_desc {
 
+          padding: 0 20px 20px;
 
+        }
 
+      }
 
+    }
 
+  }
 
 `;

+ 13 - 11
src/views/website/home/components/Works.tsx
View File 

@@ -145,19 +145,21 @@ export default defineComponent({
 
                                     </div>
 
                                   </div>
 
                                 </div>
 
-                                <div class={"item_lay"}>
 
-                                  <div
 
-                                    class={"item_link"}
 
-                                    onClick={() => {
 
-                                      turnPage(next._id, item._id);
 
-                                    }}
 
-                                  >
 
-                                    <Image src={next.cover} />
 
-                                    <div class={"item_txt"}>
 
-                                      <div class={"name"}>{next.title}</div>
 
+                                {next && (
 
+                                  <div class={"item_lay"}>
 
+                                    <div
 
+                                      class={"item_link"}
 
+                                      onClick={() => {
 
+                                        turnPage(next._id, item._id);
 
+                                      }}
 
+                                    >
 
+                                      <Image src={next.cover} />
 
+                                      <div class={"item_txt"}>
 
+                                        <div class={"name"}>{next.title}</div>
 
+                                      </div>
 
                                     </div>
 
                                   </div>
 
-                                </div>
 
+                                )}
 
                               </div>
 
                             );
 
                           })}

+ 18 - 0
src/views/website/home/index.tsx
View File 

@@ -46,4 +46,22 @@ const page = css`
 
   .home_lay_item_box {
 
     padding: 60px 0;
 
   }
 
+  @media screen and (max-width: 1280px) {
 
+    .home_lay_title {
 
+      font-size: 26px;
 
+      margin-bottom: 30px;
 
+    }
 
+    .home_lay_item_box {
 
+      padding: 40px 0;
 
+    }
 
+  }
 
+  @media screen and (max-width: 750px) {
 
+    .home_lay_title {
 
+      font-size: 22px;
 
+      margin-bottom: 20px;
 
+    }
 
+    .home_lay_item_box {
 
+      padding: 30px 0;
 
+    }
 
+  }
 
 `;

+ 5 - 1
vite.config.ts
View File 

@@ -22,7 +22,11 @@ export default defineConfig({
 
       },
 
     },
 
   },
 
-
 
+  server: {
 
+    host: "0.0.0.0",
 
+    port: 8888,
 
+    open: false,
 
+  },
 
   plugins: [
 
     WindiCSS(),
 
     linaria({