aaa-ui-test 1.0.0

package/src/components/loading/index.js

@@ -0,0 +1,128 @@
+import Vue from 'vue';
+import LoadingComponent from './src/loading.vue';
+import "./index.scss";
+
+// const Loading = {};
+let Loading = {};
+// 注册Loading
+//Loading.install = function (Vue) {
+
+
+    // 生成一个Vue的子类
+    // 同时这个子类也就是组件
+    const LoadingConstructor = Vue.extend(LoadingComponent)
+
+    let toastPool = [];
+
+    // 生成一个该子类的实例
+    let getAnInstance = () => {
+      if (toastPool.length > 0) {
+        let instance = toastPool[0];
+        toastPool.splice(0, 1);
+        return instance;
+      }
+      return new LoadingConstructor({
+        el: document.createElement('div')
+      });
+    };
+
+    let returnAnInstance = instance => {
+      if (instance) {
+        toastPool.push(instance);
+      }
+    };
+
+    let removeDom = event => {
+      if (event.target.parentNode) {
+        event.target.parentNode.removeChild(event.target);
+      }
+    };
+
+
+    LoadingConstructor.prototype.close = function() {
+      this.show = false;
+      this.closed = true;
+      this.$el.addEventListener('transitionend', removeDom);
+      returnAnInstance(this);
+
+      return this;
+    };
+
+    // LoadingConstructor.prototype.open = function() {
+    //   this.test()
+    //   this.show = true;
+    //   this.closed = false;
+    //   //this.$el.addEventListener('transitionend', removeDom);
+    //   document.body.appendChild(this.$el);
+    //   returnAnInstance(this);
+
+    //   return this;
+    // };
+
+    // 通过Vue的原型注册一个方法
+    // 让所有实例共享这个方法 
+     Loading =  Vue.prototype.$loading = () => {
+        
+        let instance = getAnInstance();
+
+        
+        instance.closed = false;
+        clearTimeout(instance.timer);
+        
+        instance.show = true;
+
+        document.body.appendChild(instance.$el);
+
+        Vue.nextTick(function() {
+            instance.show = true;
+            instance.$el.removeEventListener('transitionend', removeDom);
+            // ~duration && (instance.timer = setTimeout(function() {
+            //  instance.show = false;
+            //   if (instance.closed) return;
+            //   instance.close();
+            // }, duration));
+        });
+
+        return instance;
+    }
+    Loading.install = function (Vue){
+
+    }
+
+
+    // 生成一个Vue的子类
+    // 同时这个子类也就是组件
+    // const LoadingConstructor = Vue.extend(LoadingComponent)
+    // 生成一个该子类的实例
+
+
+
+    // LoadingConstructor.prototype.close = function(){
+    //     this.show = false;
+    //     return this;
+    // }
+    // LoadingConstructor.prototype.open = function(){
+    //     this.show = true;
+    //     return this;
+    // }
+    // const instance = new LoadingConstructor();
+
+
+
+    // // 通过Vue的原型注册一个方法
+    // // 让所有实例共享这个方法 
+    // Vue.prototype.$loading = () => {
+    //     // debugger;
+    //     // 将这个实例挂载在我创建的div上
+    //     // 并将此div加入全局挂载点内部
+    //     instance.$mount(document.createElement('div'))
+    //     document.body.appendChild(instance.$el)
+        
+    //     instance.open();
+    //     return instance
+    // }
+
+
+//}
+
+export default Loading

package/src/components/loading/index.scss

@@ -0,0 +1,33 @@
+@charset "utf-8";
+
+.jdd-loading {
+    display: flex;
+    position: fixed;
+    top: 40%;
+    left: 50%;
+    z-index: 9999;
+    width: 54px;
+    height: 54px;
+    margin: -27px 0 0 -27px;
+    border-radius: 3px;
+    background-color: rgba(0, 0, 0, .6);
+    justify-content: center;
+    align-items: center;   
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        width: auto;
+    }
+}
+.jdd-loading-fade-enter-active,
+.jdd-loading-fade-leave-active {
+  transition: 0.3s ease-out;
+}
+.jdd-loading-fade-enter-to {
+  opacity: 1;
+  transform: scale(1);
+}
+.jdd-loading-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}

