Merge branch 'dev' of https://github.com/jdf2e/nutui into dev

config.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.8",
+  "version": "1.2.9",
   "packages": [
     {
       "name": "DatePicker",
@@ -299,6 +299,13 @@
       "desc": "基于animate.css的动画指令",
       "type": "directive",
       "showDemo": true
+    },
+    {
+      "name": "Progress",
+      "chnName": "进度条",
+      "desc": "进度条",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutui/nutui",
   "description": "基于Vue2的轻量级移动端UI组件库",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "author": "jdc-fe",
   "main": "dist/nutui.js",
   "keywords": [

src/demo/progress.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <p>默认用法</p>
+        <nut-progress percent="15" height="10px"/>
+        <p>设置高度和颜色</p>
+        <nut-progress height="18px" color="#33C3F0" percent="23" />
+        <p>内联显示进度数</p>
+        <nut-progress percent="20" showText="in" height="20px" />
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/package/progress/index.js

@@ -0,0 +1,7 @@
+import Progress from './src/progress.vue';
+
+Progress.install = function(Vue) {
+    Vue.component(Progress.name, Progress);
+}
+
+export default Progress;

src/package/progress/src/progress.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="nut-progress">
+        <div :class="['nut-progress-cont', showText !== 'out'? 'nut-progress-in': 'nut-progress-out']" :style="{height}">
+            <div class="nut-progress-bar" :style="{background: color, width: per}">
+                <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText !== 'out'">{{per}}</div>
+            </div>
+        </div>
+        <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText === 'out'">{{per}}</div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-progress',
+    props: {
+        percent: {
+            type: [String, Number],
+            default: '0'
+        },
+        color: {
+            type: String,
+            default: '#f23030'
+        },
+        height: {
+            type: String,
+            default: '.06rem'
+        },
+        showText: {
+            type: String,
+            default: 'out'
+        }
+    },
+    computed: {
+        per() {
+            let per = String(this.percent);
+            if(per.lastIndexOf('%') == per.length - 1) {
+                per = parseFloat(per.slice(0, -1));
+            }else{
+                per = parseFloat(per);
+            }
+            return Math.min(per, 100) + '%';
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="scss">
+.nut-progress{
+    position: relative;
+}
+.nut-progress-cont{
+    border-radius: 100px;
+    background-color: #ebeef5;
+    overflow: hidden;
+    position: relative;
+}
+.nut-progress-bar{
+    border-radius: 100px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+.nut-progress-text{
+    float: right;
+    font-size: .14rem;
+    color: #fff;
+}
+.nut-progress-in{
+    .nut-progress-text{
+        margin-right: 5px;
+    }
+}
+.nut-progress-out{
+    margin-right: 38px;
+    &+.nut-progress-text{
+        width: 31px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: #666;
+    }
+}
+</style>

src/view/cases.vue

@@ -8,7 +8,7 @@
             <div class="box-entry">{{item.entry}}</div>
             <div class="box-intro">{{item.intro}}</div>
             <div class="box-image">
-                <img :src='item.imageSrc' width="350px" />
+                <img :src='item.imageSrc' class="images" />
             </div>
         </div>
         <h4 class="nav-box"><b class="icon"></b>京东&nbsp;ME</h4>
@@ -22,7 +22,11 @@
         <h4 class="nav-box"><b class="icon"></b>大客户</h4>
         <ul class="logos">
             <li v-for="(list,index) in clientList" v-bind:key="index">
-                <img class="logos-img client-img" :src="list.imageSrc"/>
+                <div class="client-big" v-if="list.title == '生活杉德'">
+                    <img class="logos-img client-bigimg" :src="list.imageSrc"/>
+                </div>
+                
+                <img class="logos-img client-img" :src="list.imageSrc" v-if="list.title !== '生活杉德'"/>
                 <p class="logos-text">{{list.title}}</p>
             </li>
         </ul>
@@ -43,7 +47,7 @@ export default {
         return{
           appList:[
             {
-              title:'会员PLUS',
+              title:'PLUS会员',
               entry:'京东APP首页—PLUS会员',
               intro:'京东为向核心客户提供更优质的购物体验，推出了京东PLUS会员，包含购物回馈、自营运费补贴、畅读电子书、退换无忧、专属客服和专享商品等权益，全方位提升和丰富网购特权。',
               imageSrc:'//img10.360buyimg.com/uba/jfs/t23413/151/250900924/114472/8b24b17f/5b2a2b55Ndc255cf7.png'
@@ -59,6 +63,12 @@ export default {
               entry:'京东APP-充值缴费-宽带办理',
               intro:'宽带项目作为电商进入客户家庭的关键入口，利用运营商现有渠道，能集约对接各省市运营商，且支持线下/第三方各渠道下单。',
               imageSrc:'//img11.360buyimg.com/uba/jfs/t22624/176/252723731/122091/20837dc4/5b2a17baNe4cc750f.png'
+            },
+            {
+              title:'TELink联合校招',
+              entry:'京东APP-校园生活-大学生活-校园招聘',
+              intro:'Telink无界选人移动端业务旨在联合企业、校园、学生，进行无界联合招聘，为联合招聘提供移动端的支持。与校园业务结合达成合作。京东校园协调全国2000余所院校的500万认证学生资源以及各品牌方，开展线下校园招聘会，并提供TElink无界招聘在京东app的专属入口。',
+              imageSrc:'//img14.360buyimg.com/uba/jfs/t21133/306/1869282378/85523/4acb84e9/5b3c8ca6Nec7cf1b3.jpg'
             }
           ],
           meList:[
@@ -81,12 +91,28 @@ export default {
             {
                 title:'差旅服务',
                 imageSrc:'../asset/img/cases/travel.png',
+            },
+            {
+                title:'智能停车场',
+                imageSrc:'../asset/img/cases/car_stop.png',
+            },
+            {
+                title:'访客预约',
+                imageSrc:'../asset/img/cases/visitor.png',
+            },
+            {
+                title:'京东福利',
+                imageSrc:'../asset/img/cases/fuli.png',
             }
           ],
           clientList:[
             {
                 title:'年节福利',
                 imageSrc:'../asset/img/cases/jingxi.png',
+            },
+            {
+                title:'生活杉德',
+                imageSrc:'../asset/img/cases/shande_icon.png',
             }
           ],
           otherList:[
@@ -107,6 +133,7 @@ export default {
 <style lang="scss" scoped>
 .wrapper{
     padding-bottom:50px;
+    background:#fff;
 }
 .title-box{
     color: #0f0649;
@@ -232,6 +259,14 @@ p{
                 }
         
             }
+            .images{
+                width:350px
+            }
+            @media (max-width: 450px) {
+                .images{
+                    width:250px
+                }
+            }
     }
 }
 .logos{
@@ -243,6 +278,7 @@ p{
     list-style-type:none;
     display:flex;
     //justify-content: center;
+    flex-wrap: wrap;
     li{
         float:left;
         padding:0px;
@@ -303,6 +339,18 @@ p{
             height:65px;
             background-size:85px 65px;
         }
+        .client-big{
+            width:85px;
+            height:65px;
+            display:flex;
+            justify-content:center;
+            align-items:center;
+        }
+        .client-bigimg{
+            width:89px;
+            height:36px;
+            background-size:89px 36px;
+        }
         .other-img{
             width:65px;
             height:65px;

src/view/intro.vue

@@ -31,7 +31,7 @@
 <h5>联系我们</h5>
 <p>如果您在使用组件的过程中遇到了什么问题，或者有什么意见建议，都欢迎与我们联系：<a href="mailto:nutui@jd.com">nutui@jd.com</a></p>
 <h5>使用项目</h5>
-<p><router-link  tag="a" to="/cases" :class="{ current:path=='/cases' }" target='_blank'>正在使用项目</router-link>，如果您在项目里使用了NutUI，欢迎告知。</p>
+<p><router-link  tag="a" to="/cases" :class="{ current:path=='/cases' }" target='_blank'>点击查看正在使用项目。</router-link>如果您在项目里使用了NutUI，欢迎告知。</p>
     </div>
 </template>
 

src/view/progress.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <nut-docheader 
+        :name="$route.name" 
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <h6>默认用法</h6>
+        <nut-codebox code="<nut-progress 
+percent='15'
+height='10px' />" />
+        <div class="cont">
+          <nut-progress percent="15" height="10px" />
+        </div>
+        <h6>设置高度和颜色</h6>
+        <nut-codebox code="<nut-progress 
+height='18px' 
+color='#33C3F0' />" />
+        <div class="cont">
+          <nut-progress height="18px" color="#33C3F0" percent="23" />
+        </div>
+        <h6>内联显示进度数</h6>
+        <nut-codebox code="<nut-progress 
+height='0.25rem' 
+percent='20' 
+showText='in' />" />
+        <div class="cont">
+          <nut-progress percent="20" showText="in" height="20px" />
+        </div>
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+              <thead>
+                <tr>
+                  <th>参数</th>
+                  <th>说明</th>
+                  <th>类型</th>
+                  <th>默认值</th>
+                  <th>可选值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>percent</td>
+                  <td>百分比</td>
+                  <td>String, Number</td>
+                  <td>0</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>color</td>
+                  <td>背景色</td>
+                  <td>String</td>
+                  <td>#f23030</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>height</td>
+                  <td>高度</td>
+                  <td>String</td>
+                  <td>.06rem</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>showText</td>
+                  <td>显示百分比的位置</td>
+                  <td>String</td>
+                  <td>out</td>
+                  <td>--</td>
+                </tr>
+              </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style>
+.cont{
+  width: 450px;
+}
+</style>