lilinsen 6 年 前
コミット
368db1b294
2 ファイル変更53 行追加36 行削除
  1. 19 32
      sites/doc/app.vue
  2. 34 4
      sites/doc/info.vue

+ 19 - 32
sites/doc/app.vue

@@ -5,12 +5,7 @@
     </div>
     </div>
     <div class="md-swaper" @click="clearSearch" v-else>
     <div class="md-swaper" @click="clearSearch" v-else>
       <div class="hder">
       <div class="hder">
-        <div class="logo">
-          <a href="#/index" class="logo-link">
-            <img src="./asset/css/i/nut.png" alt>
-          </a>
-          <span class="version">v{{version}}</span>
-        </div>
+        
         <div class="h-nav">
         <div class="h-nav">
           <search/>
           <search/>
           <ul class="list">
           <ul class="list">
@@ -42,10 +37,10 @@
         </div>
         </div>
       </div>
       </div>
       <div class="demo-wrapper">
       <div class="demo-wrapper">
-        <router-view class="demo-nav"></router-view>
+        <router-view class="demo-nav fixed-box"></router-view>
         
         
         <keep-alive include="index">
         <keep-alive include="index">
-          <router-view class="doc-cont" :class="showPhone?'':'docpad'" name="main"></router-view>
+          <router-view class="doc-cont fl-right" :class="showPhone?'':'docpad'" name="main"></router-view>
         </keep-alive>
         </keep-alive>
         <div v-if="showPhone" class="showPhone">
         <div v-if="showPhone" class="showPhone">
           <div class="ph">
           <div class="ph">
@@ -81,7 +76,6 @@
 import "./asset/css/common.scss";
 import "./asset/css/common.scss";
 import "./asset/css/style-blue.scss";
 import "./asset/css/style-blue.scss";
 import { packages } from "../../src/config.json";
 import { packages } from "../../src/config.json";
-import { version } from "../../package.json";
 import search from "./search.vue";
 import search from "./search.vue";
 import leftNav from './info.vue'
 import leftNav from './info.vue'
 export default {
 export default {
@@ -95,8 +89,7 @@ export default {
       showPhone: false,
       showPhone: false,
       searchCurName: "",
       searchCurName: "",
       searchIndex: 0,
       searchIndex: 0,
-      codeurl: "",
-      version
+      codeurl: ""     
     };
     };
   },
   },
   watch: {
   watch: {
@@ -203,6 +196,14 @@ export default {
 };
 };
 </script>
 </script>
 <style lang="scss">
 <style lang="scss">
+.fixed-box{
+  position: fixed;
+  z-index: 99999;
+  background: #fff;
+  height: 100%;
+  overflow-y: scroll;
+  top:0;
+}
 .fade-enter-active,
 .fade-enter-active,
 .fade-leave-active {
 .fade-leave-active {
   transition: opacity 0.5s;
   transition: opacity 0.5s;
@@ -233,27 +234,7 @@ export default {
   align-items: center;
   align-items: center;
   margin-bottom: 50px;
   margin-bottom: 50px;
   z-index: 42;
   z-index: 42;
-  .logo {
-    width: 295px;
-    height: 65px;
-    border-right: 1px solid #d8d8d8;
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    .logo-link {
-      display: inline-block;
-    }
-    img {
-      display: block;
-      width: 120px;
-      height: 46px;
-      flex-grow: 0;
-      flex-shrink: 0;
-      margin: 0 10px 0 30px;
-    }
-    color: #999;
-    font-size: 12px;
-  }
+
   .version {
   .version {
     display: inline-block;
     display: inline-block;
     margin-top: 7px;
     margin-top: 7px;
@@ -265,6 +246,7 @@ export default {
     padding-left: 42px;
     padding-left: 42px;
     align-items: center;
     align-items: center;
     width: 100%;
     width: 100%;
+    margin-left: 300px;
     select {
     select {
       width: 74px;
       width: 74px;
       height: 28px;
       height: 28px;
@@ -432,6 +414,9 @@ export default {
       }
       }
     }
     }
   }
   }
+  .fl-right{
+    margin-left: 310px;
+  }
 }
 }
 .foot {
 .foot {
   height: 120px;
   height: 120px;
@@ -444,6 +429,8 @@ export default {
   position: absolute;
   position: absolute;
   bottom: 0;
   bottom: 0;
   width: 100%;
   width: 100%;
+  padding-left: 300px;
+  box-sizing: border-box;
   a {
   a {
     color: #fff;
     color: #fff;
     text-decoration: none;
     text-decoration: none;

+ 34 - 4
sites/doc/info.vue

@@ -1,5 +1,11 @@
 <template>
 <template>
   <div class="main-menu lt-nv">
   <div class="main-menu lt-nv">
+    <div class="logo">
+      <a href="#/index" class="logo-link">
+        <img src="./asset/css/i/nut.png" alt>
+      </a>
+      <span class="version">v{{version}}</span>
+    </div>
     <ol class="nav-l-1">
     <ol class="nav-l-1">
       <dt>指南</dt>
       <dt>指南</dt>
       <dd :class="curName=='intr' ?'l-1 curs':'l-1'">
       <dd :class="curName=='intr' ?'l-1 curs':'l-1'">
@@ -18,7 +24,7 @@
         <a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
         <a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
       </dd>
       </dd>
     </ol>
     </ol>
-    <ol>
+    <ol class="cplist">
       <dt>组件</dt>
       <dt>组件</dt>
       <dd
       <dd
         class="l-1"
         class="l-1"
@@ -52,7 +58,7 @@
 </template>
 </template>
 <script>
 <script>
 import { sorts, packages } from "../../src/config.json";
 import { sorts, packages } from "../../src/config.json";
-
+import { version } from "../../package.json";
 export default {
 export default {
   name: "index",
   name: "index",
   data() {
   data() {
@@ -61,7 +67,8 @@ export default {
       packages: {},
       packages: {},
       sortedPackages: [],
       sortedPackages: [],
       cur: [],
       cur: [],
-      curName: ""
+      curName: "",
+      version:version
     };
     };
   },
   },
  
  
@@ -146,6 +153,27 @@ export default {
 };
 };
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+  .logo {
+    width: 295px;
+    height: 65px;
+    border-right: 1px solid #d8d8d8;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    .logo-link {
+      display: inline-block;
+    }
+    img {
+      display: block;
+      width: 120px;
+      height: 46px;
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin: 0 10px 0 30px;
+    }
+    color: #999;
+    font-size: 12px;
+  }
 .fade-enter-active,
 .fade-enter-active,
 .fade-leave-active {
 .fade-leave-active {
   transition: all 1s;
   transition: all 1s;
@@ -177,7 +205,9 @@ dd {
     cursor: pointer;
     cursor: pointer;
   }
   }
 }
 }
-
+.cplist{
+  padding-bottom: 20px;
+}
 .lt-nv {
 .lt-nv {
   font-size: 14px;
   font-size: 14px;
   width: 295px;
   width: 295px;