package/src/components/loading/src/loading.vue

@@ -0,0 +1,23 @@
+<template>
+  <transition name="jdd-loading-fade">
+    <div class="jdd-loading" v-show="show">
+        <jdd-mask v-model="show" :transparent="true"></jdd-mask>
+        <img src="//m.jr.jd.com/statics/pageLoading/loading.svg">
+    </div>
+  </transition>
+</template>
+
+<script>
+import JddMask from "../../mask";
+export default {
+  name: 'JddLoading',
+  components:{
+    JddMask
+  },
+  data() {
+    return {
+      show:false
+    };
+  }
+};
+</script>

package/src/components/mask/index.js

@@ -0,0 +1,9 @@
+import Mask from './src/mask.vue';
+
+import "./index.scss";
+
+Mask.install = function(Vue){
+    Vue.component(Mask.name, Mask);
+}
+
+export default Mask;

package/src/components/mask/index.scss

@@ -0,0 +1,16 @@
+@charset "utf-8";
+.jdd-mask {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.6);
+    &-transparent {
+      background-color: transparent;
+    }
+  }
+  body.jdd-modal-open {
+      position: fixed;
+  }

package/src/components/mask/src/mask.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="jdd-mask-box" v-show="value">
+    <div :class="classes" @click.stop="onClick">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import FixedBody from "@/utils/fix-body";
+export default {
+  name: "JddMask",
+  props: {
+    transparent: {
+      type: Boolean,
+      default: false
+    },
+    custmerClassName: {
+      type: String,
+      default: ""
+    },
+    unClick: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    backgroundColor:{
+      type:String,
+      default:'rgba(0, 0, 0, 0.6)'
+    }
+  },
+  directives: {
+    fixed: FixedBody
+  },
+  computed: {
+    classes() {
+      return [
+        "jdd-mask",
+        this.transparent && "jdd-mask-transparent",
+        this.custmerClassName && this.custmerClassName
+      ];
+    }
+  },
+  methods: {
+    onClick(event) {
+      !this.unClick && this.$emit("onClick", event);
+    }
+  }
+}
+</script>

package/src/components/notice/index.js

@@ -0,0 +1,6 @@
+import Notice from './src/notice.vue';
+import "./index.scss";
+Notice.install = function(Vue){
+    Vue.component(Notice.name, Notice);
+}
+export default Notice;

package/src/components/notice/index.scss

