add:buildconf_path

.eslintrc.js

@@ -15,6 +15,9 @@ module.exports = {
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard',
   ],
+  globals: {
+    $: true
+  },
   // required to lint *.vue files
   plugins: ['vue'],
   // add your custom rules here

build/webpack.dev.conf.js

@@ -48,6 +48,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
     }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
     new webpack.NoEmitOnErrorsPlugin(),

build/webpack.prod.conf.js

@@ -11,7 +11,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
-const env = require('../config/prod.env')
+const env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : require('../config/prod.env')
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {
@@ -23,8 +25,9 @@ const webpackConfig = merge(baseWebpackConfig, {
   },
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
-    path: config.build.assetsRoot,
+    path: path.resolve(__dirname, `../dist/${env.project.replace(/['"]/g, "")}`),//config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    publicPath: ['', env.project.replace(/['"]/g, ""), ''].join('/'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
   },
   plugins: [
@@ -32,6 +35,10 @@ const webpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': env
     }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    }),
     new UglifyJsPlugin({
       uglifyOptions: {
         compress: {
@@ -61,7 +68,9 @@ const webpackConfig = merge(baseWebpackConfig, {
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      filename: config.build.index,
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : path.resolve(__dirname, `../dist/${env.project.replace(/['"]/g, "")}/index.html`),
       template: 'index.html',
       inject: true,
       minify: {
@@ -81,7 +90,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     // split vendor js into its own file
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      minChunks (module) {
+      minChunks(module) {
         // any required modules inside node_modules are extracted to vendor
         return (
           module.resource &&

config/config.request.js

-module.exports = {
-    config: [{
-        project: '',
-        requestUrl: ''
-    }]
-}
\ No newline at end of file

config/dev.env.js

@@ -3,5 +3,8 @@ const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  'NODE_ENV': "'development'",
+  'host': "'//localhost'",
+  'project': "'crm/vue'",
+  'requestUrl': "'mina'"
 })

config/index.js

@@ -10,26 +10,28 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/materials-list': {
-        changeOrigin: true, // 是否跨域
-        target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list',
+      '/api': {
+        target: 'http://wxapp.hotwind.net', // 接口的域名
+        // secure: false,  // 如果是https接口，需要配置这个参数
+        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
         pathRewrite: {
-          '^/materials-list': '/',
+          '^/api': '',
         },
       },
-      '/getarticlesummary': {
-        changeOrigin: true, // 是否跨域
-        target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary',
+      '/hot': {
+        target: 'http://10.0.19.146:8080', // 接口的域名
+        // secure: false,  // 如果是https接口，需要配置这个参数
+        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
         pathRewrite: {
-          '^/getarticlesummary': '/',
+          '^/hot': '',
         },
       },
     },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: true,
+    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
@@ -64,7 +66,9 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: './',
+
+    // assetsPublicPath: '/minapro/vue/', // '/minapro/vue/'
+    assetsPublicPath: '',
 
     /**
      * Source Maps

config/prod.dev.env.js

+module.exports = {
+  "host": "'//wxapp.hotwind.net'",
+  'project': "'crm/vue'",
+  'requestUrl': "'mina'"
+}

config/prod.env.js

 'use strict'
+const yargs = require('yargs').argv
+const env = yargs.env
+let path = './prod.prod.env'
+if (env === 'dev') {
+  path = './prod.dev.env'
+} else if (env === 'uat') {
+  path = './prod.uat.env'
+}
+const envConfig = require(path)
 module.exports = {
-  NODE_ENV: '"production"'
+  NODE_ENV: '"production"',
+  ...envConfig
 }

config/prod.prod.env.js

+module.exports = {
+  "host": "'//wxapp.hotwind.net'",
+  'project': "'crm/vue'",
+  'requestUrl': "'mina'"
+}

config/prod.uat.env.js

+module.exports = {
+  "host": "'//10.0.16.178:8080'",
+  'project': "'crm/vue'",
+  'requestUrl': "'mina'"
+}

package.json

@@ -8,7 +8,9 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --fix --ext .js,.vue src",
-    "build": "node build/build.js"
+    "build:dev": "node build/build.js --env=dev",
+    "build:uat": "node build/build.js --env=uat",
+    "build": "node build/build.js --env=prod"
   },
   "dependencies": {
     "animate.css": "^3.7.0",
@@ -16,6 +18,7 @@
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.4.9",
+    "jquery": "^3.3.1",
     "moment": "^2.22.2",
     "underscore": "^1.9.1",
     "v-charts": "^1.19.0",
@@ -80,7 +83,8 @@
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "yargs": "^12.0.1"
   },
   "engines": {
     "node": ">= 6.0.0",

src/components/Header/index.vue

@@ -244,14 +244,13 @@
 </style>
 
 <style lang="scss">
-  .message-panel {
-    top:70px !important;
+.message-panel {
+  top: 70px !important;
   padding-top: 0;
   &.el-notification {
     height: 864px;
     width: 420px;
     overflow: hidden;
-      overflow-y: scroll;
   }
   &.el-message-box {
     width: auto;
@@ -276,17 +275,19 @@
   .el-notification__closeBtn {
     z-index: 9;
   }
-  }
+}
 </style>
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import message from './message'
+require('@/lib/slimscroll/slimscroll')
 export default {
   name: 'headerNav',
   data () {
     return {
       showMenusPanel: false,
       showEditMenusPanel: false,
+      showMessagePanelcontrol: null,
       currentSelectIndex: -1,
       oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
       helpers: [{
@@ -336,22 +337,61 @@ export default {
   components: {
     message
   },
+  mounted () {
+    this.$nextTick(() => {
+      this.initSlimscroll()
+    })
+  },
   methods: {
     ...mapActions([
       'showEditMenus',
       'hideEditMenus'
     ]),
+    initSlimscroll () {
+      $('.message-panel.el-notification').slimScroll({
+        width: '100%', // 可滚动区域宽度
+        height: '100%', // 可滚动区域高度
+        size: '10px', // 滚动条宽度，即组件宽度
+        color: '#000', // 滚动条颜色
+        position: 'right', // 组件位置：left/right
+        distance: '0px', // 组件与侧边之间的距离
+        start: 'top', // 默认滚动位置：top/bottom
+        opacity: 0.4, // 滚动条透明度
+        alwaysVisible: true, // 是否 始终显示组件
+        disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
+        railVisible: true, // 是否 显示轨道
+        railColor: '#333', // 轨道颜色
+        railOpacity: 0.2, // 轨道透明度
+        railDraggable: true, // 是否 滚动条可拖动
+        railClass: 'slimScrollRail', // 轨道div类名
+        barClass: 'slimScrollBar', // 滚动条div类名
+        wrapperClass: 'slimScrollDiv', // 外包div类名
+        allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
+        wheelStep: 20, // 滚轮滚动量
+        touchScrollStep: 200, // 滚动量当用户使用手势
+        borderRadius: '7px', // 滚动条圆角
+        railBorderRadius: '7px' // 轨道圆角
+      })
+    },
     clickItem () {
-      console.log(this)
+      console.log('this is header index %o', this)
     },
     showMessage () {
+      if (this.showMessagePanelcontrol) {
+        this.showMessagePanelcontrol.close()
+        this.showMessagePanelcontrol = null
+      } else {
         const h = this.$createElement
-      this.$notify({
+        this.showMessagePanelcontrol = this.$notify({
           title: '消息中心',
           message: h('message'),
           duration: 0,
+          onClose: () => {
+            this.showMessagePanelcontrol = null
+          },
           customClass: 'message-panel'
         })
+      }
     },
     handleOpen () {},
     handleClose () {},
@@ -359,7 +399,7 @@ export default {
       this.showMenusPanel = !this.showMenusPanel
     },
     toggleMenus (...args) {
-      console.log(args)
+      console.log('this is header toggleMenus %o', args)
     },
     handleEditMenus () {
       if (!this.editMenus) {
@@ -370,7 +410,7 @@ export default {
     },
     setActiveStyle (item, ev) {
       this.currentSelectIndex = ev.index
-      console.log(item)
+      console.log('this is header setActiveStyle %o', item)
     },
     formatPathString (...args) {
       return args.join('-')

src/components/Header/message.vue

@@ -4,25 +4,28 @@
       <div id="pullDown">
         <span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span>
       </div>
-      <ul id="thelist">
-        <li v-for="(item, index) in items" class="message-item" :key="index" @click="openMessageContent(item)">
+      <ul id="thelist"
+        @mouseup="handlerMouseUp($event)"
+        @mousedown="handlerMousedown($event)"
+      >
+        <li v-for="(item, index) in items" class="message-item"
+        :key="index" @click="openMessageContent(item,$event)">
           <div class="message-item-title">{{item.title}}</div>
           <div class="message-desc">{{item.content_text}}</div>
           <div class="message-desc">{{item.push_time | fomatDate}}</div>
         </li>
       </ul>
       <div id="pullUp">
-        <span class="pullUpIcon" style="display: none"></span><span class="pullUpLabel">释放加载</span>
+        <span class="pullUpIcon" style="display: none"></span><span class="pullUpLabel">上拉加载更多</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-require('@/lib/iscroll/iscroll.js')
+require('@/lib/iscroll/iscroll')
 const IScroll = window.iScroll
-let pullDownEl, pullDownOffset,
-  pullUpEl, pullUpOffset
+let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset
 export default {
   name: 'message',
   data () {
@@ -30,21 +33,19 @@ export default {
       items: [],
       myScroll: null,
       pageNo: 0,
-      isLastPage: false
+      isLastPage: false,
+      eventType: '',
+      eventMouseStarEl: null,
+      eventMouseEndEl: null
     }
   },
-  components: {
-  },
+  components: {},
   created () {
     this.getListDataFromNet(1, 10)
   },
 
-  watch: {
-
-  },
-  computed: {
-
-  },
+  watch: {},
+  computed: {},
   mounted () {
     this.$nextTick(() => {
       this.loaded()
@@ -63,7 +64,7 @@ export default {
         {
           params: {
             pageNo: this.pageNo,
-            pageSize: 10,
+            pageSize: 20,
             push_state: 2
           }
         }
@@ -85,8 +86,8 @@ export default {
       pullUpEl = document.getElementById('pullUp')
       pullUpOffset = pullUpEl.offsetHeight
       this.myScroll = new IScroll('wrapper', {
-        scrollbarClass: 'myScrollbar', /* 重要样式 */
-        useTransition: false, /* 此属性不知用意，本人从true改为false */
+        scrollbarClass: 'myScrollbar' /* 重要样式 */,
+        useTransition: false /* 此属性不知用意，本人从true改为false */,
         topOffset: pullDownOffset,
         onRefresh: () => {
           this.$nextTick(() => {
@@ -95,7 +96,9 @@ export default {
               pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新'
             } else if (pullUpEl.className.match('loading')) {
               pullUpEl.className = ''
-              pullUpEl.querySelector('.pullUpLabel').innerHTML = this.isLastPage ? '没有更多数据' : '释放加载'
+              pullUpEl.querySelector('.pullUpLabel').innerHTML = this.isLastPage
+                ? '没有更多数据'
+                : '释放加载'
             }
           })
         },
@@ -108,11 +111,17 @@ export default {
             pullDownEl.className = ''
             pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新'
             this.minScrollY = -pullDownOffset
-          } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
+          } else if (
+            this.y < this.maxScrollY - 5 &&
+            !pullUpEl.className.match('flip')
+          ) {
             pullUpEl.className = 'flip'
             pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载'
             this.maxScrollY = this.maxScrollY
-          } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
+          } else if (
+            this.y > this.maxScrollY + 5 &&
+            pullUpEl.className.match('flip')
+          ) {
             pullUpEl.className = ''
             pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新'
             this.maxScrollY = pullUpOffset
@@ -122,7 +131,8 @@ export default {
           this.$nextTick(() => {
             if (pullDownEl.className.match('flip')) {
               pullDownEl.className = 'loading'
-              pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...'
+              pullDownEl.querySelector('.pullDownLabel').innerHTML =
+                '加载中...'
               this.pullDownAction()
             } else if (pullUpEl.className.match('flip')) {
               pullUpEl.className = 'loading'
@@ -132,9 +142,29 @@ export default {
           })
         }
       })
-      document.addEventListener('touchmove', function (e) { e.preventDefault() }, false)
+      document.addEventListener(
+        'touchmove',
+        function (e) {
+          e.preventDefault()
+        },
+        false
+      )
+    },
+    handlerMouseUp(event) {
+      this.eventMouseStarEl = event.target
+      this.eventType = ''
+      console.log(event)
+    },
+    handlerMousedown(event) {
+      this.eventMouseEndEl = event.target
+      console.log(event)
+      if (this.eventMouseStarEl && this.eventMouseStarEl === this.eventMouseEndEl) {
+        this.eventType = 'click'
+      } else {
+        this.eventType = 'mousemove'
+      }
+      this.eventMouseStarEl = this.eventMouseEndEl = null
     },
-
     pullDownAction () {
       this.items = []
       this.pageNo = 0
@@ -147,23 +177,28 @@ export default {
     },
 
     openMessageContent (item) {
+      console.log(arguments)
+      if (this.eventType === 'click') {
         this.$alert(`${item.content}`, '', {
           dangerouslyUseHTMLString: true,
           customClass: 'message-panel'
         })
       }
     }
+  }
 }
 </script>
 
 <style scoped>
-  #wrapper {
+#wrapper {
   width: 100%;
   position: absolute;
   top: 18px;
   bottom: 0;
-  }
-  #pullDown,#pullUp {
+  overflow: hidden;
+}
+#pullDown,
+#pullUp {
   border-bottom: none;
   text-align: center;
   height: 40px;
@@ -172,30 +207,29 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  }
+}
 
-  #pullUp {
+#pullUp {
   border-top: solid 1px #d7d7d7;
   text-align: center;
-  }
+}
 </style>
 
 <style lang="scss" scoped>
