[新增]基本样式和字体

3 years ago · 8111d5835c
11 changed files with 69 additions and 18 deletions
--- a/README.md
+++ b/README.md
@ -1 +1 @@
-# 济南项目
+# 济南防消一体化综合治理平台
--- a/src/app/CustomReuseStrategy.ts
+++ b/src/app/CustomReuseStrategy.ts
@ -21,7 +21,7 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
    /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.log('store======>', route, handle);
-        if(route.routeConfig.path == 'host'){
+        if(route.routeConfig.path == 'basicInfo'){
            CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
        }
    }
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@ -17,7 +17,8 @@ const routes: Routes = [
    children: [
      {
        path: '',
-        component: RoleComponent,
+        redirectTo: '/homePage/system/role',
+        pathMatch: 'full'
      },
      {
        path: 'role',
--- a/src/app/home/nav/nav.component.html
+++ b/src/app/home/nav/nav.component.html
@ -1,10 +1,18 @@
 <nz-layout>
    <nz-header>
        <ul>
-            <li [routerLink]="['/homePage/basicInfo']" routerLinkActive="router-link-active">基础信息</li>
-            <li [routerLink]="['/homePage/task']" routerLinkActive="router-link-active">一体化任务</li>
-            <li [routerLink]="['/homePage/statistic']" routerLinkActive="router-link-active">统计分析</li>
-            <li [routerLink]="['/homePage/system']" routerLinkActive="router-link-active">系统管理</li>
+            <li [routerLink]="['/homePage/basicInfo']" routerLinkActive="router-link-active">
+                <div>基础信息</div>
+            </li>
+            <li [routerLink]="['/homePage/task']" routerLinkActive="router-link-active">
+                <div>一体化任务</div>
+            </li>
+            <li [routerLink]="['/homePage/statistic']" routerLinkActive="router-link-active">
+                <div>统计分析</div>
+            </li>
+            <li [routerLink]="['/homePage/system']" routerLinkActive="router-link-active">
+                <div>系统管理</div>
+            </li>
        </ul>
    </nz-header>
    <nz-layout>
--- a/src/app/home/nav/nav.component.scss
+++ b/src/app/home/nav/nav.component.scss
@ -4,33 +4,55 @@


 nz-header {
-  background: #7dbcea;
+  height: 48px;
+  line-height: 48px;
+  background: #2D4DbF;
  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;

  ul {
    display: flex;
+    justify-content: center;
+    margin-bottom: 0px;
+    width:600px;

    li {
      margin: 0 6px;
+      width: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
    }
+
  }
 }

+.router-link-active {
+  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
+  text-align: center;
+  transform: skewX(-20deg);
+}
+
+.router-link-active>div {
+  height: 48px;
+  transform: skewX(20deg);
+  border-bottom: 2px solid red;
+}
+
 nz-footer {
  line-height: 1.5;
 }

 nz-sider {
-  background: #3ba0e9;
+  background: #2D4DbF;
  color: #fff;
-  line-height: 120px;
 }

 nz-content {
-  background: rgba(16, 142, 233, 1);
  color: #fff;
-  min-height: 120px;
-  line-height: 120px;
 }

 nz-layout {
--- a/src/app/home/system-management/system-management.component.scss
+++ b/src/app/home/system-management/system-management.component.scss
@ -2,12 +2,22 @@
  display: flex;
 }

+
 .nav {
-  width: 300px;
+  width: 200px;
  height: 100%;
-  border-right: 1px solid red;
-
+  background: #2c4dc1;
+  ul {
+    li {
+      height: 48px;
+      line-height: 48px;
+      cursor: pointer;
+    }
+  }
+}

+.router-link-active {
+  background: #fff;
 }

 .content {
@ -17,3 +27,9 @@
 .router-link-active {
  color: black;
 }
+
+.content {
+  box-sizing: border-box;
+  padding: 8px;
+  background: #F6F5F8;
+}
--- a/src/assets/font-family/sybold.OTF
+++ b/src/assets/font-family/sybold.OTF
--- a/src/assets/font-family/synormal.OTF
+++ b/src/assets/font-family/synormal.OTF
--- a/src/assets/font-family/titlefont.TTF
+++ b/src/assets/font-family/titlefont.TTF
--- a/src/index.html
+++ b/src/index.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>边缘主机管理系统</title>
+  <title>防消一体化综合治理平台</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
--- a/src/styles.scss
+++ b/src/styles.scss
@ -5,7 +5,10 @@
@import "~ng-zorro-antd/button/style/index.min.css";
 /* 引入组件样式 */

-
+@font-face {
+  font-family: synormal;
+  src: url("./assets/font-family/synormal.OTF");
+}

 /* css初始化 */
 html,
@ -15,6 +18,7 @@ body {
  width: 100%;
  height: 100%;
  overflow: hidden;
+  font-family: synormal !important;
 }

 body {