@@ -0,0 +1,81 @@
+@charset "utf-8";
+
+.jdd-notice {
+    height: 36px;
+    line-height: 36px;
+    background: #FFF7EA;
+    position: relative;
+    padding: 0 16px 0;
+    &.has-icon {
+        padding-right: 39px;
+    }
+    // &.opacity-bg{
+    //     .txt{
+    //         color: #fff;
+    //         opacity: 0.8;
+    //     }
+        .info-white{
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAAARVBMVEX///8AAAD///////////////////////////////////////////////////////////////////////////////////+Y34OdAAAAF3RSTlOZAE0QlUeKeFU9kHBqXAsFey8dIHQ3K12BC1EAAAE4SURBVEjHnZVbcoMwDEVFZNmG8Ao03f9SK5O2CdIlEM6nOKPxCD2oMnDdtWMMcWy7mu1HWquS6JUkvGn3OZAl5B7agzSEaGTwNifaIrG1p0jbxGlt3wK9I9xe7dnIXp+eNkfaI/KfPSTaJw2/thDgmq/rgDzsHtX5rt/u67r3i51R5qqwzp6LzageWV2bJ7DaQgdzk6jtCoLfraSK2Ju4JgpTTYdRtzsuq9v64NflgY2rO3r7Ui3MNq5u3LR9aSMF9JK62P6NQX1AV+wIco/ILrmZwLtbZE9l+Hy4hfVuni1l6l1v9VRC/5IJl3AAxWLYg9/w31DC/d3jYRU/O9oksuwj1yeB/Vxeqn+Mnc3Me9vPfCW2XWHHyme76sweVKb9HXt2fyvz29swn707+zft5L08f4v37/wPEEEJqjAJwqAAAAAASUVORK5CYII=) no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+        .link-white{
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAqCAMAAAB1LNBvAAAAV1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////+ORg7oAAAAHXRSTlMAzAOHCYGafKKEBmN2aA6qj4xwErCUa19bQJWRFUR+SGAAAACCSURBVDjLtdRJDoAgEERRARVxnuf7n1Mbt11NQmJt37p+QjsSuEZZRJVSEDP1ruZNi+gkNEEcAQ7R2BOuPJYiLoQNwFPANCes/sENYBHEncdWwHsmMxxNH2mOuhhqBSoC5DhKBcpjqPSUsbRguiDpHtOAyRBZlpwn/GkrtCCiIbA9D6TsBWKNDfNxAAAAAElFTkSuQmCC) no-repeat;
+            background-size: 10px;
+            background-position: center;
+        }
+        .close-white{
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWVJREFUSA3dlbFOAzEMhu0rQzckZjYeAHiESmUoKyMvgMTzIPEILKxVhQ7oG/AEvAIS2y13wXYuqt0mjYEJLLXJXfz7S2JbB/DvLCwXx2E1O/3JwVjHeq1t9ENc7NYwwEtYzs/1Wm0u/qQD6NYaYgAQukcI4YR+RwB964VEv74VnegpzmgWgJMbQPyQNSfEBGch6znOaJgmacwKYDLHy/Yt+aTR47sDYLFH6PHhWFlADeINvhdQhGBzC2G4i4XAW+Sc5a+wCshCAAe6xFgcleAugIK80q4P+VkM4RPgYJZLfnLh0ZapXtmZh603xfQZvypgk1AYd89XRCanqTfjXsAmOHc2Gd9501x/pxmLgGxwrpbF8wNXjReSvchicNXNHh85tBxd/XmFLPH4mhN4BGovMq1pbA5Cf+/t0ASKfbCVE44zmgXg9IqS9x4TWG7/JE6jgYie4pTsV5/Mp4sz/TUrMf7W+y9KrBaurvrIqgAAAABJRU5ErkJggg==) no-repeat;
+            background-size: 12px;
+            background-position: center; 
+        }
+
+   // }
+    .txt {
+        height: 100%;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #FFB540;
+        overflow: hidden;
+        float: left;
+    }
+    .icon {
+        position: absolute;
+        width: 39px;
+        height: 100%;
+        right: 0;
+        top: 0;
+    }
+    .info {      
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAAAclBMVEUAAAD/tkD/t0H/v0r/tUH/tUD/tkH/tkD/tkD/tUH/tkD/tkH/tUH/uUH/u0T/vEP/tkn/tkL/t0H/t0H/tUD/////2p//yXP/1pb/5bv/x2//8Nj/3qr/+vP/4rT/z4X/9ur/6sn/6MT/xWn/vVT/uUuzVhT1AAAAFHRSTlMAx3cY+fbw5uPMspmOMh4TB2VOZlBSPsgAAAE9SURBVEjHldXdbsIwDAVgJymUtoFSOC1lwNjv+7/ilGibSI/bLd9tLMtynFimXNfUVVmUVd10ThbtrMEjY3cyp/UFpgrfimZv19Cs7V6IM5hjqP7tBvM2W0kcVliyOiSZJ8Ec/pDdURlcjPvthsHfzE9nLBSn8YSElajV+nzu+/6c9r2VwGuZ+yDN7uNsFGBjjB7TIdglVXNurtyAcN2REXEgWk8iJ0f8XydNRnQjNcjTEI10UEsFMvTRhQ4qKWejr3RQSqFV8hyi7/xIQ252D9EfSu4KipD7BUrdNRSXeJOkVvv9ySMVNdLNzdS7dpcOegtvYE6dwVf1bmD0+b6pdwNLbycMyTWU/TYMAL8d8VTzN6Q8vXmKpjcvlsc1oqpz/qqsfzDrj836v7N2Q9beydpp+fsyfxczd1zY81821XtZdTEi1gAAAABJRU5ErkJggg==) no-repeat;
+        background-size: 16px;
+        background-position: center;
+    }
+    .link {       
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAqCAMAAAB1LNBvAAAAV1BMVEUAAAD/x1f/tUD/vE3/tkH/tkD/tkH/xVf/tkD/tkD/tkH/tkH/tkH/tT//tkD/tkD/vEf/tj//tkD/tUD/tkD/t0H/t0D/tkD/tkH/uEH/u0T/tkD/tUAAyBDXAAAAHHRSTlMABf0Mq5+ACMCopaKazrt5E9fGtrGUjYdyTxjcIwZHJAAAAIdJREFUOMud1EsSgzAMA9CkhUBIy/+P739OxllHYoK3b2WPZKNzGDhOfog6EYhBCDaKZdqsZ1gwnBlOBKtWMbzAb/15wsamcWT4J9hH9G9weMQijSfFSxTBJmo7ugAnfNQuk6paILVKLpcmSDbShiLKCad+zSUfCRdwSVLAVGIyDtZdERD7PTfTUhRPIdZb4wAAAABJRU5ErkJggg==) no-repeat;
+        background-size: 10px;
+        background-position: center;
+    }
+    .close{
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWVJREFUSA3dlbFOAzEMhu0rQzckZjYeAHiESmUoKyMvgMTzIPEILKxVhQ7oG/AEvAIS2y13wXYuqt0mjYEJLLXJXfz7S2JbB/DvLCwXx2E1O/3JwVjHeq1t9ENc7NYwwEtYzs/1Wm0u/qQD6NYaYgAQukcI4YR+RwB964VEv74VnegpzmgWgJMbQPyQNSfEBGch6znOaJgmacwKYDLHy/Yt+aTR47sDYLFH6PHhWFlADeINvhdQhGBzC2G4i4XAW+Sc5a+wCshCAAe6xFgcleAugIK80q4P+VkM4RPgYJZLfnLh0ZapXtmZh603xfQZvypgk1AYd89XRCanqTfjXsAmOHc2Gd9501x/pxmLgGxwrpbF8wNXjReSvchicNXNHh85tBxd/XmFLPH4mhN4BGovMq1pbA5Cf+/t0ASKfbCVE44zmgXg9IqS9x4TWG7/JE6jgYie4pTsV5/Mp4sz/TUrMf7W+y9KrBaurvrIqgAAAABJRU5ErkJggg==) no-repeat;
+        background-size: 12px;
+        background-position: center;
+    }
+}
+
+
+
+.jdd-notice-scroll {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.jdd-notice-pscroll {
+    width: 8000%;
+    overflow: hidden;
+    p {
+        display: inline-block;
+        padding-left: 16px;
+    }
+}

package/src/components/notice/src/notice.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-show="value">
+    <div
+      class="jdd-notice"
+      :class="{'opacity-bg':opacity == '1','has-icon':icon}"
+      :style="{backgroundColor:background}"
+    >
+      <div class="jdd-notice-scroll wrapper" ref="jrNoticeScroll">
+        <div class="jdd-notice-pscroll inner" ref="jrNoticePscroll">
+          <div
+            class="txt scrollp"
+            ref="scrollp"
+            :style="{color:color,paddingLeft:paddingLeft+'px'}"
+          >
+            <slot></slot>
+          </div>
+        </div>
+        <i :class="[icon,'icon']" v-if="icon" @click="iconClick"></i>
+        <!-- <i class="link icon" v-if="icon === 'link'" @click="redirectFn"></i>
+        <i class="close icon" v-if="icon === 'close'" @click="closeNotice"></i>
+         <i class="icon info-white"  v-if="icon === 'info-white'" @click="infoClickFn"></i>
+        <i class="icon link-white" v-if="icon === 'link-white'" @click="redirectFn"></i>
+        <i class="icon close-white" v-if="icon === 'close-white'" @click="closeNotice"></i>-->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { rAF } from "@/utils/utils";
+export default {
+  name: "JddNotice",
+  data() {
+    return {
+      paddingLeft: 0
+    };
+  },
+  props: {
+    // type: {
+    //   type: String,
+    //   default: 'normal'
+    // },
+    color: {
+      type: String,
+      default: "#FFB540"
+    },
+    background: {
+      type: String,
+      default: "#FFF7EA"
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    // url: {
+    //   type: String
+    // },
+    infoClick: {
+      type: Function
+    },
+    opacity: {
+      type: String,
+      default: "0"
+    },
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted: function() {
+    let _this = this;
+    var wrapper = this.$refs.jrNoticeScroll;
+    var inner = this.$refs.jrNoticePscroll;
+    var p = this.$refs.scrollp;
+    var p_w = p.offsetWidth;
+    var wrapper_w = wrapper.offsetWidth;
+
+    // console.log(wrapper_w,p_w);
+    if (wrapper_w > p_w) {
+      return;
+    } else {
+      // inner.innerHTML += inner.innerHTML;
+      // var timer = setInterval(function(){
+
+      //   if (p_w > wrapper.scrollLeft) {
+      //     wrapper.scrollLeft++;
+      //   }
+      //   else{
+      //     wrapper.scrollLeft = 0;
+      //   }
+
+      // },16)
+      let stop = null;
+      let second = false;
+      let base = 0;
+      setTimeout(() => {
+        function step(timestamp) {
+          
+            if (p_w > wrapper.scrollLeft - base) {
+              wrapper.scrollLeft++;
+              stop = rAF(step);
+            } else {
+              second = true;
+              cancelAnimationFrame(stop);
+              _this.paddingLeft = wrapper.offsetWidth;
+              base = wrapper.offsetWidth;
+              wrapper.scrollLeft = 0;
+              setTimeout(() => {
+                stop = rAF(step);
+              }, 1500);
+            }
+          
+        }
+
+        stop = rAF(step);
+      }, 2000);
+    }
+  },
+  methods: {
+    iconClick: function() {
+      if (this.icon === "close" || this.icon === "close-white") {
+        this.$emit("close");
+      } else {
+        this.$emit("click");
+      }
+    }
+  }
+};
+</script>

package/src/components/overlay/index.js

@@ -0,0 +1,8 @@
+import Overlay from './src/overlay.vue';
+import "./index.scss";
+
+Overlay.install = function(Vue){
+    Vue.component(Overlay.name, Overlay);
+}
+
+export default Overlay;

package/src/components/overlay/index.scss

@@ -0,0 +1,119 @@
+@charset "utf-8";
+@import "~@/assets/css/common/var";
+@import "~@/assets/css/common/mixin";
+.screen-lock {
+  overflow: hidden;
+}
+.hide {
+  display: none
+}
+.bgWhite {
+  background-color: $white
+}
+.jdd-overlay-box {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.jdd-overlay-container {
+  position: relative;
+  height: 100%;
+  padding: 130px 0px 50px;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+}
+.jdd-overlay-title {
+  position: relative;
+  max-height: 79px;
+  margin: 0 40px;
+  overflow: hidden;
+  @include jdd-border-bottom();
+  h2 {
+    width: 100%;
+    padding-bottom: 20px;
+    font-size: 21px;
+    line-height: 29.5px;
+    color: #333;
+    text-align: center;
+    display: block;
+  }
+}
+.jdd-overlay-content {
+  padding: 20px 30px 0 40px;
+  flex: 1;
+  display: flex;
+  overflow-y: hidden;
+}
+.jdd-overlay-inner {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: 16px;
+  line-height: 28px;
+  color: #666;
+  padding-right: 10px;
+ // height: 100%;
+}
+.jdd-overlay-btn {
+  margin: 50px auto 0px;
+  text-align: center;
+  overflow: hidden;
+  font-size: 0;
+  .jdd-imgs-close {
+    // margin-top: 2.625rem;
+    display: inline-block;
+    width: 44px;
+    height: 44px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAAAXNSR0IArs4c6QAAAu9JREFUeAHt2r+LE0EUwPHLXqWlRQohhYWFIASSf+C82s5CQWut7QX9F+xTKni9licWlvlhQBRsUxmuucoiv3wPMse47ia3k7mdF+67EHay2X0788nL290hBwcsCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAALGBMbj8f3YXZKYdyaTyY3YcavGy6oeEHv/wWDwZjabfRsOh09ixR6NRnfn8/nX6XT6MTVyI9agQuIo7mq1er0+dpFl2bNOp/MhJJY7RnGXy+UXiXtbtzUajc/NZvNhq9X64/apc50sg7UsCMIrb7CHAvNul0zO42psOcexZPIL7zy1NpMBt9vt75qxMtqFN+Jg5CLcddye/CreeueotZm0ROhINWM1c6V56I28UrnYhNvtdp9LmVh5sWttJgfW0e6CbBlXx2YCOBTZOq4p4KrI+4BrDviyyPuCaxJ4G7JcsAb+fa7uv156qS9oriP+2kwN9jul7Q0XvnMBvpXb3ySu9tEssHauBFk/8hezuNpJ08DawS3IpnG1/8me5PTkl1m05soT33l+X9m+lO2nKR8i8n0qem8a2N0tFNRcnWPI9AlQM7xoYFa2mQV2uG5WzIFp5rq2rIPnLrwYV9o0CVyGKxI9AX4q6/8miGTq8/GVSgUGNwe8CVfvc3W+uGgWTjL9vUVkU3cR23D9C1rJ3cVCM1y+iJPAhIt+mBngKrhOYR+QTZSIEFxF1nJRVJMtlYvkGRyK67JY11p7FVWa/0zaWygXSYFj4Dpoq8jJSoT+byHmrJhe2MrKhdTqR+6LqHudDFj+C/Fbfta/cgPeaW6hBPlMzvMjd57a3iYtEf1+/6aM9JO8juS1E64cf7F45eJMsvqBwP+8+PC6NRRZQF5KlkX9srUsSNx7182T8SKAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAK2Bf4CoKj4d3I8GvAAAAAASUVORK5CYII=);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.jdd-o-dl {
+  padding-bottom: 10px;
+  position: relative;
+  .jdd-o-dt {
+    color: #333
+  }
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+
+dl.jdd-o-dl {
+  list-style-type: none;
+  counter-reset: sectioncounter;
+  dd {
+    margin-left: 16px;
+    &::before,
+    &:before {
+      content: counter(sectioncounter);
+      counter-increment: sectioncounter;
+      float: left;
+      margin-left: -16px;
+    }
+  }
+}
+
+.ani-scale-leave,
+.ani-scale-enter-active {
+  opacity: .98;
+  backface-visibility: hidden;
+  transition-property: transform, opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 200ms;
+  transform: scale(1);
+}
+
+.ani-scale-enter,
+.ani-scale-leave-to {
+  opacity: 0;
+  transition-property: transform, opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 200ms;
+  transform: scale(0.85);
+}

package/src/components/overlay/src/overlay.vue

@@ -0,0 +1,72 @@
+<template>
+  <transition name="ani-scale">
+    <div class="jdd-overlay-box" v-show="show">
+      <jdd-mask v-model="show" :custmerClassName="custmerClassName"></jdd-mask>
+      <div class="jdd-overlay-container">
+        <div class="jdd-overlay-title">
+          <h2 v-text="title"></h2>
+        </div>
+        <div class="jdd-overlay-content">
+          <div class="jdd-overlay-inner">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="jdd-overlay-btn">
+          <i class="jdd-imgs-close" @click="onClickClose"></i>
+          <input type="text" :value="value" class="hide" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import JddMask from "../../mask";
+export default {
+  name: "JddOverlay",
+  props: {
+    /* Mask组件 */
+    custmerClassName: {
+      type: String,
+      default: "bgWhite"
+    },
+    /* 当前属性 */
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      show: this.value
+      // html: document.getElementsByTagName('body')[0]
+    };
+  },
+  components: {
+    JddMask
+  },
+  watch: {
+    show(val) {
+      /* 隐藏的input 控件来保存v-model的值，进行双向绑定 */
+      this.$emit("input", val);
+      /* 全屏锁 */
+      // if(val) {
+      //   this.html.className = 'screen-lock'
+      // } else {
+      //   this.html.className = ''
+      // }
+    },
+    value(val) {
+      this.show = val;
+    }
+  },
+  methods: {
+    onClickClose() {
+      this.show = !this.show;
+    }
+  }
+};
+</script>

package/src/components/picker/index.js

@@ -0,0 +1,7 @@
+import Picker from './src/picker.vue';
+import "./index.scss";
+
+Picker.install = function(Vue){
+    Vue.component(Picker.name, Picker);
+}
+export default Picker;