├── static ├── .gitkeep └── css │ └── reset.css ├── .idea ├── .name ├── watcherTasks.xml ├── encodings.xml ├── vcs.xml ├── jsLibraryMappings.xml ├── modules.xml ├── gankmeizi.iml ├── misc.xml └── workspace.xml ├── .eslintignore ├── .gitignore ├── .vscode └── settings.json ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── common │ ├── css │ │ ├── index.styl │ │ ├── mixin.styl │ │ └── font.styl │ ├── js │ │ ├── uz.js │ │ ├── store.js │ │ └── date.js │ └── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.svg ├── assets │ ├── 404.png │ ├── avatar.jpg │ └── loading.gif ├── vuex │ ├── actions.js │ ├── getters.js │ └── store.js ├── components │ ├── lists │ │ ├── ios.vue │ │ ├── web.vue │ │ ├── android.vue │ │ └── list.vue │ ├── details │ │ ├── details.styl │ │ └── details.vue │ ├── loading │ │ ├── loading.vue │ │ └── loading.styl │ ├── card │ │ ├── card.vue │ │ └── card.styl │ ├── wecome │ │ ├── wecome.vue │ │ └── wecome.styl │ ├── welfare │ │ ├── welfare.styl │ │ └── welfare.vue │ ├── day │ │ ├── day.styl │ │ └── day.vue │ ├── header │ │ ├── header.vue │ │ └── header.styl │ ├── lazyloadImg │ │ └── lazyimg.vue │ ├── menu │ │ ├── menu.vue │ │ └── menu.styl │ └── recommend │ │ └── recommend.vue ├── main.js ├── App.vue └── routers.js ├── .editorconfig ├── .babelrc ├── index.html ├── .eslintrc.js ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | gankmeizi -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vsicons.presets.angular": false 3 | } -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/common/css/index.styl: -------------------------------------------------------------------------------- 1 | @import "./mixin.styl" 2 | @import "./font.styl" 3 | -------------------------------------------------------------------------------- /src/assets/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/vue-girl/HEAD/src/assets/404.png -------------------------------------------------------------------------------- /src/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/vue-girl/HEAD/src/assets/avatar.jpg -------------------------------------------------------------------------------- /src/assets/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/vue-girl/HEAD/src/assets/loading.gif -------------------------------------------------------------------------------- /src/common/js/uz.js: -------------------------------------------------------------------------------- 1 | export const NAME_TITILE = ['welfare', 'day', 'android', 'ios', 'web']; 2 | -------------------------------------------------------------------------------- /src/common/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/vue-girl/HEAD/src/common/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/common/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/vue-girl/HEAD/src/common/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/common/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/vue-girl/HEAD/src/common/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/vuex/actions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yi on 2017-01-06. 3 | */ 4 | export const incrementCounter = function ({ dispatch, state }) { 5 | 6 | }; 7 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false, 5 | "env": { 6 | "test": { 7 | "plugins": [ "istanbul" ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/vuex/getters.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yi on 2017-01-06. 3 | */ 4 | 5 | // 这个 getHeaderTitle 函数会返回 headerTitle 的值 6 | // 在 ES6 里你可以写成： 7 | // export const getHeaderTitle = state => state.headerTitle; 8 | 9 | export function getHeaderTitle (state) { 10 | return state.headerTitle; 11 | }; 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/common/css/mixin.styl: -------------------------------------------------------------------------------- 1 | border-1px($color) 2 | position : relative 3 | &:after 4 | display: block 5 | position: absolute 6 | left: 0 7 | bottom: 0 8 | border-top 1px solid $color 9 | width: 100% 10 | content: '' 11 | 12 | border-none() 13 | &:after 14 | display: none 15 | -------------------------------------------------------------------------------- /src/components/lists/ios.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 15 | -------------------------------------------------------------------------------- /src/components/lists/web.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 15 | -------------------------------------------------------------------------------- /src/components/lists/android.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | 15 | -------------------------------------------------------------------------------- /.idea/gankmeizi.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/details/details.styl: -------------------------------------------------------------------------------- 1 | .details 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | z-index 30 7 | width: 100% 8 | height: 100%; 9 | background-color: #ffffff 10 | &.fade-enter-active, &.fade-leave-active { 11 | transition: all 0.2s linear 12 | transform translate3d(0, 0, 0) 13 | } 14 | &.fade-enter, &.fade-leave-active { 15 | opacity: 0 16 | transform translate3d(100%, 0, 0) 17 | } 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | gank.io 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | 'generator-star-spacing': 0, 16 | // allow debugger during development 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 18 | 'semi':['error','always'], 19 | 'indent':0, 20 | 'space-before-function-paren': 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/card/card.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | 28 | -------------------------------------------------------------------------------- /src/components/wecome/wecome.vue: -------------------------------------------------------------------------------- 1 | 12 | 25 | -------------------------------------------------------------------------------- /src/components/welfare/welfare.styl: -------------------------------------------------------------------------------- 1 | .welfare-wrapper 2 | display flex 3 | .welfare-center 4 | width 50% 5 | column-width: 200px; 6 | column-gap: 15px; 7 | max-width: 1100px; 8 | figure 9 | width: 95% 10 | background: #fefefe; 11 | border: 2px solid #fcfcfc; 12 | box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); 13 | margin: 0 2px 15px; 14 | // padding: 15px; 15 | // padding-bottom: 10px; 16 | //transition: opacity .4s ease-in-out; 17 | display: inline-block; 18 | column-break-inside: avoid; 19 | z-index 11 20 | img 21 | width: 100%; height: auto 22 | // border-bottom: 1px solid #ccc; 23 | // padding-bottom: 15px; 24 | // margin-bottom: 5px; 25 | figcaption 26 | font-size: .9rem; 27 | color: #444; 28 | line-height: 1.5; 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/day/day.styl: -------------------------------------------------------------------------------- 1 | .day 2 | padding: 50px 10px 20px 10px 3 | p 4 | font-size: 0 5 | img 6 | width: 100% 7 | h1 8 | text-align: left; 9 | font-weight: 700; 10 | font-size: 16px; 11 | line-height 32px 12 | margin: 10px 0; 13 | display: -webkit-box; 14 | overflow: hidden; 15 | text-overflow: ellipsis; 16 | word-wrap: break-word; 17 | white-space: normal !important; 18 | -webkit-line-clamp: 1; 19 | -webkit-box-orient: vertical; 20 | h3 21 | color: #000000; 22 | text-align: left; 23 | padding: 10px 0 24 | font-size: 16px; 25 | font-weight: 700; 26 | ul 27 | color: #000000; 28 | text-align: left; 29 | padding-left: 10px; 30 | font-size: 14px; 31 | font-weight: 400; 32 | li 33 | line-height: 20px; 34 | padding: 5px 0 35 | -webkit-animation-name: bounceInRight; 36 | animation-name: bounceInRight; 37 | -------------------------------------------------------------------------------- /src/components/card/card.styl: -------------------------------------------------------------------------------- 1 | .card 2 | position relative 3 | width 100% 4 | max-height 200px 5 | overflow: hidden 6 | margin-bottom 10px 7 | border-radius 4px 8 | box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); 9 | .img 10 | width: 100% 11 | padding-bottom 100% 12 | .card-content 13 | position absolute 14 | width 90% 15 | height auto 16 | left 0 17 | right 0 18 | bottom 0 19 | background-color rgba(0,0,0,0.5) 20 | color #ffffff 21 | padding 10px 5% 22 | box-sizing: boder-box; 23 | .desc 24 | position relative 25 | width 100% 26 | text-align left 27 | height auto 28 | font-size 16px 29 | line-height 16px 30 | word-wrap break-word 31 | .card-content-bottom 32 | width 100% 33 | display flex 34 | font-size 14px 35 | line-height 28px 36 | .who 37 | flex 1 38 | text-align left 39 | .time 40 | flex 1 41 | text-align right 42 | -------------------------------------------------------------------------------- /src/common/js/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yi on 2016-01-12. 3 | */ 4 | 5 | /** 新增&&修改本地缓存 6 | * @param {string} id 唯一id 7 | * @param {string} key 标示 8 | * @param {string} value 新增&修改的值 9 | */ 10 | export function savaToLocal(id, key, value) { 11 | let seller = window.localStorage.__seller__; 12 | if (!seller) { 13 | seller = {}; 14 | seller[id] = {}; 15 | } else { 16 | seller = JSON.parse(seller); 17 | if (!seller[id]) { 18 | seller[id] = {}; 19 | } 20 | } 21 | seller[id][key] = value; 22 | window.localStorage.__seller__ = JSON.stringify(seller); 23 | } 24 | /** 查询本地缓存 25 | * @param {string} id 唯一id 26 | * @param {string} key 标示 27 | * @param {string} def 如果查询不到显示的值 28 | */ 29 | export function loadFromlLocal(id, key, def) { 30 | let seller = window.localStorage.__seller__; 31 | if (!seller) { 32 | return def; 33 | } 34 | seller = JSON.parse(seller)[id]; 35 | if (!seller) { 36 | return def; 37 | } 38 | let ret = seller[key]; 39 | return ret || def; 40 | } 41 | -------------------------------------------------------------------------------- /src/vuex/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yi on 2017-01-06. 3 | */ 4 | import Vue from 'vue'; 5 | import Vuex from 'vuex'; 6 | import * as actions from './actions'; 7 | import * as getters from './getters'; 8 | import * as uz from '../common/js/uz'; 9 | // 告诉 vue “使用” vuex 10 | Vue.use(Vuex); 11 | 12 | // 创建一个对象来保存应用启动时的初始状态 13 | const state = { 14 | 'headerTitle': '福利', 15 | 'menus': uz.NAME_TITILE, 16 | 'menuShow': false, 17 | 'loadingShow': false, 18 | 'news': 5 19 | }; 20 | // 创建一个对象存储一系列我们接下来要写的 mutation 函数 21 | const mutations = { 22 | // TODO: 放置我们的状态变更函数 23 | UPDATE_TITLE(state, title) { 24 | console.log(title); 25 | state.headerTitle = title; 26 | }, 27 | UPDATE_MENUSHOW(state) { 28 | state.menuShow = !state.menuShow; 29 | }, 30 | UPDATE_LOADING(state, data) { 31 | state.loadingShow = data; 32 | }, 33 | UPDATE_NEWS(state) { 34 | state.news = 0; 35 | } 36 | }; 37 | 38 | // 整合初始状态和变更函数，我们就得到了我们所需的 store 39 | // 至此，这个 store 就可以连接到我们的应用中 40 | export default new Vuex.Store({ 41 | state, 42 | mutations, 43 | actions, 44 | getters 45 | }); 46 | -------------------------------------------------------------------------------- /src/components/day/day.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 50 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import store from './vuex/store'; 3 | import VueRouter from 'vue-router'; 4 | import routes from './routers'; // 引入路由配置 5 | import vueResource from 'vue-resource'; 6 | import infiniteScroll from 'vue-infinite-scroll'; // 引入滑动模块 7 | import VueLazyload from 'vue-lazyload'; // 引入图片懒加载模块 8 | import {loadFromlLocal} from './common/js/store'; // 公共方法：本地缓存 9 | import 'common/css/index.styl'; // 引入公共样式 10 | 11 | // 注册组件 12 | Vue.use(infiniteScroll); 13 | Vue.use(VueRouter); 14 | Vue.use(vueResource); 15 | 16 | // error，loading是图片路径, 用require引入 17 | Vue.use(VueLazyload, { 18 | error: require('./assets/404.png'), 19 | loading: require('./assets/loading.gif'), 20 | attempt: 1 21 | } 22 | ); 23 | const router = new VueRouter({ 24 | 'linkActiveClass': 'active', 25 | routes // （缩写）相当于 routes: routes 26 | }); 27 | /** 28 | * 创建和挂载根实例。 29 | * 记得要通过 router 配置参数注入路由， 30 | * 从而让整个应用都有路由功能 31 | */ 32 | const routerApp = new Vue({ 33 | store, 34 | router 35 | }).$mount('#app'); 36 | 37 | /** 38 | * loadFromlLocal()是读取本地缓存数据，具体common/js/store.js 查看 39 | * 40 | * 41 | */ 42 | if (!loadFromlLocal('gank', 'wecome', false)) { 43 | router.push('/wecome'); 44 | } 45 | export default routerApp; 46 | -------------------------------------------------------------------------------- /src/common/js/date.js: -------------------------------------------------------------------------------- 1 | /** 格式化时间 2 | * @param {string} date 需要格式化的时间 3 | * @param {string} fmt 想要格式化的格式 4 | */ 5 | exports.formatDate = (date, fmt) => { 6 | if (/(y+)/.test(fmt)) { 7 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); 8 | } 9 | let o = { 10 | 'M+': date.getMonth() + 1, 11 | 'd+': date.getDate(), 12 | 'h+': date.getHours(), 13 | 'm+': date.getMinutes(), 14 | 's+': date.getSeconds() 15 | }; 16 | for (let k in o) { 17 | if (new RegExp(`(${k})`).test(fmt)) { 18 | let str = o[k] + ''; 19 | fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); 20 | } 21 | } 22 | return fmt; 23 | }; 24 | /** 格式化时间，返回年，月，日 25 | * @param {string } date 需要格式化的时间 26 | */ 27 | exports.objectDate = (date) => { 28 | if (date && typeof date === 'string') { 29 | date = new Date(date); 30 | let o = { 31 | 'Y': date.getFullYear(), 32 | 'M': date.getMonth() + 1, 33 | 'D': date.getDate() 34 | }; 35 | return o; 36 | } 37 | return date; 38 | }; 39 | 40 | function padLeftZero(str) { 41 | return ('00' + str).substr(str.length); 42 | } ; 43 | -------------------------------------------------------------------------------- /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: 9090, 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 | -------------------------------------------------------------------------------- /src/common/css/font.styl: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('../fonts/iconfont.eot?t=1481787488332'); /* IE9*/ 4 | src: url('../fonts/iconfont.eot?t=1481787488332#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('../fonts/iconfont.woff?t=1481787488332') format('woff'), /* chrome, firefox */ 6 | url('../fonts/iconfont.ttf?t=1481787488332') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('../fonts/iconfont.svg?t=1481787488332#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 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .iconfont { 19 | font-family:"iconfont" !important; 20 | font-size:16px; 21 | font-style:normal; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | .icon-fenlei:before { content: "\3452"; } 26 | 27 | .icon-web:before { content: "\e640"; } 28 | 29 | .icon-welfare:before { content: "\e60e"; } 30 | 31 | .icon-ios:before { content: "\e6c2"; } 32 | 33 | .icon-day:before { content: "\e60b"; } 34 | 35 | .icon-android:before { content: "\e601"; } 36 | 37 | .icon-left:before { content: "\e60a"; } 38 | 39 | .icon-html5:before { content: "\e6c5"; } 40 | 41 | .icon-sousuo_sousuo:before { content: "\e67a"; } 42 | 43 | -------------------------------------------------------------------------------- /src/components/header/header.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 53 | 56 | -------------------------------------------------------------------------------- /src/components/lists/list.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 52 | 57 | -------------------------------------------------------------------------------- /src/components/loading/loading.styl: -------------------------------------------------------------------------------- 1 | .loading 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | z-index 30 7 | width: 100% 8 | height: 100%; 9 | background-color: #ffffff 10 | opacity: 0.4 11 | .ball-pulse 12 | position: absolute 13 | top: 50% 14 | left: 45% 15 | div 16 | background-color: #03a9f4; 17 | width: 15px; 18 | height: 15px; 19 | border-radius: 100%; 20 | margin: 2px; 21 | animation-fill-mode: both; 22 | display: inline-block; 23 | div:nth-child(1) 24 | animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 25 | div:nth-child(2) 26 | animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); 27 | div:nth-child(3) 28 | animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08) 29 | 30 | 31 | @-webkit-keyframes scale { 32 | 0% { 33 | -webkit-transform: scale(1); 34 | transform: scale(1); 35 | opacity: 1; } 36 | 45% { 37 | -webkit-transform: scale(0.1); 38 | transform: scale(0.1); 39 | opacity: 0.7; } 40 | 80% { 41 | -webkit-transform: scale(1); 42 | transform: scale(1); 43 | opacity: 1; } } 44 | @keyframes scale { 45 | 0% { 46 | -webkit-transform: scale(1); 47 | transform: scale(1); 48 | opacity: 1; } 49 | 45% { 50 | -webkit-transform: scale(0.1); 51 | transform: scale(0.1); 52 | opacity: 0.7; } 53 | 80% { 54 | -webkit-transform: scale(1); 55 | transform: scale(1); 56 | opacity: 1; } } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-Meizi 2 | 3 | > 本项目是基于vue2最新实战项目，是适合新手进阶的绝佳教程。代码简单易懂，注释多多。实现了移动端使用最多的 无限滚动，图片加载，左右滑动，等 4 | 5 | ### 项目技术架构 6 | *** 7 | * vue-cli 8 | * vue 9 | * vue-resource 10 | * vue-router 11 | * vuex 12 | * vue-awesome-swiper 13 | * vue-infinite-scroll 14 | * stylus 15 | * webpack 16 | 17 | ###上图 18 | *** 19 | * 侧滑导航 20 | 21 | ![1.gif](http://upload-images.jianshu.io/upload_images/4249223-5f3b13d8a460f340.gif?imageMogr2/auto-orient/strip) 22 | 23 | * 瀑布流布局，无限滚动，图片懒加载 24 | 25 | ![2.gif](http://upload-images.jianshu.io/upload_images/4249223-219e645475534a08.gif?imageMogr2/auto-orient/strip) 26 | 27 | * 左右滑动，左右切换 28 | 29 | ![3.gif](http://upload-images.jianshu.io/upload_images/4249223-81d898b9ac461048.gif?imageMogr2/auto-orient/strip) 30 | 31 | 32 | ###安装 33 | ``` 34 | npm install 35 | ``` 36 | 启动服务(http://localhost:9090) 37 | 38 | ``` 39 | npm run dev 40 | ``` 41 | 发布代码 42 | 43 | ``` 44 | npm run build 45 | ``` 46 | ### 安装注意 47 | 安装 vue-cli 48 | ``` 49 | npm install -g vue-cli 50 | ``` 51 | 安装 vue-cli eslint 52 | ``` 53 | npm install -g eslint 54 | ``` 55 | 安装依赖 friendly-errors-webpack-plugin 56 | 57 | ``` 58 | npm install friendly-errors-webpack-plugin --save-dev 59 | ``` 60 | ###目录结构 61 | *** 62 | 
63 | ├── build              // 构建服务和webpack配置
64 | ├── config             // 项目不同环境的配置
65 | ├── dist               // 项目build目录
66 | ├── index.html         // 项目入口文件
67 | ├── package.json       // 项目配置文件
68 | ├── src                // 生产目录
69 | │   ├── assets         // 图片资源
70 | │   ├── common          // 公共的css js 资源
71 | │   ├── components     // 各种组件
72 | │   ├── App.vue         // 主页面 
73 | │   ├── vuex           // vuex状态管理器
74 | │   ├── router.js     // 路由配置器
75 | │   └── main.js        // Webpack 预编译入口
76 |
77 | 78 | ###实现的功能 79 | *** 80 | * 瀑布流布局 81 | * 无限滚动 82 | * 侧边导航 83 | * 图片懒加载 84 | * 左右滑动切换 85 | * 等等 86 | 87 | -------------------------------------------------------------------------------- /src/components/header/header.styl: -------------------------------------------------------------------------------- 1 | .header 2 | position fixed 3 | top 0 4 | right 0 5 | left 0 6 | z-index 10 7 | width 100% 8 | min-height 50px 9 | font-size 1.8px 10 | line-height 50px 11 | background-color #03a9f4 12 | color #ffffff 13 | text-align center 14 | display table 15 | box-shadow 0 1px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .1) 16 | transition all .3s ease 17 | &.show 18 | transform translateX(200px) 19 | .title 20 | min-height 50px 21 | position absolute 22 | margin 0 23 | text-align center 24 | white-space nowrap 25 | right 100px 26 | left 100px 27 | font-size 16px 28 | width auto 29 | overflow hidden 30 | text-overflow ellipsis 31 | z-index 2 32 | font-weight 500 33 | .pull-left 34 | padding 0 10px 35 | font-size 16px 36 | font-weight 400 37 | z-index 2 38 | -webkit-box-sizing border-box 39 | box-sizing border-box 40 | display -webkit-box 41 | display -webkit-flex 42 | display flex 43 | -webkit-align-items center 44 | align-items center 45 | float left !important 46 | .iconfont 47 | font-size 18px 48 | .pull-right 49 | padding 0 10px 50 | font-size 16px 51 | font-weight 400 52 | z-index 2 53 | -webkit-box-sizing border-box 54 | box-sizing border-box 55 | display -webkit-box 56 | display -webkit-flex 57 | display flex 58 | -webkit-align-items center 59 | align-items center 60 | float right !important 61 | .iconfont 62 | font-size 18px 63 | //h1 64 | // position relative 65 | // font-family "Helvetica Neue", "Helvetica", sans-serif 66 | // font-size 1rem 67 | // margin 0 68 | // padding 0 69 | // line-height 44px 70 | // text-align center 71 | // z-index 2 72 | // font-weight 300 73 | // box-shadow inset 0 -1px 0 rgba(255, 255, 255, .25) 74 | -------------------------------------------------------------------------------- /src/components/lazyloadImg/lazyimg.vue: -------------------------------------------------------------------------------- 1 | 5 | 21 | 89 | -------------------------------------------------------------------------------- /src/components/menu/menu.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 61 | -------------------------------------------------------------------------------- /src/routers.js: -------------------------------------------------------------------------------- 1 | // require.ensure 是 Webpack 的特殊语法，用来设置 组件到底路径 2 | /** 3 | * 1.定义路由，每个路由应该映射一个组件 4 | * path : 浏览器的显示的路径 5 | * name ： 路由的名字 6 | * component : 路由的组件路径 7 | */ 8 | const routers = [{ 9 | path: '/', 10 | name: 'index', 11 | component(resolve) { 12 | require.ensure(['./App.vue'], () => { 13 | resolve(require('./App.vue')); 14 | }); 15 | }, 16 | children: [ 17 | { 18 | path: '/welfare', 19 | name: 'welfare', 20 | component(resolve) { 21 | require.ensure(['./components/welfare/welfare.vue'], () => { 22 | resolve(require('./components/welfare/welfare.vue')); 23 | }); 24 | } 25 | }, { 26 | path: '/day', 27 | name: 'day', 28 | component(resolve) { 29 | require.ensure(['./components/recommend/recommend.vue'], () => { 30 | resolve(require('./components/recommend/recommend.vue')); 31 | }); 32 | }, 33 | meta: {requiresAuth: true} 34 | }, { 35 | path: '/ios', 36 | name: 'ios', 37 | component(resolve) { 38 | require.ensure(['./components/lists/ios.vue'], () => { 39 | resolve(require('./components/lists/ios.vue')); 40 | }); 41 | }, 42 | meta: {requiresAuth: true} 43 | }, { 44 | path: '/android', 45 | name: 'android', 46 | component(resolve) { 47 | require.ensure(['./components/lists/android.vue'], () => { 48 | resolve(require('./components/lists/android.vue')); 49 | }); 50 | } 51 | }, { 52 | path: '/web', 53 | name: 'web', 54 | component(resolve) { 55 | require.ensure(['./components/lists/web.vue'], () => { 56 | resolve(require('./components/lists/web.vue')); 57 | }); 58 | } 59 | } 60 | ] 61 | }, 62 | { 63 | path: '/wecome', 64 | name: 'wecome', 65 | component(resolve) { 66 | require.ensure(['./components/wecome/wecome.vue'], () => { 67 | resolve(require('./components/wecome/wecome.vue')); 68 | }); 69 | } 70 | }]; 71 | 72 | export default routers; 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gankmeizi", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "lint": "eslint --ext .js,.vue src" 11 | }, 12 | "dependencies": { 13 | "better-scroll": "^0.1.8", 14 | "i": "^0.3.6", 15 | "stylus": "^0.54.5", 16 | "vue": "^2.1.0", 17 | "vue-awesome-swiper": "^2.2.9", 18 | "vue-infinite-scroll": "^2.0.0", 19 | "vue-lazyload": "^1.0.0-rc12", 20 | "vue-resource": "^1.0.3", 21 | "vue-router": "^2.1.1", 22 | "vuex": "^2.1.1" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^6.4.0", 26 | "babel-core": "^6.0.0", 27 | "babel-eslint": "^7.0.0", 28 | "babel-loader": "^6.0.0", 29 | "babel-plugin-transform-runtime": "^6.0.0", 30 | "babel-preset-es2015": "^6.0.0", 31 | "babel-preset-stage-2": "^6.0.0", 32 | "babel-register": "^6.0.0", 33 | "chalk": "^1.1.3", 34 | "connect-history-api-fallback": "^1.1.0", 35 | "css-loader": "^0.25.0", 36 | "eslint": "^3.7.1", 37 | "eslint-config-standard": "^6.1.0", 38 | "eslint-friendly-formatter": "^2.0.5", 39 | "eslint-loader": "^1.5.0", 40 | "eslint-plugin-html": "^1.3.0", 41 | "eslint-plugin-promise": "^2.0.1", 42 | "eslint-plugin-standard": "^2.0.1", 43 | "eventsource-polyfill": "^0.9.6", 44 | "express": "^4.13.3", 45 | "extract-text-webpack-plugin": "^1.0.1", 46 | "file-loader": "^0.9.0", 47 | "friendly-errors-webpack-plugin": "^1.6.1", 48 | "function-bind": "^1.0.2", 49 | "html-webpack-plugin": "^2.8.1", 50 | "http-proxy-middleware": "^0.17.2", 51 | "json-loader": "^0.5.4", 52 | "opn": "^4.0.2", 53 | "ora": "^0.3.0", 54 | "semver": "^5.3.0", 55 | "shelljs": "^0.7.4", 56 | "stylus-loader": "^2.4.0", 57 | "url-loader": "^0.5.7", 58 | "vue-loader": "^10.0.0", 59 | "vue-style-loader": "^1.0.0", 60 | "vue-template-compiler": "^2.1.0", 61 | "webpack": "^1.13.2", 62 | "webpack-dev-middleware": "^1.8.3", 63 | "webpack-hot-middleware": "^2.12.2", 64 | "webpack-merge": "^0.14.1" 65 | }, 66 | "engines": { 67 | "node": ">= 4.0.0", 68 | "npm": ">= 3.0.0" 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/details/details.vue: -------------------------------------------------------------------------------- 1 | 18 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/menu/menu.styl: -------------------------------------------------------------------------------- 1 | @import "../../common/css/mixin.styl" 2 | 3 | .menu 4 | .menu-list 5 | position fixed 6 | top 0 7 | bottom 0 8 | flex 0 0 250px 9 | left -250px 10 | width 250px 11 | background-color #22262a 12 | color #313131 13 | transition all .3s ease 14 | z-index 99 15 | .menu-header 16 | width 100% 17 | height 180px 18 | background-color #262d30 19 | .menu-avatar 20 | width 40% 21 | height auto 22 | border-radius 50% 23 | margin 20px 70px 24 | .menu-title 25 | font-size 14px 26 | color #ffffff 27 | line-height 28px 28 | font-weight 500 29 | text-align center 30 | &.show 31 | transform translateX(250px) 32 | .menu-ul 33 | margin 0 34 | overflow hidden 35 | padding 0 36 | .item 37 | display block 38 | font-size 14px 39 | padding 10px 13px 40 | text-align left 41 | text-indent 1px 42 | line-height 15px 43 | color #a6adb3 44 | font-weight 700 45 | border-1px(#40474a); 46 | &last-child 47 | margin-bottom 50px 48 | &before 49 | color #2c3e50 50 | .line 51 | border-top 1px solid #d4d4d4 52 | .menu-icon 53 | display inline-block 54 | width 30px 55 | height 30px 56 | background-color #383c40 57 | border-radius 50% 58 | vertical-align top 59 | text-align center 60 | .iconfont 61 | color #999999 62 | line-height 30px 63 | font-weight 700 64 | &.active 65 | color #01aef3 66 | .menu-icon 67 | background-color #01aef3 68 | .iconfont 69 | color #ffffff 70 | .menu-text 71 | display inline-block 72 | font-size 15px 73 | line-height 32px 74 | vertical-align top 75 | margin-left 10px 76 | font-weight 700 77 | .menu-new 78 | display inline-block 79 | width 30px 80 | height 30px 81 | background-color #d81229 82 | border-radius 50% 83 | vertical-align top 84 | text-align center 85 | float right 86 | span 87 | color #ffffff 88 | font-size 15px 89 | line-height 30px 90 | font-weight 500 91 | -------------------------------------------------------------------------------- /src/components/recommend/recommend.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 52 | 92 | -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 3 | * http://cssreset.com 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video, input { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font-weight: normal; 23 | vertical-align: baseline; 24 | } 25 | 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, menu, nav, section { 29 | display: block; 30 | } 31 | 32 | body { 33 | line-height: 1; 34 | 35 | } 36 | 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | 41 | blockquote:before, blockquote:after, 42 | q:before, q:after { 43 | content: none; 44 | } 45 | 46 | table { 47 | border-collapse: collapse; 48 | border-spacing: 0; 49 | } 50 | 51 | /* custom */ 52 | a { 53 | color: #7e8c8d; 54 | text-decoration: none; 55 | -webkit-backface-visibility: hidden; 56 | } 57 | 58 | li { 59 | list-style: none; 60 | } 61 | 62 | ::-webkit-scrollbar { 63 | width: 5px; 64 | height: 5px; 65 | } 66 | 67 | ::-webkit-scrollbar-track-piece { 68 | background-color: rgba(0, 0, 0, 0.2); 69 | -webkit-border-radius: 6px; 70 | } 71 | 72 | ::-webkit-scrollbar-thumb:vertical { 73 | height: 5px; 74 | background-color: rgba(125, 125, 125, 0.7); 75 | -webkit-border-radius: 6px; 76 | } 77 | 78 | ::-webkit-scrollbar-thumb:horizontal { 79 | width: 5px; 80 | background-color: rgba(125, 125, 125, 0.7); 81 | -webkit-border-radius: 6px; 82 | } 83 | 84 | html, body { 85 | width: 100%; 86 | } 87 | 88 | body { 89 | -webkit-text-size-adjust: none; 90 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 91 | background-color: #ffffff; 92 | } 93 | @media screen and (min-width: 680px) { 94 | body { 95 | width: 680px; 96 | position: relative; 97 | margin: 0 auto; 98 | } 99 | 100 | #app { 101 | width: 680px; 102 | } 103 | #app.header{ 104 | width: 680px; 105 | margin: 0 auto; 106 | } 107 | 108 | 109 | } 110 | -------------------------------------------------------------------------------- /src/components/welfare/welfare.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 79 | 80 | 83 | -------------------------------------------------------------------------------- /src/components/wecome/wecome.styl: -------------------------------------------------------------------------------- 1 | .wecome 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | background: #03a9f4; 8 | z-index: 20; 9 | opacity: 0.5 10 | .pacman 11 | position: absolute 12 | top: 45% 13 | left: 45% 14 | 15 | 16 | 17 | @-webkit-keyframes rotate_pacman_half_up { 18 | 0% { 19 | -webkit-transform: rotate(270deg); 20 | transform: rotate(270deg); } 21 | 50% { 22 | -webkit-transform: rotate(360deg); 23 | transform: rotate(360deg); } 24 | 100% { 25 | -webkit-transform: rotate(270deg); 26 | transform: rotate(270deg); } } 27 | 28 | @keyframes rotate_pacman_half_up { 29 | 0% { 30 | -webkit-transform: rotate(270deg); 31 | transform: rotate(270deg); } 32 | 50% { 33 | -webkit-transform: rotate(360deg); 34 | transform: rotate(360deg); } 35 | 100% { 36 | -webkit-transform: rotate(270deg); 37 | transform: rotate(270deg); } } 38 | 39 | @-webkit-keyframes rotate_pacman_half_down { 40 | 0% { 41 | -webkit-transform: rotate(90deg); 42 | transform: rotate(90deg); } 43 | 50% { 44 | -webkit-transform: rotate(0deg); 45 | transform: rotate(0deg); } 46 | 100% { 47 | -webkit-transform: rotate(90deg); 48 | transform: rotate(90deg); } } 49 | 50 | @keyframes rotate_pacman_half_down { 51 | 0% { 52 | -webkit-transform: rotate(90deg); 53 | transform: rotate(90deg); } 54 | 50% { 55 | -webkit-transform: rotate(0deg); 56 | transform: rotate(0deg); } 57 | 100% { 58 | -webkit-transform: rotate(90deg); 59 | transform: rotate(90deg); } } 60 | 61 | @-webkit-keyframes pacman-balls { 62 | 75% { 63 | opacity: 0.7; } 64 | 100% { 65 | -webkit-transform: translate(-100px, -6.25px); 66 | transform: translate(-100px, -6.25px); } } 67 | 68 | @keyframes pacman-balls { 69 | 75% { 70 | opacity: 0.7; } 71 | 100% { 72 | -webkit-transform: translate(-100px, -6.25px); 73 | transform: translate(-100px, -6.25px); } } 74 | 75 | 76 | .pacman > div:nth-child(2) { 77 | -webkit-animation: pacman-balls 1s -0.99s infinite linear; 78 | animation: pacman-balls 1s -0.99s infinite linear; } 79 | .pacman > div:nth-child(3) { 80 | -webkit-animation: pacman-balls 1s -0.66s infinite linear; 81 | animation: pacman-balls 1s -0.66s infinite linear; } 82 | .pacman > div:nth-child(4) { 83 | -webkit-animation: pacman-balls 1s -0.33s infinite linear; 84 | animation: pacman-balls 1s -0.33s infinite linear; } 85 | .pacman > div:nth-child(5) { 86 | -webkit-animation: pacman-balls 1s 0s infinite linear; 87 | animation: pacman-balls 1s 0s infinite linear; } 88 | .pacman > div:first-of-type { 89 | width: 0px; 90 | height: 0px; 91 | border-right: 25px solid transparent; 92 | border-top: 25px solid #fff; 93 | border-left: 25px solid #fff; 94 | border-bottom: 25px solid #fff; 95 | border-radius: 25px; 96 | -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite; 97 | animation: rotate_pacman_half_up 0.5s 0s infinite; 98 | position: relative; 99 | left: -30px; } 100 | .pacman > div:nth-child(2) { 101 | width: 0px; 102 | height: 0px; 103 | border-right: 25px solid transparent; 104 | border-top: 25px solid #fff; 105 | border-left: 25px solid #fff; 106 | border-bottom: 25px solid #fff; 107 | border-radius: 25px; 108 | -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite; 109 | animation: rotate_pacman_half_down 0.5s 0s infinite; 110 | margin-top: -50px; 111 | position: relative; 112 | left: -30px; } 113 | .pacman > div:nth-child(3), 114 | .pacman > div:nth-child(4), 115 | .pacman > div:nth-child(5), 116 | .pacman > div:nth-child(6) { 117 | background-color: #fff; 118 | width: 15px; 119 | height: 15px; 120 | border-radius: 100%; 121 | margin: 2px; 122 | width: 10px; 123 | height: 10px; 124 | position: absolute; 125 | -webkit-transform: translate(0, -6.25px); 126 | transform: translate(0, -6.25px); 127 | top: 25px; 128 | left: 70px; } -------------------------------------------------------------------------------- /src/common/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Wed Jan 11 14:50:23 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 41 | 43 | 49 | 52 | 56 | 60 | 62 | 69 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 23 | 24 | 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 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 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 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 139 | 140 | 141 | 143 | 144 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | true 193 | 194 | 195 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 234 | 235 | 236 | 237 | 240 | 241 | 244 | 245 | 246 | 247 | 250 | 251 | 254 | 255 | 258 | 259 | 260 | 261 | 264 | 265 | 268 | 269 | 272 | 273 | 274 | 275 | 278 | 279 | 282 | 283 | 286 | 287 | 290 | 291 | 292 | 293 | 296 | 297 | 300 | 301 | 304 | 305 | 308 | 309 | 312 | 313 | 314 | 315 | 318 | 319 | 322 | 323 | 326 | 327 | 328 | 329 | 332 | 333 | 336 | 337 | 340 | 341 | 342 | 343 | 346 | 347 | 350 | 351 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | $PROJECT_DIR$ 421 | true 422 | 423 | bdd 424 | 425 | DIRECTORY 426 | 427 | false 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 1483597832292 439 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | --------------------------------------------------------------------------------