样式调整

吴博 · 吴博 · commit c84d0297b5c2 · 2020-08-10T18:10:29.000+08:00
diff --git a/package.json b/package.json
@@ -11,15 +11,18 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "@types/lodash": "^4.14.159",
     "axios": "^0.16.2",
     "babel-polyfill": "^6.26.0",
+    "ckeditor4-vue": "^1.0.1",
     "clipboard": "^1.7.1",
     "codeages-design": "^0.1.6",
     "element-ui": "^1.4.0",
     "highlight.js": "^9.12.0",
     "jquery": "^3.2.1",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
+    "lodash": "^4.17.19",
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.18.1",
     "qs": "^6.5.0",
diff --git a/src/assets/styles/element-layout.less b/src/assets/styles/element-layout.less
@@ -1,13 +1,13 @@
 
-.element-layout-facility {
-  position: fixed;
-  top: 56px;
-  left: 0;
-  width: 272px;
-  padding: 18px 18px 18px 32px;
-  font-family: PingFangSC-Medium;
-  font-size: 20px;
-  color: #333;
-  line-height: 20px;
-  background-color: #fafafa;
-}
+//.element-layout-facility {
+//  position: fixed;
+//  top: 56px;
+//  left: 0;
+//  width: 272px;
+//  padding: 18px 18px 18px 32px;
+//  font-family: PingFangSC-Medium;
+//  font-size: 20px;
+//  color: #333;
+//  line-height: 20px;
+//  background-color: #fafafa;
+//}
diff --git a/src/assets/styles/header.less b/src/assets/styles/header.less
@@ -1,14 +1,3 @@
-//.site-header {
-//  position: fixed;
-//  top: 0;
-//  left: 0;
-//  right: 0;
-//  background-color: #f5faff;
-//  padding: 0 0 0 200px;
-//  height: 60px;
-//  z-index: 99;
-//}
-
 .site-header {
   position: fixed;
   top: 0;
@@ -26,7 +15,6 @@
   background-color: #f5faff;
 }
 
-
 .site-header__logo {
   position: absolute;
   top: 0;
@@ -62,6 +50,53 @@
       }
       &.active {
         color: @brand-primary;
+        .nav-child-icon {
+          border-top-color: @brand-primary;
+        }
+      }
+    }
+    .nav-child-icon {
+      position: absolute;
+      right: -14px;
+      top: 50%;
+      width: 0;
+      height: 0;
+      margin-top: -3px;
+      border-top: 6px solid #999;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      border-left: 6px solid transparent;
+    }
+    .nav-child {
+      position: absolute;
+      left: 50%;
+      top: 90%;
+      width: 146px;
+      padding: 10px 0;
+      margin-left: -73px;
+      font-size: 14px;
+      line-height: 20px;
+      color: #999;
+      background: #fff;
+      box-shadow: 0 0 12px 0 rgba(0,0,0,0.10);
+      list-style-type: none;
+      &:before {
+        position: absolute;
+        top: -8px;
+        left: 69px;
+        content: "";
+        width: 0;
+        height: 0;
+        border-top: 4px solid transparent;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-bottom: 4px solid #fff;
+      }
+      li {
+        padding: 6px 24px;
+        &:hover {
+          background-color: #f1f9ff;
+        }
       }
     }
   }
diff --git a/src/assets/styles/homepage.less b/src/assets/styles/homepage.less
@@ -4,6 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+  width: 1200px;
   overflow-y: auto;
 }
 
@@ -224,7 +225,7 @@
   font-size: 24px;
   color: #313131;
   letter-spacing: 0;
-  line-height: 32px;  
+  line-height: 32px;
 }
 
 .site-homepage-feature__content {
@@ -265,7 +266,7 @@
         color: rgba(255, 255, 255, 1);
       }
     }
