diff --git a/src/app/pages/body/index/index.component.html b/src/app/pages/body/index/index.component.html index 20b0b63..54fa89b 100644 --- a/src/app/pages/body/index/index.component.html +++ b/src/app/pages/body/index/index.component.html @@ -1,4 +1,5 @@ +
@@ -7,55 +8,45 @@
-
  • {{item.menuName}}
- - + - - -
-
-
- -
- 收起 -
- - -
- -
- + + +
+ +
+ +
+
- + - - -
+ + + -
+ - - diff --git a/src/app/pages/body/index/index.component.less b/src/app/pages/body/index/index.component.less index eba7283..53c0417 100644 --- a/src/app/pages/body/index/index.component.less +++ b/src/app/pages/body/index/index.component.less @@ -34,51 +34,23 @@ nz-header { } } -nz-breadcrumb { - margin: 16px 0; -} - -nz-footer { - text-align: center; -} +nz-sider { + background: #fff; + box-shadow: 2px 0 8px rgba(0,0,0,.15); + height: calc(100vh - 64px);; -.inner-content { - div { - float: left; + .trigger { + font-size: 18px; + line-height: 50px; + padding: 0 24px; + cursor: pointer; + transition: color 0.3s; } - .side_menu { - height: 100%; - color: #595959; - box-shadow: 2px 0 8px rgba(0,0,0,.15); - .side_menu_top { - width: 100%; - margin-top: 8px; - font-size: 18px; - height: 26px; - line-height: 23px; - margin-left: 14px; - .side_menu_top_icon { - height: 26px; - line-height: 26px; - } - span { - margin-left: 6px; - } - } - .side_menu_content { - margin-top: 10px; - width: 100%; - height: 100%; - } + .trigger:hover { + color: #1890ff; } - height: calc(100vh - 64px); -} -.content { - width:100vw; } -.content-width { - width: calc(100vw - 280px); +nz-content { + padding: 0 0 0 4px; } - - diff --git a/src/app/pages/body/index/index.component.ts b/src/app/pages/body/index/index.component.ts index c1bdc08..50c366a 100644 --- a/src/app/pages/body/index/index.component.ts +++ b/src/app/pages/body/index/index.component.ts @@ -9,7 +9,7 @@ import { } from "ng-zorro-antd/layout"; import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb"; import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid"; -import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu"; +import {NzMenuDirective, NzMenuGroupComponent, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu"; import {menuData} from "../../../data/menu/menu.namespace"; import {NgClass, NgForOf} from "@angular/common"; import {animate, state, style, transition, trigger} from "@angular/animations"; @@ -42,29 +42,11 @@ import {DATA} from "../../../data/login/localStorage.namespace"; NzTabComponent, NzTabSetComponent, TabComponent, - NzSiderComponent + NzSiderComponent, + NzMenuGroupComponent ], templateUrl: './index.component.html', styleUrl: './index.component.less', - animations: [ - // animation triggers go here - trigger('openClose', [ - state('open', style({ - width: '280px', - backgroundColor: 'white' - })), - state('closed', style({ - overflow: 'hidden', - width: '0', - })), - transition('open => closed', [ - animate('0.1s') - ]), - transition('closed => open', [ - animate('0.1s') - ]), - ]), - ] }) export class IndexComponent { // 菜单数据 @@ -77,27 +59,18 @@ export class IndexComponent { leftMenuData: any = []; // 侧边菜单展示开关 - isCollapse = false; + isCollapse = true; constructor(private storage: BrowserStorageService) { this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']); } - - clickMenu(menu: object) { - - } - // 选择操作 isSelected(item: any) { this.menuData.map((data: any) => { data.selected = data.menuName === item.menuName; }); this.leftMenuData = item['childMenuList']; - if (item['menuName'] === '首页') { - this.isCollapse = false; - } else { - this.isCollapse = true; - } + this.isCollapse = item['menuName'] === '首页'; } } diff --git a/src/app/pages/body/index/index1.component.html b/src/app/pages/body/index/index1.component.html new file mode 100644 index 0000000..6c515c1 --- /dev/null +++ b/src/app/pages/body/index/index1.component.html @@ -0,0 +1,61 @@ + + +
+ + + + + +
+
    +
  • {{item.menuName}}
    • +
+
+ + +
+ + + + +
+
+
+ +
+ 收起 +
+ + +
+ +
+ +
+ + + + +
+ +
+ + + + + + diff --git a/src/app/pages/body/index/index1.component.less b/src/app/pages/body/index/index1.component.less new file mode 100644 index 0000000..eba7283 --- /dev/null +++ b/src/app/pages/body/index/index1.component.less @@ -0,0 +1,84 @@ +nz-header { + background: #181f47; + padding: 0 26px; + .logo { + h2 { + color: white; + } + } + .menu { + width: 52%; + display: flex; + justify-content: center; + ul { + li { + height: 56px; + float: left; + color: #fff; + opacity: .65; + font-size: 14px; + padding: 0 20px; + cursor: pointer; + } + .li-selected { + opacity: 1; + border-bottom: 2px solid #1890ff; + } + li:hover { + opacity: 1; + border-bottom: 2px solid #1890ff; + } + list-style-type: none; /* 移除列表的标记，如果需要的话 */ + padding: 0; /* 移除padding，如果需要的话 */ + } + } +} + +nz-breadcrumb { + margin: 16px 0; +} + +nz-footer { + text-align: center; +} + +.inner-content { + div { + float: left; + } + .side_menu { + height: 100%; + color: #595959; + box-shadow: 2px 0 8px rgba(0,0,0,.15); + .side_menu_top { + width: 100%; + margin-top: 8px; + font-size: 18px; + height: 26px; + line-height: 23px; + margin-left: 14px; + .side_menu_top_icon { + height: 26px; + line-height: 26px; + } + span { + margin-left: 6px; + } + } + .side_menu_content { + margin-top: 10px; + width: 100%; + height: 100%; + } + + } + height: calc(100vh - 64px); +} +.content { + width:100vw; +} +.content-width { + width: calc(100vw - 280px); +} + + diff --git a/src/app/utils/Interceptor.service.ts b/src/app/utils/Interceptor.service.ts index 4e8c52a..2f7ca2a 100644 --- a/src/app/utils/Interceptor.service.ts +++ b/src/app/utils/Interceptor.service.ts @@ -23,8 +23,6 @@ export class InterceptorService implements HttpInterceptor { const token = this.storage.get(USER_TOKEN); if (token != null) { modifiedHeaders = req.headers.set('Authorization', token); - modifiedHeaders = req.headers.set( 'Cache-Control', 'no-cache',) - modifiedHeaders = req.headers.set( 'Pragma', 'no-cache',) } secureReq = req.clone({