update

scripts/mdToVue.js

@@ -61,7 +61,7 @@ let jsroot = `<script>export default {
           return res.previousElementSibling
         }
     });    
-    let demourl = 'http://nutui.jd.com/demo.html#'+that.$route.path;
+    let demourl = 'https://nutui.jd.com/demo.html#'+that.$route.path;
 
     this.demourl = demourl;
     this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{

sites/demo/app.vue

@@ -18,12 +18,6 @@ export default {
     if (window.self != window.top) { 
       this.inIframe = true;
     }
-
-    if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i)) {
-      window.isMobile = true;
-    } else {
-      window.isMobile = false;
-    }
   }
 }
 </script>

sites/demo/index.html

@@ -28,8 +28,8 @@
 
     //分享配置
     var shareOption = {
-      iconUrl: 'http://nutui.jd.com/img/logo_share.png',
-      url: 'http://nutui.jd.com/demo.html#/index',
+      iconUrl: 'https://nutui.jd.com/img/logo_share.png',
+      url: 'https://nutui.jd.com/demo.html#/index',
       title: '轻量级移动端Vue组件库 - NutUI 2.0',
       desc: '京东风格的Vue组件库'
     };

sites/demo/view/index.vue

@@ -3,16 +3,13 @@
     <!-- <nut-noticebar
       :closeMode="true"
       v-if="cacheHasNewVersion"
-    >本页面有更新，请<a href="javascript:window.location.reload();">刷新页面</a>。</nut-noticebar> -->
+    >本页面有更新，请<a href="javascript:window.location.reload();">刷新页面</a>。</nut-noticebar>-->
+    <iframe src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true" class="star-btn" frameborder="0" scrolling="0" width="55px" height="20px"></iframe>
 
     <h1 class="logo"></h1>
     <div class="version">NutUI 2.0</div>
     <p>NutUI 是一套京东风格的移动端Vue组件库</p>
-    <div
-      :class="['demo-list-box',{'unfold':foldStatus[item]}]"
-      v-for="item in sorts"
-      :key="item"
-    >
+    <div :class="['demo-list-box',{'unfold':foldStatus[item]}]" v-for="item in sorts" :key="item">
       <h4 @click="toggleFold(item)">
         {{oriSorts[item]}}
         <i></i>
@@ -32,7 +29,7 @@
 </template>
 
 <script>
-import { packages,sorts } from "../../../src/config.json";
+import { packages, sorts } from "../../../src/config.json";
 export default {
   name: "index",
   data() {
@@ -40,8 +37,8 @@ export default {
       path: "",
       packages: {},
       sortedPackages: [],
-      oriSorts:[],
-      sorts: [1,2,0,3,4,5],
+      oriSorts: [],
+      sorts: [1, 2, 0, 3, 4, 5],
       foldStatus: []
     };
   },
@@ -54,7 +51,7 @@ export default {
   created() {
     this.packages = packages;
     this.oriSorts = sorts;
-    
+
     this.foldStatus = Array(this.sorts.length)
       .join(",")
       .split(",")
@@ -75,6 +72,11 @@ export default {
 .demo-list-wrapper {
   padding: 8px;
   box-sizing: border-box;
+  .star-btn{
+    position:absolute;
+    top:15px;
+    right:10px;
+  }
   .logo {
     background: url(../asset/img/logo.png) no-repeat;
     background-size: contain;
@@ -82,6 +84,8 @@ export default {
     width: 100px;
     text-align: center;
     margin: 5px auto 15px;
+    animation: swing 2.5s;
+
   }
   .version {
     text-align: center;
@@ -99,12 +103,18 @@ export default {
   width: 95%;
   background: #fff;
   border-radius: 5px;
+  max-height:55px;
+  transition: max-height 1s;
+  overflow:hidden;
   h4 {
     position: relative;
     margin: 0;
     height: 50px;
     line-height: 50px;
     padding: 0 15px;
+    &:active {
+      background-color: rgba(200, 200, 200, 0.1);
+    }
     i {
       position: absolute;
       right: 15px;
@@ -120,6 +130,8 @@ export default {
     }
   }
   &.unfold {
+    max-height:1000px;
+    transition: max-height 1s;
     h4 i {
       transform: rotate(-180deg);
     }
@@ -162,4 +174,33 @@ li {
   margin: 0;
   padding: 0;
 }
+
+@-webkit-keyframes swing {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -40deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -40deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 25deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 25deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
+  }
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
 </style>

sites/doc/app.js

@@ -3,32 +3,18 @@ import "core-js/modules/es6.array.iterator";
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router';
-// import copy from './asset/js/copy';
 import copy from 'clipboard';
 
-// import hljs from 'highlight.js/lib/highlight';
-// import javascript from 'highlight.js/lib/languages/javascript';
-// import css from 'highlight.js/lib/languages/css';
-// import html from 'highlight.js/lib/languages/htmlbars';
-// import bash from 'highlight.js/lib/languages/bash';
-// hljs.registerLanguage('javascript', javascript);
-// hljs.registerLanguage('html', html);
-// hljs.registerLanguage('css', css);
-// hljs.registerLanguage('bash', bash);
 
 import 'highlight.js/styles/github.css';
 
-//import prettify from 'google-code-prettify/src/prettify';
-//import  'google-code-prettify/src/prettify.css';
-//import  'google-code-prettify/styles/sunburst.css';
- //import qrcode from './qrcode/index.js';
+
 import codes from 'qrcode';
- //import NutUI from '../../src/nutui.js';
-//import '../dist/nutui/src/dialog/dialog.css';
-//Vue.prototype.hljs = highlight;
+
+
 Vue.prototype.copy = copy;
 Vue.prototype.qrcode = codes;
-//dialog.install(Vue);
+
 Vue.config.productionTip = false;
 
 new Vue({
@@ -38,5 +24,3 @@ new Vue({
   template: '<App/>'
 });
 
-//Vue.prototype.NUTCONF = Conf;
-

sites/doc/asset/css/style-blue.scss

@@ -135,6 +135,7 @@
             background: #F7F7F7;
             border: 1px solid #E9E9E9;
             font-size: 14px;
+            line-height: 1.5;
             color: #333333;
             height: 40px;
             padding: 0 20px 0 14px;
@@ -142,6 +143,7 @@
         td {
             border: 1px solid #E9E9E9;
             font-size: 14px;
+            line-height: 1.5;
             color: #3F4449;
             height: 50px;
             padding-left: 14px;

sites/doc/code.vue

@@ -1,54 +1,54 @@
 <template>
-	<div>
+  <div>
     <div class="nut-qrcode" id="qrcode">二维码位置</div>
-    </div>
+  </div>
 </template>
 <script>
 debugger;
-import QRCode from './asset/js/code.js';
+import QRCode from "./asset/js/code.js";
 export default {
-    name:'nut-qrcode',
-    props: {
-    	QCWidth:{
-    		type: Number,
-      		default: 160
-    	},
-    	QCHeight:{
-    		type: Number,
-      		default: 160
-    	},
-    	content:{
-    		type: String,
-      		required:true,
-    	},
-    	fontColor:{
-    		type: String,
-      		default: '#000'
-    	},
-    	backColor:{
-    		type: String,
-      		default: '#fff'
-    	}
+  name: "nut-qrcode",
+  props: {
+    QCWidth: {
+      type: Number,
+      default: 160
     },
-    data() {
-        return {};
+    QCHeight: {
+      type: Number,
+      default: 160
     },
-    mounted(){
-    	this.qrcode();
+    content: {
+      type: String,
+      required: true
     },
-    methods: {
-    	qrcode () {
-	      let qrcode = new QRCode('qrcode', {  
-	        width: this.QCWidth,  
-	        height: this.QCHeight,   // 高度  
-	        text: this.content, // 二维码内容  
-	        colorDark: this.fontColor,  
-	        colorLight: this.backColor,  
-			margin:0
-	      })  
-	    }
+    fontColor: {
+      type: String,
+      default: "#000"
+    },
+    backColor: {
+      type: String,
+      default: "#fff"
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.qrcode();
+  },
+  methods: {
+    qrcode() {
+      let qrcode = new QRCode("qrcode", {
+        width: this.QCWidth,
+        height: this.QCHeight, // 高度
+        text: this.content, // 二维码内容
+        colorDark: this.fontColor,
+        colorLight: this.backColor,
+        margin: 0
+      });
     }
-}
+  }
+};
 </script>
 <style lang="scss">
 </style>

sites/doc/index.html

@@ -30,4 +30,5 @@
     })()
   </script>
 </body>
+
 </html>

sites/doc/info.vue

@@ -1,56 +1,57 @@
 <template>
-<div class="main-menu lt-nv">
-  <ol class="nav-l-1">
-    <dt>指南</dt>
-    <dd :class="curName=='intr' ?'l-1 curs':'l-1'">
-      <a href="#/doc">介绍</a>
-    </dd>
-    <dd :class="curName=='fastStart' ?'l-1 curs':'l-1'">
-      <a href="#/start">快速上手</a>
-    </dd>
-    <dd :class="curName=='theme' ?'l-1 curs':'l-1'">
-      <a href="#/theme">主题定制</a>
-    </dd>
-    <dd :class="curName== 'international' ?'l-1 curs':'l-1'">
-      <a href="#/international">国际化</a>
-    </dd>
-    <dd :class="curName=='update' ?'l-1 curs':'l-1'">
-      <a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
-    </dd>
-  </ol>
-  <ol>
-    <dt>组件</dt>
-    <dd
-      class="l-1"
-      @click="selectNav(nameObj.name)"
-      :class="cur.indexOf(nameObj.name)>-1&&'cur'"
-      v-for="(nameObj,index) in sortedPackages"
-      :key="index"
-    >
-      <div class="l-c-i">
-        <span>{{nameObj.name}}</span>
-        <i class="pt"></i>
-      </div>
-      <ul class="l-2" v-if="cur.indexOf(nameObj.name)>-1">
-        <template v-for="cpt in nameObj.ary">
-          <li
-            v-on:click.stop="listCheck(cpt)"
-            :class="curName==cpt.name ?'curs':''"
-            :key="cpt.name" v-if="cpt.showDemo"
-          >
-            <router-link :to="{name:cpt.name}">
-              {{cpt.name}}
-              <span>{{cpt.chnName}}</span>
-            </router-link>
-          </li>
-        </template>
-      </ul>
-    </dd>
-  </ol>
-</div>
+  <div class="main-menu lt-nv">
+    <ol class="nav-l-1">
+      <dt>指南</dt>
+      <dd :class="curName=='intr' ?'l-1 curs':'l-1'">
+        <a href="#/intro">介绍</a>
+      </dd>
+      <dd :class="curName=='fastStart' ?'l-1 curs':'l-1'">
+        <a href="#/start">快速上手</a>
+      </dd>
+      <dd :class="curName=='theme' ?'l-1 curs':'l-1'">
+        <a href="#/theme">主题定制</a>
+      </dd>
+      <dd :class="curName== 'international' ?'l-1 curs':'l-1'">
+        <a href="#/international">国际化</a>
+      </dd>
+      <dd :class="curName=='update' ?'l-1 curs':'l-1'">
+        <a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
+      </dd>
+    </ol>
+    <ol>
+      <dt>组件</dt>
+      <dd
+        class="l-1"
+        @click="selectNav(nameObj.name)"
+        :class="cur.indexOf(nameObj.name)>-1&&'cur'"
+        v-for="(nameObj,index) in sortedPackages"
+        :key="index"
+      >
+        <div class="l-c-i">
+          <span>{{nameObj.name}}</span>
+          <i class="pt"></i>
+        </div>
+        <ul class="l-2" v-if="cur.indexOf(nameObj.name)>-1">
+          <template v-for="cpt in nameObj.ary">
+            <li
+              v-on:click.stop="listCheck(cpt)"
+              :class="curName==cpt.name ?'curs':''"
+              :key="cpt.name"
+              v-if="cpt.showDemo"
+            >
+              <router-link :to="{name:cpt.name}">
+                {{cpt.name}}
+                <span>{{cpt.chnName}}</span>
+              </router-link>
+            </li>
+          </template>
+        </ul>
+      </dd>
+    </ol>
+  </div>
 </template>
 <script>
-import { sorts,packages } from "../../src/config.json";
+import { sorts, packages } from "../../src/config.json";
 export default {
   name: "index",
   data() {
@@ -93,29 +94,29 @@ export default {
           ary: temp[key]
         });
       }
-      let routeName = this.$route.name
+      let routeName = this.$route.name;
       this.sortedPackages = tempAry;
-       tempAry.map(list=>{
+      tempAry.map(list => {
         let showParentNode = false;
-        list.ary.map(ary=>{
-          if(ary.name==routeName){
-            showParentNode=true;
+        list.ary.map(ary => {
+          if (ary.name == routeName) {
+            showParentNode = true;
           }
-        })
-        if(showParentNode){
-          that.cur.push(list.name)
+        });
+        if (showParentNode) {
+          that.cur.push(list.name);
         }
-      })
+      });
     },
     $route: "fetchData"
   },
   methods: {
     fetchData(obj) {
       let that = this;
-      this.curName = obj.name;    
-      let sortedPackages = this.sortedPackages;      
-     
-      this.selectNav( obj.name) 
+      this.curName = obj.name;
+      let sortedPackages = this.sortedPackages;
+
+      this.selectNav(obj.name);
     },
     listCheck(obj) {
       // this.curName = obj.name;
@@ -134,8 +135,8 @@ export default {
   created() {
     let nameRt = this.$route.name;
     let packgs = packages;
-    
-    this.cur = sorts
+
+    this.cur = sorts;
     this.curName = nameRt;
     this.packages = packgs;
     this.sorts = sorts;
@@ -151,25 +152,26 @@ export default {
   opacity: 0;
   height: 0;
 }
-ul,ol {
+ul,
+ol {
   margin: 0;
   list-style: none;
   padding: 0;
 }
 
-dt{
-  font-size:16px;
+dt {
+  font-size: 16px;
   font-weight: 500;
-  text-indent:35px;
-  color:#5b657b;
-  margin:10px 0;
+  text-indent: 35px;
+  color: #5b657b;
+  margin: 10px 0;
 }
 
-dd{
-  margin:0;
-  &>a{
-    display:block;
-    height:100%;
+dd {
+  margin: 0;
+  & > a {
+    display: block;
+    height: 100%;
     cursor: pointer;
   }
 }
@@ -257,19 +259,16 @@ dd{
       }
     }
   }
-  .nav-l-1{
-    dd:hover{   
-    transition: all 0.5;
-    background: rgba(83, 150, 255, 0.14);
-    border-right: 4px solid #5396ff;   
+  .nav-l-1 {
+    dd:hover {
+      transition: all 0.5;
+      background: rgba(83, 150, 255, 0.14);
+      border-right: 4px solid #5396ff;
       a,
       span {
         color: #5396ff;
       }
     }
-  } 
-  
-
-  
+  }
 }
 </style>

sites/doc/router.js

@@ -32,7 +32,7 @@ const routes = [
     
   },
   {    
-    path: '/doc',
+    path: '/intro',
     name:'intr',
     components: {
       demonav: Index,