├── README.md ├── Node └── upload │ ├── .gitignore │ ├── README.md │ ├── start.js │ ├── server.js │ ├── router.js │ └── reqHandler.js ├── Vue-Demos ├── Questionnaire │ ├── static │ │ └── .gitkeep │ ├── src │ │ ├── components │ │ │ ├── Questionnaire.vue │ │ │ ├── Header.vue │ │ │ ├── Preview.vue │ │ │ ├── Data.vue │ │ │ ├── Calendar.vue │ │ │ └── Index.vue │ │ ├── color.less │ │ ├── main.js │ │ ├── router.js │ │ ├── vuex │ │ │ └── store.js │ │ └── App.vue │ ├── .eslintignore │ ├── config │ │ ├── prod.env.js │ │ ├── test.env.js │ │ ├── dev.env.js │ │ └── index.js │ ├── .babelrc │ ├── .gitignore │ ├── .editorconfig │ ├── build │ │ ├── dev-client.js │ │ ├── build.js │ │ ├── webpack.dev.conf.js │ │ ├── utils.js │ │ ├── dev-server.js │ │ ├── webpack.base.conf.js │ │ └── webpack.prod.conf.js │ ├── index.html │ ├── .eslintrc.js │ ├── dist │ │ ├── index.html │ │ └── static │ │ │ ├── js │ │ │ ├── manifest.8ba98ab94b723656644a.js │ │ │ ├── 3.ab409436b81631824404.js │ │ │ ├── app.d529e7727a81d8bc5187.js │ │ │ ├── manifest.8ba98ab94b723656644a.js.map │ │ │ ├── 0.bde2c9b5ee371bc89a98.js │ │ │ └── 1.6d798404d1f1bf87d743.js │ │ │ └── css │ │ │ ├── app.0240875a89bc6ec5bd28f8bb4dd624ed.css │ │ │ └── app.0240875a89bc6ec5bd28f8bb4dd624ed.css.map │ ├── .eslintrc.json │ ├── package.json │ └── README.md └── Vue-Chat │ ├── .gitignore │ ├── src │ ├── main.js │ ├── components │ │ ├── card.vue │ │ ├── text.vue │ │ ├── userList.vue │ │ ├── app.vue │ │ └── message.vue │ └── store.js │ ├── README.md │ ├── dist │ └── images │ │ ├── 1.jpg │ │ ├── 2.png │ │ ├── 3.jpg │ │ ├── bg.jpg │ │ └── intro.jpg │ ├── test │ └── test.html │ ├── index.html │ ├── package.json │ └── webpack.config.js ├── JS-Demos ├── SimplePage │ ├── images │ │ ├── 3.png │ │ ├── 7.png │ │ ├── 8.png │ │ ├── women.png │ │ ├── beijing.png │ │ ├── hongkong.png │ │ ├── shanghai.png │ │ ├── shenzhen.png │ │ └── select-bg.png │ ├── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont01.eot │ │ ├── iconfont01.ttf │ │ ├── iconfont01.woff │ │ ├── iconfont.css │ │ ├── demo.css │ │ ├── demo01.css │ │ ├── demo.html │ │ ├── iconfont.svg │ │ └── iconfont01.svg │ ├── README.md │ └── index.html ├── Calendar │ ├── js │ │ ├── main.js │ │ ├── vacationArrange.js │ │ ├── init.js │ │ ├── EventUtil.js │ │ ├── renderCalendar.js │ │ └── CNCalendar.js │ ├── README.md │ ├── index.html │ └── style │ │ ├── index.css │ │ └── index.less ├── ResponsiveTable │ ├── images │ │ ├── 1.png │ │ └── 2.png │ ├── README.md │ └── index.html └── SpaceShip │ ├── images │ ├── earth.png │ ├── space.jpg │ ├── space01.jpg │ └── spaceship.png │ ├── README.md │ ├── styles │ └── index.css │ ├── index.html │ └── js │ └── index.js └── CSS └── Custom-Checkbox-Radio ├── README.md ├── index.html └── trick.css /README.md: -------------------------------------------------------------------------------- 1 | ##一些日常的小练习 -------------------------------------------------------------------------------- /Node/upload/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/components/Questionnaire.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/3.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/7.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/8.png -------------------------------------------------------------------------------- /JS-Demos/Calendar/js/main.js: -------------------------------------------------------------------------------- 1 | require(['init'], function(init) { 2 | //初始化，绑定事件，渲染日历 3 | init.init(); 4 | }); -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/color.less: -------------------------------------------------------------------------------- 1 | // @base: #ee7419; 2 | 3 | @base: #007fff; 4 | @light: lighten(@base, 40%); -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import app from './components/app'; 3 | 4 | new Vue(app); -------------------------------------------------------------------------------- /JS-Demos/ResponsiveTable/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/ResponsiveTable/images/1.png -------------------------------------------------------------------------------- /JS-Demos/ResponsiveTable/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/ResponsiveTable/images/2.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/women.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/women.png -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/images/earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SpaceShip/images/earth.png -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/images/space.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SpaceShip/images/space.jpg -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/images/space01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SpaceShip/images/space01.jpg -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/README.md: -------------------------------------------------------------------------------- 1 | # 用Vue做的一个聊天室，只有前端的界面，没有后台 2 | 3 | [demo](http://pramper.github.io/Demos/Vue-Demos/Vue-Chat/) -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/dist/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/Vue-Demos/Vue-Chat/dist/images/1.jpg -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/dist/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/Vue-Demos/Vue-Chat/dist/images/2.png -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/dist/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/Vue-Demos/Vue-Chat/dist/images/3.jpg -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/dist/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/Vue-Demos/Vue-Chat/dist/images/bg.jpg -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/beijing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/beijing.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/hongkong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/hongkong.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/shanghai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/shanghai.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/shenzhen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/shenzhen.png -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/images/spaceship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SpaceShip/images/spaceship.png -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/iconfont/iconfont.eot -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/iconfont/iconfont.woff -------------------------------------------------------------------------------- /JS-Demos/SimplePage/images/select-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/images/select-bg.png -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/dist/images/intro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/Vue-Demos/Vue-Chat/dist/images/intro.jpg -------------------------------------------------------------------------------- /JS-Demos/SimplePage/README.md: -------------------------------------------------------------------------------- 1 | ## 一个简单的超频页面，锻炼一下页面布局能力 2 | 3 | [demo](http://pramper.github.io/Demos/JS-Demos/ResponsiveTable/) 4 | 5 | -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont01.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/iconfont/iconfont01.eot -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont01.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/iconfont/iconfont01.ttf -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont01.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pramper/Demos/HEAD/JS-Demos/SimplePage/iconfont/iconfont01.woff -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/README.md: -------------------------------------------------------------------------------- 1 | ## 宇宙飞船 2 | 3 | [demo](http://pramper.github.io/Demos/JS-Demos/SpaceShip) 4 | 5 | 用canvas做的一个小demo，主要用于熟悉canvas的用法，以及学习相关设计模式 -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | -------------------------------------------------------------------------------- /Node/upload/README.md: -------------------------------------------------------------------------------- 1 | ## 简单的图片上传并显示demo 2 | 3 | ### 实现功能：利用nodeJS实现一个简单的web应用，在网页中可以上传一张本地png图片，并且在网页中显示。 4 | 5 | ### 收获：初步掌握的nodeJS，对nodeJS的机理有一个大概的了解，加深了对回调函数，事件触发机制的了解。 6 | 7 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/.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 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import {configRouter} from './router' 4 | 5 | Vue.use(VueRouter) 6 | 7 | let router = new VueRouter() 8 | configRouter(router) 9 | 10 | -------------------------------------------------------------------------------- /JS-Demos/ResponsiveTable/README.md: -------------------------------------------------------------------------------- 1 | ## 纯CSS实现自适应table 2 | 3 | [demo](http://pramper.github.io/Demos/JS-Demos/ResponsiveTable/) 4 | 5 | - 在屏幕宽度大于700px时显示 6 | 7 | 8 | 9 | - 屏幕宽度小于700px时显示 10 | 11 | -------------------------------------------------------------------------------- /Node/upload/start.js: -------------------------------------------------------------------------------- 1 | var server = require("./server"); 2 | var reqHandler = require("./reqHandler"); 3 | 4 | var handlers = {}; 5 | handlers["/"] = reqHandler.start; 6 | handlers["/start"] = reqHandler.start; 7 | handlers["/show"] = reqHandler.show; 8 | handlers["/upload"] = reqHandler.upload; 9 | 10 | server.start(handlers); -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /Node/upload/server.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | var router = require("./router"); 3 | 4 | function start(handlers) { 5 | function onRequest(req, res) { 6 | router.route(req, handlers, res); 7 | } 8 | http.createServer(onRequest).listen(7878); 9 | console.log("server has started!"); 10 | } 11 | 12 | exports.start = start; 13 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Questionnaire 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS-Demos/Calendar/README.md: -------------------------------------------------------------------------------- 1 | [demo](http://pramper.github.io/Demos/JS-Demos/Calendar/) 2 | 3 | - 基本功能都已实现，使用requrieJS进行了模块化封装 4 | - 国际节假日中只实现了的日常的节假日， 5 | - 移动端可以正常操作，因为才初学移动端，所以对移动端优化的不是很好，特别是click事件的延时并没有做处理 6 | - 因为实验室事情较多，所以时间比较紧；代码还有可优化的地方，比如渲染calender的模块，优化空间还很多，逻辑也可以整理的更清楚点 7 | - 没有API可以扩展 8 | - 阳历和农历转换参考了网上的代码，修改之后直接拿来用了，这点确实偷懒了o(╯□╰)o 9 | - 不足之处还请指教 10 | 11 | ### 联系邮箱：ylcui@foxamail.com -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // required to lint *.vue files 8 | plugins: [ 9 | 'html' 10 | ], 11 | // add your custom rules here 12 | 'rules': { 13 | // allow debugger during development 14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Node/upload/router.js: -------------------------------------------------------------------------------- 1 | var url = require("url"); 2 | 3 | function route(req, handlers, res) { 4 | var pathname = url.parse(req.url).pathname; 5 | if(typeof handlers[pathname] == "function") { 6 | handlers[pathname](req, res); 7 | }else { 8 | console.log("No request handler is found for: " + pathname); 9 | 10 | res.writeHead(404, {"Content-Type": "text/plain"}); 11 | res.write("404 not found!"); 12 | res.end(); 13 | } 14 | } 15 | 16 | exports.route = route; -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/index.html: -------------------------------------------------------------------------------- 1 | Questionnaire -------------------------------------------------------------------------------- /CSS/Custom-Checkbox-Radio/README.md: -------------------------------------------------------------------------------- 1 | ## 纯CSS实现自定义checkbox和radio元素的样式 2 | 3 | [demo](http://pramper.github.io/Demos/CSS/Custom-Checkbox-Radio/) 4 | 5 | 支持IE9和IE9+。 6 | 7 | ### 使用方法 8 | 9 | 首先引入该CSS，该CSS定义了两个类名`.checkbox`、`.radio`： 10 | 11 | ```html 12 | 13 | 14 | ``` 15 | 16 | ### 注意： 17 | 18 | - 必须`input`元素在前，`label`元素在后，并使`label`的`for`属性捆绑目标`input`的id 19 | 20 | ### 优点： 21 | 22 | - 纯CSS实现，没用图片或字体图像 23 | - 可以兼容到IE9 24 | 25 | ### 缺点： 26 | 27 | - 限制较多，如注意事项 28 | - label元素的position属性为relative -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Chat 6 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /CSS/Custom-Checkbox-Radio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自定义Checkbox&Radio 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/js/manifest.8ba98ab94b723656644a.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(n){if(a[n])return a[n].exports;var r=a[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n=window.webpackJsonp;window.webpackJsonp=function(c,d){for(var o,p,s=0,l=[];s 2 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1458809914'); /* IE9*/ 4 | src: url('iconfont.eot?t=1458809914#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1458809914') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1458809914') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1458809914#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -webkit-text-stroke-width: 0.2px; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | .icon-book:before { content: "\e600"; } 19 | .icon-4fangge:before { content: "\e601"; } 20 | .icon-denglu:before { content: "\e602"; } 21 | .icon-circle:before { content: "\e603"; } 22 | .icon-hua:before { content: "\e604"; } 23 | .icon-iconset0399:before { content: "\e605"; } 24 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/src/components/card.vue: -------------------------------------------------------------------------------- 1 | 6 | 16 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true 6 | }, 7 | "parserOptions": { 8 | "sourceType": "module" 9 | }, 10 | "rules": { 11 | "no-cond-assign": [2, "always"], //if, while等条件中不允许使用“=” 12 | "no-constant-condition": 2, 13 | "no-debugger": 2, // 程序中不能出现debugger 14 | "no-dupe-args": 2, // 函数的参数名称不能重复 15 | "no-dupe-keys": 2, // 对象的属性名称不能重复 16 | "no-duplicate-case": 2, // switch的case不能重复 17 | "no-func-assign": 2, 18 | "no-obj-calls": 2, 19 | "no-regex-spaces": 2, 20 | "no-sparse-arrays": 2, 21 | "no-unexpected-multiline": 2, 22 | "no-unreachable": 2, 23 | "use-isnan": 2, 24 | "valid-typeof": 2, 25 | "eqeqeq": [2, "always"], 26 | "no-caller": 2, 27 | "no-eval": 2, 28 | "no-redeclare": 2, 29 | "no-undef": 2, 30 | "no-unused-vars": 1, 31 | "no-use-before-define": [2, {"functions", false}], 32 | "comma-dangle": [1, "never"], 33 | "no-const-assign": 2, 34 | "no-dupe-class-members": 2 35 | } 36 | } -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/src/components/text.vue: -------------------------------------------------------------------------------- 1 | 23 | 31 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/src/components/userList.vue: -------------------------------------------------------------------------------- 1 | 11 | 21 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-chat", 3 | "version": "1.0.0", 4 | "description": "chat example by vue.js + webpack", 5 | "scripts": { 6 | "dev": "webpack-dev-server --hot --inline", 7 | "build": "webpack -p", 8 | "test": "webpack-dev-server --hot --inline --content-base test/" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/Coffcer/vue-chat.git" 13 | }, 14 | "dependencies": { 15 | "vue": "^1.0.26" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer-loader": "^2.0.0", 19 | "babel": "^6.3.13", 20 | "babel-core": "^6.3.21", 21 | "babel-loader": "^6.2.0", 22 | "babel-plugin-transform-runtime": "^6.3.13", 23 | "babel-preset-es2015": "^6.3.13", 24 | "babel-runtime": "^5.8.34", 25 | "css-loader": "^0.16.0", 26 | "file-loader": "^0.8.4", 27 | "html-loader": "^0.3.0", 28 | "less": "^2.5.1", 29 | "less-loader": "^2.2.0", 30 | "style-loader": "^0.12.3", 31 | "url-loader": "^0.5.6", 32 | "vue-hot-reload-api": "^1.2.2", 33 | "vue-loader": "^7.2.0", 34 | "vue-html-loader": "^1.2.0", 35 | "webpack": "^1.12.0", 36 | "webpack-dev-server": "^1.14.0" 37 | }, 38 | "keywords": [ 39 | "vue", 40 | "webpack" 41 | ] 42 | } -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 16 | }, 17 | // eval-source-map is faster for development 18 | devtool: '#eval-source-map', 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | 'process.env': config.dev.env 22 | }), 23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 24 | new webpack.optimize.OccurenceOrderPlugin(), 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }) 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | // 入口 5 | entry: './src/main', 6 | // 输出 7 | output: { 8 | path: path.join(__dirname, './dist'), 9 | filename: 'main.bundle.js', 10 | publicPath: '/dist/' 11 | }, 12 | module: { 13 | // 加载器 14 | loaders: [ 15 | { test: /\.vue$/, loader: 'vue' }, 16 | { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, 17 | { test: /\.css$/, loader: 'style!css!autoprefixer'}, 18 | { test: /\.less/, loader: 'style!css!autoprefixer!less'}, 19 | { test: /\.(png|jpg|gif)$/, loader: 'url-loader'}, 20 | { test: /\.(html|tpl)$/, loader: 'html-loader' }, 21 | ] 22 | }, 23 | vue: { 24 | loaders: { 25 | css: 'style!css!autoprefixer!less' 26 | } 27 | }, 28 | babel: { 29 | presets: ['es2015'], 30 | plugins: ['transform-runtime'] 31 | }, 32 | resolve: { 33 | // require时省略的扩展名，如：require('module') 不需要module.js 34 | extensions: ['', '.js', '.vue'], 35 | // 别名 36 | alias: { 37 | filter: path.join(__dirname, './src/filters'), 38 | components: path.join(__dirname, './src/components') 39 | } 40 | }, 41 | // 开启source-map，webpack有多种source-map，在官网文档可以查到 42 | devtool: '#source-map' 43 | }; 44 | -------------------------------------------------------------------------------- /JS-Demos/Calendar/js/vacationArrange.js: -------------------------------------------------------------------------------- 1 | define(function() { 2 | //var rest = ["2016/1/1", "2016/1/3", "2016/2/7", "2016/2/8"] 3 | var restDays = { 4 | "元旦": ["2016/1/1", 3], 5 | "除夕": ["2016/2/7", 1], 6 | "春节": ["2016/2/8", 7], 7 | "清明节": ["2016/4/2", 3], 8 | "劳动节": ["2016/4/30", 3], 9 | "端午节": ["2016/6/9", 3], 10 | "中秋节": ["2016/9/15", 3], 11 | "国庆节": ["2016/10/1", 7] 12 | }; 13 | var vacationDay = []; 14 | vacationDay[0] = []; 15 | vacationDay[1] = []; 16 | 17 | var workDaysArr = ["2016/2/6", "2016/2/14", "2016/6/12", "2016/9/18", "2016/10/8", "2016/10/9"]; 18 | 19 | var restDaysArr = [], 20 | oneDay = 1000*60*60*24, 21 | firstDay; 22 | for(var i in restDays) { 23 | if(restDays.hasOwnProperty(i)) { 24 | firstDay = new Date(restDays[i][0]).getTime(); 25 | for(var j=0; j'+ 10 | ''+ 12 | ''+ 13 | ''+ 14 | '
'+ 16 | ''+ 17 | ''+ 18 | '
'+ 19 | ''+ 20 | ''; 21 | 22 | res.writeHead(404, {"Content-Type": "text/html"}); 23 | res.write(body); 24 | res.end(); 25 | } 26 | //处理上传的图片 27 | function upload(req, res) { 28 | console.log("Handler upload is called!"); 29 | 30 | var form = new formidable.IncomingForm(); 31 | form.uploadDir = "./tmp"; 32 | form.parse(req, function(err, fields, files) { 33 | console.log("upload file path: " + files.upload.path); 34 | fs.renameSync(files.upload.path, "./tmp/test.png"); 35 | res.writeHead(200, {"Content-Type": "text/html; charset=UTF-8"});//设置charset是为了保证中 36 | // 文正常显示 37 | res.write("上传的图片:
"); 38 | res.write(""); 39 | res.end(); 40 | }); 41 | } 42 | //显示上传的图片 43 | function show(req, res) { 44 | console.log("Handler show is called!"); 45 | 46 | fs.readFile("./tmp/test.png", function(err, file) { 47 | if(err) { 48 | res.writeHead(404, {"Content-Type": "text/plain"}); 49 | res.write("读取图片失败！\n" + err); 50 | res.end(); 51 | }else { 52 | res.writeHead(200, {"Content-Type": "image/png"}); 53 | res.write(file, "binary"); 54 | res.end(); 55 | } 56 | }); 57 | } 58 | 59 | exports.start = start; 60 | exports.upload = upload; 61 | exports.show = show; -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | if (options.extract) { 29 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 30 | } else { 31 | return ['vue-style-loader', sourceLoader].join('!') 32 | } 33 | } 34 | 35 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 36 | return { 37 | css: generateLoaders(['css']), 38 | postcss: generateLoaders(['css']), 39 | less: generateLoaders(['css', 'less']), 40 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 41 | scss: generateLoaders(['css', 'sass']), 42 | stylus: generateLoaders(['css', 'stylus']), 43 | styl: generateLoaders(['css', 'stylus']) 44 | } 45 | } 46 | 47 | // Generate loaders for standalone style files (outside of .vue) 48 | exports.styleLoaders = function (options) { 49 | var output = [] 50 | var loaders = exports.cssLoaders(options) 51 | for (var extension in loaders) { 52 | var loader = loaders[extension] 53 | output.push({ 54 | test: new RegExp('\\.' + extension + '$'), 55 | loader: loader 56 | }) 57 | } 58 | return output 59 | } 60 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/build/dev-server.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var proxyMiddleware = require('http-proxy-middleware') 6 | var webpackConfig = process.env.NODE_ENV === 'testing' 7 | ? require('./webpack.prod.conf') 8 | : require('./webpack.dev.conf') 9 | 10 | // default port where dev server listens for incoming traffic 11 | var port = process.env.PORT || config.dev.port 12 | // Define HTTP proxies to your custom API backend 13 | // https://github.com/chimurai/http-proxy-middleware 14 | var proxyTable = config.dev.proxyTable 15 | 16 | var app = express() 17 | var compiler = webpack(webpackConfig) 18 | 19 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 20 | publicPath: webpackConfig.output.publicPath, 21 | stats: { 22 | colors: true, 23 | chunks: false 24 | } 25 | }) 26 | 27 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | module.exports = app.listen(port, function (err) { 60 | if (err) { 61 | console.log(err) 62 | return 63 | } 64 | console.log('Listening at http://localhost:' + port + '\n') 65 | }) 66 | -------------------------------------------------------------------------------- /JS-Demos/Calendar/js/init.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 初始化时的任务：1、把selections设为今天 3 | * 2、初始化下拉列表,并绑定相关事件 4 | * 3、渲染当前所在月的日历 5 | * 6 | */ 7 | define(["renderCalendar", "EventUtil"], function(renderCalendar, EventUtil) { 8 | var nowDate = new Date(), 9 | year = document.querySelector("#year"), 10 | month = document.querySelector("#month"), 11 | vacation = document.querySelector("#vacation"), 12 | currentYear = document.querySelector("#current-year"), 13 | currentMonth = document.querySelector("#current-month"), 14 | displayVacation = document.querySelector("#display-vacation"), 15 | yearList = document.querySelector("#year-list"), 16 | monthList = document.querySelector("#month-list"); 17 | 18 | var init = function() { 19 | //初始化当前显示的年、月 20 | setSelections(); 21 | //初始化下拉列表 22 | initULs(); 23 | //初始化渲染万年历 24 | renderCalendar.render(parseInt(currentYear.innerHTML), parseInt(currentMonth.innerHTML), 25 | displayVacation); 26 | //初始化事件绑定 27 | handleEvent(); 28 | }; 29 | 30 | /** 31 | * 把selections设为今天 32 | */ 33 | function setSelections() { 34 | currentYear.innerHTML = nowDate.getFullYear() + "年"; 35 | currentMonth.innerHTML = parseInt(nowDate.getMonth()) + 1 + "月"; 36 | } 37 | 38 | /** 39 | * 渲染下拉列表 40 | */ 41 | function initULs() { 42 | var fragment = document.createDocumentFragment(), 43 | li = null; 44 | for(var i=1900; i<2051; i++) { 45 | li = document.createElement("li"); 46 | li.innerHTML = i + "年"; 47 | fragment.appendChild(li); 48 | } 49 | yearList.appendChild(fragment); 50 | yearList.scrollTop = "2800"; 51 | 52 | for(var j=1; j<13; j++) { 53 | li = document.createElement("li"); 54 | li.innerHTML = j + "月"; 55 | fragment.appendChild(li); 56 | } 57 | monthList.appendChild(fragment); 58 | } 59 | 60 | /** 61 | * 初始化各种事件绑定 62 | */ 63 | function handleEvent() { 64 | document.onclick = EventUtil.eventHandler; 65 | } 66 | 67 | console.log("Writed By YL Cui"); 68 | return { 69 | init: init 70 | }; 71 | }); -------------------------------------------------------------------------------- /JS-Demos/Calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 18 |
19 |
20 |
21 | 23 |
24 |
25 |
2016假期安排
26 | 36 |
37 |
今天
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
一二三四五六七
53 |
54 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/js/3.ab409436b81631824404.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([3,4],{19:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={data:function(){return{typeMap:{radio:"单选",checkbox:"多选",textarea:"问答"}}},vuex:{getters:{questionnaire:function(e){return e.currentQuestionnaire},questionnaireList:function(e){return e.questionnaireList}},actions:{setCurrentQuest:function(e,t){var i=e.dispatch;i("SET_QUEST",t)}}},route:{data:function(e){var t=this,i=e.to,s=e.next,n=i.params.questId;this.questionnaire||this.questionnaireList.forEach(function(e){if(parseInt(e.id)===parseInt(n))return void t.setCurrentQuest(e)}),s()}}}},24:function(e,t,i){t=e.exports=i(1)(),t.push([e.id,"#create .preview-deadline{font-size:.14rem;margin-top:.2rem;text-align:center}#create .quest-title_preview{text-align:center;letter-spacing:.05rem;font-size:.28rem;font-weight:700}","",{version:3,sources:["/./src/components/Preview.vue"],names:[],mappings:"AAAA,0BAA0B,iBAAiB,iBAAiB,iBAAiB,CAAC,6BAA6B,kBAAkB,sBAAsB,iBAAiB,eAAgB,CAAC",file:"Preview.vue",sourcesContent:["#create .preview-deadline{font-size:.14rem;margin-top:.2rem;text-align:center}#create .quest-title_preview{text-align:center;letter-spacing:.05rem;font-size:.28rem;font-weight:bold}"],sourceRoot:"webpack://"}])},30:function(e,t,i){var s=i(24);"string"==typeof s&&(s=[[e.id,s,""]]);i(2)(s,{});s.locals&&(e.exports=s.locals)},38:function(e,t){e.exports='

{{$index+1}}、{{typeMap[questItem.type]}}：

问卷截止日期：{{new Date(questionnaire.deadline).toLocaleDateString()}}

'},44:function(e,t,i){var s,n;i(30),s=i(19),n=i(38),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]),n&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=n)}}); 2 | //# sourceMappingURL=3.ab409436b81631824404.js.map -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/src/components/app.vue: -------------------------------------------------------------------------------- 1 | 14 | 31 | -------------------------------------------------------------------------------- /JS-Demos/ResponsiveTable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 8 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
支付日期金额周期
支付 #102/01/2015$2,31101/01/2015 - 01/31/2015
支付 #203/01/2015$3,21102/01/2015 - 02/28/2015
85 | 86 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/main.js' 9 | }, 10 | output: { 11 | path: config.build.assetsRoot, 12 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 13 | filename: '[name].js' 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.vue'], 17 | fallback: [path.join(__dirname, '../node_modules')], 18 | alias: { 19 | 'src': path.resolve(__dirname, '../src'), 20 | 'assets': path.resolve(__dirname, '../src/assets'), 21 | 'components': path.resolve(__dirname, '../src/components') 22 | } 23 | }, 24 | resolveLoader: { 25 | fallback: [path.join(__dirname, '../node_modules')] 26 | }, 27 | module: { 28 | preLoaders: [ 29 | { 30 | test: /\.vue$/, 31 | loader: 'eslint', 32 | include: projectRoot, 33 | exclude: /node_modules/ 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'eslint', 38 | include: projectRoot, 39 | exclude: [/node_modules/, /echarts.js/] 40 | } 41 | ], 42 | loaders: [ 43 | { 44 | test: /\.vue$/, 45 | loader: 'vue' 46 | }, 47 | { 48 | test: /\.js$/, 49 | loader: 'babel', 50 | include: projectRoot, 51 | exclude: [/node_modules/, /echarts.js/] 52 | }, 53 | { 54 | test: /\.json$/, 55 | loader: 'json' 56 | }, 57 | { 58 | test: /\.html$/, 59 | loader: 'vue-html' 60 | }, 61 | { 62 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 63 | loader: 'url', 64 | query: { 65 | limit: 10000, 66 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 67 | } 68 | }, 69 | { 70 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 71 | loader: 'url', 72 | query: { 73 | limit: 10000, 74 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 75 | } 76 | }, 77 | { 78 | test: /\.css$/, 79 | loader: 'style!css' 80 | }, 81 | { 82 | test: /\.less$/, 83 | loader: 'style!css!less' 84 | } 85 | ] 86 | }, 87 | eslint: { 88 | formatter: require('eslint-friendly-formatter') 89 | }, 90 | vue: { 91 | loaders: utils.cssLoaders() 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main {padding: 30px 100px;} 60 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 61 | 62 | .helps{margin-top:40px;} 63 | .helps pre{ 64 | padding:20px; 65 | margin:10px 0; 66 | border:solid 1px #e7e1cd; 67 | background-color: #fffdef; 68 | overflow: auto; 69 | } 70 | 71 | .icon_lists li{ 72 | float:left; 73 | width: 100px; 74 | height:180px; 75 | text-align: center; 76 | } 77 | .icon_lists .icon{ 78 | font-size: 42px; 79 | line-height: 100px; 80 | margin: 10px 0; 81 | color:#333; 82 | -webkit-transition: font-size 0.25s ease-out 0s; 83 | -moz-transition: font-size 0.25s ease-out 0s; 84 | transition: font-size 0.25s ease-out 0s; 85 | 86 | } 87 | .icon_lists .icon:hover{ 88 | font-size: 100px; 89 | } 90 | -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/demo01.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main {padding: 30px 100px;} 60 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 61 | 62 | .helps{margin-top:40px;} 63 | .helps pre{ 64 | padding:20px; 65 | margin:10px 0; 66 | border:solid 1px #e7e1cd; 67 | background-color: #fffdef; 68 | overflow: auto; 69 | } 70 | 71 | .icon_lists li{ 72 | float:left; 73 | width: 100px; 74 | height:180px; 75 | text-align: center; 76 | } 77 | .icon_lists .icon{ 78 | font-size: 42px; 79 | line-height: 100px; 80 | margin: 10px 0; 81 | color:#333; 82 | -webkit-transition: font-size 0.25s ease-out 0s; 83 | -moz-transition: font-size 0.25s ease-out 0s; 84 | transition: font-size 0.25s ease-out 0s; 85 | 86 | } 87 | .icon_lists .icon:hover{ 88 | font-size: 100px; 89 | } 90 | -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Task 26 6 | 7 | 8 | 9 |
10 |
11 |
12 | Command Log 13 |
    14 |
    15 |
    16 | Controller 17 |
    18 | SpaceShip Num.1： 19 | 20 | 21 | 22 | 23 |
    24 |
    25 | SpaceShip Num.2： 26 | 27 | 28 | 29 | 30 |
    31 |
    32 | SpaceShip Num.3： 33 | 34 | 35 | 36 | 37 |
    38 |
    39 | SpaceShip Num.4： 40 | 41 | 42 | 43 | 44 |
    45 |
    46 |
    47 | 51 |
    52 | 53 | 54 | -------------------------------------------------------------------------------- /Vue-Demos/Vue-Chat/src/components/message.vue: -------------------------------------------------------------------------------- 1 | 27 | 45 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/components/Preview.vue: -------------------------------------------------------------------------------- 1 | 28 | 66 | 81 | 82 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/README.md: -------------------------------------------------------------------------------- 1 | # Questionnaire 2 | 3 | > 一个用Vue.js写的微型问卷调查 4 | 5 | 任务基于百度ife[任务四](http://ife.baidu.com/task/detail?taskId=50) 6 | 7 | [demo](http://pramper.github.io/Demos/Vue-Demos/Questionnaire/dist) 8 | ## 任务目的 9 | 10 | - 基于阶段三的各个组件，学习模块化、前端工程等内容，综合运用HTML，CSS，JavaScript完成一个小型完整网站的实现 11 | 12 | ## 任务描述 13 | 14 | - [参考设计图](http://7xrp04.com1.z0.glb.clouddn.com/task_4_50_1.png) 15 | 实现一个简易版的问卷管理系统，有如下功能： 16 | 17 | ### 问卷管理列表 18 | > - 有一个头部可以显示logo，不需要实现登录等操作 19 | > - 问卷管理列表页面默认为首页 20 | > - 有一个表格用于展示所有已创建的问卷 21 | > - 列表中包括列有：问卷名称，问卷状态（未发布，发布中，已结束），和操作区域（编辑、删除、查看数据） 22 | > - 问卷状态为未发布时，可以做的操作为编辑、删除、查看问卷 23 | > - 问卷状态为发布中和已结束时，可以做的操作为查看数据、查看问卷 24 | > - 表格最左侧有批量选择（多选）的checkbox，多选后，可以进行批量删除功能，checkbox样式用默认即可，不需要按照设计图的样式 25 | > - 当一个问卷都没有的时候，表格不展现，页面显示大大的新建问卷按钮 26 | 27 | ### 问卷新建及编辑 28 | > - 点击问卷管理列表中的新建按钮后，进入到问卷新建页面 29 | > - 点击问卷列表中某个问卷行的编辑按钮后，进入到问卷的编辑页面 30 | > - 新建页面和编辑页面基本相同 31 | > - 问卷有一个标题字段，点击后可以进入编辑状态 32 | > - 可以针对问卷中的问题进行增删改操作，每个问卷最少一个问题，最多十个问题 33 | > - 问题类型包括：单选题、多选题、单行文本题 34 | > - 可以对所有问题进行位置改变（上移、下移），复用，删除的操作 35 | > - 最上面的问题没有上移操作，最下面的问题没有下移操作 36 | > - 点击复用时，在被复用的问题紧接着的下方新增一个和被复用完全一样的问题（包括选项） 37 | > - 对于单选题和多选题，可以对问题的选项进行增、删、改、排序操作 38 | > - 文本题可以设定是必填还是非必填的问题 39 | > - 有一个问卷调查填写截止时间，使用一个日历组件来进行时间的选择，日期选择不能早于当前日期 40 | > - 保存问卷可以进行问卷的保存 41 | > - 发布问卷可以使得问卷状态变为发布中的状态 42 | > - 当点击发布时，如果截止日期早于当前日期，则需要提示修改截止日期 43 | 44 | ### 删除问卷 45 | > - 在问卷管理列表中点击某个问卷的删除按钮后，弹出一个浮出层，让用户二次确认是否删除该问卷，如果用户点击是，则删除掉该问卷 46 | 47 | ### 查看问卷 48 | > - 在问卷管理列表中点击查看问卷的按钮后，在新窗口中打开该问卷的页面，该页面是可供用户进行问卷填写的页面，在问卷未发布状态和已结束状态时，问卷提交是无效的。 49 | > - 该页面在移动端需要进行良好的兼容支持 50 | 51 | ### 查看数据 52 | > - 在问卷管理列表中点击查看数据按钮后，进入到一个数据报告页面，用图表形式呈现各个单选题和多选题的选择情况 53 | > - 如设计稿中呈现，每一个问题在右侧用某种图表来呈现答题情况，自行选择合适的图表，设计稿中仅为示意，图表样式不需要和设计稿一致。推荐单选题使用饼状图，多选题使用条形图 54 | > - 文本题用一个百分比图展现有效回答占比即可 55 | > - 返回按钮点击后返回列表页面 56 | 57 | - 在项目中尝试模块化的方法及工具 58 | - 在项目中尝试CSS预处理工具 59 | - 在项目中尝试项目构建、打包工具 60 | 61 | ## 任务注意事项 62 | 63 | - 上面描述中的示意图仅为需求描述参考，不作为实现的设计参考 64 | - 上面的需求描述中存在与真实产品合理性的差异，本任务以技术学习为主，忽略产品设计上的问题 65 | - 请注意代码风格的整齐、优雅 66 | - 代码中含有必要的注释 67 | - 可以合理使用第三方框架、类库 68 | - 所有数据可以采用前端模拟，也可以真实创造一个服务端的环境及代码 69 | 不要求有真实的保存、问卷填写等操作，均可采用随机、自制数据模拟来mock数据 70 | 71 | ## 任务协作建议 72 | 73 | - 如果是各自工作，可以按以下方式： 74 | + 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致 75 | + 各自完成任务实践 76 | + 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码 77 | + 相互讨论，最后合成一份组内最佳代码进行提交 78 | - 如果是分工工作（推荐），可以按以下模块切分 79 | + 列表页面 80 | + 新建及编辑页面 81 | + 问卷填写页面 82 | + 查看数据报告页面 83 | 84 | ## Build Setup 85 | 86 | ``` bash 87 | # install dependencies 88 | npm install 89 | 90 | # serve with hot reload at localhost:8080 91 | npm run dev 92 | 93 | # build for production with minification 94 | npm run build 95 | 96 | # run unit tests 97 | npm run unit 98 | 99 | # run e2e tests 100 | npm run e2e 101 | 102 | # run all tests 103 | npm test 104 | ``` 105 | 106 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 107 | -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
    12 |

    IconFont 图标

    13 |
      14 | 15 |
    • 16 | 17 |
      书
      18 |
      &#xe600;
      19 |
      .book
      20 |
      • 21 | 22 |
    • 23 | 24 |
      4方格
      25 |
      &#xe601;
      26 |
      .4fangge
      27 |
      • 28 | 29 |
    • 30 | 31 |
      登录
      32 |
      &#xe602;
      33 |
      .denglu
      34 |
      • 35 | 36 |
    • 37 | 38 |
      circle
      39 |
      &#xe603;
      40 |
      .circle
      41 |
      • 42 | 43 |
    • 44 | 45 |
      花
      46 |
      &#xe604;
      47 |
      .hua
      48 |
      • 49 | 50 |
    • 51 | 52 |
      旗帜
      53 |
      &#xe605;
      54 |
      .iconset0399
      55 |
      • 56 | 57 |
    58 | 59 | 60 |
    61 | 第一步：使用font-face声明字体 62 | 
    63 | @font-face {font-family: 'iconfont';
64 |     src: url('iconfont.eot'); /* IE9*/
65 |     src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
66 |     url('iconfont.woff') format('woff'), /* chrome、firefox */
67 |     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
68 |     url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
69 | }
70 |
    71 | 第二步：定义使用iconfont的样式 72 | 
    73 | .iconfont{
74 |     font-family:"iconfont" !important;
75 |     font-size:16px;font-style:normal;
76 |     -webkit-font-smoothing: antialiased;
77 |     -webkit-text-stroke-width: 0.2px;
78 |     -moz-osx-font-smoothing: grayscale;}
79 |
    80 | 第三步：挑选相应图标并获取字体编码，应用于页面 81 | 
    82 | <i class="iconfont">&#x33;</i>
83 |
    84 |
    85 | 86 |
    87 | 88 | 89 | -------------------------------------------------------------------------------- /JS-Demos/Calendar/js/EventUtil.js: -------------------------------------------------------------------------------- 1 | /* 2 | 处理各种事件 3 | */ 4 | define(["renderCalendar", "vacationArrange"], function(renderCalendar, vacationArrange) { 5 | var ulSelections = document.querySelectorAll(".ul-selection"), 6 | currentYear = document.querySelector("#current-year"), 7 | currentMonth = document.querySelector("#current-month"), 8 | vacation = document.querySelector("#vacation"), 9 | displayVacation = document.querySelector("#display-vacation"), 10 | event, target, targetID, tagName, td; 11 | //根据不同的事件，用相应的函数处理 12 | function eventHandler() { 13 | event = arguments[0] || window.event; 14 | event.stopPropagation(); 15 | target = event.target || event.srcElement; 16 | targetID = target.id; 17 | tagName = target.tagName.toLowerCase(); 18 | 19 | if(targetID==="current-year" || targetID==="current-month" 20 | || targetID==="display-vacation") { 21 | selectionsEvent(); 22 | } else if(tagName === "li") { 23 | ulEvent(); 24 | } else { 25 | for(var i=0; i div { 27 | flex: 1; 28 | } 29 | .data-select { 30 | border-radius: 30%; 31 | background-color: #ccf; 32 | border: none; 33 | } 34 | #month { 35 | margin: 0 5px; 36 | } 37 | } 38 | @media screen and (min-width: 750px) { 39 | #container { 40 | display: flex; 41 | width: 700px; 42 | border: 2px solid #ccf; 43 | } 44 | #left { 45 | flex: 7; 46 | padding: 0 8px; 47 | } 48 | #right { 49 | flex: 3; 50 | } 51 | #today { 52 | float: right; 53 | } 54 | .data-select { 55 | float: left; 56 | margin-right: 13px; 57 | border: 1px solid #aaa; 58 | } 59 | .data-select, 60 | #today { 61 | width: 100px; 62 | } 63 | } 64 | #container { 65 | margin: 50px auto; 66 | height: 450px; 67 | } 68 | #left { 69 | height: inherit; 70 | font-size: 1.3rem; 71 | box-sizing: border-box; 72 | } 73 | #right { 74 | height: inherit; 75 | background-color: #ccf; 76 | box-sizing: border-box; 77 | } 78 | #selections { 79 | width: 100%; 80 | border-bottom: 1px solid #ccf; 81 | font-size: 1.4rem; 82 | padding: 10px 0; 83 | } 84 | #selections .data-select, 85 | #selections #today { 86 | height: 25px; 87 | text-align: center; 88 | line-height: 25px; 89 | cursor: pointer; 90 | } 91 | #selections .data-select { 92 | position: relative; 93 | text-align: center; 94 | line-height: 25px; 95 | } 96 | #selections .ul-selection { 97 | position: absolute; 98 | top: 100%; 99 | left: -1px; 100 | list-style: none; 101 | width: 100%; 102 | max-height: 300px; 103 | overflow: auto; 104 | cursor: pointer; 105 | border: 1px solid #ccc; 106 | background-color: #fff; 107 | z-index: 10; 108 | } 109 | #selections .ul-selection li { 110 | text-align: center; 111 | } 112 | #selections .ul-selection li:hover { 113 | background-color: #ddd; 114 | } 115 | .red { 116 | color: #f03; 117 | } 118 | #year { 119 | position: relative; 120 | } 121 | #today { 122 | background-color: #ccf; 123 | border: 1px solid #ccf; 124 | } 125 | #calendar { 126 | width: 100%; 127 | text-align: center; 128 | border-spacing: 0; 129 | cursor: default; 130 | } 131 | #calendar .date { 132 | position: relative; 133 | height: 70px; 134 | border-top: 1px solid #ccc; 135 | } 136 | #calendar .date:hover { 137 | background-color: rgba(204, 204, 255, 0.2); 138 | } 139 | .clickBg { 140 | background-color: rgba(204, 204, 255, 0.2); 141 | } 142 | .notNowMonth { 143 | color: #aaa; 144 | } 145 | .nowDay { 146 | background-color: #ccf; 147 | } 148 | .restDay, 149 | .workDay { 150 | position: absolute; 151 | left: 0; 152 | top: 0; 153 | color: #fff; 154 | padding: 2px; 155 | } 156 | .restDay { 157 | background-color: #f03; 158 | } 159 | .workDay { 160 | background-color: #aaa; 161 | } 162 | #week { 163 | height: 40px; 164 | } 165 | .hidden { 166 | visibility: hidden; 167 | } 168 | .clearfix:after { 169 | content: ""; 170 | display: block; 171 | clear: both; 172 | } 173 | #right-date { 174 | font-size: 2rem; 175 | text-align: center; 176 | margin: 30px 0; 177 | } 178 | #right-day { 179 | display: flex; 180 | align-items: center; 181 | justify-content: center; 182 | margin: 0 auto; 183 | width: 60%; 184 | height: 25%; 185 | background-color: #5af; 186 | border-radius: 4%; 187 | box-shadow: 2px 2px 2px #aaa; 188 | font-size: 5rem; 189 | color: #fff; 190 | } 191 | #right-cn-date { 192 | font-size: 1.5rem; 193 | text-align: center; 194 | margin: 20px 0; 195 | } 196 | -------------------------------------------------------------------------------- /JS-Demos/Calendar/style/index.less: -------------------------------------------------------------------------------- 1 | @mainColor: #ccf; 2 | @restDayColor: #f03; 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | } 7 | html{ 8 | font-family: "Microsoft YaHei", sans-serif; 9 | font-size: 62.5%; 10 | } 11 | @media screen and (max-width:700px){ 12 | #right{ 13 | display: none; 14 | } 15 | #left{ 16 | width: 100%; 17 | }; 18 | #container { 19 | width: 100%; 20 | } 21 | #today{ 22 | display: none; 23 | } 24 | #selections{ 25 | display: flex; 26 | justify-content: space-around; 27 | >div{ 28 | //padding: 0 10px; 29 | flex: 1; 30 | } 31 | } 32 | .data-select{ 33 | border-radius: 30%; 34 | background-color: @mainColor; 35 | border: none; 36 | } 37 | #month{ 38 | margin: 0 5px; 39 | } 40 | } 41 | @media screen and (min-width: 750px) { 42 | #container{ 43 | display: flex; 44 | width: 700px; 45 | border: 2px solid #ccf; 46 | } 47 | #left{ 48 | flex: 7; 49 | padding: 0 8px; 50 | } 51 | #right{ 52 | flex: 3; 53 | } 54 | #today{ 55 | float: right; 56 | } 57 | .data-select{ 58 | float: left; 59 | margin-right: 13px; 60 | border: 1px solid #aaa; 61 | } 62 | .data-select, #today{ 63 | width: 100px; 64 | } 65 | #year, #month, #vacation{ 66 | 67 | } 68 | } 69 | #container{ 70 | margin: 50px auto; 71 | height: 450px; 72 | } 73 | 74 | #left{ 75 | height: inherit; 76 | font-size: 1.3rem; 77 | box-sizing: border-box; 78 | } 79 | #right{ 80 | height: inherit; 81 | background-color: @mainColor; 82 | box-sizing: border-box; 83 | } 84 | #selections{ 85 | width: 100%; 86 | border-bottom: 1px solid @mainColor; 87 | font-size: 1.4rem; 88 | padding: 10px 0; 89 | .data-select, #today{ 90 | height: 25px; 91 | text-align: center; 92 | line-height: 25px; 93 | cursor: pointer; 94 | } 95 | 96 | .data-select{ 97 | position: relative; 98 | 99 | 100 | text-align: center; 101 | line-height: 25px; 102 | } 103 | .ul-selection{ 104 | position: absolute; 105 | top: 100%; 106 | left: -1px; 107 | list-style: none; 108 | width: 100%; 109 | max-height: 300px; 110 | overflow: auto; 111 | cursor: pointer; 112 | border: 1px solid #ccc; 113 | background-color: #fff; 114 | z-index: 10; 115 | li{ 116 | text-align: center; 117 | } 118 | li:hover{ 119 | background-color: #ddd; 120 | 121 | } 122 | } 123 | } 124 | .red{ 125 | color: @restDayColor; 126 | } 127 | #year{ 128 | position: relative; 129 | } 130 | #today{ 131 | background-color: @mainColor; 132 | border: 1px solid @mainColor; 133 | } 134 | #calendar{ 135 | width: 100%; 136 | text-align: center; 137 | border-spacing: 0; 138 | cursor: default; 139 | .date{ 140 | position: relative; 141 | height: 70px; 142 | border-top: 1px solid #ccc; 143 | } 144 | .date:hover{ 145 | background-color: rgba(204, 204, 255, .2); 146 | } 147 | 148 | } 149 | .clickBg{ 150 | background-color: rgba(204, 204, 255, .2); 151 | } 152 | .notNowMonth{ 153 | color: #aaa; 154 | } 155 | .nowDay{ 156 | background-color: @mainColor; 157 | } 158 | .restDay, .workDay{ 159 | position: absolute; 160 | left: 0; 161 | top: 0; 162 | color: #fff; 163 | padding: 2px; 164 | } 165 | .restDay{ 166 | background-color: @restDayColor; 167 | } 168 | .workDay{ 169 | background-color: #aaa; 170 | } 171 | #week{ 172 | height: 40px; 173 | } 174 | .hidden{ 175 | visibility: hidden; 176 | } 177 | .clearfix:after{ 178 | content: ""; 179 | display: block; 180 | clear: both; 181 | } 182 | #right{ 183 | } 184 | #right-date{ 185 | font-size: 2rem; 186 | text-align: center; 187 | margin: 30px 0; 188 | } 189 | #right-day{ 190 | display: flex; 191 | align-items: center; 192 | justify-content: center; 193 | margin: 0 auto; 194 | width: 60%; 195 | height: 25%; 196 | background-color: #5af; 197 | border-radius: 4%; 198 | box-shadow: 2px 2px 2px #aaa; 199 | font-size: 5rem; 200 | color: #fff; 201 | } 202 | #right-cn-date{ 203 | font-size: 1.5rem; 204 | text-align: center; 205 | margin: 20px 0; 206 | } 207 | -------------------------------------------------------------------------------- /JS-Demos/Calendar/js/renderCalendar.js: -------------------------------------------------------------------------------- 1 | define(["CNCalendar", "vacationArrange"], function(CNCalendar, vacationArrange) { 2 | var tr, td, 3 | tbody = document.querySelector("#calendar").querySelectorAll("tbody")[0], 4 | rightDate = document.querySelector("#right-date"), 5 | rightDay = document.querySelector("#right-day"), 6 | rightCNDate = document.querySelector("#right-cn-date"), 7 | week = ["七", "一", "二", "三", "四", "五", "六"]; 8 | /** 9 | * 10 | * @param currentYear 11 | * @param currentMonth：传入值为1~12 12 | */ 13 | var renderCal = function(currentYear, currentMonth) { 14 | var fragment = document.createDocumentFragment(), 15 | //获得需要渲染的年、月 16 | date = new Date(currentYear+'/'+currentMonth+'/1'), 17 | //一天的毫秒数 18 | oneDay = 1000*60*60*24, 19 | //first表日历中的第一天，displayDate表每个单元格中展示的事件，CNCalendarDay表农历时间 20 | firstDay, index = 0, displayDate, CNCalendarDay, rest, work, vacationIndex; 21 | //根据当月1日的星期不同，从而firstDay不同 22 | if(date.getDay() === 0) { 23 | firstDay = new Date(date.getTime() - 6*oneDay); 24 | } else { 25 | firstDay = new Date(date.getTime() - (date.getDay()-1)*oneDay); 26 | } 27 | //整个calendar有5行7列 28 | for(var i=0; i<5; i++) { 29 | tr = document.createElement("tr"); 30 | for(var j=0; j<7; j++) { 31 | td = document.createElement("td"); 32 | //没循环一次时间就从当前日历的第一天往后推一天 33 | displayDate = new Date(firstDay.getTime()+oneDay*index); 34 | //获取displayDate的农历时间 35 | CNCalendarDay = CNCalendar.showCal(displayDate).day; 36 | //判断如果不是当前月的事件，就显示为灰色，如果有当前天就加上背景色 37 | if(displayDate.getMonth() + 1 !== currentMonth) { 38 | td.className = "date notNowMonth" 39 | } else if(currentYear===new Date().getFullYear() && currentMonth===new Date().getMonth()+1 40 | && displayDate.getDate() === new Date().getDate()){ 41 | td.className = "date nowDay"; 42 | renderDetail(displayDate); 43 | } else{ 44 | td.className = "date"; 45 | } 46 | //增加节假日显示 47 | if(vacationArrange.restDaysArr.indexOf(displayDate.getTime()) !== -1) { 48 | rest = document.createElement("span"); 49 | rest.innerHTML = "休"; 50 | rest.classList.add("restDay"); 51 | td.classList.add("red"); 52 | td.classList.remove("notNowMonth"); 53 | td.appendChild(rest); 54 | }else if(vacationArrange.workDaysArr.indexOf(displayDate.getTime()) !== -1) { 55 | work = document.createElement("span"); 56 | work.innerHTML = "班"; 57 | work.classList.add("workDay"); 58 | td.appendChild(work); 59 | } 60 | //确定每个但宇哥要显示的内容 61 | vacationIndex = vacationArrange.vacationDay[0].indexOf(displayDate.getTime()); 62 | td.innerHTML += displayDate.getDate() + "
    "; 63 | if(vacationIndex !== -1) { 64 | td.innerHTML += vacationArrange.vacationDay[1][vacationIndex]; 65 | } else{ 66 | td.setAttribute("data-date", displayDate); 67 | td.innerHTML += CNCalendarDay; 68 | } 69 | 70 | index++; 71 | tr.appendChild(td); 72 | } 73 | fragment.appendChild(tr); 74 | } 75 | tbody.innerHTML = ""; 76 | tbody.appendChild(fragment); 77 | //出国当前月，右栏显示每月一日的详细信息 78 | if(currentMonth != new Date().getMonth()+1) { 79 | renderDetail(new Date(currentYear+"/"+currentMonth+"/"+1)); 80 | } 81 | }; 82 | var renderDetail = function(date) { 83 | rightDate.innerHTML = date.getFullYear() + "-" + (date.getMonth()+1) + "-" 84 | + date.getDate() + " 星期" + week[date.getDay()]; 85 | rightDay.innerHTML = date.getDate(); 86 | rightCNDate.innerHTML = CNCalendar.showCal(date).all; 87 | }; 88 | 89 | return { 90 | render: renderCal, 91 | renderDetail: renderDetail 92 | }; 93 | }); -------------------------------------------------------------------------------- /JS-Demos/Calendar/js/CNCalendar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 只能提供1921~2020年的农历 3 | */ 4 | define(function() { 5 | /*获取当前农历,month:1~12*/ 6 | function showCal(D){ 7 | var yy=D.getFullYear(); 8 | var mm=D.getMonth()+1; 9 | var dd=D.getDate(); 10 | var ww=D.getDay(); 11 | var ss=parseInt(D.getTime() / 1000); 12 | if (yy<100) yy="19"+yy; 13 | return GetLunarDay(yy,mm,dd); 14 | } 15 | 16 | //定义全局变量 17 | var CalendarData=new Array(100); 18 | var madd=new Array(12); 19 | var tgString="甲乙丙丁戊己庚辛壬癸"; 20 | var dzString="子丑寅卯辰巳午未申酉戌亥"; 21 | var numString="一二三四五六七八九十"; 22 | var monString="正二三四五六七八九十冬腊"; 23 | var weekString="日一二三四五六"; 24 | var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪"; 25 | var cYear,cMonth,cDay,TheDate; 26 | CalendarData = new Array(0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96,0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A,0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x2192B,0xA95,0x71695,0x6CA,0xB55,0x50AB5,0x4DA,0xA5B,0x30A57,0x52B,0x8152A,0xE95,0x6AA,0x615AA,0xAB5,0x4B6,0x414AE,0xA57,0x526,0x31D26,0xD95,0x70B55,0x56A,0x96D,0x5095D,0x4AD,0xA4D,0x41A4D,0xD25,0x81AA5,0xB54,0xB6A,0x612DA,0x95B,0x49B,0x41497,0xA4B,0xA164B, 0x6A5,0x6D4,0x615B4,0xAB6,0x957,0x5092F,0x497,0x64B, 0x30D4A,0xEA5,0x80D65,0x5AC,0xAB6,0x5126D,0x92E,0xC96,0x41A95,0xD4A,0xDA5,0x20B55,0x56A,0x7155B,0x25D,0x92D,0x5192B,0xA95,0xB4A,0x416AA,0xAD5,0x90AB5,0x4BA,0xA5B, 0x60A57,0x52B,0xA93,0x40E95); 27 | madd[0]=0; 28 | madd[1]=31; 29 | madd[2]=59; 30 | madd[3]=90; 31 | madd[4]=120; 32 | madd[5]=151; 33 | madd[6]=181; 34 | madd[7]=212; 35 | madd[8]=243; 36 | madd[9]=273; 37 | madd[10]=304; 38 | madd[11]=334; 39 | 40 | function GetBit(m,n){ 41 | return (m>>n)&1; 42 | } 43 | //农历转换 44 | function e2c(){ 45 | TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]); 46 | var total,m,n,k; 47 | var isEnd=false; 48 | var tmp=TheDate.getYear(); 49 | if(tmp<1900){ 50 | tmp+=1900; 51 | } 52 | total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38; 53 | 54 | if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) { 55 | total++; 56 | } 57 | for(m=0;;m++){ 58 | k=(CalendarData[m]<0xfff)?11:12; 59 | for(n=k;n>=0;n--){ 60 | if(total<=29+GetBit(CalendarData[m],n)){ 61 | isEnd=true; break; 62 | } 63 | total=total-29-GetBit(CalendarData[m],n); 64 | } 65 | if(isEnd) break; 66 | } 67 | cYear=1921 + m; 68 | cMonth=k-n+1; 69 | cDay=total; 70 | if(k==12){ 71 | if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){ 72 | cMonth=1-cMonth; 73 | } 74 | if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){ 75 | cMonth--; 76 | } 77 | } 78 | } 79 | 80 | function GetcDateString(){ 81 | var zodiac = "", month = "", day = ""; 82 | /*显示农历年：（ 如：甲午(马)年 ）*/ 83 | zodiac+=tgString.charAt((cYear-4)%10); 84 | zodiac+=dzString.charAt((cYear-4)%12); 85 | zodiac+="【"; 86 | zodiac+=sx.charAt((cYear-4)%12); 87 | zodiac+="】年 "; 88 | if(cMonth<1){ 89 | month+="(闰)"; 90 | month+=monString.charAt(-cMonth-1); 91 | }else{ 92 | month+=monString.charAt(cMonth-1); 93 | } 94 | month+="月"; 95 | day+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十")); 96 | if (cDay%10!=0||cDay==10){ 97 | day+=numString.charAt((cDay-1)%10); 98 | } 99 | return { 100 | all: zodiac + month + day, 101 | zodiac: zodiac, 102 | month: month, 103 | day: day 104 | }; 105 | } 106 | 107 | function GetLunarDay(solarYear,solarMonth,solarDay){ 108 | //solarYear = solarYear<1900?(1900+solarYear):solarYear; 109 | if(solarYear<1921 || solarYear>2020){ 110 | return ""; 111 | }else{ 112 | solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11; 113 | e2c(solarYear,solarMonth,solarDay); 114 | return GetcDateString(); 115 | } 116 | 117 | } 118 | 119 | return { 120 | showCal: showCal 121 | }; 122 | }); -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/vuex/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 问卷的存储格式： 3 | * var questionnaire = { 4 | * title: String, 5 | * deadline: Number, 6 | * state: String [未发布、已发布、已结束], 7 | * id: Date.now(), 每一个问卷都有一个唯一的ID 8 | * questItemList: Array [questItem] 9 | * } 10 | * var questItem = { 11 | * type: radio, checkbox, textarea, 12 | * title: '', 13 | * name: Date.now() 14 | * selections: [] 15 | * } 16 | *使用localStorage来存储：KEY: questionnaireList, type: Array 17 | */ 18 | 19 | import Vuex from 'vuex' 20 | import Vue from 'vue' 21 | 22 | Vue.use(Vuex) 23 | 24 | const KEY = 'questionnaireList' 25 | let questionnaire01 = { 26 | "title": "问卷调查一", 27 | "deadline": 1471622400000, 28 | "state": "未发布", 29 | "questItemList": [ 30 | { 31 | "type": "radio", 32 | "title": "性别", 33 | "selections": [ 34 | "男", 35 | "女" 36 | ], 37 | "name": 1471528977004 38 | }, 39 | { 40 | "type": "checkbox", 41 | "title": "爱好", 42 | "selections": [ 43 | "篮球", 44 | "足球", 45 | "网球" 46 | ], 47 | "name": 1471528987079 48 | }, 49 | { 50 | "type": "textarea", 51 | "title": "自我评价" 52 | } 53 | ], 54 | "id": 1471528999124 55 | } 56 | let questionnaire02 = { 57 | "title": "问卷调查二", 58 | "deadline": 1471622400000, 59 | "state": "已发布", 60 | "questItemList": [ 61 | { 62 | "type": "radio", 63 | "title": "性别", 64 | "selections": [ 65 | "男", 66 | "女" 67 | ], 68 | "name": 1471528977004 69 | }, 70 | { 71 | "type": "checkbox", 72 | "title": "爱好", 73 | "selections": [ 74 | "篮球", 75 | "足球", 76 | "网球" 77 | ], 78 | "name": 1471528987079 79 | }, 80 | { 81 | "type": "textarea", 82 | "title": "自我评价" 83 | } 84 | ], 85 | "id": 1471528999124 86 | } 87 | let questionnaire03 = { 88 | "title": "问卷调查三", 89 | "deadline": 1471622400000, 90 | "state": "已发布", 91 | "questItemList": [ 92 | { 93 | "type": "radio", 94 | "title": "性别", 95 | "selections": [ 96 | "男", 97 | "女" 98 | ], 99 | "name": 1471528977004 100 | }, 101 | { 102 | "type": "checkbox", 103 | "title": "爱好", 104 | "selections": [ 105 | "篮球", 106 | "足球", 107 | "网球" 108 | ], 109 | "name": 1471528987079 110 | }, 111 | { 112 | "type": "textarea", 113 | "title": "自我评价" 114 | } 115 | ], 116 | "id": 1471528999124 117 | } 118 | if(!localStorage.getItem(KEY)) { 119 | localStorage.setItem(KEY, JSON.stringify([questionnaire01, questionnaire02, questionnaire03])) 120 | } 121 | 122 | const state = { 123 | questionnaireList: JSON.parse(localStorage.getItem(KEY)), // 所有的调查问卷,type: Array 124 | currentQuestionnaire: null // 当前正在操作的调查问卷, type: {} 125 | } 126 | 127 | const mutations = { 128 | // 增加一个新的问卷，item即为新的问卷 129 | ADD_QUEST(state, item) { 130 | state.questionnaireList.push(item) 131 | state.currentQuestionnaire = item 132 | updateStorage(state) 133 | }, 134 | // 删除一个问卷，item即为将要被删除的问卷 135 | RM_QUEST(state, item) { 136 | let index = state.questionnaireList.indexOf(item) 137 | if(item !== -1) { 138 | state.questionnaireList.splice(index, 1) 139 | updateStorage(state) 140 | } else { 141 | throw new Error("该问卷不存在！") 142 | } 143 | }, 144 | // 保存一个问卷，用于对还未发布的问卷的更新 145 | UPDATE_QUEST(state, item) { 146 | let index = state.questionnaireList.indexOf(item) 147 | if(index !== -1) { 148 | state.questionnaireList.splice(index, 1, item) 149 | state.currentQuestionnaire = item 150 | updateStorage(state) 151 | } else { 152 | throw new Error("该问卷不存在！") 153 | } 154 | }, 155 | // 设置当前需要操作的问卷 156 | SET_QUEST(state, item) { 157 | if(state.currentQuestionnaire === item) {return} 158 | state.currentQuestionnaire = item 159 | } 160 | } 161 | 162 | // 每当questionnaire有更新时，就更新localStorage 163 | function updateStorage(state) { 164 | localStorage.setItem(KEY, JSON.stringify(state.questionnaireList)) 165 | } 166 | 167 | export default new Vuex.Store({ 168 | state, 169 | mutations 170 | }) -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/components/Data.vue: -------------------------------------------------------------------------------- 1 | 14 | 120 | 145 | 146 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/components/Calendar.vue: -------------------------------------------------------------------------------- 1 | 37 | 112 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/js/app.d529e7727a81d8bc5187.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([5,4],[function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}var o=n(10),s=i(o),a=n(45),r=i(a),u=n(11);s["default"].use(r["default"]);var c=new r["default"];(0,u.configRouter)(c)},,,,,,,,,function(t,e,n){var i,o;n(29),i=n(18),o=n(37),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),o&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=o)},,function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function o(t){t.map({"/index":{component:function(t){!function(){var e=[n(9)];t.apply(null,e)}.call(this)}},"/create":{component:function(t){n.e(0,function(e){var n=[e(40)];t.apply(null,n)}.bind(this))}},"/edit/:questId":{component:function(t){n.e(1,function(e){var n=[e(42)];t.apply(null,n)}.bind(this))}},"/preview/:questId":{component:function(t){n.e(3,function(e){var n=[e(44)];t.apply(null,n)}.bind(this))}},"/data/:questId":{component:function(t){n.e(2,function(e){var n=[e(41)];t.apply(null,n)}.bind(this))}}}),t.redirect({"*":"/index"}),t.start(a["default"],"app")}Object.defineProperty(e,"__esModule",{value:!0}),e.configRouter=o;var s=n(39),a=i(s)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function o(t){localStorage.setItem(l,(0,a["default"])(t.questionnaireList))}Object.defineProperty(e,"__esModule",{value:!0});var s=n(4),a=i(s),r=n(46),u=i(r),c=n(10),d=i(c);d["default"].use(u["default"]);var l="questionnaireList",p={title:"问卷调查一",deadline:14716224e5,state:"未发布",questItemList:[{type:"radio",title:"性别",selections:["男","女"],name:1471528977004},{type:"checkbox",title:"爱好",selections:["篮球","足球","网球"],name:1471528987079},{type:"textarea",title:"自我评价"}],id:1471528999124},f={title:"问卷调查二",deadline:14716224e5,state:"已发布",questItemList:[{type:"radio",title:"性别",selections:["男","女"],name:1471528977004},{type:"checkbox",title:"爱好",selections:["篮球","足球","网球"],name:1471528987079},{type:"textarea",title:"自我评价"}],id:1471528999124},h={title:"问卷调查三",deadline:14716224e5,state:"已发布",questItemList:[{type:"radio",title:"性别",selections:["男","女"],name:1471528977004},{type:"checkbox",title:"爱好",selections:["篮球","足球","网球"],name:1471528987079},{type:"textarea",title:"自我评价"}],id:1471528999124};localStorage.getItem(l)||localStorage.setItem(l,(0,a["default"])([p,f,h]));var v={questionnaireList:JSON.parse(localStorage.getItem(l)),currentQuestionnaire:null},x={ADD_QUEST:function(t,e){t.questionnaireList.push(e),t.currentQuestionnaire=e,o(t)},RM_QUEST:function(t,e){var n=t.questionnaireList.indexOf(e);if(e===-1)throw new Error("该问卷不存在！");t.questionnaireList.splice(n,1),o(t)},UPDATE_QUEST:function(t,e){var n=t.questionnaireList.indexOf(e);if(n===-1)throw new Error("该问卷不存在！");t.questionnaireList.splice(n,1,e),t.currentQuestionnaire=e,o(t)},SET_QUEST:function(t,e){t.currentQuestionnaire!==e&&(t.currentQuestionnaire=e)}};e["default"]=new u["default"].Store({state:v,mutations:x})},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(43),s=i(o),a=n(9),r=i(a),u=n(12),c=i(u);e["default"]={components:{"v-header":s["default"],Index:r["default"]},store:c["default"]}},,,,function(t,e){"use strict"},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{name:Date.now(),checkedQuest:[]}},vuex:{getters:{questionnaireList:function(t){return t.questionnaireList}},actions:{setQuest:function(t,e){var n=t.dispatch;n("SET_QUEST",e)},removeQuest:function(t,e){var n=t.dispatch;n("RM_QUEST",e)}}},methods:{createQuest:function(){this.$router.go("/create")},handleOperation:function(t,e){var n=t.target.dataset.operation;"edit"===n?(this.setQuest(e),this.$router.go("/edit/"+e.id)):"preview"===n?(this.setQuest(e),this.$router.go("/preview/"+e.id)):"checked"===n?this.handleChecked(e):"data"===n&&(this.setQuest(e),this.$router.go("/data/"+e.id))},handleChecked:function(t){var e=this.checkedQuest.indexOf(t);e===-1?this.checkedQuest.push(t):this.checkedQuest.splice(e,1)},createOrRm:function(t){var e=t.target.dataset.operation;"create"===e?this.createQuest():"rmChecked"===e&&this.remove()},remove:function(){for(;this.checkedQuest.length>0;){var t=this.checkedQuest.shift();this.removeQuest(t)}}}}},,,,,,,function(t,e){},,,function(t,e){},function(t,e){},,,function(t,e){t.exports="
    "},,,,function(t,e){t.exports=' '},function(t,e){t.exports='
    标题截止时间状态操作
           
    '},,function(t,e,n){var i,o;n(25),i=n(13),o=n(32),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),o&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=o)},,,,function(t,e,n){var i,o;n(28),i=n(17),o=n(36),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),o&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=o)}]); 2 | //# sourceMappingURL=app.d529e7727a81d8bc5187.js.map -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Thu Mar 24 16:58:34 2016 6 | By Ads 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 38 | 43 | 46 | 51 | 57 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/css/app.0240875a89bc6ec5bd28f8bb4dd624ed.css: -------------------------------------------------------------------------------- 1 | body,html{width:100%;height:100%;font-family:Helvetica,Hiragino Sans GB,Microsoft Yahei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif}body,button,div,h1,h2,h3,html,p{padding:0;margin:0;line-height:1}html{font-size:100px;min-width:980px}button{cursor:pointer;border:none;font-size:.16rem}button,input,textarea{outline:none}a{text-decoration:none}li{list-style:none}.checkbox,.radio{display:none}.checkbox+label,.radio+label{position:relative;font-size:16px;padding-left:23px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.checkbox+label:before,.radio+label:before{position:absolute;content:"";top:48%;margin-top:-8px;left:0;width:16px;height:16px;border:1px solid silver;background-color:#fff}.checkbox+label:before{border-radius:3px}.radio+label:before{border-radius:50%}.checkbox:checked+label:after{position:absolute;content:"";width:5px;height:10px;top:48%;margin-top:-7px;left:6px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-bottom:2px solid #fff;border-right:2px solid #fff}.checkbox:checked+label:before{background-color:#3e97eb;border:1px solid #3e97eb}.radio:checked+label:before{border:1px solid #3e97eb}.radio:checked+label:after{position:absolute;content:"";width:6px;height:6px;top:50%;margin-top:-3px;left:6px;border-radius:50%;background-color:#3e97eb}#create{width:10rem;border:.03rem solid #ccc;border-radius:.05rem;margin:.4rem auto;font-size:.16rem;box-sizing:border-box;padding:.1rem .2rem}#create .item-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}#create .item-operation button{width:.4rem;padding:.05rem 0;margin-right:.1rem;border-radius:.02rem}#create .questItem:hover{background-color:#cce5ff}#create .deadline{position:relative}#create #calendar{position:absolute;top:-240px;left:0;background-color:#fff}#create .deadline input{width:1.5rem;padding-left:.1rem;height:.25rem;border-radius:.02rem;border:1px solid #ccc}#create .submit{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:.2rem}#create .submit button{width:.9rem;background-color:#007fff;margin-right:.2rem;padding:.1rem 0;color:#fff;border-radius:.03rem}#create .submit button:hover{background-color:#cce5ff;color:#555}#create .questItem{padding:.15rem .2rem;font-size:.17rem;-webkit-transition:background-color .1s;transition:background-color .1s}#create .questItem textarea{resize:none;width:3.3rem;height:1.7rem;border-radius:.03rem}#create .questItem-title{margin-bottom:.15rem}#create .questItem-title+div{margin-left:.2rem}#create .selection{margin-bottom:.15rem}#create .mask-prompt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;width:4rem;height:2rem;top:40%;left:50%;margin-left:-2rem;margin-top:-1rem}#create .prompt{font-size:.12px;text-align:center;margin-top:.1rem}#create .prompt-header{width:100%;background-color:#007fff;height:.3rem;text-align:center;line-height:.3rem;color:#fff;font-weight:700;font-size:.18rem}#create .prompt-body{background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;padding:0 .5rem}#create .prompt-body label{display:inline-block;width:.85rem;text-align:right}#create .prompt-footer{height:.3rem;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;align-item:center;padding:.1rem .5rem}#create .prompt-footer button{background-color:#007fff;text-align:center;width:.7rem;color:#fff;border-radius:.03rem}#create .mask{position:fixed;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.15);z-index:10}#create .expand-transition{-webkit-transition:all .3s;transition:all .3s;width:100%;height:.3rem;overflow:hidden}#create .expand-enter,#create .expand-leave{height:0;opacity:0}#create .quest{border-bottom:2px solid #ccc}#create .quest-title_input{width:100%;height:.3rem;border:none;font-size:.25rem;text-align:center;font-weight:700;letter-spacing:.05rem}#create .quest-title{border-bottom:.02rem solid #ccc;padding-bottom:.1rem}#create .add{width:95%;margin:.1rem auto;border:.01px solid #ccc;padding:.1rem 0}#create .add-button{margin-top:.1rem}#create .add-button button{display:block;width:100%;background-color:#ddd;border-radius:3px;padding:.2rem 0;color:#444;font-size:.23rem;-webkit-transition:background-color .1s;transition:background-color .1s}#create .add-button button:hover{background-color:#efefef}#create .add-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#create .add-items span{background-color:#ddd;color:#444;cursor:pointer;width:.85rem;text-align:center;padding:.05rem 0;border-radius:.02rem}#create .add-items span:hover{background-color:#efefef}#create .middle{margin:0 .4rem}#header{width:100%;height:.4rem;background-color:#007fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}#header h1{font-size:.22rem;font-weight:700;margin-left:.22rem}#header h1 a{color:#fff}#header h2{font-size:.18rem;font-weight:400;margin-left:.25rem}#index{width:100%}#index .col01{width:5%;text-align:left}#index .col02{width:30%}#index .buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}#index .quest td{padding:.15rem 0;border-bottom:1px solid #cdcdcd}#index .quest:hover{background-color:#cce5ff}#index .last-row td{padding:.2rem 0}#index .last-row button{margin-left:.2rem}#index .center{text-align:center}#index .left{text-align:left}#index .full{width:10rem;margin:.2rem auto;border:.02rem solid #ccc;border-radius:.04rem}#index .full table{border-collapse:collapse;width:90%;margin:0 auto;text-align:center}#index .full thead{font-size:.18rem}#index .full tbody{font-size:.17rem}#index .full th{padding:.2rem 0}#index .full button{background-color:#fff;border:1px solid #ccc;border-radius:.02rem;width:.9rem;text-align:center;padding:.05rem 0}#index .full button:hover{background-color:#cce5ff}#index .empty{width:6rem;height:3rem;margin:.4rem auto;border:.03rem solid #ccc;font-size:.2rem;border-radius:.08rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#index .empty button{font-size:.2rem;background-color:#007fff;border:none;border-radius:.04rem;color:#fff;width:2rem;text-align:center;padding:.1rem 0}#index .empty button:hover{background-color:#cce5ff} 2 | /*# sourceMappingURL=app.0240875a89bc6ec5bd28f8bb4dd624ed.css.map*/ -------------------------------------------------------------------------------- /JS-Demos/SimplePage/iconfont/iconfont01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Sat Mar 26 21:25:14 2016 6 | By Ads 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 46 | 54 | 61 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/components/Index.vue: -------------------------------------------------------------------------------- 1 | 49 | 120 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/js/manifest.8ba98ab94b723656644a.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.8ba98ab94b723656644a.js","webpack:///webpack/bootstrap 0f36a1a5bddd803a27aa"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","parentJsonpFunction","window","chunkIds","moreModules","chunkId","i","callbacks","length","installedChunks","push","apply","shift","4","e","callback","undefined","head","document","getElementsByTagName","script","createElement","type","charset","async","src","p","0","1","2","3","5","6","appendChild","m","c"],"mappings":"CAAS,SAAUA,GCmCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAtDA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,GAIA,IADA,GAAAV,GAAAW,EAAAC,EAAA,EAAAC,KACQD,EAAAH,EAAAK,OAAoBF,IAC5BD,EAAAF,EAAAG,GACAG,EAAAJ,IACAE,EAAAG,KAAAC,MAAAJ,EAAAE,EAAAJ,IACAI,EAAAJ,GAAA,CAEA,KAAAX,IAAAU,GACAZ,EAAAE,GAAAU,EAAAV,EAGA,KADAO,KAAAE,EAAAC,GACAG,EAAAC,QACAD,EAAAK,QAAAZ,KAAA,KAAAP,EACA,IAAAW,EAAA,GAEA,MADAT,GAAA,KACAF,EAAA,GAKA,IAAAE,MAKAc,GACAI,EAAA,EA6BApB,GAAAqB,EAAA,SAAAT,EAAAU,GAEA,OAAAN,EAAAJ,GACA,MAAAU,GAAAf,KAAA,KAAAP,EAGA,IAAAuB,SAAAP,EAAAJ,GACAI,EAAAJ,GAAAK,KAAAK,OACI,CAEJN,EAAAJ,IAAAU,EACA,IAAAE,GAAAC,SAAAC,qBAAA,WACAC,EAAAF,SAAAG,cAAA,SACAD,GAAAE,KAAA,kBACAF,EAAAG,QAAA,QACAH,EAAAI,OAAA,EAEAJ,EAAAK,IAAAhC,EAAAiC,EAAA,aAAArB,EAAA,KAAyEsB,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,wBAAkK3B,GAAA,MAC3OY,EAAAgB,YAAAb,KAKA3B,EAAAyC,EAAA1C,EAGAC,EAAA0C,EAAAxC,EAGAF,EAAAiC,EAAA","file":"static/js/manifest.8ba98ab94b723656644a.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId])\n/******/ \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n/******/ \t\twhile(callbacks.length)\n/******/ \t\t\tcallbacks.shift().call(null, __webpack_require__);\n/******/ \t\tif(moreModules[0]) {\n/******/ \t\t\tinstalledModules[0] = 0;\n/******/ \t\t\treturn __webpack_require__(0);\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// object to store loaded and loading chunks\n/******/ \t// \"0\" means \"already loaded\"\n/******/ \t// Array means \"loading\", array contains callbacks\n/******/ \tvar installedChunks = {\n/******/ \t\t4:0\n/******/ \t};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n/******/ \t\t// \"0\" is the signal for \"already loaded\"\n/******/ \t\tif(installedChunks[chunkId] === 0)\n/******/ \t\t\treturn callback.call(null, __webpack_require__);\n/******/\n/******/ \t\t// an array means \"currently loading\".\n/******/ \t\tif(installedChunks[chunkId] !== undefined) {\n/******/ \t\t\tinstalledChunks[chunkId].push(callback);\n/******/ \t\t} else {\n/******/ \t\t\t// start chunk loading\n/******/ \t\t\tinstalledChunks[chunkId] = [callback];\n/******/ \t\t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\t\tvar script = document.createElement('script');\n/******/ \t\t\tscript.type = 'text/javascript';\n/******/ \t\t\tscript.charset = 'utf-8';\n/******/ \t\t\tscript.async = true;\n/******/\n/******/ \t\t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"bde2c9b5ee371bc89a98\",\"1\":\"6d798404d1f1bf87d743\",\"2\":\"3e4fb8105425511f3d57\",\"3\":\"ab409436b81631824404\",\"5\":\"d529e7727a81d8bc5187\",\"6\":\"c4d159333714b4f29d63\"}[chunkId] + \".js\";\n/******/ \t\t\thead.appendChild(script);\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"./\";\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n/** WEBPACK FOOTER **\n ** static/js/manifest.8ba98ab94b723656644a.js\n **/"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t4:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"bde2c9b5ee371bc89a98\",\"1\":\"6d798404d1f1bf87d743\",\"2\":\"3e4fb8105425511f3d57\",\"3\":\"ab409436b81631824404\",\"5\":\"d529e7727a81d8bc5187\",\"6\":\"c4d159333714b4f29d63\"}[chunkId] + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 0f36a1a5bddd803a27aa\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /JS-Demos/SimplePage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 新世界|新征程 6 | 7 | 8 | 9 |
    10 | 11 | 19 | 20 |
    21 |
    22 |
    23 |
    24 |

    Time of new life

    25 |

    新时代，年轻的人们让我们在一起

    26 |

    体验新生活享受新生活

    27 | 28 |
    29 |
    30 |
    31 |
    32 |

    33 |

    34 | 打造全新世界观，让你更爱你的生活 35 |

    36 |
    37 |
    38 |

    39 |

    40 | 丰富多彩的公益活动，发挥新世界的主人公意识 41 |

    42 |
    43 |
    44 |

    45 |

    46 | 时尚的理念，超前体验未知生活 47 |

    48 |
    49 |
    50 |

    51 |

    52 | 完善的培养机制，培养你的全新世界观 53 |

    54 |
    55 |
    56 |
    57 |

    58 |

    关于新世界，你不知道的还有什么？

    59 |
    60 |
    61 |
    62 |
    63 |

    查找新世界城市活动信息

    64 |
    65 |

    每个城市有不同的活动信息，请自助查询您所需要了解的城市

    66 |
    67 | 68 | 75 | 76 | 83 | 84 | 91 | 92 |
    93 |
    94 |
    95 |
    96 |
    97 | 北京活动 98 |

    北京活动

    99 |

    新社区大联盟

    100 |
    101 |
    102 |

    上海活动

    103 |

    夜上海新景观探索

    104 | 北京活动 105 |
    106 |
    107 | 北京活动 108 |

    深圳活动

    109 |

    全新海岸线观点站

    110 |
    111 |
    112 | 北京活动 113 |

    香港活动

    114 |

    奢侈消费大派送

    115 |
    116 |
    117 |
    118 |
    119 |

    新世界

    120 |

    TIME

    121 |

    @新世界 - 北京

    122 |

    2016.04.01

    123 |
    124 |
    125 |

    新世界 / 01

    126 |

    新世界是个新世界新世界是个新世界新世界是个新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界新世界新世界是个新世界

    127 | 更多详情 128 |
    129 |
    130 |
    131 |
    132 |
    133 |
    134 |

    新时代

    135 |

    关于爱生活的我们

    136 |
    137 | 查看更多 138 |
    139 |
    140 |

    新时代

    141 |

    关于爱生活的我们

    142 |
    143 | 查看更多 144 |
    145 |
    146 |
    147 |
    148 |
    149 |
    150 |
    151 |

    成为我们的志愿者

    152 |
    153 |

    154 | 新世界的大家庭需要每一个热爱生活的人的加入，如果你够年轻，有梦想，有激情 155 |
    156 | 那就不要犹豫，快来加入我们，成为改变所有人生活的人 157 |

    158 |
    159 |
    160 |
    161 |

    新世界志愿者协议

    162 |

    加入新世界志愿者的人员必须遵守中华人民共和国的相关法律规定，并且本着平等资源的原则......

    163 |

    v more

    164 |

    新世界志愿者权利

    165 |

    新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在新世界活动的优先参与资格

    166 |

    v more

    167 |

    更多条款

    168 |

    v more

    169 |
    170 |
    171 | 172 | 173 | 176 | 179 | 180 | 181 | 184 | 187 | 188 | 189 | 192 | 193 | 194 |
    174 | 175 | 177 | 178 |
    182 | 183 | 185 | 186 |
    190 | 191 |
    195 | 196 |
    197 |
    198 |
    199 |
    200 |

    联系我们

    201 |

    202 | 为了更好地获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯 203 |
    204 | 也可以通过以下的任何方式关注我们动态 205 |

    206 | 207 |

    209 |
    210 |
    211 |
    212 | @copyright By Lin 213 | Back Top 214 |
    215 | 216 | -------------------------------------------------------------------------------- /JS-Demos/SpaceShip/js/index.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | renderBg(); 3 | var commander = new Commander(); 4 | buttonHandler(commander); 5 | animation(); 6 | }; 7 | 8 | function renderBg() { 9 | var staticCanvas = document.querySelector("#static"), 10 | dynamicCanvas = document.querySelector("#dynamic"), 11 | right = document.querySelector("#right"); 12 | //设置画布的大小和父元素相同 13 | staticCanvas.width = right.offsetWidth; 14 | staticCanvas.height = right.offsetHeight; 15 | dynamicCanvas.width = right.offsetWidth; 16 | dynamicCanvas.height = right.offsetHeight; 17 | 18 | renderStaticCanvas(staticCanvas); 19 | } 20 | /** 21 | * 通过绑定按钮，模拟指挥官发出命令 22 | * @param commander 23 | */ 24 | function buttonHandler(commander) { 25 | var controller = document.querySelector("#controller"); 26 | command = {}; 27 | controller.onclick = function() { 28 | var target = event.target || window.event.srcElement; 29 | if(target.tagName.toLowerCase() === "button") { 30 | command.id = target.parentNode.id; 31 | command.content = target.dataset.com; 32 | commander.order(command); 33 | } 34 | } 35 | } 36 | function renderStaticCanvas(canvas) { 37 | var earthImage = new Image(), 38 | context = canvas.getContext("2d"); 39 | context.strokeStyle = "#ccc"; 40 | context.lineWidth = 2; 41 | earthImage.src = "./images/earth.png"; 42 | 43 | earthImage.onload = function() { 44 | context.drawImage(this, canvas.width/2-earthImage.width/2, canvas.height/2-earthImage.height/2); 45 | }; 46 | //画轨道 47 | for(var i=0; i<4; i++) { 48 | drawTrack(i*70+100); 49 | } 50 | 51 | function drawTrack(radius) { 52 | context.beginPath(); 53 | context.arc(canvas.width/2, canvas.height/2, radius, 0, (Math.PI/180)*360, false); 54 | context.stroke(); 55 | context.closePath(); 56 | } 57 | } 58 | /** 59 | * 飞船类 60 | * @param id：飞船的id 61 | * @param radius：飞船飞行半径 62 | * @constructor 63 | */ 64 | var SpaceShip = function(id, radius) { 65 | this.id = id; 66 | this.alive = true; 67 | this.speed = 1.5; 68 | this.energy = 1000; 69 | this.state = "stop";//两种状态fly,stop 70 | this.radius = radius; 71 | this.angle = 0; 72 | this.timer = null; 73 | }; 74 | SpaceShip.prototype.fly = function() { 75 | var self = this; 76 | this.timer = setInterval(function() { 77 | self.angle -= self.speed; 78 | if(self.angle === -360) { 79 | self.angle = 0; 80 | } 81 | self.powerManager().discharge(); 82 | }, 20); 83 | }; 84 | SpaceShip.prototype.stop = function() { 85 | var self = this; 86 | this.timer = setInterval(function() { 87 | self.powerManager().charge(); 88 | }, 20); 89 | 90 | }; 91 | /** 92 | * 能源管理 93 | * @returns {{charge: charge, discharge: discharge}} 94 | */ 95 | SpaceShip.prototype.powerManager = function() { 96 | var chargeRate = 5, 97 | dischargeRate = 2, 98 | self = this; 99 | var charge = function() { 100 | if(self.energy < 1000) { 101 | self.energy += chargeRate; 102 | } else{ 103 | clearInterval(self.timer); 104 | } 105 | }; 106 | var discharge = function() { 107 | if(self.energy > 0) { 108 | self.energy -= dischargeRate; 109 | } else{ 110 | clearInterval(self.timer); 111 | self.stop(); 112 | } 113 | }; 114 | 115 | return { 116 | charge: charge, 117 | discharge: discharge 118 | }; 119 | 120 | }; 121 | /** 122 | * 飞船状态管理 123 | */ 124 | SpaceShip.prototype.stateManager = function() { 125 | var self = this; 126 | var states = { 127 | fly: function() { 128 | self.state = "fly"; 129 | self.fly(); 130 | }, 131 | stop: function() { 132 | self.state = "stop"; 133 | self.stop(); 134 | }, 135 | destroySelf: function() { 136 | console.log("自毁"); 137 | }, 138 | createShip: function() { 139 | console.log(""); 140 | } 141 | }; 142 | 143 | var changeState = function(stateCom) { 144 | //根据指令执行相应的状态 145 | if(self.timer) { 146 | clearInterval(self.timer); 147 | } 148 | states[stateCom](); 149 | }; 150 | return { 151 | changeState: changeState 152 | }; 153 | }; 154 | SpaceShip.prototype.receiveCom = function(com) { 155 | if(com.id === this.id) { 156 | this.stateManager().changeState(com.content); 157 | } 158 | }; 159 | SpaceShip.prototype.drawSelf = function() { 160 | var shipImage = new Image(), 161 | dynamicCanvas = document.querySelector("#dynamic"), 162 | context = dynamicCanvas.getContext("2d"), 163 | energyBarW = 40, 164 | energyBarH = 6; 165 | shipImage.src = "./images/spaceship.png"; 166 | this.image = shipImage; 167 | 168 | return function() { 169 | context.save(); 170 | //更改画布坐标系，把原点放到轨道种种 171 | context.translate(dynamicCanvas.width/2, dynamicCanvas.height/2); 172 | //根据飞行角度，旋转图像 173 | context.rotate(this.angle*Math.PI/180); 174 | //画飞船 175 | context.drawImage(shipImage, this.radius - shipImage.width/2, 0 - shipImage.height/2); 176 | //绘制能源条边框 177 | context.beginPath(); 178 | context.strokeStyle = "#ccc"; 179 | context.strokeRect(this.radius-energyBarW/2, -shipImage.height/2-energyBarH, 180 | energyBarW, energyBarH); 181 | //填充能源条 182 | if(this.energy > 800) { 183 | context.fillStyle = "#0c3"; 184 | } else if(this.energy<=800 && this.energy >300) { 185 | context.fillStyle = "#f4a460"; 186 | } else { 187 | context.fillStyle = "#ff3030"; 188 | } 189 | context.fillRect(this.radius-energyBarW/2, -shipImage.height/2-energyBarH, 190 | this.energy*energyBarW/1000, energyBarH); 191 | context.closePath(); 192 | context.restore(); 193 | }; 194 | }(); 195 | 196 | /** 197 | * 星球上的指挥官 198 | * @constructor 199 | */ 200 | var Commander = function() { 201 | this.name = "lin"; 202 | }; 203 | /** 204 | * 指挥官给塔台发送命令，塔台接收命令 205 | * @param command 206 | */ 207 | Commander.prototype.order = function(command) { 208 | mediator.receiveCom(command); 209 | }; 210 | /** 211 | * 中介：信号塔 212 | * @constructor 213 | */ 214 | var mediator = function() { 215 | var ships = {}, options = {}, 216 | commandList = document.querySelector("#command-list"), li; 217 | /**********新飞船就绪**************/ 218 | options.createShip = function(com) { 219 | if(ships[com.id]) { 220 | return; 221 | } 222 | noticeShips(com); 223 | var spaceship = new SpaceShip(com.id, (parseInt(com.id.substr(-1, 1))-1)*70+100); 224 | spaceship.drawSelf(); 225 | ships[com.id] = spaceship; 226 | }; 227 | /**********飞船停止************/ 228 | options.stop = function(com) { 229 | noticeShips(com); 230 | }; 231 | /***********飞船起飞***************/ 232 | options.fly = function(com) { 233 | noticeShips(com); 234 | }; 235 | /****************飞船自毁**************/ 236 | options.destroySelf = function(com) { 237 | ships[com.id] = null; 238 | delete ships[com.id]; 239 | noticeShips(com); 240 | console.log(ships); 241 | }; 242 | /**************把命令发给每一个飞船************/ 243 | function noticeShips(com) { 244 | for(var ship in ships) { 245 | ships[ship].receiveCom(com); 246 | } 247 | } 248 | /**********模拟丢包，并打印指令；返回true表示真的丢包，false表示无丢包*********/ 249 | function packetLost(com) { 250 | li = document.createElement("li"); 251 | if(Math.random() <= 0.3) { 252 | li.innerHTML = com.id + "：" + com.content + " failed!"; 253 | li.classList.add("red-font"); 254 | commandList.appendChild(li); 255 | return true; 256 | } 257 | li.innerHTML = com.id + "：" + com.content + " successfully!"; 258 | commandList.appendChild(li); 259 | return false; 260 | } 261 | /************中介信号塔就收命令*************/ 262 | var receiveCom = function(com) { 263 | if(!packetLost(com)) { 264 | options[com.content].call(this, com); 265 | } 266 | }; 267 | return { 268 | receiveCom: receiveCom, 269 | ships: ships 270 | }; 271 | }(); 272 | 273 | function animation() { 274 | window.requestAnimationFrame = window.requestAnimationFrame 275 | || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 276 | || window.msRequestAnimationFrame; 277 | var ships = mediator.ships, 278 | ship, 279 | dynamicCanvas = document.querySelector("#dynamic"), 280 | context = dynamicCanvas.getContext("2d"); 281 | render(); 282 | function render() { 283 | requestAnimationFrame(render); 284 | context.clearRect(0, 0, dynamicCanvas.width, dynamicCanvas.height); 285 | for(ship in ships) { 286 | ships[ship].drawSelf(); 287 | } 288 | } 289 | } 290 | 291 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 326 | -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/css/app.0240875a89bc6ec5bd28f8bb4dd624ed.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack:///src/App.vue","webpack:///webpack:///src/components/Header.vue","webpack:///webpack:///src/components/Index.vue"],"names":[],"mappings":"AAAA,UAAU,WAAW,YAAY,6FAA8F,CAAC,gCAAgC,UAAU,SAAS,aAAa,CAAC,KAAK,gBAAgB,eAAe,CAAC,OAAO,eAA4B,YAAY,gBAAgB,CAAC,sBAA1C,YAAa,CAAyD,EAAE,oBAAoB,CAAC,GAAG,eAAe,CAAC,iBAAiB,YAAY,CAAC,6BAA6B,kBAAkB,eAAe,kBAAkB,eAAe,yBAAyB,sBAAsB,oBAAoB,CAAC,2CAA6C,kBAAkB,WAAW,QAAQ,gBAAgB,OAAO,WAAW,YAAY,wBAAyB,qBAAqB,CAAC,uBAAwB,iBAAiB,CAAC,oBAAqB,iBAAiB,CAAC,8BAA+B,kBAAkB,WAAW,UAAU,YAAY,QAAQ,gBAAgB,SAAS,gCAAgC,wBAAwB,6BAA6B,2BAA2B,CAAC,+BAAgC,yBAAyB,wBAAwB,CAAC,4BAA6B,wBAAwB,CAAC,2BAA4B,kBAAkB,WAAW,UAAU,WAAW,QAAQ,gBAAgB,SAAS,kBAAkB,wBAAwB,CAAC,QAAQ,YAAY,yBAAyB,qBAAqB,kBAAkB,iBAAiB,sBAAsB,mBAAmB,CAAC,wBAAwB,oBAAoB,oBAAoB,aAAa,qBAAqB,kBAAkB,wBAAwB,CAAC,+BAA+B,YAAY,iBAAiB,mBAAmB,oBAAoB,CAAC,yBAAyB,wBAAwB,CAAC,kBAAkB,iBAAiB,CAAC,kBAAkB,kBAAkB,WAAW,OAAO,qBAAqB,CAAC,wBAAwB,aAAa,mBAAmB,cAAc,qBAAqB,qBAAqB,CAAC,gBAAgB,oBAAoB,oBAAoB,aAAa,yBAAyB,6BAA6B,yBAAyB,sBAAsB,mBAAmB,gBAAgB,CAAC,uBAAuB,YAAY,yBAAyB,mBAAmB,gBAAgB,WAAW,oBAAoB,CAAC,6BAA6B,yBAAyB,UAAU,CAAC,mBAAmB,qBAAqB,iBAAiB,wCAAwC,+BAA+B,CAAC,4BAA4B,YAAY,aAAa,cAAc,oBAAoB,CAAC,yBAAyB,oBAAoB,CAAC,6BAA6B,iBAAiB,CAAC,mBAAmB,oBAAoB,CAAC,qBAAqB,oBAAoB,oBAAoB,aAAa,4BAA4B,6BAA6B,0BAA0B,sBAAsB,kBAAkB,WAAW,YAAY,QAAQ,SAAS,kBAAkB,gBAAgB,CAAC,gBAAgB,gBAAgB,kBAAkB,gBAAgB,CAAC,uBAAuB,WAAW,yBAAyB,aAAa,kBAAkB,kBAAkB,WAAW,gBAAiB,gBAAgB,CAAC,qBAAqB,sBAAsB,mBAAmB,WAAW,OAAO,oBAAoB,oBAAoB,aAAa,4BAA4B,6BAA6B,0BAA0B,sBAAsB,yBAAyB,6BAA6B,eAAe,CAAC,2BAA2B,qBAAqB,aAAa,gBAAgB,CAAC,uBAAuB,aAAa,sBAAsB,oBAAoB,oBAAoB,aAAa,yBAAyB,6BAA6B,kBAAkB,mBAAmB,CAAC,8BAA8B,yBAAyB,kBAAkB,YAAY,WAAW,oBAAoB,CAAC,cAAc,eAAe,WAAW,YAAY,OAAO,MAAM,iCAAkC,UAAU,CAAC,2BAA2B,2BAA2B,mBAAmB,WAAW,aAAa,eAAe,CAAC,4CAA4C,SAAS,SAAS,CAAC,eAAe,4BAA4B,CAAC,2BAA2B,WAAW,aAAa,YAAY,iBAAiB,kBAAkB,gBAAiB,qBAAqB,CAAC,qBAAqB,gCAAgC,oBAAoB,CAAC,aAAa,UAAU,kBAAkB,wBAAwB,eAAe,CAAC,oBAAoB,gBAAgB,CAAC,2BAA2B,cAAc,WAAW,sBAAsB,kBAAkB,gBAAgB,WAAW,iBAAiB,wCAAwC,+BAA+B,CAAC,iCAAiC,wBAAwB,CAAC,mBAAmB,oBAAoB,oBAAoB,aAAa,wBAAwB,qBAAqB,uBAAuB,yBAAyB,sBAAsB,kBAAkB,CAAC,wBAAwB,sBAAsB,WAAW,eAAe,aAAa,kBAAkB,iBAAiB,oBAAoB,CAAC,8BAA8B,wBAAwB,CAAC,gBAAgB,cAAc,CCA7qK,QAAQ,WAAW,aAAa,yBAAyB,oBAAoB,oBAAoB,aAAa,uBAAuB,oBAAoB,2BAA2B,yBAAyB,sBAAsB,mBAAmB,UAAU,CAAC,WAAW,iBAAiB,gBAAiB,kBAAkB,CAAC,aAAa,UAAU,CAAC,WAAW,iBAAiB,gBAAmB,kBAAkB,CCA1Z,OAAO,UAAU,CAAC,cAAc,SAAS,eAAe,CAAC,cAAc,SAAS,CAAC,gBAAgB,oBAAoB,oBAAoB,aAAa,yBAAyB,4BAA4B,CAAC,iBAAiB,iBAAiB,+BAA+B,CAAC,oBAAoB,wBAAwB,CAAC,oBAAoB,eAAe,CAAC,wBAAwB,iBAAiB,CAAC,eAAe,iBAAiB,CAAC,aAAa,eAAe,CAAC,aAAa,YAAY,kBAAkB,yBAAyB,oBAAoB,CAAC,mBAAmB,yBAAyB,UAAU,cAAc,iBAAiB,CAAC,mBAAmB,gBAAgB,CAAC,mBAAmB,gBAAgB,CAAC,gBAAgB,eAAe,CAAC,oBAAoB,sBAAsB,sBAAsB,qBAAqB,YAAY,kBAAkB,gBAAgB,CAAC,0BAA0B,wBAAwB,CAAC,cAAc,WAAW,YAAY,kBAAkB,yBAAyB,gBAAgB,qBAAqB,oBAAoB,oBAAoB,aAAa,wBAAwB,qBAAqB,uBAAuB,yBAAyB,sBAAsB,kBAAkB,CAAC,qBAAqB,gBAAgB,yBAAyB,YAAY,qBAAqB,WAAW,WAAW,kBAAkB,eAAe,CAAC,2BAA2B,wBAAwB","file":"static/css/app.0240875a89bc6ec5bd28f8bb4dd624ed.css","sourcesContent":["html,body{width:100%;height:100%;font-family:Helvetica,'Hiragino Sans GB','Microsoft Yahei','微软雅黑',Arial,sans-serif,fontawesome}html,body,div,h1,h2,h3,p,button{padding:0;margin:0;line-height:1}html{font-size:100px;min-width:980px}button{cursor:pointer;outline:none;border:none;font-size:.16rem}input,textarea{outline:none}a{text-decoration:none}li{list-style:none}.checkbox,.radio{display:none}.checkbox+label,.radio+label{position:relative;font-size:16px;padding-left:23px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.checkbox+label::before,.radio+label::before{position:absolute;content:\"\";top:48%;margin-top:-8px;left:0;width:16px;height:16px;border:1px solid #c0c0c0;background-color:#fff}.checkbox+label::before{border-radius:3px}.radio+label::before{border-radius:50%}.checkbox:checked+label::after{position:absolute;content:\"\";width:5px;height:10px;top:48%;margin-top:-7px;left:6px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-bottom:2px solid #fff;border-right:2px solid #fff}.checkbox:checked+label::before{background-color:#3e97eb;border:1px solid #3e97eb}.radio:checked+label::before{border:1px solid #3e97eb}.radio:checked+label::after{position:absolute;content:\"\";width:6px;height:6px;top:50%;margin-top:-3px;left:6px;border-radius:50%;background-color:#3e97eb}#create{width:10rem;border:.03rem solid #ccc;border-radius:.05rem;margin:.4rem auto;font-size:.16rem;box-sizing:border-box;padding:.1rem .2rem}#create .item-operation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}#create .item-operation button{width:.4rem;padding:.05rem 0;margin-right:.1rem;border-radius:.02rem}#create .questItem:hover{background-color:#cce5ff}#create .deadline{position:relative}#create #calendar{position:absolute;top:-240px;left:0;background-color:#fff}#create .deadline input{width:1.5rem;padding-left:.1rem;height:.25rem;border-radius:.02rem;border:1px solid #ccc}#create .submit{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:.2rem}#create .submit button{width:.9rem;background-color:#007fff;margin-right:.2rem;padding:.1rem 0;color:#fff;border-radius:.03rem}#create .submit button:hover{background-color:#cce5ff;color:#555}#create .questItem{padding:.15rem .2rem;font-size:.17rem;-webkit-transition:background-color .1s;transition:background-color .1s}#create .questItem textarea{resize:none;width:3.3rem;height:1.7rem;border-radius:.03rem}#create .questItem-title{margin-bottom:.15rem}#create .questItem-title+div{margin-left:.2rem}#create .selection{margin-bottom:.15rem}#create .mask-prompt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;width:4rem;height:2rem;top:40%;left:50%;margin-left:-2rem;margin-top:-1rem}#create .prompt{font-size:.12px;text-align:center;margin-top:.1rem}#create .prompt-header{width:100%;background-color:#007fff;height:.3rem;text-align:center;line-height:.3rem;color:#fff;font-weight:bold;font-size:.18rem}#create .prompt-body{background-color:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;padding:0 .5rem}#create .prompt-body label{display:inline-block;width:.85rem;text-align:right}#create .prompt-footer{height:.3rem;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;align-item:center;padding:.1rem .5rem}#create .prompt-footer button{background-color:#007fff;text-align:center;width:.7rem;color:#fff;border-radius:.03rem}#create .mask{position:fixed;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,0.15);z-index:10}#create .expand-transition{-webkit-transition:all .3s;transition:all .3s;width:100%;height:.3rem;overflow:hidden}#create .expand-enter,#create .expand-leave{height:0;opacity:0}#create .quest{border-bottom:2px solid #ccc}#create .quest-title_input{width:100%;height:.3rem;border:none;font-size:.25rem;text-align:center;font-weight:bold;letter-spacing:.05rem}#create .quest-title{border-bottom:.02rem solid #ccc;padding-bottom:.1rem}#create .add{width:95%;margin:.1rem auto;border:.01px solid #ccc;padding:.1rem 0}#create .add-button{margin-top:.1rem}#create .add-button button{display:block;width:100%;background-color:#ddd;border-radius:3px;padding:.2rem 0;color:#444;font-size:.23rem;-webkit-transition:background-color .1s;transition:background-color .1s}#create .add-button button:hover{background-color:#efefef}#create .add-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#create .add-items span{background-color:#ddd;color:#444;cursor:pointer;width:.85rem;text-align:center;padding:.05rem 0;border-radius:.02rem}#create .add-items span:hover{background-color:#efefef}#create .middle{margin:0 .4rem}\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/App.vue\n **/","#header{width:100%;height:.4rem;background-color:#007fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}#header h1{font-size:.22rem;font-weight:bold;margin-left:.22rem}#header h1 a{color:#fff}#header h2{font-size:.18rem;font-weight:normal;margin-left:.25rem}\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/Header.vue\n **/","#index{width:100%}#index .col01{width:5%;text-align:left}#index .col02{width:30%}#index .buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}#index .quest td{padding:.15rem 0;border-bottom:1px solid #cdcdcd}#index .quest:hover{background-color:#cce5ff}#index .last-row td{padding:.2rem 0}#index .last-row button{margin-left:.2rem}#index .center{text-align:center}#index .left{text-align:left}#index .full{width:10rem;margin:.2rem auto;border:.02rem solid #ccc;border-radius:.04rem}#index .full table{border-collapse:collapse;width:90%;margin:0 auto;text-align:center}#index .full thead{font-size:.18rem}#index .full tbody{font-size:.17rem}#index .full th{padding:.2rem 0}#index .full button{background-color:#fff;border:1px solid #ccc;border-radius:.02rem;width:.9rem;text-align:center;padding:.05rem 0}#index .full button:hover{background-color:#cce5ff}#index .empty{width:6rem;height:3rem;margin:.4rem auto;border:.03rem solid #ccc;font-size:.2rem;border-radius:.08rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#index .empty button{font-size:.2rem;background-color:#007fff;border:none;border-radius:.04rem;color:#fff;width:2rem;text-align:center;padding:.1rem 0}#index .empty button:hover{background-color:#cce5ff}\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/components/Index.vue\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/js/0.bde2c9b5ee371bc89a98.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0,4],{3:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=new Date;t["default"]={props:["showCalendar"],data:function(){return{weekList:["日","一","二","三","四","五","六"],currentYear:a.getFullYear(),currentMonth:a.getMonth()+1}},computed:{yearList:function n(){for(var n=[],e=1900;e<2051;e++)n.push(e);return n},monthList:function s(){for(var s=[],e=1;e<=12;e++)s.push(e);return s},tableData:function(){for(var e=[],t=new Date(this.currentYear,this.currentMonth-1,1),a=864e5,n=t.getDay(),s=t.getTime()-n*a,i=0;i<6;i++){e[i]=[];for(var o=0;o<7;o++)e[i].push(new Date(s)),s+=a}return e}},methods:{incrMonth:function(){12===this.currentMonth?(this.currentMonth=1,this.currentYear++):this.currentMonth++},decrMonth:function(){1===this.currentMonth?(this.currentMonth=12,this.currentYear--):this.currentMonth--},handleClick:function(e){if(e.target.dataset.date){var t=new Date(parseInt(e.target.dataset.date));this.currentYear=t.getFullYear(),this.currentMonth=t.getMonth()+1,this.$dispatch("date-change",t),this.showCalendar=!1}}}}},5:function(e,t,a){t=e.exports=a(1)(),t.push([e.id,"#calendar{width:300px;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;padding:10px;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#calendar .calendar-selections{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;width:100%;height:30px}#calendar .calendar-selections span{display:inline-block;height:24px;line-height:24px;cursor:pointer}#calendar .calendar-selections_month,#calendar .calendar-selections_year{width:90px;height:24px}#calendar .calendar-selections_month option,#calendar .calendar-selections_year option,#calendar table{text-align:center}#calendar table{width:100%;border-collapse:collapse}#calendar table,#calendar td,#calendar th{border:none}#calendar tr{height:26px}#calendar td{cursor:pointer;-webkit-transition:background-color .2s;transition:background-color .2s}#calendar td:hover{background-color:#cce5ff}#calendar .not-current-month{color:#aaa}","",{version:3,sources:["/./src/components/Calendar.vue"],names:[],mappings:"AAAA,UAAU,YAAY,sBAAsB,kBAAkB,sBAAsB,aAAa,eAAe,yBAAyB,sBAAsB,qBAAqB,gBAAgB,CAAC,+BAA+B,oBAAoB,oBAAoB,aAAa,yBAAyB,6BAA6B,WAAW,WAAW,CAAC,oCAAoC,qBAAqB,YAAY,iBAAiB,cAAc,CAAC,yEAAyE,WAAW,WAAW,CAAC,AAAyG,uGAAlB,iBAAiB,CAAuE,AAAtE,gBAAgB,WAAW,AAAkB,wBAAwB,CAAC,0CAA0C,WAAW,CAAC,aAAa,WAAW,CAAC,aAAa,eAAe,wCAAwC,+BAA+B,CAAC,mBAAmB,wBAAwB,CAAC,6BAA6B,UAAU,CAAC",file:"Calendar.vue",sourcesContent:["#calendar{width:300px;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;padding:10px;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#calendar .calendar-selections{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;width:100%;height:30px}#calendar .calendar-selections span{display:inline-block;height:24px;line-height:24px;cursor:pointer}#calendar .calendar-selections_year,#calendar .calendar-selections_month{width:90px;height:24px}#calendar .calendar-selections_year option,#calendar .calendar-selections_month option{text-align:center}#calendar table{width:100%;text-align:center;border-collapse:collapse}#calendar table,#calendar th,#calendar td{border:none}#calendar tr{height:26px}#calendar td{cursor:pointer;-webkit-transition:background-color .2s;transition:background-color .2s}#calendar td:hover{background-color:#cce5ff}#calendar .not-current-month{color:#aaa}"],sourceRoot:"webpack://"}])},6:function(e,t,a){var n=a(5);"string"==typeof n&&(n=[[e.id,n,""]]);a(2)(n,{});n.locals&&(e.exports=n.locals)},7:function(e,t){e.exports='
    {{week}}
    {{date.getDate()}}
    '},8:function(e,t,a){var n,s;a(6),n=a(3),s=a(7),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),s&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=s)},14:function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var s=a(4),i=n(s),o=a(8),r=n(o);t["default"]={data:function(){return{showSelections:!1,showMask:!1,showCalendar:!1,questionnaire:{title:"",deadline:"",state:"",questItemList:[]},questItem:{},typeMap:{radio:"单选",checkbox:"多选",textarea:"问答"}}},methods:{addItem:function(e){var t=e.target;"span"===t.nodeName.toLowerCase()&&(this.showMask=!0,this.questItem.type=t.dataset.type)},handleInput:function(e){var t=e.target;if("button"===t.nodeName.toLowerCase()){var a=this.$els.itemTitle,n=this.$els.itemSelections;"confirm"===t.dataset.operation?"textarea"===this.questItem.type?this.addTextarea(a):this.addSelections(a,n):this.handleCancel()}},addTextarea:function(e){""!==e.value.trim()&&(this.questItem.title=e.value.trim(),this.questionnaire.questItemList.push(this.questItem),this.handleCancel())},addSelections:function(e,t){""!==e.value.trim()&&""!==t.value.trim()&&(this.questItem.title=e.value.trim(),this.questItem.selections=t.value.trim().split(/\s+/),this.questItem.name=Date.now(),this.questionnaire.questItemList.push(this.questItem),this.handleCancel())},handleCancel:function(){this.$els.itemTitle.value="",this.$els.itemSelections.value="",this.questItem={},this.showMask=!1},handleItemOperation:function(e,t){var a=e.target.dataset.operation;switch(a){case"up":this.moveUp(t);break;case"down":this.moveDown(t);break;case"remove":this.removeQuestItem(t);break;case"reuse":this.reuseQuestItem(t);break;default:throw new Error("该操作operation不存在！")}},moveUp:function(e){var t=this.questionnaire.questItemList.indexOf(e);this.questionnaire.questItemList.$remove(e),this.questionnaire.questItemList.splice(t-1,0,e)},moveDown:function(e){var t=this.questionnaire.questItemList.indexOf(e);this.moveUp(this.questionnaire.questItemList[t+1])},removeQuestItem:function(e){this.questionnaire.questItemList.$remove(e)},reuseQuestItem:function(e){var t=this.questionnaire.questItemList.indexOf(e),a=JSON.parse((0,i["default"])(e));"textarea"!==a.type&&(a.name=Date.now()),this.questionnaire.questItemList.splice(t+1,0,a)},submit:function(e){var t=e.target.dataset.operation;return""===this.questionnaire.title.trim()?void alert("问卷的标题不能为空！"):0===this.questionnaire.questItemList.length?void alert("请至少设置一个问题！"):!this.questionnaire.deadline||this.questionnaire.deadline

    {{$index+1}}、{{typeMap[questItem.type]}}：

    单选题 多选题 文本题
    请输入详细信息

    * 不同选项之间请以空格隔开

    '},40:function(e,t,a){var n,s;a(26),n=a(14),s=a(33),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),s&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=s)}}); 2 | //# sourceMappingURL=0.bde2c9b5ee371bc89a98.js.map -------------------------------------------------------------------------------- /Vue-Demos/Questionnaire/dist/static/js/1.6d798404d1f1bf87d743.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1,4],{3:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=new Date;t["default"]={props:["showCalendar"],data:function(){return{weekList:["日","一","二","三","四","五","六"],currentYear:a.getFullYear(),currentMonth:a.getMonth()+1}},computed:{yearList:function n(){for(var n=[],e=1900;e<2051;e++)n.push(e);return n},monthList:function s(){for(var s=[],e=1;e<=12;e++)s.push(e);return s},tableData:function(){for(var e=[],t=new Date(this.currentYear,this.currentMonth-1,1),a=864e5,n=t.getDay(),s=t.getTime()-n*a,i=0;i<6;i++){e[i]=[];for(var o=0;o<7;o++)e[i].push(new Date(s)),s+=a}return e}},methods:{incrMonth:function(){12===this.currentMonth?(this.currentMonth=1,this.currentYear++):this.currentMonth++},decrMonth:function(){1===this.currentMonth?(this.currentMonth=12,this.currentYear--):this.currentMonth--},handleClick:function(e){if(e.target.dataset.date){var t=new Date(parseInt(e.target.dataset.date));this.currentYear=t.getFullYear(),this.currentMonth=t.getMonth()+1,this.$dispatch("date-change",t),this.showCalendar=!1}}}}},5:function(e,t,a){t=e.exports=a(1)(),t.push([e.id,"#calendar{width:300px;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;padding:10px;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#calendar .calendar-selections{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;width:100%;height:30px}#calendar .calendar-selections span{display:inline-block;height:24px;line-height:24px;cursor:pointer}#calendar .calendar-selections_month,#calendar .calendar-selections_year{width:90px;height:24px}#calendar .calendar-selections_month option,#calendar .calendar-selections_year option,#calendar table{text-align:center}#calendar table{width:100%;border-collapse:collapse}#calendar table,#calendar td,#calendar th{border:none}#calendar tr{height:26px}#calendar td{cursor:pointer;-webkit-transition:background-color .2s;transition:background-color .2s}#calendar td:hover{background-color:#cce5ff}#calendar .not-current-month{color:#aaa}","",{version:3,sources:["/./src/components/Calendar.vue"],names:[],mappings:"AAAA,UAAU,YAAY,sBAAsB,kBAAkB,sBAAsB,aAAa,eAAe,yBAAyB,sBAAsB,qBAAqB,gBAAgB,CAAC,+BAA+B,oBAAoB,oBAAoB,aAAa,yBAAyB,6BAA6B,WAAW,WAAW,CAAC,oCAAoC,qBAAqB,YAAY,iBAAiB,cAAc,CAAC,yEAAyE,WAAW,WAAW,CAAC,AAAyG,uGAAlB,iBAAiB,CAAuE,AAAtE,gBAAgB,WAAW,AAAkB,wBAAwB,CAAC,0CAA0C,WAAW,CAAC,aAAa,WAAW,CAAC,aAAa,eAAe,wCAAwC,+BAA+B,CAAC,mBAAmB,wBAAwB,CAAC,6BAA6B,UAAU,CAAC",file:"Calendar.vue",sourcesContent:["#calendar{width:300px;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;padding:10px;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#calendar .calendar-selections{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;width:100%;height:30px}#calendar .calendar-selections span{display:inline-block;height:24px;line-height:24px;cursor:pointer}#calendar .calendar-selections_year,#calendar .calendar-selections_month{width:90px;height:24px}#calendar .calendar-selections_year option,#calendar .calendar-selections_month option{text-align:center}#calendar table{width:100%;text-align:center;border-collapse:collapse}#calendar table,#calendar th,#calendar td{border:none}#calendar tr{height:26px}#calendar td{cursor:pointer;-webkit-transition:background-color .2s;transition:background-color .2s}#calendar td:hover{background-color:#cce5ff}#calendar .not-current-month{color:#aaa}"],sourceRoot:"webpack://"}])},6:function(e,t,a){var n=a(5);"string"==typeof n&&(n=[[e.id,n,""]]);a(2)(n,{});n.locals&&(e.exports=n.locals)},7:function(e,t){e.exports='
    {{week}}
    {{date.getDate()}}
    '},8:function(e,t,a){var n,s;a(6),n=a(3),s=a(7),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),s&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=s)},16:function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var s=a(4),i=n(s),o=a(8),r=n(o);t["default"]={data:function(){return{showSelections:!1,showMask:!1,showCalendar:!1,questItem:{},typeMap:{radio:"单选",checkbox:"多选",textarea:"问答"}}},methods:{addItem:function(e){var t=e.target;"span"===t.nodeName.toLowerCase()&&(this.showMask=!0,this.questItem.type=t.dataset.type)},handleInput:function(e){var t=e.target;if("button"===t.nodeName.toLowerCase()){var a=this.$els.itemTitle,n=this.$els.itemSelections;"confirm"===t.dataset.operation?"textarea"===this.questItem.type?this.addTextarea(a):this.addSelections(a,n):this.handleCancel()}},addTextarea:function(e){""!==e.value.trim()&&(this.questItem.title=e.value.trim(),this.questionnaire.questItemList.push(this.questItem),this.handleCancel())},addSelections:function(e,t){""!==e.value.trim()&&""!==t.value.trim()&&(this.questItem.title=e.value.trim(),this.questItem.selections=t.value.trim().split(/\s+/),this.questItem.name=Date.now(),this.questionnaire.questItemList.push(this.questItem),this.handleCancel())},handleCancel:function(){this.$els.itemTitle.value="",this.$els.itemSelections.value="",this.questItem={},this.showMask=!1},handleItemOperation:function(e,t){var a=e.target.dataset.operation;switch(a){case"up":this.moveUp(t);break;case"down":this.moveDown(t);break;case"remove":this.removeQuestItem(t);break;case"reuse":this.reuseQuestItem(t);break;default:throw new Error("该操作operation不存在！")}},moveUp:function(e){var t=this.questionnaire.questItemList.indexOf(e);this.questionnaire.questItemList.$remove(e),this.questionnaire.questItemList.splice(t-1,0,e)},moveDown:function(e){var t=this.questionnaire.questItemList.indexOf(e);this.moveUp(this.questionnaire.questItemList[t+1])},removeQuestItem:function(e){this.questionnaire.questItemList.$remove(e)},reuseQuestItem:function(e){var t=this.questionnaire.questItemList.indexOf(e),a=JSON.parse((0,i["default"])(e));"textarea"!==a.type&&(a.name=Date.now()),this.questionnaire.questItemList.splice(t+1,0,a)},submit:function(e){var t=e.target.dataset.operation;return""===this.questionnaire.title.trim()?void alert("问卷的标题不能为空！"):0===this.questionnaire.questItemList.length?void alert("请至少设置一个问题！"):!this.questionnaire.deadline||this.questionnaire.deadline
    单选题 多选题 文本题
    请输入详细信息

    * 不同选项之间请以空格隔开

    '},42:function(e,t,a){var n,s;n=a(16),s=a(35),e.exports=n||{},e.exports.__esModule&&(e.exports=e.exports["default"]),s&&(("function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports).template=s)}}); 2 | //# sourceMappingURL=1.6d798404d1f1bf87d743.js.map --------------------------------------------------------------------------------