-  } 
+  }
 }
 
 .site-homepage-footer__copyright {
@@ -275,4 +276,4 @@
   color: #fff;
   text-align: center;
   line-height: 20px;
-}
+}
diff --git a/src/assets/styles/sidebar.less b/src/assets/styles/sidebar.less
@@ -1,6 +1,6 @@
 .site-sidebar {
   position: fixed;
-  top: 56px;
+  top: 72px;
   left: 0;
   bottom: 0;
   width: 272px;
@@ -11,11 +11,13 @@
 }
 
 .site-sidebar__column__title {
-  padding: 20px 16px 12px 32px;
+  padding-bottom: 8px;
+  margin: 12px 32px;
   font-family: PingFangSC-Medium;
   font-size: 14px;
   color: #333333;
   line-height: 20px;
+  border-bottom: solid 1px #ebebeb;
 }
 
 .site-sidebar__nav {
@@ -27,26 +29,13 @@
     font-size: 14px;
     line-height: 20px;
     color: #666;
-    padding: 8px 16px 8px 44px;
+    padding: 12px 32px 12px 44px;
     cursor: pointer;
-    //&:hover {
-    //  cursor: pointer;
-    //  .cd-hover-light;
-    //  .cd-transition;
-    //  .nav-en {
-    //    .cd-hover-light;
-    //    .cd-transition;
-    //  }
-    //}
     &:hover,
     &.active {
-      box-shadow: inset -2px 0 0 0 @brand-primary;
+      color: #31a1ff;
+      box-shadow: inset -2px 0 0 0 #31a1ff;
       background-color: #f1f9ff;
     }
-    .nav-en {
-      font-size: 12px;
-      margin-left: 4px;
-      color: rgba(0, 0, 0, 0.32);
-    }
   }
 }
diff --git a/src/data/index.ts b/src/data/index.ts
@@ -229,7 +229,11 @@ const navMenu:any[] = [
   },
   {
     'text': '元素布局',
-    'name': 'element-layout'
+    'name': 'element-layout',
+    'children': [
+        { 'text': 'PC端元素布局', 'name': 'pc-element-layout' },
+        { 'text': '移动端元素布局', 'name': 'mobile-element-layout' },
+    ]
   },
   {
     'text': '组件',
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import MetaInfo from 'vue-meta-info';
+import CKEditor from 'ckeditor4-vue';
 import router from '@/router';
 import filters from '@/filters';
 import plugins from '@/plugins';
@@ -12,6 +13,7 @@ import * as cd from 'codeages-design';
 import 'codeages-design/src/less/codeages-design.less';
 import '@/assets/styles/main.less';
 
+Vue.use( CKEditor );
 Vue.use(MetaInfo);
 Vue.use(filters);
 Vue.use(plugins);
diff --git a/src/router/index.js b/src/router/index.js
@@ -25,10 +25,15 @@ const routes = [
     component: (resolve) => require(['@/views/principle.vue'], resolve),
   },
   {
-    path: '/element-layout',
-    name: 'element-layout',
+    path: '/pc-element-layout',
+    name: 'pc-element-layout',
     component: (resolve) => require(['@/views/element-layout.vue'], resolve),
   },
+	{
+		path: '/mobile-element-layout',
+		name: 'mobile-element-layout',
+		component: (resolve) => require(['@/views/element-layout.vue'], resolve),
+	},
   {
     path: '/resources',
     name: 'resources',
@@ -38,6 +43,16 @@ const routes = [
     path: '/',
     name: 'homepage',
     component: (resolve) => require(['@/views/homepage.vue'], resolve),
+  },
+  {
+    path: '/admin',
+    name: 'admin',
+    component: (resolve) => require(['@/views/admin/admin.vue'], resolve),
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: (resolve) => require(['@/views/admin/login.vue'], resolve),
   }
 ];
 
diff --git a/src/views/admin/admin.vue b/src/views/admin/admin.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <ckeditor value="Hello, World!"></ckeditor>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'admin',
+  }
+</script>
diff --git a/src/views/admin/login.vue b/src/views/admin/login.vue
@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+  export default {}
+</script>
diff --git a/src/views/element-layout.vue b/src/views/element-layout.vue
@@ -1,8 +1,7 @@
 <template>
   <div id="app" class="site-wrap" :class="{ 'hide-sidebar': isHideSidebar }">
     <x-header></x-header>
-    <div class="element-layout-facility">PC端</div>
-    <x-side-bar @sidebarToggle="sidebarToggle" :menus="menus" style="top: 112px;"></x-side-bar>
+    <x-side-bar @sidebarToggle="sidebarToggle" :menus="menus"></x-side-bar>
     <main class="site-main">
       <div class="site-content">
         <keep-alive>
diff --git a/src/views/header.vue b/src/views/header.vue
@@ -7,11 +7,16 @@
     </div>
     <div class="site-header__nav cd-clearfix">
       <ul class="">
-        <li :class="{ active: routeName === nav.name }" 
-            @click="switchNav(nav.name)" 
-            v-for="(nav, index) in navMenu" 
-            :key="index">
+        <li :class="{ active: routeName === nav.name }"
+            @click="switchNav(nav)"
+            v-for="nav in navMenu">
           {{nav.text}}
