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

config.json

@@ -292,6 +292,13 @@
       "desc": "一种可以配置的二维码生成组件",
       "type": "component",
       "showDemo": false
+    },
+    {
+      "name": "Animate",
+      "chnName": "动画指令",
+      "desc": "基于animate.css的动画指令",
+      "type": "directive",
+      "showDemo": true
     }
   ]
 }

src/package/animate/index.js

@@ -0,0 +1,2 @@
+import Animate from './src/index.js';
+export default Animate;

src/package/animate/src/animate.scss

@@ -0,0 +1,10 @@
+// Our animations
+.animated {
+	animation-duration: 1s;
+	animation-fill-mode: both;
+}
+@import "./bounce/bounce";
+@import "./fade/fade";
+@import "./rotate/rotate";
+@import "./slide/slide";
+@import "./zoom/zoom";

src/package/animate/src/bounce/bounce.scss

@@ -0,0 +1,240 @@
+/*bounceIn, bounceOut*/
+@keyframes bounceIn {
+    from,
+    20%,
+    40%,
+    60%,
+    80%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    20% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+        transform: scale3d(.9, .9, .9);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+        transform: scale3d(.97, .97, .97);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+@keyframes bounceOut {
+    20% {
+        transform: scale3d(.9, .9, .9);
+    }
+
+    50%,
+    55% {
+        opacity: 1;
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+}
+
+/*bounceInUp, bounceOutUp*/
+@keyframes bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -5px, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes bounceOutUp {
+    20% {
+        transform: translate3d(0, -10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, 20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+/*bounceInDown, bounceOutDown*/
+@keyframes bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, 25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, -10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, 5px, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+@keyframes bounceOutDown {
+    20% {
+        transform: translate3d(0, 10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+/*bounceInLeft, bounceOutLeft*/
+@keyframes bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+@keyframes bounceOutLeft {
+    20% {
+        opacity: 1;
+        transform: translate3d(20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+/*bounceInRight, bounceOutRight*/
+@keyframes bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+    }
+}
+@keyframes bounceOutRight {
+    20% {
+        opacity: 1;
+        transform: translate3d(-20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+}

src/package/animate/src/fade/fade.scss

@@ -0,0 +1,148 @@
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutDown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutLeft {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutRight {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes fadeInRightBig {
+    from {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutRightBig {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes fadeInUpBig {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+

src/package/animate/src/rotate/rotate.scss

@@ -0,0 +1,135 @@
+@keyframes rotateIn {
+    from {
+        transform-origin: center;
+        transform: rotate3d(0, 0, 1, -200deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: center;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOut {
+    from {
+        transform-origin: center;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: center;
+        transform: rotate3d(0, 0, 1, 200deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInDownLeft {
+    from {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutDownLeft {
+    from {
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInDownRight {
+    from {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutDownRight {
+    from {
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInUpLeft {
+    from {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutUpLeft {
+    from {
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateInUpRight {
+    from {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, -90deg);
+        opacity: 0;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes rotateOutUpRight {
+    from {
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: rotate3d(0, 0, 1, 90deg);
+        opacity: 0;
+    }
+}
+

src/package/animate/src/slide/slide.scss

@@ -0,0 +1,87 @@
+@keyframes slideInDown {
+    from {
+        transform: translate3d(0, -100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideOutDown {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideOutLeft {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+    from {
+        transform: translate3d(0, 100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideOutUp {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(0, -100%, 0);
+    }
+}

src/package/animate/src/zoom/zoom.scss

@@ -0,0 +1,142 @@
+/*zoomIn, zoomOut*/
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomOut {
+    from {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+/*zoomInUp, zoomOutUp*/
+@keyframes zoomInUp {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutUp {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+        transform-origin: center bottom;
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+/*zoomInDown，zoomOutDown*/
+@keyframes zoomInDown {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutDown {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+        transform-origin: center bottom;
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+/*zoomInLeft, zoomOutLeft*/
+@keyframes zoomInLeft {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutLeft {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.1) translate3d(-2000px, 0, 0);
+        transform-origin: left center;
+    }
+}
+
+/*zoomInRight, zoomOutRight*/
+@keyframes zoomInRight {
+    from {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    }
+}
+
+@keyframes zoomOutRight {
+    40% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.1) translate3d(2000px, 0, 0);
+        transform-origin: right center;
+    }
+}

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/animate.vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+      <nut-docheader
+        :name="$route.name"
+        :chName="$route.params.chnName"
+        type="directive"
+        desc="基于animate.css的动画指令"
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1"></nut-codebox>
+        <h5>Options</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>v-nut-animate</td>
+              <td>指令</td>
+              <td>String</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>name</td>
+              <td>绑定的动画keyframe名称</td>
+              <td>String</td>
+              <td>必填</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>customAnimations</td>
+              <td>animate.css之外自定义的动画</td>
+              <td>Array</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>delay</td>
+              <td>规定在动画开始之前的延迟</td>
+              <td>Number</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>duration</td>
+              <td>规定完成动画所花费的时间</td>
+              <td>Number</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>iterationCount</td>
+              <td>规定动画应该播放的次数</td>
+              <td>String</td>
+              <td>1</td>
+              <td>--</td>
+            </tr>
+            <tr>
+              <td>fillMode</td>
+              <td>规定是否应该轮流反向播放动画</td>
+              <td>String</td>
+              <td>--</td>
+              <td>--</td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+          demo1:`<div v-nut-animate='{
+      name: "dash",
+      delay: 1000,
+      duration: 1500,
+      iterationCount: "infinite"
+}'>测试</div>`,
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style>
+</style>

src/view/cases.vue

@@ -0,0 +1,293 @@
+<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: bounceInRight 1s linear both;
+            @-webkit-keyframes bounceInRight{
+
+                from, 60%, 75%, 90%, to {
+                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+                }
+                from {
+                    opacity: 0;
+                    -webkit-transform: translate3d(3000px, 0, 0);
+                    transform: translate3d(3000px, 0, 0);
+                }
+                60% {
+                    opacity: 1;
+                    -webkit-transform: translate3d(-25px, 0, 0);
+                    transform: translate3d(-25px, 0, 0);
+                }
+                75% {
+                    -webkit-transform: translate3d(10px, 0, 0);
+                    transform: translate3d(10px, 0, 0);
+                }
+                90% {
+                    -webkit-transform: translate3d(-5px, 0, 0);
+                    transform: translate3d(-5px, 0, 0);
+                }
+                to {
+                    -webkit-transform: none;
+                    transform: none;
+                }
+                }
+        
+            }
+    }
+}
+.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>
 

部分使用项目.md

@@ -0,0 +1,14 @@
+|ID|项目名|时间|入口|
+|:--|:---|:---|:---|
+|1|大客户福利平台|2018.1|无固定链接|
+|2|高管考勤|2018.1|京ME-高管考勤|
+|3|京保养|2018.1|http://m-svc.jd.com/#/ 京东app-车保养-京保养|
+|4|京ME预约中心|2018.1|http://booking.jd.com/static/html/home.html 京me-预约中心|
+|5|杉德系统|2018.1|无固定链接，需要从acto.ka.jd.com进入活动管理（需有权限），查看相应动态链接|
+|6|用户之声|2018.1|京东ME-应用-用户之声|
+|7|拍拍二手|2018.1|微信小程序-拍拍二手|
+|8|调查问卷项目|2018.3|http://p.wenjuan.jd.com|
+|9|PLUS会员|2017.10|京东app-PLUS会员|
+|10|一线支援|2018.1|京东ME-应用-一线支援|
+|11|人民日报智慧党建|2018.1|人名日报app-我的中心-智慧党建|
+|12|宽带办理|2018.6|京东app-充值缴费-宽带办理|