├── static └── .gitkeep ├── test └── unit │ ├── setup.js │ ├── .eslintrc │ ├── specs │ └── HelloWorld.spec.js │ └── jest.conf.js ├── src ├── assets │ └── logo.png ├── components │ ├── index.js │ ├── Modal.vue │ └── Schedule.vue ├── main.js ├── static │ └── css │ │ ├── main.91fa9bc593274a034756112d02734e6e.css │ │ └── main.91fa9bc593274a034756112d02734e6e.css.map ├── App.vue └── schedule.js ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── .eslintignore ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── .eslintrc.js ├── LICENSE ├── package.json ├── README.md └── index.html /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jayZOU/vue-schedule/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | /src/schedule.js 7 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import ScheduleComponent from './Schedule' 2 | 3 | 4 | 5 | const Schedule = { 6 | install: function (Vue) { 7 | if (typeof window !== 'undefined' && window.Vue) { 8 | Vue = window.Vue 9 | } 10 | Vue.component(ScheduleComponent.name, ScheduleComponent) 11 | } 12 | } 13 | 14 | export default Schedule.install 15 | 16 | -------------------------------------------------------------------------------- /test/unit/specs/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import HelloWorld from '@/components/HelloWorld' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .toEqual('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | // let {Schedule} = require('./schedule') 6 | 7 | import {Schedule} from './schedule' 8 | 9 | Vue.config.productionTip = false 10 | 11 | Vue.use(Schedule.default) 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | template: '', 17 | components: { App } 18 | }) 19 | -------------------------------------------------------------------------------- /test/unit/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue' 9 | ], 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1' 12 | }, 13 | transform: { 14 | '^.+\\.js$': '/node_modules/babel-jest', 15 | '.*\\.(vue)$': '/node_modules/vue-jest' 16 | }, 17 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 18 | setupFiles: ['/test/unit/setup'], 19 | mapCoverage: true, 20 | coverageDirectory: '/test/unit/coverage', 21 | collectCoverageFrom: [ 22 | 'src/**/*.{js,vue}', 23 | '!src/main.js', 24 | '!**/node_modules/**' 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 邹世杰 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/static/css/main.91fa9bc593274a034756112d02734e6e.css: -------------------------------------------------------------------------------- 1 | .schedule[data-v-7a4084d6]{width:80%;max-width:1400px;margin:0 auto;position:relative}.time-ground[data-v-7a4084d6]{display:block;position:absolute;left:0;top:0;width:100%}.time-ground ul li[data-v-7a4084d6]{margin-top:50px;font-size:1rem;height:50px}.time-ground ul li span[data-v-7a4084d6]{position:absolute;left:-60px;transform:translateY(-50%)}.time-ground ul li p[data-v-7a4084d6]{position:absolute;left:0;height:1px;background-color:#eaeaea}.task-ground[data-v-7a4084d6]{width:100%}.task-list[data-v-7a4084d6]{float:left;width:14%;box-sizing:border-box;border:1px solid #eaeaea}.task-list p[data-v-7a4084d6]{text-align:center;font-size:1rem;padding:1rem}.task-list-item[data-v-7a4084d6]{position:absolute;background-color:#577f92;width:14%;height:50px;cursor:pointer}.task-list-item p[data-v-7a4084d6]{text-align:left;padding:0;margin:1rem 0 0 1rem;font-size:.8rem;color:#edf2f6}.task-list-item h3[data-v-7a4084d6]{color:#e0e7e9;margin:1rem 0 0 1rem}.modal-mask[data-v-5f7cf1b8]{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:table;transition:opacity .3s ease}.modal-wrapper[data-v-5f7cf1b8]{display:table-cell;vertical-align:middle}.modal-container[data-v-5f7cf1b8]{width:50%;margin:0 auto;padding:20px 30px;background-color:#fff;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.33);transition:all .3s ease;font-family:Helvetica,Arial,sans-serif;color:#fff}.close[data-v-5f7cf1b8]{float:right;margin:-.5rem -1rem 0 0;text-decoration:none;color:#fff;font-size:1rem;cursor:pointer}.modal-body[data-v-5f7cf1b8]{text-align:center;margin:20px 0}.modal-body h2[data-v-5f7cf1b8]{font-size:1.5rem;font-weight:700}.modal-body p[data-v-5f7cf1b8]{font-size:.8rem;text-align:left}.modal-body small[data-v-5f7cf1b8]{display:block;font-size:.8rem;margin:20px 0}.modal-default-button[data-v-5f7cf1b8]{float:right}.modal-enter[data-v-5f7cf1b8],.modal-leave-active[data-v-5f7cf1b8]{opacity:0}.modal-enter .modal-container[data-v-5f7cf1b8],.modal-leave-active .modal-container[data-v-5f7cf1b8]{transform:scale(1.1)} 2 | /*# sourceMappingURL=main.91fa9bc593274a034756112d02734e6e.css.map */ -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 101 | 102 | 107 | 108 | 111 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-schedule", 3 | "version": "2.0.4", 4 | "description": "A Vue.js project", 5 | "author": "jayzou", 6 | "main": "./src/schedule.js", 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "unit": "jest --config test/unit/jest.conf.js --coverage", 11 | "test": "npm run unit", 12 | "lint": "eslint --ext .js,.vue src test/unit", 13 | "build": "node build/build.js", 14 | "pre-publish": "webpack --config build/webpack.com.conf.js" 15 | }, 16 | "dependencies": { 17 | "vue": "^2.5.2" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^7.1.2", 21 | "babel-core": "^6.22.1", 22 | "babel-eslint": "^8.2.1", 23 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 24 | "babel-jest": "^21.0.2", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-dynamic-import-node": "^1.2.0", 27 | "babel-plugin-syntax-jsx": "^6.18.0", 28 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 29 | "babel-plugin-transform-runtime": "^6.22.0", 30 | "babel-plugin-transform-vue-jsx": "^3.5.0", 31 | "babel-preset-env": "^1.3.2", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "chalk": "^2.0.1", 34 | "copy-webpack-plugin": "^4.0.1", 35 | "css-loader": "^0.28.0", 36 | "eslint": "^4.15.0", 37 | "eslint-config-standard": "^10.2.1", 38 | "eslint-friendly-formatter": "^3.0.0", 39 | "eslint-loader": "^1.7.1", 40 | "eslint-plugin-import": "^2.7.0", 41 | "eslint-plugin-node": "^5.2.0", 42 | "eslint-plugin-promise": "^3.4.0", 43 | "eslint-plugin-standard": "^3.0.1", 44 | "eslint-plugin-vue": "^4.0.0", 45 | "extract-text-webpack-plugin": "^3.0.0", 46 | "file-loader": "^1.1.4", 47 | "friendly-errors-webpack-plugin": "^1.6.1", 48 | "html-webpack-plugin": "^2.30.1", 49 | "jest": "^22.0.4", 50 | "jest-serializer-vue": "^0.3.0", 51 | "node-notifier": "^5.1.2", 52 | "optimize-css-assets-webpack-plugin": "^3.2.0", 53 | "ora": "^1.2.0", 54 | "portfinder": "^1.0.13", 55 | "postcss-import": "^11.0.0", 56 | "postcss-loader": "^2.0.8", 57 | "postcss-url": "^7.2.1", 58 | "rimraf": "^2.6.0", 59 | "semver": "^5.3.0", 60 | "shelljs": "^0.7.6", 61 | "uglifyjs-webpack-plugin": "^1.1.1", 62 | "url-loader": "^0.5.8", 63 | "vue-jest": "^1.0.2", 64 | "vue-loader": "^13.3.0", 65 | "vue-style-loader": "^3.0.1", 66 | "vue-template-compiler": "^2.5.2", 67 | "webpack": "^3.6.0", 68 | "webpack-bundle-analyzer": "^2.9.0", 69 | "webpack-dev-server": "^2.9.1", 70 | "webpack-merge": "^4.1.0" 71 | }, 72 | "engines": { 73 | "node": ">= 6.0.0", 74 | "npm": ">= 3.0.0" 75 | }, 76 | "browserslist": [ 77 | "> 1%", 78 | "last 2 versions", 79 | "not ie <= 8" 80 | ] 81 | } 82 | -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 91 | 92 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-schedule 2 | 3 | > Vue.js file schedule component 4 | 5 | ## install 6 | 7 | npm install vue-schedule --save 8 | 9 | ## Example 10 | [http://jayzou.github.io/demo/vue-schedule/index.html](http://jayzou.github.io/demo/vue-schedule/index.html) 11 | ```Html 12 |
13 | 31 | 32 | 33 |
34 | ``` 35 | 36 | ## CommonJS 37 | ```javascript 38 | //main.js 39 | var Vue = require('vue'); 40 | const Schedule = require('vue-schedule') 41 | Vue.use(Schedule) 42 | new Vue({ 43 | el: '#app', 44 | template: '', 45 | components: { App } 46 | }) 47 | ``` 48 | 49 | ## ES6 50 | ```javascript 51 | import Vue from 'vue'; 52 | import Schedule from 'vue-schedule' 53 | 54 | Vue.use(Schedule) 55 | new Vue({ 56 | el: '#app', 57 | template: '', 58 | components: { App } 59 | }) 60 | ``` 61 | 62 | ## props 63 | **time-ground:** 时间范围 64 | 示例 65 | ```javascript 66 | :time-ground="['09:00', '18:00']" 67 | ``` 68 | 69 | **week-ground:** 星期 70 | 示例 71 | ```javascript 72 | :week-ground="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']" 73 | ``` 74 | 75 | **color:** 颜色填充 76 | 示例 77 | ```javascript 78 | :color="['#2B2E4A','#521262','#903749','#53354A','#40514E','#537780']" 79 | ``` 80 | 81 | **task-detail:** 具体事项，具体事项需要与星期对应 82 | 示例 83 | ```javascript 84 | :task-detail = " 85 | [ 86 | [ 87 | { 88 | dateStart: '09:30', 89 | dateEnd: '10:30', 90 | title: 'Metting', 91 | detail: 'Metting (German: Mettingen) is a commune in the Moselle department in Grand Est in north-eastern France.' 92 | }, 93 | { 94 | dateStart: '11:30', 95 | dateEnd: '13:50', 96 | title: 'Metting', 97 | detail: 'Metting (German: Mettingen) is a commune in the Moselle department in Grand Est in north-eastern France.' 98 | } 99 | 100 | ], 101 | [ 102 | { 103 | dateStart: '10:30', 104 | dateEnd: '12:00', 105 | title: 'Metting', 106 | }, 107 | { 108 | dateStart: '12:30', 109 | dateEnd: '14:50', 110 | title: 'Metting', 111 | } 112 | 113 | ], 114 | [ 115 | { 116 | dateStart: '12:30', 117 | dateEnd: '13:30', 118 | title: 'Metting', 119 | }, 120 | { 121 | dateStart: '15:30', 122 | dateEnd: '16:50', 123 | title: 'Metting', 124 | } 125 | 126 | ], 127 | [ 128 | { 129 | dateStart: '09:50', 130 | dateEnd: '10:50', 131 | title: 'Metting', 132 | }, 133 | { 134 | dateStart: '11:30', 135 | dateEnd: '13:50', 136 | title: 'Metting', 137 | } 138 | 139 | ], 140 | [ 141 | { 142 | dateStart: '12:30', 143 | dateEnd: '13:30', 144 | title: 'Metting', 145 | }, 146 | { 147 | dateStart: '14:30', 148 | dateEnd: '15:50', 149 | title: 'Metting', 150 | } 151 | 152 | ] 153 | ] 154 | " 155 | ``` 156 | 157 | ## change log 158 | [vue1.x][1] 159 | 160 | 161 | [1]: https://github.com/jayZOU/vue-schedule/tree/vue1.x 162 | -------------------------------------------------------------------------------- /src/static/css/main.91fa9bc593274a034756112d02734e6e.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["main.91fa9bc593274a034756112d02734e6e.css"],"names":[],"mappings":"AACA,2BACC,UAAW,AACX,iBAAkB,AAClB,cAAe,AACf,iBAAmB,CACnB,AACD,8BACC,cAAe,AACf,kBAAmB,AACnB,OAAQ,AACR,MAAO,AACP,UAAY,CACZ,AACD,oCACC,gBAAiB,AACjB,eAAgB,AAChB,WAAa,CACb,AACD,yCACC,kBAAmB,AACnB,WAAY,AAEJ,0BAA4B,CACpC,AACD,sCACC,kBAAkB,AAClB,OAAQ,AAER,WAAY,AACZ,wBAA0B,CAC1B,AACD,8BACC,UAAY,CACZ,AACD,4BACC,WAAY,AACZ,UAAW,AAEH,sBAAsB,AAC9B,wBAAyB,CACzB,AACD,8BACC,kBAAmB,AACnB,eAAgB,AAChB,YAAc,CACd,AACD,iCACC,kBAAmB,AACnB,yBAA0B,AAC1B,UAAW,AACX,YAAa,AACb,cAAgB,CAChB,AACD,mCACC,gBAAiB,AACjB,UAAW,AACX,qBAAsB,AACtB,gBAAkB,AAClB,aAAe,CACf,AACD,oCACC,cAAe,AACf,oBAAsB,CACtB,AAED,6BACE,eAAgB,AAChB,aAAc,AACd,MAAO,AACP,OAAQ,AACR,WAAY,AACZ,YAAa,AACb,gCAAoC,AACpC,cAAe,AAEf,2BAA6B,CAC9B,AACD,gCACE,mBAAoB,AACpB,qBAAuB,CACxB,AACD,kCACE,UAAW,AACX,cAAiB,AACjB,kBAAmB,AACnB,sBAAuB,AACvB,kBAAmB,AAEX,qCAAyC,AAEjD,wBAAyB,AACzB,uCAA0C,AAC1C,UAAY,CACb,AACD,wBACC,YAAa,AACb,wBAA0B,AAC1B,qBAAsB,AACtB,WAAY,AACZ,eAAgB,AAChB,cAAgB,CAChB,AACD,6BACC,kBAAmB,AAClB,aAAe,CAChB,AACD,gCACC,iBAAkB,AAClB,eAAkB,CAClB,AACD,+BACC,gBAAkB,AAClB,eAAiB,CACjB,AACD,mCACC,cAAe,AACf,gBAAkB,AAClB,aAAe,CAEf,AACD,uCACE,WAAa,CACd,AAID,mEACE,SAAW,CACZ,AACD,qGAGE,oBAAsB,CACvB","file":"main.91fa9bc593274a034756112d02734e6e.css","sourcesContent":["\n.schedule[data-v-7a4084d6]{\n\twidth: 80%;\n\tmax-width: 1400px;\n\tmargin: 0 auto;\n\tposition: relative;\n}\n.time-ground[data-v-7a4084d6]{\n\tdisplay: block;\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\twidth: 100%;\n}\n.time-ground ul li[data-v-7a4084d6]{\n\tmargin-top: 50px;\n\tfont-size: 1rem;\n\theight: 50px;\n}\n.time-ground ul li span[data-v-7a4084d6]{\n\tposition: absolute;\n\tleft: -60px;\n\t-webkit-transform: translateY(-50%);\n\t transform: translateY(-50%);\n}\n.time-ground ul li p[data-v-7a4084d6]{\n\tposition:absolute;\n\tleft: 0;\n\n\theight: 1px;\n\tbackground-color: #EAEAEA;\n}\n.task-ground[data-v-7a4084d6]{\n\twidth: 100%;\n}\n.task-list[data-v-7a4084d6]{\n\tfloat: left;\n\twidth: 14%;\n\t-webkit-box-sizing:border-box;\n\t box-sizing:border-box;\n\tborder:1px solid #EAEAEA;\n}\n.task-list p[data-v-7a4084d6]{\n\ttext-align: center;\n\tfont-size: 1rem;\n\tpadding: 1rem;\n}\n.task-list-item[data-v-7a4084d6]{\n\tposition: absolute;\n\tbackground-color: #577F92;\n\twidth: 14%;\n\theight: 50px;\n\tcursor: pointer;\n}\n.task-list-item p[data-v-7a4084d6]{\n\ttext-align: left;\n\tpadding: 0;\n\tmargin: 1rem 0 0 1rem;\n\tfont-size: 0.8rem;\n\tcolor: #EDF2F6;\n}\n.task-list-item h3[data-v-7a4084d6]{\n\tcolor: #E0E7E9;\n\tmargin: 1rem 0 0 1rem;\n}\n\n.modal-mask[data-v-5f7cf1b8] {\n position: fixed;\n z-index: 9998;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, .5);\n display: table;\n -webkit-transition: opacity .3s ease;\n transition: opacity .3s ease;\n}\n.modal-wrapper[data-v-5f7cf1b8] {\n display: table-cell;\n vertical-align: middle;\n}\n.modal-container[data-v-5f7cf1b8] {\n width: 50%;\n margin: 0px auto;\n padding: 20px 30px;\n background-color: #fff;\n border-radius: 2px;\n -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .33);\n box-shadow: 0 2px 8px rgba(0, 0, 0, .33);\n -webkit-transition: all .3s ease;\n transition: all .3s ease;\n font-family: Helvetica, Arial, sans-serif;\n color: #FFF;\n}\n.close[data-v-5f7cf1b8]{\n\tfloat: right;\n\tmargin: -0.5rem -1rem 0 0;\n\ttext-decoration: none;\n\tcolor: #fff;\n\tfont-size: 1rem;\n\tcursor: pointer;\n}\n.modal-body[data-v-5f7cf1b8] {\n\ttext-align: center;\n margin: 20px 0;\n}\n.modal-body h2[data-v-5f7cf1b8]{\n\tfont-size: 1.5rem;\n\tfont-weight: bold;\n}\n.modal-body p[data-v-5f7cf1b8] {\n\tfont-size: 0.8rem;\n\ttext-align: left;\n}\n.modal-body small[data-v-5f7cf1b8]{\n\tdisplay: block;\n\tfont-size: 0.8rem;\n\tmargin: 20px 0;\n\t/*font-weight: bold;*/\n}\n.modal-default-button[data-v-5f7cf1b8] {\n float: right;\n}\n.modal-enter[data-v-5f7cf1b8]{\n opacity: 0;\n}\n.modal-leave-active[data-v-5f7cf1b8] {\n opacity: 0;\n}\n.modal-enter .modal-container[data-v-5f7cf1b8],\n.modal-leave-active .modal-container[data-v-5f7cf1b8] {\n -webkit-transform: scale(1.1);\n transform: scale(1.1);\n}\n"]} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Schedule 6 | 108 | 109 | 110 | 111 | 113 | 114 | 117 | 120 | 121 | 122 | 123 |