+					<template v-if="nav.children">
+						<div class="nav-child-icon"></div>
+						<ul class="nav-child" v-if="nav.children" v-show="childShow[nav.name]">
+							<li v-for="item in nav.children" :key="item.name" @click="switchNav(item, nav)">{{ item.text }}</li>
+						</ul>
+					</template>
         </li>
       </ul>
       <theme-picker @ok="pickerOk">
@@ -24,32 +29,62 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
+import { Component, Watch } from 'vue-property-decorator';
 
 import ThemePicker from '@/components/theme-picker.vue';
 import { version } from 'codeages-design/package.json';
 import { navMenu } from '@/data';
+import * as _ from 'lodash';
+
+interface Nav {
+	name: String,
+	text: String,
+	children: Nav[],
+}
 
 @Component({
   components: {
     ThemePicker,
   },
 })
+
 export default class extends Vue {
-  navMenu: any[] = navMenu;
+  navMenu: Nav[] = navMenu;
   routeName: string = null;
   chalk: string = (<any>window).chalk;
+	childShow: Object = {};
+	
+	resetNavMenu() {
+		for (let i = 0;i < this.navMenu.length;i++) {
+			const nav = this.navMenu[i];
+			if (nav.children) {
+				const index = _.findIndex(nav.children, item => item.name === this.routeName);
+				if (index > -1) {
+					this.navMenu[i] = (<any>Object).assign({}, this.navMenu[i], nav.children[index]);
+				}
+			}
+		}
+	}
 
   created() {
     this.getRoute();
+    this.resetNavMenu();
   }
 
   getRoute() {
     this.routeName = this.$route.matched[0].name;
   }
 
-  switchNav(name) {
-    this.$router.push({ name: name });
+  switchNav(nav, parent) {
+		if (nav.children) {
+			this.$set(this.childShow, nav.name, !this.childShow[nav.name]);
+			return;
+		} else if (parent) {
+			this.$set(this.childShow, nav.name, false);
+			this.routeName = nav.name;
+			this.resetNavMenu();
+		}
+		this.$router.push({ name: nav.name });
   }
 
   pickerOk(oldColor, newColor) {
diff --git a/src/views/sidebar.vue b/src/views/sidebar.vue
@@ -12,8 +12,8 @@
           :key="submenuIndex"
           :class="{ active: routeName === submenu.name }"
           @click="switchNav(submenu.name)">
-          <span>{{ submenu.text_zh }}</span>
           <span class="nav-en" v-if="!menu.isHideEn">{{ submenu.text_en }}</span>
+          <span>{{ submenu.text_zh }}</span>
         </li>
       </ul>
     </div>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`left: 0;`
`5`	`5`	`right: 0;`
`6`	`6`	`bottom: 0;`
	`7`	`+ width: 1200px;`
`7`	`8`	`overflow-y: auto;`
`8`	`9`	`}`
`9`	`10`
`@@ -224,7 +225,7 @@`
`224`	`225`	`font-size: 24px;`
`225`	`226`	`color: #313131;`
`226`	`227`	`letter-spacing: 0;`
`227`		`- line-height: 32px;`
	`228`	`+ line-height: 32px;`
`228`	`229`	`}`
`229`	`230`
`230`	`231`	`.site-homepage-feature__content {`
`@@ -265,7 +266,7 @@`
`265`	`266`	`color: rgba(255, 255, 255, 1);`
`266`	`267`	`}`
`267`	`268`	`}`
`268`		`- }`
	`269`	`+ }`
`269`	`270`	`}`
`270`	`271`
`271`	`272`	`.site-homepage-footer__copyright {`
`@@ -275,4 +276,4 @@`
`275`	`276`	`color: #fff;`
`276`	`277`	`text-align: center;`
`277`	`278`	`line-height: 20px;`
`278`		`-}`
	`279`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -229,7 +229,11 @@ const navMenu:any[] = [`
`229`	`229`	`},`
`230`	`230`	`{`
`231`	`231`	`'text': '元素布局',`
`232`		`- 'name': 'element-layout'`
	`232`	`+ 'name': 'element-layout',`
	`233`	`+ 'children': [`
	`234`	`+ { 'text': 'PC端元素布局', 'name': 'pc-element-layout' },`
	`235`	`+ { 'text': '移动端元素布局', 'name': 'mobile-element-layout' },`
	`236`	`+ ]`
`233`	`237`	`},`
`234`	`238`	`{`
`235`	`239`	`'text': '组件',`