-  .message-item {
+.message-item {
   border-top: 1px dashed #ddd;
   padding: 5px 20px;
   cursor: pointer;
   &:first-child {
-      border-top:none;
-    }
+    border-top: none;
   }
+}
 
-  .message-item-title {
+.message-item-title {
   font-size: 15px;
-  }
+}
 
-  .message-desc {
+.message-desc {
   font-size: 13px;
-  }
-
+}
 </style>

src/components/Sidebar/index.vue

@@ -16,7 +16,7 @@
           ':sort':'item.sort'
         })
       transition(name="fade",mode="out-in",appear)
-        .childrens-meuns('v-show'="unfold",'v-if'="currentMenus")
+        .childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
           .children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
             el-menu&attributes({
               'default-active':"2",
@@ -33,8 +33,8 @@
                 template
                   el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",'@click'="choseSubChildren(i)")
                     span.menu-item-name {{i.name}}
-      .arrow-tip(':class'="{'left-l':!unfold,'left-ll':unfold}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
-        img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
+      .arrow-tip(':class'="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
+        img(class='icon-arrow',':class'="{right:!sidebarUnfoldInfo}","src"='@/assets/images/sidebar/left-arrow-gray.png')
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex'
@@ -64,7 +64,7 @@ export default {
   },
   mounted () {},
   computed: {
-    ...mapGetters({menus: 'getMenus'}),
+    ...mapGetters({menus: 'getMenus', sidebarUnfoldInfo: 'getSidebarUnfoldInfo'}),
     currentMenus: {
       get () {
         const currentIndex = this.currentMenusIndex
@@ -88,14 +88,14 @@ export default {
      * 二级菜单
      **/
     choseChildrenItem (...args) {
-      console.log(args)
+      console.log('this is sidebar 二级菜单 %o', args)
     },
     /**
      * 三级菜单
      * @param args
      **/
-    selectItemMenu (...args) {
-      console.log(args)
+    selectItemMenu (item) {
+      console.log('this is sidebar 三级菜单 %o', item)
     },
     toggleUnfold (...args) {
       if (!args.length) {
@@ -111,8 +111,10 @@ export default {
     showUnfoldBtn () {
       this.unfoldBtn = true
     },
-    choseSubChildren (...args) {
-      console.log(args)
+    choseSubChildren (item) {
+      this.$router.push({
+        path: `/${item.link}`
+      })
     },
     getCurrentMenus (index) {
       return this.menus[index]

src/components/sidebarItem/index.vue

@@ -13,21 +13,31 @@ export default {
   props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
   methods: {
     clickItem () {
-      console.log(this)
+      console.log('this is sidebar item %o', this)
+      if (this.link) {
+        this.$router.push({
+          path: `${this.link}`
+        })
+      }
     }
   }
 }
 </script>
 <style lang="stylus" scoped>
-  .sidebar-item
-    display block
-    color: #fff
-    /*text-align center*/
-    font-weight 400
-    font-size 10px
-    padding 10px 5px
-    i
-      margin-bottom 5px
-  .fa
-    font-size 25px
+.sidebar-item {
+  display: block;
+  color: #fff;
+  /* text-align center */
+  font-weight: 400;
+  font-size: 10px;
+  padding: 10px 5px;
+
+  i {
+    margin-bottom: 5px;
+  }
+}
+
+.fa {
+  font-size: 25px;
+}
 </style>

src/lib/mescroll/mescroll.min.js

-/*! mescroll -- 精致的下拉刷新和上拉加载js框架  ( a great JS framework for pull-refresh and pull-up-loading )
- * version 1.3.8
- * 2018-09-29
- * author: wenju < mescroll@qq.com > 文举
- * *
- * 官网:  http://www.mescroll.com
- * 动态:  https://github.com/mescroll/mescroll/releases
- * 问答:  http://www.mescroll.com/qa.html
- * issues:  https://github.com/mescroll/mescroll/issues
- * QQ交流群: 633126761
- */
-(function(a, b) { if (typeof define === 'function') { define(b) } else { if (typeof module !== 'undefined' && module.exports) { module.exports = b() } else { this[a] = b() } } })('MeScroll', function() { var a = function(b, e) { var h = this; h.version = '1.3.8'; h.isScrollBody = (!b || b === 'body'); h.scrollDom = h.isScrollBody ? document.body : h.getDomById(b); if (!h.scrollDom) { return }h.options = e || {}; var d = navigator.userAgent; var c = !!d.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); var i = typeof window.orientation === 'undefined'; var g = d.indexOf('Android') > -1 || d.indexOf('Adr') > -1; h.os = {ios: c, pc: i, android: g}; h.isDownScrolling = false; h.isUpScrolling = false; var f = h.options.down && h.options.down.callback; h.initDownScroll(); h.initUpScroll(); setTimeout(function() { if (h.optDown.use && h.optDown.auto && f) { if (h.optDown.autoShowLoading) { h.triggerDownScroll() } else { h.optDown.callback && h.optDown.callback(h) } }h.optUp.use && h.optUp.auto && !h.isUpAutoLoad && h.triggerUpScroll() }, 30) }; a.prototype.extendDownScroll = function(b) { a.extend(b, {use: true, auto: true, autoShowLoading: false, isLock: false, isBoth: false, offset: 80, outOffsetRate: 0.2, bottomOffset: 20, minAngle: 45, hardwareClass: 'mescroll-hardware', mustToTop: false, warpId: null, warpClass: 'mescroll-downwarp', resetClass: 'mescroll-downwarp-reset', textInOffset: '下拉刷新', textOutOffset: '释放更新', textLoading: '加载中 ...', htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip"></p>', inited: function(d, c) { d.downTipDom = c.getElementsByClassName('downwarp-tip')[0]; d.downProgressDom = c.getElementsByClassName('downwarp-progress')[0] }, inOffset: function(c) { if (c.downTipDom) { c.downTipDom.innerHTML = c.optDown.textInOffset } if (c.downProgressDom) { c.downProgressDom.classList.remove('mescroll-rotate') } }, outOffset: function(c) { if (c.downTipDom) { c.downTipDom.innerHTML = c.optDown.textOutOffset } }, onMoving: function(d, f, c) { if (d.downProgressDom) { var e = 360 * f; d.downProgressDom.style.webkitTransform = 'rotate(' + e + 'deg)'; d.downProgressDom.style.transform = 'rotate(' + e + 'deg)' } }, beforeLoading: function(d, c) { return false }, showLoading: function(c) { if (c.downTipDom) { c.downTipDom.innerHTML = c.optDown.textLoading } if (c.downProgressDom) { c.downProgressDom.classList.add('mescroll-rotate') } }, afterLoading: function(c) { return 0 }, callback: function(c) { c.resetUpScroll() }}) }; a.prototype.extendUpScroll = function(b) { var c = this.os.pc; a.extend(b, {use: true, auto: true, isLock: false, isBoth: false, isBounce: true, callback: null, page: {num: 0, size: 10, time: null}, noMoreSize: 5, offset: 100, toTop: {warpId: null, src: null, html: null, offset: 1000, warpClass: 'mescroll-totop', showClass: 'mescroll-fade-in', hideClass: 'mescroll-fade-out', fadeDuration: 0.5, duration: 300, supportTap: false, btnClick: null}, loadFull: {use: false, delay: 500}, empty: {warpId: null, icon: null, tip: '暂无相关数据~', btntext: '', btnClick: null, supportTap: false}, clearId: null, clearEmptyId: null, hardwareClass: 'mescroll-hardware', warpId: null, warpClass: 'mescroll-upwarp', htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', htmlNodata: '<p class="upwarp-nodata">-- END --</p>', inited: function(d, e) {}, showLoading: function(d, e) { e.innerHTML = d.optUp.htmlLoading }, showNoMore: function(d, e) { e.innerHTML = d.optUp.htmlNodata }, onScroll: null, scrollbar: {use: c, barClass: 'mescroll-bar'}, lazyLoad: {use: false, attr: 'imgurl', showClass: 'mescroll-lazy-in', delay: 500, offset: 200}}) }; a.extend = function(d, b) { if (!d) { return b } for (var c in b) { if (d[c] == null) { d[c] = b[c] } else { if (typeof d[c] === 'object') { a.extend(d[c], b[c]) } } } return d }; a.prototype.initDownScroll = function() { var c = this; c.optDown = c.options.down || {}; c.extendDownScroll(c.optDown); c.touchstartEvent = function(f) { if (c.isScrollTo) { c.preventDefault(f) }c.startPoint = c.getPoint(f); c.lastPoint = c.startPoint; c.maxTouchmoveY = c.getBodyHeight() - c.optDown.bottomOffset; c.inTouchend = false; var d = c.getScrollTop(); c.isKeepTop = d === 0; if (c.os.pc && d <= 0) { c.scrollDom.addEventListener('mousemove', c.touchmoveEvent, {passive: false}); document.ondragstart = function() { return false } } }; c.scrollDom.addEventListener('mousedown', c.touchstartEvent); c.scrollDom.addEventListener('touchstart', c.touchstartEvent); c.touchmoveEvent = function(l) { if (!c.startPoint) { return } var d = c.getScrollTop(); if (d > 0) { c.isKeepTop = false } var h = c.getPoint(l); var f = h.y - c.startPoint.y; if (f > 0) { if (d <= 0) { c.preventDefault(l); if (c.optDown.use && !c.inTouchend && !c.isDownScrolling && !c.optDown.isLock && (!c.isUpScrolling || (c.isUpScrolling && c.optUp.isBoth))) { if (c.optDown.mustToTop && !c.isKeepTop) { return } var o = Math.abs(c.lastPoint.x - h.x); var n = Math.abs(c.lastPoint.y - h.y); var m = Math.sqrt(o * o + n * n); if (m !== 0) { var g = Math.asin(n / m) / Math.PI * 180; if (g < c.optDown.minAngle) { return } } if (c.maxTouchmoveY > 0 && h.y >= c.maxTouchmoveY) { c.inTouchend = true; c.touchendEvent(); return } var p = h.y - c.lastPoint.y; if (!c.downHight) { c.downHight = 0 } if (c.downHight < c.optDown.offset) { if (c.movetype !== 1) { c.movetype = 1; c.optDown.inOffset(c); c.downwarp.classList.remove(c.optDown.resetClass); c.isMoveDown = true; if (c.os.ios && !c.isKeepTop) { c.scrollDom.classList.add(c.optDown.hardwareClass); c.scrollDom.style.webkitOverflowScrolling = 'auto'; c.isSetScrollAuto = true } }c.downHight += p } else { if (c.movetype !== 2) { c.movetype = 2; c.optDown.outOffset(c); c.downwarp.classList.remove(c.optDown.resetClass); c.isMoveDown = true; if (c.os.ios && !c.isKeepTop) { c.scrollDom.classList.add(c.optDown.hardwareClass); c.scrollDom.style.webkitOverflowScrolling = 'auto'; c.isSetScrollAuto = true } } if (p > 0) { c.downHight += p * c.optDown.outOffsetRate } else { c.downHight += p } }c.downwarp.style.height = c.downHight + 'px'; var k = c.downHight / c.optDown.offset; c.optDown.onMoving(c, k, c.downHight) } } } else { if (f < 0) { var q = c.getScrollHeight(); var j = c.getClientHeight(); var i = q - j - d; if (!c.optUp.isBounce && i <= 0) { c.preventDefault(l) } if (c.optUp.use && !c.optUp.isLock && c.optUp.hasNext && !c.isUpScrolling && (!c.isDownScrolling || (c.isDownScrolling && c.optDown.isBoth)) && (j + c.optUp.offset >= q || i <= 0)) { c.triggerUpScroll() } } }c.lastPoint = h }; c.scrollDom.addEventListener('touchmove', c.touchmoveEvent, {passive: false}); c.touchendEvent = function() { if (c.optDown.use && c.isMoveDown) { if (c.downHight >= c.optDown.offset) { c.triggerDownScroll() } else { c.downwarp.classList.add(c.optDown.resetClass); c.downHight = 0; c.downwarp.style.height = 0 } if (c.isSetScrollAuto) { c.scrollDom.style.webkitOverflowScrolling = 'touch'; c.scrollDom.classList.remove(c.optDown.hardwareClass); c.isSetScrollAuto = false }c.movetype = 0; c.isMoveDown = false } if (c.os.pc) { c.scrollDom.removeEventListener('mousemove', c.touchmoveEvent); document.ondragstart = function() { return true } } }; c.scrollDom.addEventListener('mouseup', c.touchendEvent); c.scrollDom.addEventListener('mouseleave', c.touchendEvent); c.scrollDom.addEventListener('touchend', c.touchendEvent); c.scrollDom.addEventListener('touchcancel', c.touchendEvent); if (c.optDown.use) { c.downwarp = document.createElement('div'); c.downwarp.className = c.optDown.warpClass; c.downwarp.innerHTML = '<div class="downwarp-content">' + c.optDown.htmlContent + '</div>'; var b = c.optDown.warpId ? c.getDomById(c.optDown.warpId) : c.scrollDom; if (c.optDown.warpId && b) { b.appendChild(c.downwarp) } else { if (!b) { b = c.scrollDom }b.insertBefore(c.downwarp, c.scrollDom.firstChild) }setTimeout(function() { c.optDown.inited(c, c.downwarp) }, 0) } }; a.prototype.preventDefault = function(b) { if (b && b.cancelable && !b.defaultPrevented) { b.preventDefault() } }; a.prototype.getPoint = function(b) { return {x: b.touches ? b.touches[0].pageX : b.clientX, y: b.touches ? b.touches[0].pageY : b.clientY} }; a.prototype.triggerDownScroll = function() { if (!this.optDown.beforeLoading(this, this.downwarp)) { this.showDownScroll(); this.optDown.callback && this.optDown.callback(this) } }; a.prototype.showDownScroll = function() { this.isDownScrolling = true; this.optDown.showLoading(this); this.downHight = this.optDown.offset; this.downwarp.classList.add(this.optDown.resetClass); this.downwarp.style.height = this.optDown.offset + 'px' }; a.prototype.endDownScroll = function() { var d = this; var c = function() { d.downHight = 0; d.downwarp.style.height = 0; d.isDownScrolling = false; if (d.downProgressDom) { d.downProgressDom.classList.remove('mescroll-rotate') } }; var b = d.optDown.afterLoading(d); if (typeof b === 'number' && b > 0) { setTimeout(c, b) } else { c() } }; a.prototype.lockDownScroll = function(b) { if (b == null) { b = true } this.optDown.isLock = b }; a.prototype.initUpScroll = function() { var c = this; c.optUp = c.options.up || {use: false}; c.extendUpScroll(c.optUp); if (c.optUp.scrollbar.use) { c.scrollDom.classList.add(c.optUp.scrollbar.barClass) } if (!c.optUp.isBounce) { c.setBounce(false) } if (c.optUp.use === false) { return }c.optUp.hasNext = true; c.upwarp = document.createElement('div'); c.upwarp.className = c.optUp.warpClass; var b; if (c.optUp.warpId) { b = c.getDomById(c.optUp.warpId) } if (!b) { b = c.scrollDom }b.appendChild(c.upwarp); c.preScrollY = 0; c.lazyStartTime = new Date().getTime(); c.lazyTag = 'mescroll-lazying'; c.scrollEvent = function() { var g = c.getScrollTop(); var f = g - c.preScrollY > 0; c.preScrollY = g; if (!c.isUpScrolling && (!c.isDownScrolling || (c.isDownScrolling && c.optDown.isBoth))) { if (!c.optUp.isLock && c.optUp.hasNext) { var d = c.getScrollHeight() - c.getClientHeight() - g; if (d <= c.optUp.offset && f) { c.triggerUpScroll() } } } var h = c.optUp.toTop; if (h.src || h.html) { if (g >= h.offset) { c.showTopBtn() } else { c.hideTopBtn() } } if (c.optUp.lazyLoad.use) { var e = new Date().getTime(); c.lazyTimer && clearTimeout(c.lazyTimer); if (e - c.lazyStartTime >= c.optUp.lazyLoad.delay) { c.lazyStartTime = e; c.lazyLoad(0) } else { c.lazyTimer = c.lazyLoad() } }c.optUp.onScroll && c.optUp.onScroll(c, g, f) }; if (c.isScrollBody) { window.addEventListener('scroll', c.scrollEvent) } else { c.scrollDom.addEventListener('scroll', c.scrollEvent) }setTimeout(function() { c.optUp.inited(c, c.upwarp) }, 0) }; a.prototype.setBounce = function(b) { if (this.isScrollBody || !this.os.ios) { return } if (b === false) { this.optUp.isBounce = false; window.addEventListener('touchmove', this.bounceTouchmove, {passive: false}) } else { this.optUp.isBounce = true; window.removeEventListener('touchmove', this.bounceTouchmove) } }; a.prototype.bounceTouchmove = function(h) { var j = this; var d = h.target; var f = true; while (d !== document.body && d !== document) { var m = d.classList; if (m) { if (m.contains('mescroll') || m.contains('mescroll-touch')) { f = false; break } else { if (m.contains('mescroll-touch-x') || m.contains('mescroll-touch-y')) { var c = h.touches ? h.touches[0].pageX : h.clientX; var b = h.touches ? h.touches[0].pageY : h.clientY; if (!j.preWinX) { j.preWinX = c } if (!j.preWinY) { j.preWinY = b } var l = Math.abs(j.preWinX - c); var k = Math.abs(j.preWinY - b); var i = Math.sqrt(l * l + k * k); j.preWinX = c; j.preWinY = b; if (i !== 0) { var g = Math.asin(k / i) / Math.PI * 180; if ((g <= 45 && m.contains('mescroll-touch-x')) || (g > 45 && m.contains('mescroll-touch-y'))) { f = false; break } } } } }d = d.parentNode } if (f && h.cancelable && !h.defaultPrevented) { h.preventDefault() } }; a.prototype.triggerUpScroll = function() { if (this.optUp.callback && !this.isUpScrolling) { this.showUpScroll(); this.optUp.page.num++; this.isUpAutoLoad = true; this.optUp.callback(this.optUp.page, this) } }; a.prototype.showUpScroll = function() { this.isUpScrolling = true; this.upwarp.classList.add(this.optUp.hardwareClass); this.upwarp.style.visibility = 'visible'; this.upwarp.style.display = 'block'; this.optUp.showLoading(this, this.upwarp) }; a.prototype.showNoMore = function() { this.upwarp.style.visibility = 'visible'; this.upwarp.style.display = 'block'; this.optUp.hasNext = false; this.optUp.showNoMore(this, this.upwarp) }; a.prototype.hideUpScroll = function(b) { if (b) { this.upwarp.style.display = 'none' } else { this.upwarp.style.visibility = 'hidden' } this.upwarp.classList.remove(this.optUp.hardwareClass); var c = this.upwarp.getElementsByClassName('upwarp-progress')[0]; if (c) { c.classList.remove('mescroll-rotate') } }; a.prototype.endUpScroll = function(c, b) { if (c != null) { if (c) { this.showNoMore() } else { this.hideUpScroll(b) } } this.isUpScrolling = false }; a.prototype.resetUpScroll = function(c) { if (this.optUp && this.optUp.use) { var b = this.optUp.page; this.prePageNum = b.num; this.prePageTime = b.time; b.num = 1; b.time = null; if (!this.isDownScrolling && c !== false) { if (c == null) { this.removeEmpty(); this.clearDataList(); this.showUpScroll() } else { this.showDownScroll() } } this.isUpAutoLoad = true; this.optUp.callback && this.optUp.callback(b, this) } }; a.prototype.setPageNum = function(b) { this.optUp.page.num = b - 1 }; a.prototype.setPageSize = function(b) { this.optUp.page.size = b }; a.prototype.clearDataList = function() { var c = this.optUp.clearId || this.optUp.clearEmptyId; if (c) { var b = this.getDomById(c); if (b) { b.innerHTML = '' } } }; a.prototype.endByPage = function(c, e, d) { var b; if (this.optUp.use && e != null) { b = this.optUp.page.num < e } this.endSuccess(c, b, d) }; a.prototype.endBySize = function(d, c, e) { var b; if (this.optUp.use && c != null) { var f = (this.optUp.page.num - 1) * this.optUp.page.size + d; b = f < c } this.endSuccess(d, b, e) }; a.prototype.endSuccess = function(c, b, i) { var f = this; if (f.isDownScrolling) { f.endDownScroll() } if (f.optUp.use) { var j; if (c != null) { var e = f.optUp.page.num; var g = f.optUp.page.size; if (e === 1) { f.clearDataList(); if (i) { f.optUp.page.time = i } } if (c < g || b === false) { f.optUp.hasNext = false; if (c === 0 && e === 1) { j = false; f.showEmpty() } else { var d = (e - 1) * g + c; if (d < f.optUp.noMoreSize) { j = false } else { j = true }f.removeEmpty() } } else { j = false; f.optUp.hasNext = true; f.removeEmpty() } } var h = !f.optUp.hasNext; f.endUpScroll(j, h); f.loadFull(); f.optUp.lazyLoad.use && f.lazyLoad() } }; a.prototype.endErr = function() { if (this.isDownScrolling) { var b = this.optUp.page; if (b && this.prePageNum) { b.num = this.prePageNum; b.time = this.prePageTime } this.endDownScroll() } if (this.isUpScrolling) { this.optUp.page.num--; this.endUpScroll(false) } }; a.prototype.loadFull = function() { var b = this; if (b.optUp.loadFull.use && !b.optUp.isLock && b.optUp.hasNext && b.optUp.callback && b.getScrollHeight() <= b.getClientHeight()) { setTimeout(function() { if (b.getScrollHeight() <= b.getClientHeight()) { b.triggerUpScroll() } }, b.optUp.loadFull.delay) } }; a.prototype.lockUpScroll = function(b) { if (b == null) { b = true } this.optUp.isLock = b }; a.prototype.showEmpty = function() { var c = this; var d = c.optUp.empty; var b = d.warpId || c.optUp.clearEmptyId; if (b == null) { return } var g = c.getDomById(b); if (g) { c.removeEmpty(); var f = ''; if (d.icon) { f += '<img class="empty-icon" src="' + d.icon + '"/>' } if (d.tip) { f += '<p class="empty-tip">' + d.tip + '</p>' } if (d.btntext) { f += '<p class="empty-btn">' + d.btntext + '</p>' }c.emptyDom = document.createElement('div'); c.emptyDom.className = 'mescroll-empty'; c.emptyDom.innerHTML = f; g.appendChild(c.emptyDom); if (d.btnClick) { var e = c.emptyDom.getElementsByClassName('empty-btn')[0]; if (d.supportTap) { e.addEventListener('tap', function(h) { h.stopPropagation(); c.preventDefault(h); d.btnClick() }) } else { e.onclick = function() { d.btnClick() } } } } }; a.prototype.removeEmpty = function() { this.removeChild(this.emptyDom) }; a.prototype.showTopBtn = function(c) { if (!this.topBtnShow) { this.topBtnShow = true; var d = this; var e = d.optUp.toTop; if (d.toTopBtn == null) { if (e.html) { d.toTopBtn = document.createElement('div'); d.toTopBtn.innerHTML = e.html } else { d.toTopBtn = document.createElement('img'); d.toTopBtn.src = e.src }d.toTopBtn.className = e.warpClass; if (e.supportTap) { d.toTopBtn.addEventListener('tap', function(g) { g.stopPropagation(); d.preventDefault(g); var f = e.btnClick && e.btnClick(); if (f !== true) { d.scrollTo(0, d.optUp.toTop.duration) } }) } else { d.toTopBtn.onclick = function() { var f = e.btnClick && e.btnClick(); if (f !== true) { d.scrollTo(0, d.optUp.toTop.duration) } } } var b; if (e.warpId) { b = d.getDomById(e.warpId) } if (!b) { b = document.body }b.appendChild(d.toTopBtn) }d.toTopBtn.classList.remove(e.hideClass); d.toTopBtn.classList.add(e.showClass); d.setTopBtnFadeDuration(c) } }; a.prototype.hideTopBtn = function(b) { if (this.topBtnShow && this.toTopBtn) { this.topBtnShow = false; this.toTopBtn.classList.remove(this.optUp.toTop.showClass); this.toTopBtn.classList.add(this.optUp.toTop.hideClass); this.setTopBtnFadeDuration(b) } }; a.prototype.setTopBtnFadeDuration = function(b) { if (this.toTopBtn) { var c = (b != null ? b : this.optUp.toTop.fadeDuration) + 's'; this.toTopBtn.style.animationDuration = c; this.toTopBtn.style.webkitAnimationDuration = c } }; a.prototype.scrollTo = function(g, c) { var d = this; var f = d.getScrollTop(); var b = g; if (b > 0) { var e = d.getScrollHeight() - d.getClientHeight(); if (b > e) { b = e } } else { b = 0 }d.isScrollTo = true; d.scrollDom.style.webkitOverflowScrolling = 'auto'; d.getStep(f, b, function(h) { d.setScrollTop(h); if (h === b) { d.scrollDom.style.webkitOverflowScrolling = 'touch'; d.isScrollTo = false } }, c) }; a.prototype.getStep = function(f, d, k, l, h) { var j = d - f; if (l === 0 || j === 0) { k && k(d); return }l = l || 300; h = h || 30; var g = l / h; var c = j / g; var e = 0; var b = window.setInterval(function() { if (e < g - 1) { f += c; k && k(f, b); e++ } else { k && k(d, b); window.clearInterval(b) } }, h) }; a.prototype.lazyLoad = function(b) { var d = this; var c = b != null ? b : d.optUp.lazyLoad.delay; var e = setTimeout(function() { var k = d.scrollDom.querySelectorAll('[' + d.optUp.lazyLoad.attr + ']'); var f = k.length; for (var j = 0; j < f; j++) { var l = k[j]; if (l.getAttribute(d.lazyTag) !== 'true' && d.isInSee(l, d.optUp.lazyLoad.offset)) { var h = l.getAttribute(d.optUp.lazyLoad.attr); var g = new Image(); g.onload = function() { var i = this.src; var n = this.dom; var m = d.optUp.lazyLoad.showClass; m && n.classList.add(m); if (n.tagName === 'IMG') { n.src = i } else { n.style.backgroundImage = 'url(' + i + ')' }n.removeAttribute(d.optUp.lazyLoad.attr); n.removeAttribute(d.lazyTag) }; g.onerror = function() { this.dom.removeAttribute(d.lazyTag) }; g.onabort = function() { this.dom.removeAttribute(d.lazyTag) }; g.src = h; l.setAttribute(d.lazyTag, 'true'); g.dom = l } } }, c); return e }; a.prototype.isInSee = function(f, e) { e = e || 0; var b = this.getOffsetTop(f); var d = this.getScrollTop() - e; var g = b + f.offsetHeight; var c = d + e + this.getClientHeight() + e; return (b < c && b >= d) || (g <= c && g > d) }; a.prototype.getOffsetTop = function(d) { var c = d.offsetTop; var b = d.offsetParent; while (b != null && b !== this.scrollDom) { c += b.offsetTop + b.clientTop; b = b.offsetParent } return c }; a.prototype.getScrollHeight = function() { return this.scrollDom.scrollHeight }; a.prototype.getClientHeight = function() { if (this.isScrollBody && document.compatMode === 'CSS1Compat') { return document.documentElement.clientHeight } else { return this.scrollDom.clientHeight } }; a.prototype.getBodyHeight = function() { return document.body.clientHeight || document.documentElement.clientHeight }; a.prototype.getScrollTop = function() { if (this.isScrollBody) { return document.documentElement.scrollTop || document.body.scrollTop } else { return this.scrollDom.scrollTop } }; a.prototype.getToBottom = function() { return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() }; a.prototype.setScrollTop = function(b) { if (typeof b === 'number') { if (this.isScrollBody) { document.documentElement.scrollTop = b; document.body.scrollTop = b } else { this.scrollDom.scrollTop = b } } }; a.prototype.getDomById = function(c) { var b; if (c) { if (typeof c === 'string') { b = document.getElementById(c) } else { if (c.nodeType) { b = c } } } if (!b) { console.error('the element with id as "' + c + '" can not be found: document.getElementById("' + c + '")==null') } return b }; a.prototype.removeChild = function(c) { if (c) { var b = c.parentNode; b && b.removeChild(c); c = null } }; a.prototype.destroy = function() { var b = this; b.scrollDom.removeEventListener('touchstart', b.touchstartEvent); b.scrollDom.removeEventListener('touchmove', b.touchmoveEvent); b.scrollDom.removeEventListener('touchend', b.touchendEvent); b.scrollDom.removeEventListener('touchcancel', b.touchendEvent); b.scrollDom.removeEventListener('mousedown', b.touchstartEvent); b.scrollDom.removeEventListener('mousemove', b.touchmoveEvent); b.scrollDom.removeEventListener('mouseup', b.touchendEvent); b.scrollDom.removeEventListener('mouseleave', b.touchendEvent); b.removeChild(b.downwarp); if (b.isScrollBody) { window.removeEventListener('scroll', b.scrollEvent) } else { b.scrollDom.removeEventListener('scroll', b.scrollEvent) }b.removeChild(b.upwarp); b.removeChild(b.toTopBtn); b.setBounce(true) }; return a })

src/lib/slimScroll/slimScroll.js

+/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Version: 1.3.1
+ *
+ */
+(function ($) {
+
+    jQuery.fn.extend({
+        slimScroll: function (options) {
+
+            var defaults = {
+
+                // width in pixels of the visible scroll area
+                width: 'auto',
+
+                // height in pixels of the visible scroll area
+                height: '250px',
+
+                // width in pixels of the scrollbar and rail
+                size: '7px',
+
+                // scrollbar color, accepts any hex/color value
+                color: '#000',
+
+                // scrollbar position - left/right
+                position: 'right',
+
+                // distance in pixels between the side edge and the scrollbar
+                distance: '1px',
+
+                // default scroll position on load - top / bottom / $('selector')
+                start: 'top',
+
+                // sets scrollbar opacity
+                opacity: .4,
+
+                // enables always-on mode for the scrollbar
+                alwaysVisible: false,
+
+                // check if we should hide the scrollbar when user is hovering over
+                disableFadeOut: false,
+
+                // sets visibility of the rail
+                railVisible: false,
+
+                // sets rail color
+                railColor: '#333',
+
+                // sets rail opacity
+                railOpacity: .2,
+
+                // whether  we should use jQuery UI Draggable to enable bar dragging
+                railDraggable: true,
+
+                // defautlt CSS class of the slimscroll rail
+                railClass: 'slimScrollRail',
+
+                // defautlt CSS class of the slimscroll bar
+                barClass: 'slimScrollBar',
+
+                // defautlt CSS class of the slimscroll wrapper
+                wrapperClass: 'slimScrollDiv',
+
+                // check if mousewheel should scroll the window if we reach top/bottom
+                allowPageScroll: false,
+
+                // scroll amount applied to each mouse wheel step
+                wheelStep: 20,
+
+                // scroll amount applied when user is using gestures
+                touchScrollStep: 200,
+
+                // sets border radius
+                borderRadius: '7px',
+
+                // sets border radius of the rail
+                railBorderRadius: '7px'
+            };
+
+            var o = $.extend(defaults, options);
+
+            // do it for every element that matches selector
+            this.each(function () {
+
+                var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
+                    barHeight, percentScroll, lastScroll,
+                    divS = '<div></div>',
+                    minBarHeight = 30,
+                    releaseScroll = false;
+
+                // used in event handlers and for better minification
+                var me = $(this);
+
+                // ensure we are not binding it again
+                if (me.parent().hasClass(o.wrapperClass)) {
+                    // start from last bar position
+                    var offset = me.scrollTop();
+
+                    // find bar and rail
+                    bar = me.parent().find('.' + o.barClass);
+                    rail = me.parent().find('.' + o.railClass);
+
+                    getBarHeight();
+
+                    // check if we should scroll existing instance
+                    if ($.isPlainObject(options)) {
+                        // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
+                        if ('height' in options && options.height == 'auto') {
+                            me.parent().css('height', 'auto');
+                            me.css('height', 'auto');
+                            var height = me.parent().parent().height();
+                            me.parent().css('height', height);
+                            me.css('height', height);
+                        } else if ('height' in options) {
+                            var h = options.height;
+                            me.parent().css('height', h);
+                            me.css('height', h);
+                        }
+
+                        if ('scrollTo' in options) {
+                            // jump to a static point
+                            offset = parseInt(o.scrollTo);
+                        }
+                        else if ('scrollBy' in options) {
+                            // jump by value pixels
+                            offset += parseInt(o.scrollBy);
+                        }
+                        else if ('destroy' in options) {
+                            // remove slimscroll elements
+                            bar.remove();
+                            rail.remove();
+                            me.unwrap();
+                            return;
+                        }
+
+                        // scroll content by the given offset
+                        scrollContent(offset, false, true);
+                    }
+
+                    return;
+                }
+
+                // optionally set height to the parent's height
+                o.height = (o.height == 'auto') ? me.parent().height() : o.height;
+
+                // wrap content
+                var wrapper = $(divS)
+                    .addClass(o.wrapperClass)
+                    .css({
+                        position: 'relative',
+                        overflow: 'hidden',
+                        width: o.width,
+                        height: o.height
+                    });
+
+                // update style for the div
+                me.css({
+                    overflow: 'hidden',
+                    width: o.width,
+                    height: o.height
+                });
+
+                // create scrollbar rail
+                var rail = $(divS)
+                    .addClass(o.railClass)
+                    .css({
+                        width: o.size,
+                        height: '100%',
+                        position: 'absolute',
+                        top: 0,
+                        display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
+                        'border-radius': o.railBorderRadius,
+                        background: o.railColor,
+                        opacity: o.railOpacity,
+                        zIndex: 90
+                    });
+
+                // create scrollbar
+                var bar = $(divS)
+                    .addClass(o.barClass)
+                    .css({
+                        background: o.color,
+                        width: o.size,
+                        position: 'absolute',
+                        top: 0,
+                        opacity: o.opacity,
+                        display: o.alwaysVisible ? 'block' : 'none',
+                        'border-radius': o.borderRadius,
+                        BorderRadius: o.borderRadius,
+                        MozBorderRadius: o.borderRadius,
+                        WebkitBorderRadius: o.borderRadius,
+                        zIndex: 99
+                    });
+
+                // set position
+                var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
+                rail.css(posCss);
+                bar.css(posCss);
+
+                // wrap it
+                me.wrap(wrapper);
+
+                // append to parent div
+                me.parent().append(bar);
+                me.parent().append(rail);
+
+                // make it draggable and no longer dependent on the jqueryUI
+                if (o.railDraggable) {
+                    bar.bind("mousedown", function (e) {
+                        var $doc = $(document);
+                        isDragg = true;
+                        t = parseFloat(bar.css('top'));
+                        pageY = e.pageY;
+
+                        $doc.bind("mousemove.slimscroll", function (e) {
+                            currTop = t + e.pageY - pageY;
+                            bar.css('top', currTop);
+                            scrollContent(0, bar.position().top, false);// scroll content
+                        });
+
+                        $doc.bind("mouseup.slimscroll", function (e) {
+                            isDragg = false; hideBar();
+                            $doc.unbind('.slimscroll');
+                        });
+                        return false;
+                    }).bind("selectstart.slimscroll", function (e) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return false;
+                    });
+                }
+
+                // on rail over
+                rail.hover(function () {
+                    showBar();
+                }, function () {
+                    hideBar();
+                });
+
+                // on bar over
+                bar.hover(function () {
+                    isOverBar = true;
+                }, function () {
+                    isOverBar = false;
+                });
+
+                // show on parent mouseover
+                me.hover(function () {
+                    isOverPanel = true;
+                    showBar();
+                    hideBar();
+                }, function () {
+                    isOverPanel = false;
+                    hideBar();
+                });
+
+                // support for mobile
+                me.bind('touchstart', function (e, b) {
+                    if (e.originalEvent.touches.length) {
+                        // record where touch started
+                        touchDif = e.originalEvent.touches[0].pageY;
+                    }
+                });
+
+                me.bind('touchmove', function (e) {
+                    // prevent scrolling the page if necessary
+                    if (!releaseScroll) {
+                        e.originalEvent.preventDefault();
+                    }
+                    if (e.originalEvent.touches.length) {
+                        // see how far user swiped
+                        var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
+                        // scroll content
+                        scrollContent(diff, true);
+                        touchDif = e.originalEvent.touches[0].pageY;
+                    }
+                });
+
+                // set up initial height
+                getBarHeight();
+
+                // check start position
+                if (o.start === 'bottom') {
+                    // scroll content to bottom
+                    bar.css({ top: me.outerHeight() - bar.outerHeight() });
+                    scrollContent(0, true);
+                }
+                else if (o.start !== 'top') {
+                    // assume jQuery selector
+                    scrollContent($(o.start).position().top, null, true);
+
+                    // make sure bar stays hidden
+                    if (!o.alwaysVisible) { bar.hide(); }
+                }
+
+                // attach scroll events
+                attachWheel();
+
+                function _onWheel(e) {
+                    // use mouse wheel only when mouse is over
+                    if (!isOverPanel) { return; }
+
+                    var e = e || window.event;
+
+                    var delta = 0;
+                    if (e.wheelDelta) { delta = -e.wheelDelta / 120; }
+                    if (e.detail) { delta = e.detail / 3; }
+
+                    var target = e.target || e.srcTarget || e.srcElement;
+                    if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
+                        // scroll content
+                        scrollContent(delta, true);
+                    }
+
+                    // stop window scroll
+                    if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
+                    if (!releaseScroll) { e.returnValue = false; }
+                }
+
+                function scrollContent(y, isWheel, isJump) {
+                    releaseScroll = false;
+                    var delta = y;
+                    var maxTop = me.outerHeight() - bar.outerHeight();
+
+                    if (isWheel) {
+                        // move bar with mouse wheel
+                        delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
+
+                        // move bar, make sure it doesn't go out
+                        delta = Math.min(Math.max(delta, 0), maxTop);
+
+                        // if scrolling down, make sure a fractional change to the
+                        // scroll position isn't rounded away when the scrollbar's CSS is set
+                        // this flooring of delta would happened automatically when
+                        // bar.css is set below, but we floor here for clarity
+                        delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
+
+                        // scroll the scrollbar
+                        bar.css({ top: delta + 'px' });
+                    }
+
+                    // calculate actual scroll amount
+                    percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
+                    delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
+
+                    if (isJump) {
+                        delta = y;
+                        var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
+                        offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
+                        bar.css({ top: offsetTop + 'px' });
+                    }
+
+                    // scroll content
+                    me.scrollTop(delta);
+
+                    // fire scrolling event
+                    me.trigger('slimscrolling', ~~delta);
+
+                    // ensure bar is visible
+                    showBar();
+
+                    // trigger hide when scroll is stopped
+                    hideBar();
+                }
+
+                function attachWheel() {
+                    if (window.addEventListener) {
+                        this.addEventListener('DOMMouseScroll', _onWheel, false);
+                        this.addEventListener('mousewheel', _onWheel, false);
+                        this.addEventListener('MozMousePixelScroll', _onWheel, false);
+                    }
+                    else {
+                        document.attachEvent("onmousewheel", _onWheel)
+                    }
+                }
+
+                function getBarHeight() {
+                    // calculate scrollbar height and make sure it is not too small
+                    barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
+                    bar.css({ height: barHeight + 'px' });
+
+                    // hide scrollbar if content is not long enough
+                    var display = barHeight == me.outerHeight() ? 'none' : 'block';
+                    bar.css({ display: display });
+                }
+
+                function showBar() {
+                    // recalculate bar height
+                    getBarHeight();
+                    clearTimeout(queueHide);
+
+                    // when bar reached top or bottom
+                    if (percentScroll == ~~percentScroll) {
+                        //release wheel
+                        releaseScroll = o.allowPageScroll;
+
+                        // publish approporiate event
+                        if (lastScroll != percentScroll) {
+                            var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
+                            me.trigger('slimscroll', msg);
+                        }
+                    }
+                    else {
+                        releaseScroll = false;
+                    }
+                    lastScroll = percentScroll;
+
+                    // show only when required
+                    if (barHeight >= me.outerHeight()) {
+                        //allow window scroll
+                        releaseScroll = true;
+                        return;
+                    }
+                    bar.stop(true, true).fadeIn('fast');
+                    if (o.railVisible) { rail.stop(true, true).fadeIn('fast'); }
+                }
+
+                function hideBar() {
+                    // only hide when options allow it
+                    if (!o.alwaysVisible) {
+                        queueHide = setTimeout(function () {
+                            if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg) {
+                                bar.fadeOut('slow');
+                                rail.fadeOut('slow');
+                            }
+                        }, 1000);
+                    }
+                }
+
+            });
+
+            // maintain chainability
+            return this;
+        }
+    });
+
+    jQuery.fn.extend({
+        slimscroll: jQuery.fn.slimScroll
+    });
+
+})(jQuery);
\ No newline at end of file

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
+import config from '../config'
 Vue.use(Router)
 export default new Router({
   mode: 'history',
+  base: `/${config.project}/`,
   routes: [
     {
       path: '/',