diff --git a/dist/main.js b/dist/main.js
new file mode 100644
index 0000000..79a6dd0
--- /dev/null
+++ b/dist/main.js
@@ -0,0 +1 @@
+!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports["vue-flip-down"]=n():t["vue-flip-down"]=n()}(window,function(){return function(t){var n={};function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(n){return t[n]}.bind(null,i));return o},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=1)}([function(t,n,e){var o=e(3);"string"==typeof o&&(o=[[t.i,o,""]]);e(5)(o,{hmr:!0,transform:void 0,insertInto:void 0}),o.locals&&(t.exports=o.locals)},function(t,n,e){t.exports=e(7)},function(t,n,e){"use strict";var o=e(0);e.n(o).a},function(t,n,e){(t.exports=e(4)(!1)).push([t.i,"\n.vue-countdown-component[data-v-5ef48958] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n}\n@-webkit-keyframes animate-filp-data-v-5ef48958 {\n0% {\n    -webkit-transform: rotateX(0);\n            transform: rotateX(0);\n}\n100% {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg);\n}\n}\n@keyframes animate-filp-data-v-5ef48958 {\n0% {\n    -webkit-transform: rotateX(0);\n            transform: rotateX(0);\n}\n100% {\n    -webkit-transform: rotateX(-180deg);\n            transform: rotateX(-180deg);\n}\n}\n@-webkit-keyframes animate-filp2-data-v-5ef48958 {\n0% {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg);\n}\n100% {\n    -webkit-transform: rotateX(0);\n            transform: rotateX(0);\n}\n}\n@keyframes animate-filp2-data-v-5ef48958 {\n0% {\n    -webkit-transform: rotateX(180deg);\n            transform: rotateX(180deg);\n}\n100% {\n    -webkit-transform: rotateX(0);\n            transform: rotateX(0);\n}\n}\n.vue-countdown-component .time-box[data-v-5ef48958] {\n  position: relative;\n  box-sizing: border-box;\n  height: 30px;\n  min-width: 28px;\n  font-size: 16px;\n  text-align: center;\n  line-height: 30px;\n  background-color: #6c96e8;\n  color: #ffffff;\n  -webkit-perspective: 50px;\n          perspective: 50px;\n  border-radius: 3px;\n  padding: 0 2px;\n}\n.vue-countdown-component .time-box[data-v-5ef48958]:before {\n  content: '';\n  position: absolute;\n  background: #a7c7ff;\n  width: 2px;\n  height: 6px;\n  top: 50%;\n  left: -1px;\n  margin-top: -3px;\n}\n.vue-countdown-component .time-box[data-v-5ef48958]:after {\n  content: '';\n  position: absolute;\n  background: #a7c7ff;\n  width: 2px;\n  height: 6px;\n  top: 50%;\n  right: -1px;\n  margin-top: -3px;\n}\n.vue-countdown-component .time-box + .time-box[data-v-5ef48958] {\n  margin-left: 8px;\n}\n.vue-countdown-component .time-box > div[data-v-5ef48958] {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 50%;\n  overflow: hidden;\n  -webkit-transform-style: preserve-3d;\n          transform-style: preserve-3d;\n}\n.vue-countdown-component .time-box > div > div[data-v-5ef48958] {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 30px;\n}\n.vue-countdown-component .time-box > div.a0[data-v-5ef48958] {\n  top: 0;\n  border-radius: 3px 3px 0 0;\n  background-color: #6c96e8;\n  -webkit-transform-origin: 50% bottom;\n          transform-origin: 50% bottom;\n  -webkit-animation-duration: 500ms;\n          animation-duration: 500ms;\n  -webkit-transform: rotateX(0);\n          transform: rotateX(0);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  z-index: 2;\n}\n.vue-countdown-component .time-box > div.a0.anime[data-v-5ef48958] {\n  -webkit-animation-name: animate-filp-data-v-5ef48958;\n          animation-name: animate-filp-data-v-5ef48958;\n}\n.vue-countdown-component .time-box > div.a0 > div[data-v-5ef48958] {\n  top: 0;\n}\n.vue-countdown-component .time-box > div.b0[data-v-5ef48958] {\n  top: 15px;\n  border-radius: 0 0 3px 3px;\n  background-color: #73a1f8;\n  -webkit-transform-origin: 50% top;\n          transform-origin: 50% top;\n  -webkit-animation-duration: 500ms;\n          animation-duration: 500ms;\n  -webkit-transform: rotateX(180deg);\n          transform: rotateX(180deg);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  z-index: 2;\n}\n.vue-countdown-component .time-box > div.b0 > div[data-v-5ef48958] {\n  bottom: 0;\n}\n.vue-countdown-component .time-box > div.b0.anime[data-v-5ef48958] {\n  -webkit-animation-name: animate-filp2-data-v-5ef48958;\n          animation-name: animate-filp2-data-v-5ef48958;\n}\n.vue-countdown-component .time-box > div.a1[data-v-5ef48958] {\n  top: 15px;\n  border-radius: 0 0 3px 3px;\n  background-color: #73a1f8;\n}\n.vue-countdown-component .time-box > div.a1 > div[data-v-5ef48958] {\n  bottom: 0;\n}\n",""])},function(t,n){t.exports=function(t){var n=[];return n.toString=function(){return this.map(function(n){var e=function(t,n){var e,o=t[1]||"",i=t[3];if(!i)return o;if(n&&"function"==typeof btoa){var r=(e=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"),a=i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"});return[o].concat(a).concat([r]).join("\n")}return[o].join("\n")}(n,t);return n[2]?"@media "+n[2]+"{"+e+"}":e}).join("")},n.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&o[a[0]]||(e&&!a[2]?a[2]=e:e&&(a[2]="("+a[2]+") and ("+e+")"),n.push(a))}},n}},function(t,n,e){var o,i,r={},a=(o=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===i&&(i=o.apply(this,arguments)),i}),s=function(t){var n={};return function(t,e){if("function"==typeof t)return t();if(void 0===n[t]){var o=function(t,n){return n?n.querySelector(t):document.querySelector(t)}.call(this,t,e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}n[t]=o}return n[t]}}(),d=null,f=0,c=[],u=e(6);function l(t,n){for(var e=0;e<t.length;e++){var o=t[e],i=r[o.id];if(i){i.refs++;for(var a=0;a<i.parts.length;a++)i.parts[a](o.parts[a]);for(;a<o.parts.length;a++)i.parts.push(y(o.parts[a],n))}else{var s=[];for(a=0;a<o.parts.length;a++)s.push(y(o.parts[a],n));r[o.id]={id:o.id,refs:1,parts:s}}}}function m(t,n){for(var e=[],o={},i=0;i<t.length;i++){var r=t[i],a=n.base?r[0]+n.base:r[0],s={css:r[1],media:r[2],sourceMap:r[3]};o[a]?o[a].parts.push(s):e.push(o[a]={id:a,parts:[s]})}return e}function p(t,n){var e=s(t.insertInto);if(!e)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var o=c[c.length-1];if("top"===t.insertAt)o?o.nextSibling?e.insertBefore(n,o.nextSibling):e.appendChild(n):e.insertBefore(n,e.firstChild),c.push(n);else if("bottom"===t.insertAt)e.appendChild(n);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var i=s(t.insertAt.before,e);e.insertBefore(n,i)}}function v(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var n=c.indexOf(t);n>=0&&c.splice(n,1)}function b(t){var n=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var o=e.nc;o&&(t.attrs.nonce=o)}return h(n,t.attrs),p(t,n),n}function h(t,n){Object.keys(n).forEach(function(e){t.setAttribute(e,n[e])})}function y(t,n){var e,o,i,r;if(n.transform&&t.css){if(!(r=n.transform(t.css)))return function(){};t.css=r}if(n.singleton){var a=f++;e=d||(d=b(n)),o=g.bind(null,e,a,!1),i=g.bind(null,e,a,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=function(t){var n=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",h(n,t.attrs),p(t,n),n}(n),o=function(t,n,e){var o=e.css,i=e.sourceMap,r=void 0===n.convertToAbsoluteUrls&&i;(n.convertToAbsoluteUrls||r)&&(o=u(o)),i&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var a=new Blob([o],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,e,n),i=function(){v(e),e.href&&URL.revokeObjectURL(e.href)}):(e=b(n),o=function(t,n){var e=n.css,o=n.media;if(o&&t.setAttribute("media",o),t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}.bind(null,e),i=function(){v(e)});return o(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;o(t=n)}else i()}}t.exports=function(t,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(n=n||{}).attrs="object"==typeof n.attrs?n.attrs:{},n.singleton||"boolean"==typeof n.singleton||(n.singleton=a()),n.insertInto||(n.insertInto="head"),n.insertAt||(n.insertAt="bottom");var e=m(t,n);return l(e,n),function(t){for(var o=[],i=0;i<e.length;i++){var a=e[i];(s=r[a.id]).refs--,o.push(s)}for(t&&l(m(t,n),n),i=0;i<o.length;i++){var s;if(0===(s=o[i]).refs){for(var d=0;d<s.parts.length;d++)s.parts[d]();delete r[s.id]}}}};var x,w=(x=[],function(t,n){return x[t]=n,x.filter(Boolean).join("\n")});function g(t,n,e,o){var i=e?"":o.css;if(t.styleSheet)t.styleSheet.cssText=w(n,i);else{var r=document.createTextNode(i),a=t.childNodes;a[n]&&t.removeChild(a[n]),a.length?t.insertBefore(r,a[n]):t.appendChild(r)}}},function(t,n){t.exports=function(t){var n="undefined"!=typeof window&&window.location;if(!n)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var e=n.protocol+"//"+n.host,o=e+n.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,n){var i,r=n.trim().replace(/^"(.*)"$/,function(t,n){return n}).replace(/^'(.*)'$/,function(t,n){return n});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(r)?t:(i=0===r.indexOf("//")?r:0===r.indexOf("/")?e+r:o+r.replace(/^\.\//,""),"url("+JSON.stringify(i)+")")})}},function(t,n,e){"use strict";e.r(n);var o=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"vue-countdown-component"},[t.type>=4?e("div",{staticClass:"time-box"},[t._v("\n    "+t._s(t.day)+"\n    "),e("div",{class:["b0",{anime:t.isDayAnime}]},[e("div",[t._v(t._s(t.day))])]),t._v(" "),e("div",{class:["a0",{anime:t.isDayAnime}],on:{animationend:t.onDayAnimateEnd}},[e("div",[t._v(t._s(t.dayDelay))])]),t._v(" "),e("div",{staticClass:"a1"},[e("div",[t._v(t._s(t.dayDelay))])])]):t._e(),t._v(" "),t.type>=3?e("div",{staticClass:"time-box"},[t._v("\n    "+t._s(t.hour)+"\n    "),e("div",{class:["b0",{anime:t.isHourAnime}]},[e("div",[t._v(t._s(t.hour))])]),t._v(" "),e("div",{class:["a0",{anime:t.isHourAnime}],on:{animationend:t.onHourAnimateEnd}},[e("div",[t._v(t._s(t.hourDelay))])]),t._v(" "),e("div",{staticClass:"a1"},[e("div",[t._v(t._s(t.hourDelay))])])]):t._e(),t._v(" "),t.type>=2?e("div",{staticClass:"time-box"},[t._v("\n    "+t._s(t.min)+"\n    "),e("div",{class:["b0",{anime:t.isMinAnime}]},[e("div",[t._v(t._s(t.min))])]),t._v(" "),e("div",{class:["a0",{anime:t.isMinAnime}],on:{animationend:t.onMinAnimateEnd}},[e("div",[t._v(t._s(t.minDelay))])]),t._v(" "),e("div",{staticClass:"a1"},[e("div",[t._v(t._s(t.minDelay))])])]):t._e(),t._v(" "),e("div",{staticClass:"time-box"},[t._v("\n    "+t._s(t.second)+"\n    "),e("div",{class:["b0",{anime:t.isSecondAnime}]},[e("div",[t._v(t._s(t.second))])]),t._v(" "),e("div",{class:["a0",{anime:t.isSecondAnime}],on:{animationend:t.onSecondAnimateEnd}},[e("div",[t._v(t._s(t.secondDelay))])]),t._v(" "),e("div",{staticClass:"a1"},[e("div",[t._v(t._s(t.secondDelay))])])])])};o._withStripped=!0;var i={data:()=>({day:"",dayDelay:"",hour:"",hourDelay:"",min:"",minDelay:"",second:"",secondDelay:"",timer:null,isDayAnime:!1,isHourAnime:!1,isMinAnime:!1,isSecondAnime:!1}),props:{endDate:{type:[Date,Number,String],default:0},type:{type:[Number,String],default:4}},computed:{endTime(){return this.endDate instanceof Date?this.endDate.getTime():Number(this.endDate)>0?Number(this.endDate):0}},watch:{day(t){this.isDayAnime=!0,setTimeout(()=>{this.dayDelay=t},350)},hour(t){this.isHourAnime=!0,setTimeout(()=>{this.hourDelay=t},350)},min(t){this.isMinAnime=!0,setTimeout(()=>{this.minDelay=t},350)},second(t){this.isSecondAnime=!0,setTimeout(()=>{this.secondDelay=t},350)},endTime(t){t>0&&this.start()}},mounted(){this.start()},beforeDestroy(){clearTimeout(this.timer)},methods:{start(){clearTimeout(this.timer),this.timer=setTimeout(()=>{let t=this.endTime-(new Date).getTime();t=t<0?0:t;let n=0,e=0,o=0,i=0,r=Number(this.type);r>=4?(n=Math.floor(t/864e5),e=Math.floor(t/36e5-24*n),o=Math.floor(t/6e4-1440*n-60*e),i=Math.floor(t/1e3-86400*n-3600*e-60*o)):r>=3?(e=Math.floor(t/36e5),o=Math.floor(t/6e4-60*e),i=Math.floor(t/1e3-3600*e-60*o)):r>=2?(o=Math.floor(t/6e4),i=Math.floor(t/1e3-60*o)):i=Math.floor(t/1e3),this.day=String(n).padStart(2,"0"),this.hour=String(e).padStart(2,"0"),this.min=String(o).padStart(2,"0"),this.second=String(i).padStart(2,"0"),t>0&&this.start()},1e3)},onDayAnimateEnd(){this.isDayAnime=!1},onHourAnimateEnd(){this.isHourAnime=!1},onMinAnimateEnd(){this.isMinAnime=!1},onSecondAnimateEnd(){this.isSecondAnime=!1}}};e(2);var r=function(t,n,e,o,i,r,a,s){var d,f="function"==typeof t?t.options:t;if(n&&(f.render=n,f.staticRenderFns=[],f._compiled=!0),f._scopeId="data-v-"+r,d)if(f.functional){f._injectStyles=d;var c=f.render;f.render=function(t,n){return d.call(n),c(t,n)}}else{var u=f.beforeCreate;f.beforeCreate=u?[].concat(u,d):[d]}return{exports:t,options:f}}(i,o,0,0,0,"5ef48958");r.options.__file="src/app.vue";var a=r.exports;n.default=a}])});
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 0000000..e522c39
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+  />
+  <title>Example</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="bundle.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/example/main.js b/example/main.js
new file mode 100644
index 0000000..c22539a
--- /dev/null
+++ b/example/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './src/app.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App),
+}).$mount('#root');
diff --git a/example/src/app.vue b/example/src/app.vue
new file mode 100644
index 0000000..9750b06
--- /dev/null
+++ b/example/src/app.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <CountDown :endDate="endDate"
+               :type="type" />
+
+    <hr />
+    <input v-model="type">
+    <input v-model="endDate">
+  </div>
+</template>
+<script>
+import CountDown from '../../dist/main.js';
+export default {
+  data() {
+    return {
+      type: 4,
+      endDate: new Date().getTime() + 100861100,
+    };
+  },
+  components: {
+    CountDown,
+  },
+  methods: {
+    onTypeChange(t) {
+      this.type = t;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7fbdb6d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "vue-flip-down",
+  "version": "1.0.0",
+  "description": "vue 翻页效果的倒计时组件",
+  "main": "dist/main.js",
+  "scripts": {
+    "dev": "webpack-dev-server --config webpack.dev.config.js",
+    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/javaLuo/vue-flip-down.git"
+  },
+  "keywords": [
+    "vue"
+  ],
+  "author": "L",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/javaLuo/vue-flip-down/issues"
+  },
+  "homepage": "https://github.com/javaLuo/vue-flip-down#readme",
+  "dependencies": {
+    "vue": "^2.5.17"
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.1.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-import": "^1.8.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-vue-app": "^2.0.0",
+    "babel-runtime": "^6.26.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "css-loader": "^1.0.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "postcss-loader": "^3.0.0",
+    "style-loader": "^0.22.1",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "url-loader": "^1.1.1",
+    "vue-loader": "^15.3.0",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5"
+  },
+  "browserslist": [
+    "iOS >= 8",
+    "Android > 4.1",
+    "last 1 versions",
+    "> 1%",
+    "not dead"
+  ]
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..796abe2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,4 @@
+/** postcss-loader 解析器所需的配置文件 **/
+module.exports = {
+  plugins: [require("autoprefixer")()]
+};
diff --git a/src/app.vue b/src/app.vue
new file mode 100644
index 0000000..61786f4
--- /dev/null
+++ b/src/app.vue
@@ -0,0 +1,307 @@
+<!-- 翻页效果 倒计时组件 -->
+<template>
+  <div class="vue-countdown-component">
+    <!-- 天 -->
+    <div class="time-box"
+         v-if="type>=4">
+      {{day}}
+      <div :class="['b0',{'anime': isDayAnime}]">
+        <div>{{day}}</div>
+      </div>
+      <div :class="['a0',{'anime': isDayAnime}]"
+           @animationend="onDayAnimateEnd">
+        <div>{{dayDelay}}</div>
+      </div>
+      <div class="a1">
+        <div>{{dayDelay}}</div>
+      </div>
+    </div>
+
+    <!-- 时 -->
+    <div class="time-box"
+         v-if="type>=3">
+      {{hour}}
+      <div :class="['b0',{'anime': isHourAnime}]">
+        <div>{{hour}}</div>
+      </div>
+      <div :class="['a0',{'anime': isHourAnime}]"
+           @animationend="onHourAnimateEnd">
+        <div>{{hourDelay}}</div>
+      </div>
+      <div class="a1">
+        <div>{{hourDelay}}</div>
+      </div>
+    </div>
+
+    <!-- 分 -->
+    <div class="time-box"
+         v-if="type>=2">
+      {{min}}
+      <div :class="['b0',{'anime': isMinAnime}]">
+        <div>{{min}}</div>
+      </div>
+      <div :class="['a0',{'anime': isMinAnime}]"
+           @animationend="onMinAnimateEnd">
+        <div>{{minDelay}}</div>
+      </div>
+      <div class="a1">
+        <div>{{minDelay}}</div>
+      </div>
+    </div>
+
+    <!-- 秒 -->
+    <div class="time-box">
+      {{second}}
+      <div :class="['b0',{'anime': isSecondAnime}]">
+        <div>{{second}}</div>
+      </div>
+      <div :class="['a0',{'anime': isSecondAnime}]"
+           @animationend="onSecondAnimateEnd">
+        <div>{{secondDelay}}</div>
+      </div>
+      <div class="a1">
+        <div>{{secondDelay}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      day: '', // 剩余日
+      dayDelay: '',
+      hour: '', // 剩余小时
+      hourDelay: '',
+      min: '', // 剩余分钟
+      minDelay: '',
+      second: '', // 剩余秒
+      secondDelay: '',
+      timer: null, // 计时器
+      isDayAnime: false, // 日 执行动画
+      isHourAnime: false, // 时 执行动画
+      isMinAnime: false, // 分 执行动画
+      isSecondAnime: false, // 秒 执行动画
+    };
+  },
+  props: {
+    endDate: { type: [Date, Number, String], default: 0 }, // 截止时间
+    type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1
+  },
+  computed: {
+    endTime() {
+      if (this.endDate instanceof Date) {
+        return this.endDate.getTime();
+      }
+      return Number(this.endDate) > 0 ? Number(this.endDate) : 0;
+    },
+  },
+  watch: {
+    day(newV) {
+      this.isDayAnime = true;
+      setTimeout(() => {
+        this.dayDelay = newV;
+      }, 350);
+    },
+    hour(newV) {
+      this.isHourAnime = true;
+      setTimeout(() => {
+        this.hourDelay = newV;
+      }, 350);
+    },
+    min(newV) {
+      this.isMinAnime = true;
+      setTimeout(() => {
+        this.minDelay = newV;
+      }, 350);
+    },
+    second(newV) {
+      this.isSecondAnime = true;
+      setTimeout(() => {
+        this.secondDelay = newV;
+      }, 350);
+    },
+    endTime(newV) {
+      if (newV > 0) {
+        this.start();
+      }
+    },
+  },
+
+  mounted() {
+    this.start();
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    // 开始倒计时
+    start() {
+      clearTimeout(this.timer);
+      console.log('每秒1次啊');
+      this.timer = setTimeout(() => {
+        let t = this.endTime - new Date().getTime(); // 剩余的毫秒数
+        t = t < 0 ? 0 : t;
+        let day = 0; // 剩余的天
+        let hour = 0; // 剩余的小时 已排除天
+        let min = 0; // 剩余的分钟 已排除天和小时
+        let second = 0; // 剩余的秒
+        let type = Number(this.type);
+        if (type >= 4) {
+          day = Math.floor(t / 86400000); // 剩余的天
+          hour = Math.floor(t / 3600000 - day * 24); // 剩余的小时 已排除天
+          min = Math.floor(t / 60000 - day * 1440 - hour * 60); // 剩余的分钟 已排除天和小时
+          second = Math.floor(t / 1000 - day * 86400 - hour * 3600 - min * 60); // 剩余的秒
+        } else if (type >= 3) {
+          hour = Math.floor(t / 3600000); // 剩余的小时 已排除天
+          min = Math.floor(t / 60000 - hour * 60); // 剩余的分钟 已排除天和小时
+          second = Math.floor(t / 1000 - hour * 3600 - min * 60); // 剩余的秒
+        } else if (type >= 2) {
+          min = Math.floor(t / 60000); // 剩余的分钟 已排除天和小时
+          second = Math.floor(t / 1000 - min * 60); // 剩余的秒
+        } else {
+          second = Math.floor(t / 1000); // 剩余的秒
+        }
+
+        this.day = String(day).padStart(2, '0');
+        this.hour = String(hour).padStart(2, '0');
+        this.min = String(min).padStart(2, '0');
+        this.second = String(second).padStart(2, '0');
+
+        if (t > 0) this.start();
+      }, 1000);
+    },
+    // 日 动画结束
+    onDayAnimateEnd() {
+      this.isDayAnime = false;
+    },
+    onHourAnimateEnd() {
+      this.isHourAnime = false;
+    },
+    onMinAnimateEnd() {
+      this.isMinAnime = false;
+    },
+    onSecondAnimateEnd() {
+      this.isSecondAnime = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.vue-countdown-component {
+  display: flex;
+  @keyframes animate-filp {
+    0% {
+      transform: rotateX(0);
+    }
+    100% {
+      transform: rotateX(-180deg);
+    }
+  }
+  @keyframes animate-filp2 {
+    0% {
+      transform: rotateX(180deg);
+    }
+    100% {
+      transform: rotateX(0);
+    }
+  }
+  .time-box {
+    position: relative;
+    box-sizing: border-box;
+    height: 30px;
+    min-width: 28px;
+    font-size: 16px;
+    text-align: center;
+    line-height: 30px;
+    background-color: #6c96e8;
+    color: #ffffff;
+    perspective: 50px;
+    border-radius: 3px;
+    padding: 0 2px;
+    &:before {
+      content: '';
+      position: absolute;
+      background: #a7c7ff;
+      width: 2px;
+      height: 6px;
+      top: 50%;
+      left: -1px;
+      margin-top: -3px;
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      background: #a7c7ff;
+      width: 2px;
+      height: 6px;
+      top: 50%;
+      right: -1px;
+      margin-top: -3px;
+    }
+    & + .time-box {
+      margin-left: 8px;
+    }
+    & > div {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 50%;
+      overflow: hidden;
+
+      transform-style: preserve-3d;
+      & > div {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 30px;
+      }
+      &.a0 {
+        top: 0;
+        // opacity: 0;
+        border-radius: 3px 3px 0 0;
+        background-color: #6c96e8;
+        transform-origin: 50% bottom;
+        animation-duration: 500ms;
+        // animation-fill-mode: none;
+        transform: rotateX(0);
+        backface-visibility: hidden;
+        z-index: 2;
+        &.anime {
+          animation-name: animate-filp;
+        }
+        & > div {
+          top: 0;
+        }
+      }
+      &.b0 {
+        top: 15px;
+        border-radius: 0 0 3px 3px;
+        background-color: #73a1f8;
+        transform-origin: 50% top;
+        animation-duration: 500ms;
+        // animation-fill-mode: none;
+        transform: rotateX(180deg);
+        backface-visibility: hidden;
+        z-index: 2;
+        & > div {
+          bottom: 0;
+        }
+        &.anime {
+          animation-name: animate-filp2;
+        }
+      }
+      &.a1 {
+        top: 15px;
+        border-radius: 0 0 3px 3px;
+        background-color: #73a1f8;
+        & > div {
+          bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..1e9be8d
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,2 @@
+import App from './app.vue';
+export default App;
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
new file mode 100644
index 0000000..c9fd350
--- /dev/null
+++ b/webpack.dev.config.js
@@ -0,0 +1,28 @@
+var path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+module.exports = {
+  mode: 'development',
+  entry: path.join(__dirname, 'example', 'main.js'),
+  output: {
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /.vue$/,
+        use: ['vue-loader'],
+        include: [path.join(__dirname, 'example')],
+      },
+      {
+        test: /\.js$/,
+        use: ['babel-loader'],
+        include: [path.join(__dirname, 'example')],
+      },
+    ],
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'example'),
+  },
+  plugins: [new VueLoaderPlugin()],
+};
diff --git a/webpack.production.config.js b/webpack.production.config.js
new file mode 100644
index 0000000..aec4791
--- /dev/null
+++ b/webpack.production.config.js
@@ -0,0 +1,79 @@
+/** 这是用于开发环境的webpack配置文件 **/
+
+const path = require('path'); // 获取绝对路径用
+const webpack = require('webpack'); // webpack核心
+const CleanWebpackPlugin = require('clean-webpack-plugin'); // 每次打包前清除旧的build文件夹
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: [
+    './src/index.js', // 项目入口
+  ],
+  output: {
+    path: path.resolve(__dirname, 'dist'), // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径
+    filename: '[name].js', //编译后的文件名字
+    library: ['vue-flip-down'],
+    libraryTarget: 'umd',
+  },
+  externals: {
+    vue: 'vue',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: ['vue-loader'],
+        include: path.resolve(__dirname, 'src'),
+      },
+      {
+        // .js .jsx用babel解析
+        test: /\.js?$/,
+        use: ['babel-loader'],
+        include: path.resolve(__dirname, 'src'),
+      },
+      // {
+      //   // .css 解析
+      //   test: /\.css$/,
+      //   use: ['style-loader', 'css-loader', 'postcss-loader'],
+      //   include: path.resolve(__dirname, 'src'),
+      // },
+      {
+        // .less 解析
+        test: /\.less$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
+        include: path.resolve(__dirname, 'src'),
+      },
+      {
+        // 文件解析
+        test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
+        include: path.resolve(__dirname, 'src'),
+        use: ['file-loader?name=assets/[name].[ext]'],
+      },
+      {
+        // 图片解析
+        test: /\.(png|jpg|gif)(\?|$)/,
+        include: path.resolve(__dirname, 'src'),
+        use: ['url-loader?limit=8192&name=assets/[name].[ext]'],
+      },
+    ],
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new CleanWebpackPlugin(['dist']),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          drop_console: true, // 是否删除代码中所有的console
+        },
+      },
+    }),
+  ],
+  resolve: {
+    extensions: ['.js', '.vue', '.less', '.css'], //后缀名自动补全
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+};