update

src/router.js

@@ -5,7 +5,7 @@ import Conf from '../config.json';
 const Nav = () => import('./view/nav.vue');
 const Intro = () => import('./view/intro.vue');
 const Phone = () => import('./view/phone.vue');
-
+const Cases = () => import('./view/cases.vue');
 Vue.use(VueRouter);
 
 const routes = [
@@ -30,6 +30,13 @@ const routes = [
       phone:Phone,
       
     }
+  },
+  { 
+    name:'cases',
+    path: '/cases', 
+    components:{
+      main:Cases,
+    }
   }
 ];
 

src/view/cases.vue

@@ -0,0 +1,285 @@
+<template>
+    <div class="wrapper">
+        <h1 class="title-box">实践案例</h1>
+        <p>从NUTUI诞生起，就逐渐应用在多个项目中，相信以后会有越来越多的项目接入到NUTUI中。以下是应用了NUTUI的项目示例。</p>
+        <h4 class="nav-box"><b class="icon"></b>京东APP</h4>
+        <div class="box" v-for="(item,index) in appList" v-bind:key="index">
+            <p class="box-title"><b class="title-round"></b>{{item.title}}</p>
+            <div class="box-entry">{{item.entry}}</div>
+            <div class="box-intro">{{item.intro}}</div>
+            <div class="box-image">
+                <img :src='item.imageSrc' width="350px" />
+            </div>
+        </div>
+        <h4 class="nav-box"><b class="icon"></b>京东ME</h4>
+        <ul class="logos">
+            <li v-for="(list,index) in meList" v-bind:key="index">
+                <img class="logos-img" :src="list.imageSrc"/>
+                <p class="logos-text">{{list.title}}</p>
+            </li>
+        </ul>
+        <div class="line"></div>
+        <h4 class="nav-box"><b class="icon"></b>其他</h4>
+        <ul class="logos">
+            <li v-for="(list,index) in otherList" v-bind:key="index">
+                <img class="logos-img other-img" :src="list.imageSrc"/>
+                <p class="logos-text">{{list.title}}</p>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+          appList:[
+            {
+              title:'会员PLUS',
+              entry:'访问入口：京东APP首页—PLUS会员',
+              intro:'京东为向核心客户提供更优质的购物体验，推出了京东PLUS会员，包含购物回馈、自营运费补贴、畅读电子书、退换无忧、专属客服和专享商品等权益，全方位提升和丰富网购特权。',
+              imageSrc:'//img10.360buyimg.com/uba/jfs/t23413/151/250900924/114472/8b24b17f/5b2a2b55Ndc255cf7.png'
+            },
+            {
+              title:'京保养',
+              entry:'访问入口： 京东APP-车保养-京保养',
+              intro:'京保养实现了汽车服务市场的业务快速接入，提供购买保养套餐后的绑车、预约门店进行保养等一系列移动端线上操作功能，让用户购买一次，多个门店可选择并进行爱车保养。',
+              imageSrc:'//img11.360buyimg.com/uba/jfs/t20998/154/1477000841/77697/dc24002b/5b2a0f0eNfcdaa2f2.jpg'
+            },
+            {
+              title:'宽带办理',
+              entry:'访问入口： 京东APP-充值缴费-宽带办理',
+              intro:'宽带项目作为电商进入客户家庭的关键入口，利用运营商现有渠道，能集约对接各省市运营商，且支持线下/第三方各渠道下单。',
+              imageSrc:'//img11.360buyimg.com/uba/jfs/t22624/176/252723731/122091/20837dc4/5b2a17baNe4cc750f.png'
+            }
+          ],
+          meList:[
+            {
+                title:'预约中心',
+                imageSrc:'../asset/img/cases/yuyue_icon.png',
+            },
+            {
+                title:'用户之声',
+                imageSrc:'../asset/img/cases/user_icon.png',
+            },
+            {
+                title:'一线支援',
+                imageSrc:'../asset/img/cases/online_icon.png',
+            }
+          ],
+          otherList:[
+            {
+                title:'智慧党建',
+                imageSrc:'../asset/img/cases/dangjian_icon.png',
+            }
+          ]
+        }
+    },
+    components: {
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper{
+    padding-bottom:50px;
+}
+.title-box{
+    color: #0f0649;
+    margin-bottom: 20px;
+    margin-top: 8px;
+    font-size: 30px;
+    line-height: 38px;
+}
+p{
+    color: #314659;
+    font-size: 16px;
+    line-height: 2;
+}
+.nav-box{
+    display:inline-block;
+    font-size: 24px;
+    height:25px;
+    line-height: 25px;
+    color:#a38249;
+    &:hover{
+        animation: swing 1s linear both;
+    }
+    .line{
+        vertical-align:middle;
+        width:15px;
+        height:5px;
+        background:#a38249;
+        display:inline-block;
+        margin-right:10px;
+    }
+    .icon{
+        margin-right:10px;
+        display:inline-block;
+        width:11px;
+        height:16px;
+        background:url('../asset/img/cases/right-icon.png') no-repeat;
+    }
+    @-webkit-keyframes swing{
+        20% {
+            -webkit-transform: rotate3d(0, 0, 1, 15deg);
+            transform: rotate3d(0, 0, 1, 15deg);
+        }
+        40% {
+            -webkit-transform: rotate3d(0, 0, 1, -10deg);
+            transform: rotate3d(0, 0, 1, -10deg);
+        }
+        60% {
+            -webkit-transform: rotate3d(0, 0, 1, 5deg);
+            transform: rotate3d(0, 0, 1, 5deg);
+        }
+        80% {
+            -webkit-transform: rotate3d(0, 0, 1, -5deg);
+            transform: rotate3d(0, 0, 1, -5deg);
+        }
+        to {
+            -webkit-transform: rotate3d(0, 0, 1, 0deg);
+            transform: rotate3d(0, 0, 1, 0deg);
+        }
+    }
+}
+.box{
+    border-bottom:2px solid #eee;
+    margin-bottom:10px;
+    padding-bottom:40px;
+    .box-title{
+        font-size: 20px;
+        margin-top:40px;
+        margin-bottom:0px;
+        font-weight:bold;
+        .title-round{
+            display:inline-block;
+            width:10px;
+            height:10px;
+            background:#314659;
+            border-radius:50%;
+            margin-right:10px;
+            margin-bottom: 2px;
+        }
+    }
+    .box-entry, .box-intro{
+        font-size: 16px;
+    }
+    .box-intro{
+        margin-bottom:35px;
+    }
+    .box-entry{
+        color:#2d336a;
+        margin-bottom:10px;
+    }
+    .box-image{
+        img{
+            display:block;
+            margin:0 auto;
+            box-shadow: 0px 15px 38px 1px #eee;
+            animation: lightSpeedIn 1s linear both;
+            @-webkit-keyframes lightSpeedIn{
+                from {
+                    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+                    transform: translate3d(100%, 0, 0) skewX(-30deg);
+                    opacity: 0;
+                }
+                60% {
+                    -webkit-transform: skewX(20deg);
+                    transform: skewX(20deg);
+                    opacity: 1;
+                }
+                80% {
+                    -webkit-transform: skewX(-5deg);
+                    transform: skewX(-5deg);
+                    opacity: 1;
+                }
+                to {
+                    -webkit-transform: none;
+                    transform: none;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
+.logos{
+    padding:0px;
+    margin:0px;
+    width:80%;
+    margin:0 auto;
+    box-sizing:border-box;
+    list-style-type:none;
+    display:flex;
+    justify-content: center;
+    li{
+        float:left;
+        padding:0px;
+        margin:20px;
+        width:80px;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        &:hover{
+            animation: rubberBand 1s linear both;
+            .logos-text{
+                color:red;
+            }
+        }
+        @-webkit-keyframes rubberBand{
+
+        from {
+            -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+        }
+        30% {
+            -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
+        }
+        40% {
+            -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
+        }
+        50% {
+            -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
+        }
+        65% {
+            -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
+        }
+        75% {
+            -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
+        }
+        to {
+            -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+        }
+        }
+        
+        .logos-img{
+            display:block;
+            width:56px;
+            height:56px;
+            background-size:56px 56px;
+            background-repeat:no-repeat;
+            background-position:center center;
+        } 
+        .other-img{
+            width:65px;
+            height:65px;
+            background-size:65px 65px;
+        }
+        .logos-text{
+            margin-top: 10px;
+        }
+    }
+}
+.line{
+    border-bottom:2px solid #eee;
+}
+</style>

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>如果您在项目里使用了NutUI，欢迎告知。</p>
+<p><router-link  tag="a" to="/cases" :class="{ current:path=='/cases' }" target='_blank'>正在使用项目</router-link>，如果您在项目里使用了NutUI，欢迎告知。</p>
     </div>
 </template>