Schedule

124 |

jayzou

125 |
126 |
127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /src/components/Schedule.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 93 | 94 | 249 | -------------------------------------------------------------------------------- /src/schedule.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define("Schedule", [], factory); 6 | else if(typeof exports === 'object') 7 | exports["Schedule"] = factory(); 8 | else 9 | root["Schedule"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { 50 | /******/ configurable: false, 51 | /******/ enumerable: true, 52 | /******/ get: getter 53 | /******/ }); 54 | /******/ } 55 | /******/ }; 56 | /******/ 57 | /******/ // getDefaultExport function for compatibility with non-harmony modules 58 | /******/ __webpack_require__.n = function(module) { 59 | /******/ var getter = module && module.__esModule ? 60 | /******/ function getDefault() { return module['default']; } : 61 | /******/ function getModuleExports() { return module; }; 62 | /******/ __webpack_require__.d(getter, 'a', getter); 63 | /******/ return getter; 64 | /******/ }; 65 | /******/ 66 | /******/ // Object.prototype.hasOwnProperty.call 67 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 68 | /******/ 69 | /******/ // __webpack_public_path__ 70 | /******/ __webpack_require__.p = ""; 71 | /******/ 72 | /******/ // Load entry module and return exports 73 | /******/ return __webpack_require__(__webpack_require__.s = 5); 74 | /******/ }) 75 | /************************************************************************/ 76 | /******/ ([ 77 | /* 0 */ 78 | /***/ (function(module, exports) { 79 | 80 | /* 81 | MIT License http://www.opensource.org/licenses/mit-license.php 82 | Author Tobias Koppers @sokra 83 | */ 84 | // css base code, injected by the css-loader 85 | module.exports = function(useSourceMap) { 86 | var list = []; 87 | 88 | // return the list of modules as css string 89 | list.toString = function toString() { 90 | return this.map(function (item) { 91 | var content = cssWithMappingToString(item, useSourceMap); 92 | if(item[2]) { 93 | return "@media " + item[2] + "{" + content + "}"; 94 | } else { 95 | return content; 96 | } 97 | }).join(""); 98 | }; 99 | 100 | // import a list of modules into the list 101 | list.i = function(modules, mediaQuery) { 102 | if(typeof modules === "string") 103 | modules = [[null, modules, ""]]; 104 | var alreadyImportedModules = {}; 105 | for(var i = 0; i < this.length; i++) { 106 | var id = this[i][0]; 107 | if(typeof id === "number") 108 | alreadyImportedModules[id] = true; 109 | } 110 | for(i = 0; i < modules.length; i++) { 111 | var item = modules[i]; 112 | // skip already imported module 113 | // this implementation is not 100% perfect for weird media query combinations 114 | // when a module is imported multiple times with different media queries. 115 | // I hope this will never occur (Hey this way we have smaller bundles) 116 | if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { 117 | if(mediaQuery && !item[2]) { 118 | item[2] = mediaQuery; 119 | } else if(mediaQuery) { 120 | item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; 121 | } 122 | list.push(item); 123 | } 124 | } 125 | }; 126 | return list; 127 | }; 128 | 129 | function cssWithMappingToString(item, useSourceMap) { 130 | var content = item[1] || ''; 131 | var cssMapping = item[3]; 132 | if (!cssMapping) { 133 | return content; 134 | } 135 | 136 | if (useSourceMap && typeof btoa === 'function') { 137 | var sourceMapping = toComment(cssMapping); 138 | var sourceURLs = cssMapping.sources.map(function (source) { 139 | return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' 140 | }); 141 | 142 | return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); 143 | } 144 | 145 | return [content].join('\n'); 146 | } 147 | 148 | // Adapted from convert-source-map (MIT) 149 | function toComment(sourceMap) { 150 | // eslint-disable-next-line no-undef 151 | var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); 152 | var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; 153 | 154 | return '/*# ' + data + ' */'; 155 | } 156 | 157 | 158 | /***/ }), 159 | /* 1 */ 160 | /***/ (function(module, exports, __webpack_require__) { 161 | 162 | /* 163 | MIT License http://www.opensource.org/licenses/mit-license.php 164 | Author Tobias Koppers @sokra 165 | Modified by Evan You @yyx990803 166 | */ 167 | 168 | var hasDocument = typeof document !== 'undefined' 169 | 170 | if (typeof DEBUG !== 'undefined' && DEBUG) { 171 | if (!hasDocument) { 172 | throw new Error( 173 | 'vue-style-loader cannot be used in a non-browser environment. ' + 174 | "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment." 175 | ) } 176 | } 177 | 178 | var listToStyles = __webpack_require__(9) 179 | 180 | /* 181 | type StyleObject = { 182 | id: number; 183 | parts: Array 184 | } 185 | 186 | type StyleObjectPart = { 187 | css: string; 188 | media: string; 189 | sourceMap: ?string 190 | } 191 | */ 192 | 193 | var stylesInDom = {/* 194 | [id: number]: { 195 | id: number, 196 | refs: number, 197 | parts: Array<(obj?: StyleObjectPart) => void> 198 | } 199 | */} 200 | 201 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]) 202 | var singletonElement = null 203 | var singletonCounter = 0 204 | var isProduction = false 205 | var noop = function () {} 206 | var options = null 207 | var ssrIdKey = 'data-vue-ssr-id' 208 | 209 | // Force single-tag solution on IE6-9, which has a hard limit on the # of