├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── menu1.png
    │   ├── menu2.png
    │   ├── menu3.png
    │   ├── menu4.png
    │   ├── menu5.png
    │   └── menu6.png
    ├── pages
    │   ├── goodsComment
    │   │   └── index.vue
    │   ├── member
    │   │   └── index.vue
    │   ├── search
    │   │   └── index.vue
    │   ├── goodsDesc
    │   │   └── index.vue
    │   ├── newsList
    │   │   └── index.vue
    │   ├── newsInfo
    │   │   └── index.vue
    │   ├── photoInfo
    │   │   └── index.vue
    │   ├── home
    │   │   └── index.vue
    │   ├── photoList
    │   │   └── index.vue
    │   ├── shopcar
    │   │   └── index.vue
    │   ├── goodsList
    │   │   └── index.vue
    │   └── goodsInfo
    │   │   └── index.vue
    ├── libs
    │   └── mui
    │   │   ├── fonts
    │   │       ├── mui.ttf
    │   │       └── mui-icons-extra.ttf
    │   │   └── css
    │   │       ├── icons-extra.css
    │   │       └── mui.min.css
    ├── components
    │   ├── swiper.vue
    │   ├── HelloWorld.vue
    │   └── comment.vue
    ├── styles
    │   └── common.css
    ├── router
    │   └── index.js
    ├── App.vue
    └── main.js
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── index.html
├── .babelrc
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/menu1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/assets/menu1.png


--------------------------------------------------------------------------------
/src/assets/menu2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/assets/menu2.png


--------------------------------------------------------------------------------
/src/assets/menu3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/assets/menu3.png


--------------------------------------------------------------------------------
/src/assets/menu4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/assets/menu4.png


--------------------------------------------------------------------------------
/src/assets/menu5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/assets/menu5.png


--------------------------------------------------------------------------------
/src/assets/menu6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/assets/menu6.png


--------------------------------------------------------------------------------
/src/pages/goodsComment/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <comment :id="$route.params.id"></comment>
3 | </template>


--------------------------------------------------------------------------------
/src/libs/mui/fonts/mui.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/libs/mui/fonts/mui.ttf


--------------------------------------------------------------------------------
/src/libs/mui/fonts/mui-icons-extra.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TianchengLee/vue-cms23/master/src/libs/mui/fonts/mui-icons-extra.ttf


--------------------------------------------------------------------------------
/src/pages/member/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="member-container">
3 |     <h1>memberContainer</h1>
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/src/pages/search/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="search-container">
3 |     <h1>searchContainer</h1>
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-cms23</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"],
12 |   "ignore": [
13 |     "./src/libs/mui/js/mui.js",
14 |     "./src/libs/mui/js/mui.min.js",
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-cms23
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/src/components/swiper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <mt-swipe :auto="4000">
 4 |       <mt-swipe-item v-for="(item, index) in banners" :key="index">
 5 |         <a :href="item.url">
 6 |           <img :class="{ full: fullscreen }" :src="item.img || item.src">
 7 |         </a>
 8 |       </mt-swipe-item>
 9 |     </mt-swipe>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   // 如果没有传入 应该是undefined
16 |   props: ['banners', 'fullscreen']
17 | }
18 | </script>
19 | 
20 | <style lang="less" scoped>
21 | .mint-swipe {
22 |   height: 200px;
23 |   .mint-swipe-item {
24 |     text-align: center;
25 |     img {
26 |       height: 100%;
27 |     }
28 |     img.full {
29 |       width: 100%;
30 |     }
31 |   }
32 | }
33 | </style>


--------------------------------------------------------------------------------
/src/pages/goodsDesc/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="goodsdesc-container">
 3 |     <h3>{{ info.title }}</h3>
 4 | 
 5 |     <hr>
 6 | 
 7 |     <div class="content" v-html="info.content"></div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       info: {} // 图文数据
16 |     };
17 |   },
18 |   created() {
19 |     this.getGoodsDesc();
20 |   },
21 |   methods: {
22 |     getGoodsDesc() {
23 |       this.$http
24 |         .get("goods/getdesc/" + this.$route.params.id)
25 |         .then(result => {
26 |           if (result.body.status === 0) {
27 |             this.info = result.body.message[0];
28 |           }
29 |         });
30 |     }
31 |   }
32 | };
33 | </script>
34 | 
35 | <style lang="less">
36 | .goodsdesc-container {
37 |   padding: 4px;
38 |   h3 {
39 |     font-size: 16px;
40 |     color: #226aff;
41 |     text-align: center;
42 |     margin: 15px 0;
43 |   }
44 |   .content{
45 |     img{
46 |       width: 100%;
47 |     }
48 |   }
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <mt-button type="default">default</mt-button>
 5 |     <mt-button type="primary">primary</mt-button>
 6 |     <mt-button type="danger">danger</mt-button>
 7 |     <div>
 8 |       <mt-button @click="showToast" size="large" type="danger">danger</mt-button>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { Toast } from 'mint-ui'
15 | export default {
16 |   name: "HelloWorld",
17 |   data() {
18 |     return {
19 |       msg: "Welcome to Your Vue.js App"
20 |     };
21 |   },
22 |   methods: {
23 |     showToast() {
24 |       // 如果使用的是js组件, 并且需要调用函数或对象的方法, 必须先引入对应的成员
25 |       Toast('提示信息')
26 |     }
27 |   }
28 | };
29 | </script>
30 | 
31 | <!-- Add "scoped" attribute to limit CSS to this component only -->
32 | <style scoped>
33 | h1,
34 | h2 {
35 |   font-weight: normal;
36 | }
37 | ul {
38 |   list-style-type: none;
39 |   padding: 0;
40 | }
41 | li {
42 |   display: inline-block;
43 |   margin: 0 10px;
44 | }
45 | a {
46 |   color: #42b983;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/src/styles/common.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure, 
28 | footer, header, hgroup, menu, nav, section {
29 | 	display: block;
30 | }
31 | body {
32 | 	line-height: 1;
33 | }
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }


--------------------------------------------------------------------------------
/src/pages/newsList/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="news-list-container">
 3 |     <ul class="mui-table-view">
 4 |       <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
 5 |         <router-link :to="'/home/newsInfo/' + item.id">
 6 |           <img class="mui-media-object mui-pull-left" :src="item.img_url">
 7 |           <div class="mui-media-body">
 8 |             <h1>{{ item.title }}</h1>
 9 |             <p class="mui-ellipsis">
10 |               <span>发表时间：{{ item.add_time | dateFormat  }}</span>
11 |               <span>点击：{{item.click}}次</span>
12 |             </p>
13 |           </div>
14 |         </router-link>
15 |       </li>
16 |     </ul>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   data() {
23 |     return {
24 |       newsList: []
25 |     };
26 |   },
27 |   created() {
28 |     this.getNewsList();
29 |   },
30 |   methods: {
31 |     getNewsList() {
32 |       // 发送ajax请求  获取新闻列表数据
33 |       // vue-resource
34 |       this.$http.get("getnewslist").then(result => {
35 |         this.newsList = result.body.message;
36 |       });
37 |     }
38 |   },
39 |   // filters: {
40 |   //   dateFormat(msg) {
41 |   //     return 
42 |   //   }
43 |   // }
44 | };
45 | </script>
46 | 
47 | <style lang="less" scoped>
48 | .mui-table-view {
49 |   li {
50 |     h1 {
51 |       font-size: 14px;
52 |     }
53 |     .mui-ellipsis {
54 |       font-size: 12px;
55 |       color: #226aff;
56 |       display: flex;
57 |       justify-content: space-between;
58 |     }
59 |   }
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/pages/newsInfo/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="newsinfo-container">
 3 |     <!-- 大标题 -->
 4 |     <h3 class="title">{{ newsInfo.title }}</h3>
 5 |     <!-- 子标题 -->
 6 |     <p class="subtitle">
 7 |       <span>发表时间：{{ newsInfo.add_time | dateFormat }}</span>
 8 |       <span>点击：{{ newsInfo.click }}次</span>
 9 |     </p>
10 | 
11 |     <hr>
12 | 
13 |     <!-- 内容区域 -->
14 |     <div class="content" v-html="newsInfo.content"></div>
15 | 
16 |     <!-- 评论子组件 -->
17 |     <comment :id="id"></comment>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | // import comment from '../../components/comment'
23 | 
24 | export default {
25 |   data() {
26 |     return {
27 |       id: this.$route.params.id, // 将 URL 地址中传递过来的 Id值，挂载到 data上，方便以后调用
28 |       newsInfo: {} // 新闻对象
29 |     };
30 |   },
31 |   created() {
32 |     this.getNewsInfo();
33 |   },
34 |   methods: {
35 |     getNewsInfo() {
36 |       // 获取新闻详情
37 |       this.$http.get("getnew/" + this.id).then(result => {
38 |         this.newsInfo = result.body.message[0];
39 |       });
40 |     }
41 |   },
42 |   // 注册私有组件
43 |   // components: {
44 |   //   comment
45 |   // }
46 | };
47 | </script>
48 | 
49 | <style lang="less">
50 | // scoped的作用, 是为了限制样式只在当前组件中生效, 不会影响其他组件
51 | // 原理是给当前组件内所有的标签都加入了一个唯一的标识符属性 data-v-1fdaa4e8
52 | // 然后, 在设置样式的时候 利用 属性选择器 来设置
53 | .newsinfo-container {
54 |   padding: 0 4px;
55 |   .title {
56 |     font-size: 16px;
57 |     text-align: center;
58 |     margin: 15px 0;
59 |     color: red;
60 |   }
61 |   .subtitle {
62 |     font-size: 13px;
63 |     color: #226aff;
64 |     display: flex;
65 |     justify-content: space-between;
66 |   }
67 |   .content{
68 |     img {
69 |       width: 100%;
70 |     }
71 |   }
72 | }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | // @就是src目录
 4 | // import HelloWorld from '@/components/HelloWorld'
 5 | import homeComponent from '../pages/home'
 6 | import memberComponent from '../pages/member'
 7 | import shopcarComponent from '../pages/shopcar'
 8 | import searchComponent from '../pages/search'
 9 | import newsListComponent from '../pages/newsList'
10 | import newsInfoComponent from '../pages/newsInfo'
11 | import photoListComponent from '../pages/photoList'
12 | import photoInfoComponent from '../pages/photoInfo'
13 | import goodsListComponent from '../pages/goodsList'
14 | import goodsInfoComponent from '../pages/goodsInfo'
15 | import goodsDescComponent from '../pages/goodsDesc'
16 | import goodsCommentComponent from '../pages/goodsComment'
17 | 
18 | Vue.use(Router)
19 | 
20 | export default new Router({
21 |   routes: [ // 路由的匹配规则
22 |     { path: '/', redirect: '/home' },
23 |     { path: '/home', component: homeComponent },
24 |     { path: '/member', component: memberComponent },
25 |     { path: '/shopcar', component: shopcarComponent },
26 |     { path: '/search', component: searchComponent },
27 |     { path: '/home/newsList', component: newsListComponent },
28 |     { path: '/home/newsInfo/:id', component: newsInfoComponent },
29 |     { path: '/home/photoList', component: photoListComponent },
30 |     { path: '/home/photoInfo/:id', component: photoInfoComponent },
31 |     { path: '/home/goodsList', component: goodsListComponent },
32 |     { path: '/home/goodsInfo/:id', component: goodsInfoComponent },
33 |     { path: '/home/goodsDesc/:id', component: goodsDescComponent },
34 |     { path: '/home/goodsComment/:id', component: goodsCommentComponent },
35 |     // {
36 |     //   // 当用户访问 / 目录时  会在App.vue的router-view组件的地方显示HelloWorld组件
37 |     //   path: '/',
38 |     //   name: 'HelloWorld',
39 |     //   component: HelloWorld
40 |     // }
41 |   ],
42 |   linkActiveClass: 'mui-active' // 类库
43 | })
44 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-cms23",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "TianchengLee <ltc6634284@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "mint-ui": "^2.2.13",
14 |     "moment": "^2.24.0",
15 |     "vue": "^2.5.2",
16 |     "vue-pic-preview": "^1.0.2",
17 |     "vue-resource": "^1.5.1",
18 |     "vue-router": "^3.0.1",
19 |     "vue-scroller": "^2.2.4",
20 |     "vuex": "^3.1.0"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^7.1.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
26 |     "babel-loader": "^7.1.1",
27 |     "babel-plugin-syntax-jsx": "^6.18.0",
28 |     "babel-plugin-transform-runtime": "^6.22.0",
29 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
30 |     "babel-preset-env": "^1.3.2",
31 |     "babel-preset-stage-2": "^6.22.0",
32 |     "chalk": "^2.0.1",
33 |     "copy-webpack-plugin": "^4.0.1",
34 |     "css-loader": "^0.28.0",
35 |     "extract-text-webpack-plugin": "^3.0.0",
36 |     "file-loader": "^1.1.4",
37 |     "friendly-errors-webpack-plugin": "^1.6.1",
38 |     "html-webpack-plugin": "^2.30.1",
39 |     "less": "^3.9.0",
40 |     "less-loader": "^4.1.0",
41 |     "node-notifier": "^5.1.2",
42 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
43 |     "ora": "^1.2.0",
44 |     "portfinder": "^1.0.13",
45 |     "postcss-import": "^11.0.0",
46 |     "postcss-loader": "^2.0.8",
47 |     "postcss-url": "^7.2.1",
48 |     "rimraf": "^2.6.0",
49 |     "semver": "^5.3.0",
50 |     "shelljs": "^0.7.6",
51 |     "uglifyjs-webpack-plugin": "^1.1.1",
52 |     "url-loader": "^0.5.8",
53 |     "vue-loader": "^13.3.0",
54 |     "vue-style-loader": "^3.0.1",
55 |     "vue-template-compiler": "^2.5.2",
56 |     "webpack": "^3.6.0",
57 |     "webpack-bundle-analyzer": "^2.9.0",
58 |     "webpack-dev-server": "^2.9.1",
59 |     "webpack-merge": "^4.1.0"
60 |   },
61 |   "engines": {
62 |     "node": ">= 6.0.0",
63 |     "npm": ">= 3.0.0"
64 |   },
65 |   "browserslist": [
66 |     "> 1%",
67 |     "last 2 versions",
68 |     "not ie <= 8"
69 |   ]
70 | }
71 | 


--------------------------------------------------------------------------------
/src/pages/photoInfo/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="photoinfo-container">
 3 |     <h3>{{ photoinfo.title }}</h3>
 4 |     <p class="subtitle">
 5 |       <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
 6 |       <span>点击：{{ photoinfo.click }}次</span>
 7 |     </p>
 8 | 
 9 |     <hr>
10 | 
11 |     <!-- 缩略图区域 -->
12 |     <div class="thumbs">
13 |        <img 
14 |        class="preview-img" 
15 |        v-for="(item, index) in list"
16 |        :key="index"
17 |        :src="item.src" 
18 |        height="100" 
19 |        @click="$preview.open(index, list)" />
20 |     </div>
21 | 
22 |     <!-- 图片内容区域 -->
23 |     <div class="content" v-html="photoinfo.content"></div>
24 | 
25 |     <!-- 放置一个现成的 评论子组件 -->
26 |     <comment :id="id"></comment>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   data() {
33 |     return {
34 |       id: this.$route.params.id, // 从路由中获取到的 图片Id
35 |       photoinfo: {}, // 图片详情
36 |       list: [] // 缩略图的数组
37 |     };
38 |   },
39 |   created() {
40 |     this.getPhotoInfo();
41 |     this.getThumbs();
42 |   },
43 |   methods: {
44 |     getPhotoInfo() {
45 |       // 获取图片的详情
46 |       this.$http.get("getimageInfo/" + this.id).then(result => {
47 |         if (result.body.status === 0) {
48 |           this.photoinfo = result.body.message[0];
49 |         }
50 |       });
51 |     },
52 |     getThumbs() {
53 |       // 获取缩略图
54 |       this.$http.get("getthumimages/" + this.id).then(result => {
55 |         if (result.body.status === 0) {
56 |           // 循环每个图片数据，补全图片的宽和高
57 |           result.body.message.forEach(item => {
58 |             item.w = 600;
59 |             item.h = 400;
60 |           });
61 |           // 把完整的数据保存到 list 中
62 |           this.list = result.body.message;
63 |         }
64 |       });
65 |     }
66 |   }
67 | };
68 | </script>
69 | 
70 | <style lang="less" scoped>
71 | .photoinfo-container {
72 |   padding: 3px;
73 |   h3 {
74 |     color: #26a2ff;
75 |     font-size: 15px;
76 |     text-align: center;
77 |     margin: 15px 0;
78 |   }
79 |   .subtitle {
80 |     display: flex;
81 |     justify-content: space-between;
82 |     font-size: 13px;
83 |   }
84 | 
85 |   .content {
86 |     font-size: 13px;
87 |     line-height: 30px;
88 |   }
89 | 
90 |   .thumbs{
91 |     img{
92 |       margin: 10px;
93 |       box-shadow: 0 0 8px #999;
94 |     }
95 |   }
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/libs/mui/css/icons-extra.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |     font-family: MuiiconSpread;
 3 |     font-weight: normal;
 4 |     font-style: normal;
 5 |     src:  url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */
 6 | }
 7 | .mui-icon-extra
 8 | {
 9 |     font-family: MuiiconSpread;
10 |     font-size: 24px;
11 |     font-weight: normal;
12 |     font-style: normal;
13 |     line-height: 1;
14 |     display: inline-block;
15 |     text-decoration: none;
16 |     -webkit-font-smoothing: antialiased;
17 | }
18 | .mui-icon-extra-cold:before { content: "\e500"; }
19 | .mui-icon-extra-share:before { content: "\e200"; }
20 | .mui-icon-extra-class:before { content: "\e118"; }
21 | .mui-icon-extra-custom:before { content: "\e117"; }
22 | .mui-icon-extra-new:before { content: "\e103"; }
23 | .mui-icon-extra-card:before { content: "\e104"; }
24 | .mui-icon-extra-grech:before { content: "\e105"; }
25 | .mui-icon-extra-trend:before { content: "\e106"; }
26 | .mui-icon-extra-filter:before { content: "\e207"; }
27 | .mui-icon-extra-holiday:before { content: "\e300"; }
28 | .mui-icon-extra-cart:before { content: "\e107"; }
29 | .mui-icon-extra-heart:before { content: "\e180"; }
30 | .mui-icon-extra-computer:before { content: "\e600"; }
31 | .mui-icon-extra-express:before { content: "\e108"; }
32 | .mui-icon-extra-gift:before { content: "\e109"; }
33 | .mui-icon-extra-gold:before { content: "\e102"; }
34 | .mui-icon-extra-lamp:before { content: "\e601"; }
35 | .mui-icon-extra-rank:before { content: "\e110"; }
36 | .mui-icon-extra-notice:before { content: "\e111"; }
37 | .mui-icon-extra-sweep:before { content: "\e202"; }
38 | .mui-icon-extra-arrowleftcricle:before { content: "\e401"; }
39 | .mui-icon-extra-dictionary:before { content: "\e602"; }
40 | .mui-icon-extra-heart-filled:before { content: "\e119"; }
41 | .mui-icon-extra-xiaoshuo:before { content: "\e607"; }
42 | .mui-icon-extra-top:before { content: "\e403"; }
43 | .mui-icon-extra-people:before { content: "\e203"; }
44 | .mui-icon-extra-topic:before { content: "\e603"; }
45 | .mui-icon-extra-hotel:before { content: "\e301"; }
46 | .mui-icon-extra-like:before { content: "\e206"; }
47 | .mui-icon-extra-regist:before { content: "\e201"; }
48 | .mui-icon-extra-order:before { content: "\e113"; }
49 | .mui-icon-extra-alipay:before { content: "\e114"; }
50 | .mui-icon-extra-find:before { content: "\e400"; }
51 | .mui-icon-extra-arrowrightcricle:before { content: "\e402"; }
52 | .mui-icon-extra-calendar:before { content: "\e115"; }
53 | .mui-icon-extra-prech:before { content: "\e116"; }
54 | .mui-icon-extra-cate:before { content: "\e501"; }
55 | .mui-icon-extra-comment:before { content: "\e209"; }
56 | .mui-icon-extra-at:before { content: "\e208"; }
57 | .mui-icon-extra-addpeople:before { content: "\e204"; }
58 | .mui-icon-extra-peoples:before { content: "\e205"; }
59 | .mui-icon-extra-calc:before { content: "\e101"; }
60 | .mui-icon-extra-classroom:before { content: "\e604"; }
61 | .mui-icon-extra-phone:before { content: "\e404"; }
62 | .mui-icon-extra-university:before { content: "\e605"; }
63 | .mui-icon-extra-outline:before { content: "\e606"; }
64 | 


--------------------------------------------------------------------------------
/src/pages/home/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home-container">
  3 |     <!-- 轮播图 -->
  4 |     <!-- <mt-swipe :auto="4000">
  5 |       <mt-swipe-item v-for="(item, index) in banners" :key="index">
  6 |         <a :href="item.url">
  7 |           <img :src="item.img">
  8 |         </a>
  9 |       </mt-swipe-item>
 10 |     </mt-swipe> -->
 11 | 
 12 |     <swiper :banners="banners" :fullscreen="true"></swiper>
 13 | 
 14 |     <!-- 九宫格 -->
 15 |     <ul class="mui-table-view mui-grid-view mui-grid-9">
 16 |       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 17 |         <router-link to="/home/newsList">
 18 |           <img src="@/assets/menu1.png" alt="">
 19 |           <div class="mui-media-body">新闻资讯</div>
 20 |         </router-link>
 21 |       </li>
 22 |       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 23 |         <router-link to="/home/photoList">
 24 |           <img src="@/assets/menu2.png" alt="">
 25 |           <div class="mui-media-body">图片分享</div>
 26 |         </router-link>
 27 |       </li>
 28 |       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 29 |         <router-link to="/home/goodsList">
 30 |           <img src="@/assets/menu3.png" alt="">
 31 |           <div class="mui-media-body">商品购买</div>
 32 |         </router-link>
 33 |       </li>
 34 |       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 35 |         <a href="#">
 36 |           <img src="@/assets/menu4.png" alt="">
 37 |           <div class="mui-media-body">留言反馈</div>
 38 |         </a>
 39 |       </li>
 40 |       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 41 |         <a href="#">
 42 |           <img src="@/assets/menu5.png" alt="">
 43 |           <div class="mui-media-body">视频专区</div>
 44 |         </a>
 45 |       </li>
 46 |       <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
 47 |         <a href="#">
 48 |           <img src="@/assets/menu6.png" alt="">
 49 |           <div class="mui-media-body">联系我们</div>
 50 |         </a>
 51 |       </li>
 52 |     </ul>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | export default {
 58 |   data() {
 59 |     return {
 60 |       banners: []
 61 |     };
 62 |   },
 63 |   created() {
 64 |     this.getBanner();
 65 |   },
 66 |   methods: {
 67 |     getBanner() {
 68 |       this.$http.get("getlunbo").then(result => {
 69 |         this.banners = result.body.message;
 70 |       });
 71 |     }
 72 |   }
 73 | };
 74 | </script>
 75 | 
 76 | <style lang="less">
 77 | .home-container {
 78 |   // .mint-swipe {
 79 |   //   height: 200px;
 80 |   //   .mint-swipe-item {
 81 |   //     img {
 82 |   //       width: 100%;
 83 |   //       height: 100%;
 84 |   //     }
 85 |   //   }
 86 |   // }
 87 |   .mui-table-view {
 88 |     background-color: #fff;
 89 |     img {
 90 |       width: 80%;
 91 |     }
 92 |     .mui-table-view-cell {
 93 |       border: none;
 94 |     }
 95 |     .mui-media-body {
 96 |       font-size: 13px !important;
 97 |     }
 98 |   }
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <mt-header fixed title="黑马程序员高端项目">
  4 |       <mt-button v-show="hasBackBtn" @click="$router.go(-1)" slot="left" icon="back">返回</mt-button>
  5 |     </mt-header>
  6 |     <transition name="app">
  7 |       <router-view/>
  8 |     </transition>
  9 |     <nav class="mui-bar mui-bar-tab">
 10 |       <router-link class="mui-tab-item1" to="/home">
 11 |         <span class="mui-icon mui-icon-home"></span>
 12 |         <span class="mui-tab-label">首页</span>
 13 |       </router-link>
 14 |       <router-link class="mui-tab-item1" to="/member">
 15 |         <span class="mui-icon mui-icon-contact"></span>
 16 |         <span class="mui-tab-label">会员</span>
 17 |       </router-link>
 18 |       <router-link class="mui-tab-item1" to="/shopcar">
 19 |         <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
 20 |           <span id="badge" class="mui-badge">{{ $store.getters.totalCount }}</span>
 21 |         </span>
 22 |         <span class="mui-tab-label">购物车</span>
 23 |       </router-link>
 24 |       <router-link class="mui-tab-item1" to="/search">
 25 |         <span class="mui-icon mui-icon-search"></span>
 26 |         <span class="mui-tab-label">搜索</span>
 27 |       </router-link>
 28 |     </nav>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | export default {
 34 |   name: "App",
 35 |   data() {
 36 |     return {
 37 |       hasBackBtn: this.$route.path !== "/home"
 38 |     };
 39 |   },
 40 |   watch: {
 41 |     // 第一个参数是新值, 第二个参数是旧值
 42 |     $route(to, from) {
 43 |       // console.log(to, from);
 44 |       // if (to.path === "/home") {
 45 |       //   this.hasBackBtn = false;
 46 |       // } else {
 47 |       //   this.hasBackBtn = true;
 48 |       // }
 49 | 
 50 |       // 高级
 51 |       this.hasBackBtn = to.path !== "/home"
 52 |     }
 53 |   }
 54 | };
 55 | </script>
 56 | 
 57 | <style lang="less">
 58 | #app {
 59 |   padding-top: 40px;
 60 |   padding-bottom: 50px;
 61 |   overflow-x: hidden;
 62 |   .mint-header.is-fixed {
 63 |     z-index: 999;
 64 |   }
 65 | }
 66 | 
 67 | .app-enter {
 68 |   opacity: 0;
 69 |   transform: translateX(100%);
 70 | }
 71 | 
 72 | .app-leave-to {
 73 |   opacity: 0;
 74 |   transform: translateX(-100%);
 75 |   position: absolute;
 76 | }
 77 | 
 78 | .app-enter-active,
 79 | .app-leave-active {
 80 |   transition: all 0.5s ease;
 81 | }
 82 | 
 83 | /* .router-link-active {
 84 |   color: skyblue !important;
 85 | } */
 86 | 
 87 | .mui-bar-tab .mui-tab-item1.mui-active {
 88 |   color: #007aff;
 89 | }
 90 | 
 91 | .mui-bar-tab .mui-tab-item1 {
 92 |   display: table-cell;
 93 |   overflow: hidden;
 94 |   width: 1%;
 95 |   height: 50px;
 96 |   text-align: center;
 97 |   vertical-align: middle;
 98 |   white-space: nowrap;
 99 |   text-overflow: ellipsis;
100 |   color: #929292;
101 | }
102 | 
103 | .mui-bar-tab .mui-tab-item1 .mui-icon {
104 |   top: 3px;
105 |   width: 24px;
106 |   height: 24px;
107 |   padding-top: 0;
108 |   padding-bottom: 0;
109 | }
110 | 
111 | .mui-bar-tab .mui-tab-item1 .mui-icon ~ .mui-tab-label {
112 |   font-size: 11px;
113 |   display: block;
114 |   overflow: hidden;
115 |   text-overflow: ellipsis;
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/pages/photoList/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="slider" class="mui-slider">
  4 |       <div
  5 |         id="sliderSegmentedControl"
  6 |         class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
  7 |       >
  8 |         <div class="mui-scroll">
  9 |           <a
 10 |             :class="['mui-control-item', { 'mui-active' : item.id == 0 } ]"
 11 |             v-for="(item) in categories"
 12 |             :key="item.id"
 13 |             @click="getPhotoList(item.id)"
 14 |           >{{item.title}}</a>
 15 |         </div>
 16 |       </div>
 17 |     </div>
 18 |     <!-- 图片列表区域 -->
 19 |     <ul class="photo-list">
 20 |       <router-link v-for="item in photoList" :key="item.id" :to="'/home/photoInfo/' + item.id" tag="li">
 21 |         <img v-lazy="item.img_url">
 22 |         <div class="info">
 23 |           <h1 class="info-title">{{ item.title }}</h1>
 24 |           <div class="info-body">{{ item.zhaiyao }}</div>
 25 |         </div>
 26 |       </router-link>
 27 |     </ul>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | //bug1: 删除mui-fullscreen
 33 | 
 34 | // 导入mui.js
 35 | import mui from "@/libs/mui/js/mui.min.js";
 36 | // bug2: 导入mui之后, 发现报错: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
 37 | // 意思是 在严格模式下无法使用caller, callee, arguments
 38 | // 在webpack4以后, 强制开启严格模式, 并且无法关闭
 39 | // babel 可以选择忽略某个js文件的转译
 40 | // 初始化区域滚动组件时用到了mui, 而mui内部调用了callee或caller或arguments
 41 | // 解决方案: 在 .babelrc 配置中添加js文件的忽略
 42 | 
 43 | // bug4: 解决完以上Bug之后, tabBar无法切换了
 44 | // 解决方案: 将mui-tab-item类名换一个即可
 45 | export default {
 46 |   created() {
 47 |     this.getCategories();
 48 |     this.getPhotoList(0);
 49 |   },
 50 |   mounted() {
 51 |     // bug3: 第一次进入时无法滚动
 52 |     // 初始化操作必须要放在mounted钩子中, 让DOM元素加载完毕后才可以初始化
 53 |     mui(".mui-scroll-wrapper").scroll({
 54 |       deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
 55 |     });
 56 |   },
 57 |   data() {
 58 |     return {
 59 |       categories: [],
 60 |       photoList: []
 61 |     };
 62 |   },
 63 |   methods: {
 64 |     getCategories() {
 65 |       this.$http.get("getimgcategory").then(result => {
 66 |         this.categories = result.body.message;
 67 |         this.categories.unshift({
 68 |           id: 0,
 69 |           title: "全部"
 70 |         });
 71 |       });
 72 |     },
 73 |     getPhotoList(cateId) {
 74 |       this.$http.get("getimages/" + cateId).then(result => {
 75 |         this.photoList = result.body.message;
 76 |       });
 77 |     }
 78 |   }
 79 | };
 80 | </script>
 81 | 
 82 | <style lang="less">
 83 | * {
 84 |   touch-action: pan-y;
 85 | }
 86 | 
 87 | .photo-list {
 88 |   list-style: none;
 89 |   margin: 0;
 90 |   padding: 10px;
 91 |   padding-bottom: 0;
 92 |   li {
 93 |     background-color: #ccc;
 94 |     text-align: center;
 95 |     margin-bottom: 10px;
 96 |     box-shadow: 0 0 9px #999;
 97 |     position: relative;
 98 |     img {
 99 |       width: 100%;
100 |       vertical-align: middle;
101 |     }
102 |     img[lazy="loading"] {
103 |       width: 40px;
104 |       height: 300px;
105 |       margin: auto;
106 |     }
107 | 
108 |     .info {
109 |       color: white;
110 |       text-align: left;
111 |       position: absolute;
112 |       bottom: 0;
113 |       background-color: rgba(0, 0, 0, 0.4);
114 |       max-height: 84px;
115 |       .info-title {
116 |         font-size: 14px;
117 |       }
118 |       .info-body {
119 |         font-size: 13px;
120 |       }
121 |     }
122 |   }
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/components/comment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cmt-container">
  3 |     <h3>发表评论</h3>
  4 |     <hr>
  5 |     <textarea v-model="commentContent" placeholder="请输入要BB的内容（做多吐槽120字）" maxlength="120"></textarea>
  6 | 
  7 |     <mt-button @click="postComment" type="primary" size="large">发表评论</mt-button>
  8 | 
  9 |     <div class="cmt-list">
 10 |       <div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
 11 |         <div
 12 |           class="cmt-title"
 13 |         >第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}</div>
 14 |         <div class="cmt-body">{{ item.content === 'undefined' ? '此用户很懒，嘛都没说': item.content }}</div>
 15 |       </div>
 16 |     </div>
 17 |     <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
 18 |   </div>
 19 | </template>
 20 | 
 21 | 
 22 | <script>
 23 | import { Toast } from "mint-ui";
 24 | 
 25 | export default {
 26 |   data() {
 27 |     return {
 28 |       pageIndex: 1, // 默认展示第一页数据
 29 |       comments: [], // 所有的评论数据
 30 |       commentContent: ""
 31 |     };
 32 |   },
 33 |   created() {
 34 |     this.getComments();
 35 |   },
 36 |   methods: {
 37 |     getComments() {
 38 |       // 获取评论
 39 |       this.$http
 40 |         .get("getcomments/" + this.id + "?pageindex=" + this.pageIndex)
 41 |         .then(result => {
 42 |           // this.comments = result.body.message;
 43 |           // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
 44 |           // concat 方法连接数组, 不会修改原数组, 而是返回一个新数组
 45 |           this.comments = this.comments.concat(result.body.message);
 46 |         });
 47 |     },
 48 |     getMore() {
 49 |       // 加载更多
 50 |       this.pageIndex++;
 51 |       this.getComments();
 52 |     },
 53 |     postComment() {
 54 |       // 1. 想办法把用户输入的内容提交给服务器
 55 |       //  1.1 双向数据绑定textarea, 以便获取数据
 56 |       //  1.2 当用户点击按钮时, 获取数据, 并且做非空校验
 57 |       if (this.commentContent.trim().length === 0)
 58 |         return Toast("评论内容不能为空哦亲!");
 59 |       //  1.3 发送ajax请求将内容提交给服务器
 60 |       this.$http
 61 |         .post("postcomment/" + this.id, { content: this.commentContent })
 62 |         .then(result => {
 63 |           // console.log(result.body)
 64 |           Toast(result.body.message);
 65 |           // // 2. 让用户看到最新的数据在1楼
 66 |           // //  2.1 手动制造一个评论数据  加入当前comments中, vue会重新渲染
 67 | 
 68 |           // // add_time:"2019-02-15T02:58:21.000Z"
 69 |           // // content:"aaaa"
 70 |           // // user_name:"匿名用户"
 71 |           // this.comments.unshift({
 72 |           //   add_time: Date.now(),
 73 |           //   content: this.commentContent,
 74 |           //   user_name: '匿名用户',
 75 |           // })
 76 | 
 77 |           // this.commentContent = ''
 78 |           //  2.2 重新调用getComments
 79 |           // 调用getComments之前, 需要注意几个问题:
 80 |           //   1. 原有的数据需要被清空否则会出现重复拼接
 81 |           //   2. 将pageIndex重置为1
 82 |           this.comments = [];
 83 |           this.pageIndex = 1;
 84 |           this.getComments();
 85 |           // 清空评论输入框
 86 |           this.commentContent = "";
 87 |         });
 88 |     }
 89 |   },
 90 |   props: ["id"]
 91 | };
 92 | </script>
 93 | 
 94 | <style lang="less" scoped>
 95 | .cmt-container {
 96 |   h3 {
 97 |     font-size: 18px;
 98 |   }
 99 |   textarea {
100 |     font-size: 14px;
101 |     height: 85px;
102 |     margin: 0;
103 |   }
104 | 
105 |   .cmt-list {
106 |     margin: 5px 0;
107 |     .cmt-item {
108 |       font-size: 13px;
109 |       .cmt-title {
110 |         line-height: 30px;
111 |         background-color: #ccc;
112 |       }
113 |       .cmt-body {
114 |         line-height: 35px;
115 |         text-indent: 2em;
116 |       }
117 |     }
118 |   }
119 | }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/src/pages/shopcar/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="shopcar-container">
  3 |     <div class="goods-list">
  4 |       <!-- 商品列表项区域 -->
  5 |       <div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
  6 |         <div class="mui-card-content">
  7 |           <div class="mui-card-content-inner">
  8 |             <mt-switch
  9 |               @change="goodsStateChanged(item.id, $store.getters.goodsSelected[item.id])"
 10 |               :value="$store.getters.goodsSelected[item.id]"
 11 |             ></mt-switch>
 12 |             <img :src="item.thumb_path">
 13 |             <div class="info">
 14 |               <h1>{{ item.title }}</h1>
 15 |               <!-- 问题：如何从购物车中获取商品的数量呢 -->
 16 |               <!-- 1. 我们可以先创建一个 空对象，然后循环购物车中所有商品的数据， 把 当前循环这条商品的 Id， 作为 对象 的 属性名，count值作为 对象的 属性值，这样，当把所有的商品循环一遍，就会得到一个对象： { 88: 2, 89: 1, 90: 4 } -->
 17 |               <div class="numbox">
 18 |                 <span class="price">￥{{ item.sell_price }}</span>
 19 |                 <div class="num">
 20 |                   <input @click="subtract(item.id)" type="button" value="-">
 21 |                   <input v-model="goodsCount[item.id]" type="number">
 22 |                   <input @click="increment(item.id)" type="button" value="+">
 23 |                 </div>
 24 |                 <a href="#" @click.prevent="remove(item.id, i)">删除</a>
 25 |               </div>
 26 |             </div>
 27 |           </div>
 28 |         </div>
 29 |       </div>
 30 |     </div>
 31 | 
 32 |     <!-- 结算区域 -->
 33 |     <div class="mui-card">
 34 |       <div class="mui-card-content">
 35 |         <div class="mui-card-content-inner jiesuan">
 36 |           <div class="left">
 37 |             <p>总计（不含运费）</p>
 38 |             <p>
 39 |               已勾选商品
 40 |               <span class="red">{{ $store.getters.goodsCountAndAmount.count }}</span> 件， 总价
 41 |               <span class="red">￥{{ $store.getters.goodsCountAndAmount.amount }}</span>
 42 |             </p>
 43 |           </div>
 44 |           <mt-button type="danger">去结算</mt-button>
 45 |         </div>
 46 |       </div>
 47 |     </div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | export default {
 53 |   data() {
 54 |     return {
 55 |       goodsCount: this.$store.getters.goodsCount,
 56 |       goodslist: [] // 购物车中所有商品的数据
 57 |     };
 58 |   },
 59 |   created() {
 60 |     this.getGoodsList();
 61 |   },
 62 |   methods: {
 63 |     getGoodsList() {
 64 |       // 1. 获取到 store 中所有的商品的Id，然后拼接出一个 用逗号分隔的 字符串
 65 |       var idArr = [];
 66 |       this.$store.state.car.forEach(item => idArr.push(item.id));
 67 |       // 如果 购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
 68 |       if (idArr.length <= 0) {
 69 |         return;
 70 |       }
 71 |       // 获取购物车商品列表
 72 |       this.$http.get("goods/getshopcarlist/" + idArr.join(",")).then(result => {
 73 |         if (result.body.status === 0) {
 74 |           this.goodslist = result.body.message;
 75 |         }
 76 |       });
 77 |     },
 78 |     subtract(id) {
 79 |       this.goodsCount[id] > 1 && this.goodsCount[id]--;
 80 |       this.$store.commit("updateCount", { id, count: this.goodsCount[id] });
 81 |     },
 82 |     increment(id) {
 83 |       this.goodsCount[id]++;
 84 |       this.$store.commit("updateCount", { id, count: this.goodsCount[id] });
 85 |     },
 86 |     remove(id, i) {
 87 |       this.goodslist.splice(i, 1);
 88 |       this.$store.commit("removeFromCar", id);
 89 |     },
 90 |     goodsStateChanged(id, selected) {
 91 |       // console.log("嘿嘿嘿我触发了", id, selected);
 92 |       // 修改vuex中的数据
 93 |       this.$store.commit("updateSelected", { id, selected });
 94 |     }
 95 |   }
 96 | };
 97 | </script>
 98 | 
 99 | <style lang="less" scoped>
100 | .shopcar-container {
101 |   background-color: #eee;
102 |   overflow: hidden;
103 |   .goods-list {
104 |     .mui-card-content-inner {
105 |       display: flex;
106 |       align-items: center;
107 |     }
108 |     .numbox {
109 |       display: flex;
110 |       height: 50px;
111 |       align-items: center;
112 |       justify-content: space-between;
113 |       input {
114 |         float: left;
115 |         width: 30px;
116 |         height: 30px;
117 |         padding: 0;
118 |         margin: 0;
119 |         text-align: center;
120 | 
121 |         &[type="number"] {
122 |           border-left: 0;
123 |           border-right: 0;
124 |           font-size: 12px;
125 |           color: gray;
126 |         }
127 |       }
128 |     }
129 |     img {
130 |       width: 60px;
131 |     }
132 |     h1 {
133 |       font-size: 13px;
134 |     }
135 |     .info {
136 |       display: flex;
137 |       flex-direction: column;
138 |       justify-content: space-between;
139 |       .price {
140 |         color: red;
141 |         font-weight: bold;
142 |       }
143 |     }
144 |   }
145 |   .jiesuan {
146 |     display: flex;
147 |     justify-content: space-between;
148 |     align-items: center;
149 |     .red {
150 |       color: red;
151 |       font-weight: bold;
152 |       font-size: 16px;
153 |     }
154 |   }
155 | }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import App from './App'
  3 | import router from './router'
  4 | 
  5 | import VueResource from 'vue-resource'
  6 | Vue.use(VueResource)
  7 | 
  8 | // 设置vue-resource的请求根路径
  9 | Vue.http.options.root = 'http://www.lovegf.cn:8899/api/';
 10 | 
 11 | // css reset  css初始化
 12 | import './styles/common.css'
 13 | // 引入mui的css文件
 14 | import './libs/mui/css/mui.css'
 15 | // 引入mui扩展字体的css文件
 16 | import './libs/mui/css/icons-extra.css'
 17 | 
 18 | // 1.导入mint-ui和其样式文件
 19 | import MintUI from 'mint-ui'
 20 | import 'mint-ui/lib/style.css'
 21 | 
 22 | // 2.安装mint-ui(全局注册所有的组件)
 23 | Vue.use(MintUI)
 24 | 
 25 | // require('./config') // 表示引入config目录下的 : index.js index.json index.node index
 26 | 
 27 | Vue.config.productionTip = false
 28 | 
 29 | import moment from 'moment'
 30 | 
 31 | // 定义全局过滤器
 32 | Vue.filter('dateFormat', function (dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
 33 |   return moment(dateStr).format(pattern)
 34 | })
 35 | 
 36 | // 全局注册组件
 37 | import comment from './components/comment.vue'
 38 | Vue.component('comment', comment)
 39 | 
 40 | import swiper from './components/swiper.vue'
 41 | Vue.component('swiper', swiper)
 42 | 
 43 | // 安装vue-pic-preview
 44 | import VuePreview from 'vue-pic-preview'
 45 | Vue.use(VuePreview)
 46 | 
 47 | // 安装Vuex
 48 | import Vuex from 'vuex'
 49 | Vue.use(Vuex)
 50 | 
 51 | // 安装vue-scroller组件
 52 | import VueScroller from 'vue-scroller'
 53 | Vue.use(VueScroller)
 54 | 
 55 | // 页面刚加载时读取
 56 | // 只要修改了数据就要保存
 57 | let car = JSON.parse(localStorage.getItem('car') || '[]')
 58 | 
 59 | let store = new Vuex.Store({
 60 |   state: {
 61 |     car // {id, price, count, selected}
 62 |   },
 63 |   mutations: {
 64 |     addToCar(state, goodsInfo) {
 65 |       // 加入购物车的业务逻辑:
 66 |       // 1. 即将要加入的商品是否在购物车已存在, 
 67 |       // 2. 如果存在只需要更新数量信息即可
 68 |       // 3. 如果不存在只需要push进car数组即可
 69 | 
 70 |       // 假设法
 71 |       // let flag = false
 72 |       // state.car.some(item => {
 73 |       //   if (item.id === goodsInfo.id) {
 74 |       //     item.count += parseInt(goodsInfo.count)
 75 |       //     // 当前要加入购物车的商品已存在于car中
 76 |       //     return flag = true
 77 |       //   }
 78 |       // })
 79 |       // // false表示没找到  在购物车中没有这个商品信息
 80 |       // if (!flag) {
 81 |       //   state.car.push(goodsInfo)
 82 |       // }
 83 | 
 84 |       // some forEach every filter findIndex
 85 |       // findIndex的作用是用来根据条件查找索引
 86 |       // 如果goodsInfo在car中存在, 就会返回goodsInfo的索引
 87 |       // 如果不存在返回-1
 88 |       // let index = state.car.findIndex(item => {
 89 |       //   if (item.id === goodsInfo.id) {
 90 |       //     return true
 91 |       //   }
 92 |       // })
 93 | 
 94 |       // 不使用假设法
 95 |       let index = state.car.findIndex(item => item.id === goodsInfo.id)
 96 |       if (index === -1) {
 97 |         // 表示没找到  不存在于购物车中
 98 |         state.car.push(goodsInfo)
 99 |       } else {
100 |         // 表示找到了  确实在购物车中已经有该商品了
101 |         state.car[index].count += parseInt(goodsInfo.count)
102 |       }
103 | 
104 |       localStorage.setItem('car', JSON.stringify(state.car))
105 |     },
106 |     // 这里的goodsInfo只需要有id和count即可
107 |     updateCount(state, goodsInfo) { // 用于更新数量
108 |       state.car.some(item => {
109 |         if (item.id === goodsInfo.id) {
110 |           item.count = goodsInfo.count
111 |           return true
112 |         }
113 |       })
114 | 
115 |       localStorage.setItem('car', JSON.stringify(state.car))
116 |     },
117 |     removeFromCar(state, id) {
118 |       state.car.some((item, i) => {
119 |         if (item.id === id) {
120 |           state.car.splice(i, 1)
121 |           return true
122 |         }
123 |       })
124 | 
125 |       localStorage.setItem('car', JSON.stringify(state.car))
126 |     },
127 |     // 这里的goodsInfo只需要有id和count即可
128 |     updateSelected(state, goodsInfo) { // 用于更新数量
129 |       state.car.some(item => {
130 |         if (item.id === goodsInfo.id) {
131 |           item.selected = !goodsInfo.selected
132 |           return true
133 |         }
134 |       })
135 | 
136 |       localStorage.setItem('car', JSON.stringify(state.car))
137 |     },
138 |   },
139 |   getters: {
140 |     totalCount(state) {
141 |       let sum = 0
142 |       state.car.forEach(item => sum += item.count)
143 |       return sum
144 |     },
145 |     goodsCount(state) {
146 |       // 手动创造一个 id对应count格式的对象
147 |       //  let o = {87: 8, 88: 5}
148 |       //  o[88]
149 |       let o = {}
150 |       state.car.forEach(item => {
151 |         o[item.id] = item.count
152 |       })
153 |       return o
154 |     },
155 |     goodsSelected(state) {
156 |       // 手动创造一个 id对应count格式的对象
157 |       //  let o = {87: 8, 88: 5}
158 |       //  o[88]
159 |       let o = {}
160 |       state.car.forEach(item => {
161 |         o[item.id] = item.selected
162 |       })
163 |       return o
164 |     },
165 |     goodsCountAndAmount(state) {
166 |       let o = {
167 |         count: 0, // 勾选的数量
168 |         amount: 0 // 勾选的总价
169 |       }
170 |       state.car.forEach(item => {
171 |         if (item.selected) {
172 |           o.count += item.count
173 |           o.amount += item.price * item.count
174 |         }
175 |       })
176 |       return o
177 |     }
178 |   }
179 | })
180 | 
181 | /* eslint-disable no-new */
182 | new Vue({
183 |   el: '#app',
184 |   router,
185 |   store, // 和router一样 挂载到vm实例上
186 |   // render函数的作用是将APP组件替换掉#app盒子
187 |   render: h => h(App)
188 | })
189 | 


--------------------------------------------------------------------------------
/src/pages/goodsList/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <scroller
  3 |     ref="sc"
  4 |     refreshLayerColor="#0094ff"
  5 |     loadingLayerColor="#0094ff"
  6 |     :snapping="true"
  7 |     noDataText="客官莫得了~~"
  8 |     refreshText="用点力往下拉~~"
  9 |     :on-refresh="refresh"
 10 |     :on-infinite="infinite"
 11 |   >
 12 |     <div class="goods-list">
 13 |       <!-- <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/' + item.id" tag="div">
 14 |       <img :src="item.img_url" alt="">
 15 |       <h1 class="title">{{ item.title }}</h1>
 16 |       <div class="info">
 17 |         <p class="price">
 18 |           <span class="now">￥{{ item.sell_price }}</span>
 19 |           <span class="old">￥{{ item.market_price }}</span>
 20 |         </p>
 21 |         <p class="sell">
 22 |           <span>热卖中</span>
 23 |           <span>剩{{ item.stock_quantity }}件</span>
 24 |         </p>
 25 |       </div>
 26 |       </router-link>-->
 27 |       <!-- 在网页中，有两种跳转方式： -->
 28 |       <!-- 方式1： 使用 a 标签 的形式叫做 标签跳转  -->
 29 |       <!-- 方式2： 使用 window.location.href 的形式，叫做 编程式导航 -->
 30 |       <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
 31 |         <img :src="item.img_url" alt>
 32 |         <h1 class="title">{{ item.title }}</h1>
 33 |         <div class="info">
 34 |           <p class="price">
 35 |             <span class="now">￥{{ item.sell_price }}</span>
 36 |             <span class="old">￥{{ item.market_price }}</span>
 37 |           </p>
 38 |           <p class="sell">
 39 |             <span>热卖中</span>
 40 |             <span>剩{{ item.stock_quantity }}件</span>
 41 |           </p>
 42 |         </div>
 43 |       </div>
 44 |     </div>
 45 |   </scroller>
 46 | </template>
 47 | 
 48 | <script>
 49 | export default {
 50 |   data() {
 51 |     // data 是往自己组件内部，挂载一些私有数据的
 52 |     return {
 53 |       pageindex: 1, // 分页的页数
 54 |       goodslist: [] // 存放商品列表的数组
 55 |     };
 56 |   },
 57 |   created() {
 58 |     this.getGoodsList();
 59 |   },
 60 |   mounted() {
 61 |     // console.log(this.$refs)
 62 |     this.$refs.sc.triggerPullToRefresh();
 63 |   },
 64 |   methods: {
 65 |     getGoodsList(refresh) {
 66 |       // 可能需要拼接, 也有可能需要覆盖
 67 |       // 获取商品列表
 68 |       return this.$http
 69 |         .get("getgoods?pageindex=" + this.pageindex)
 70 |         .then(result => {
 71 |           if (refresh) {
 72 |             this.goodslist = result.body.message;
 73 |           } else {
 74 |             this.goodslist = this.goodslist.concat(result.body.message);
 75 |           }
 76 |           // 下拉刷新组件都会提供一个api, 调用就可以停止下拉刷新
 77 |           // 手动停止下拉刷新
 78 |           // this.$refs.sc.finishPullToRefresh()
 79 |         });
 80 |     },
 81 |     goDetail(id) {
 82 |       // 使用JS的形式进行路由导航
 83 | 
 84 |       // 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
 85 |       // 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
 86 |       // 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址
 87 | 
 88 |       this.$router.push("/home/goodsInfo/" + id);
 89 | 
 90 |       // 1. 最简单的
 91 |       // this.$router.push("/home/goodsinfo/" + id);
 92 |       // 2. 传递对象
 93 |       // this.$router.push({ path: "/home/goodsinfo/" + id });
 94 |       // 3. 传递命名的路由
 95 |       // this.$router.push({ name: "goodsinfo", params: { id } });
 96 |     },
 97 |     refresh() {
 98 |       setTimeout(() => {
 99 |         // console.log('我在刷新...')
100 |         // 刷新第一页的数据
101 |         // 1. 清空原数据
102 |         // this.goodslist = []
103 |         // 2. 重置索引pageindex 为 1
104 |         this.pageindex = 1;
105 |         // 3. 获取第一页的数据并渲染
106 |         // 4. 结束下拉刷新
107 |         this.getGoodsList(true).then(() => this.$refs.sc.finishPullToRefresh());
108 |         // 获取商品列表
109 |       }, 2000);
110 |     },
111 |     infinite() {
112 |       setTimeout(() => {
113 |         this.pageindex++;
114 |         this.getGoodsList().then(() =>
115 |           this.$refs.sc.finishInfinite(this.goodslist.length === 15)
116 |         );
117 |       }, 2000);
118 |       // console.log('我在上拉加载更多...')
119 |     }
120 |   }
121 | };
122 | </script>
123 | 
124 | <style lang="less">
125 | .pull-to-refresh-layer {
126 |   margin-top: -20px !important;
127 | }
128 | ._v-content {
129 |   padding-bottom: 40px;
130 | }
131 | .goods-list {
132 |   display: flex;
133 |   flex-wrap: wrap;
134 |   padding: 7px;
135 |   justify-content: space-between;
136 | 
137 |   .goods-item {
138 |     width: 49%;
139 |     border: 1px solid #ccc;
140 |     box-shadow: 0 0 8px #ccc;
141 |     margin: 4px 0;
142 |     padding: 2px;
143 |     display: flex;
144 |     flex-direction: column;
145 |     justify-content: space-between;
146 |     min-height: 293px;
147 |     img {
148 |       width: 100%;
149 |     }
150 |     .title {
151 |       font-size: 14px;
152 |     }
153 | 
154 |     .info {
155 |       background-color: #eee;
156 |       p {
157 |         margin: 0;
158 |         padding: 5px;
159 |       }
160 |       .price {
161 |         .now {
162 |           color: red;
163 |           font-weight: bold;
164 |           font-size: 16px;
165 |         }
166 |         .old {
167 |           text-decoration: line-through;
168 |           font-size: 12px;
169 |           margin-left: 10px;
170 |         }
171 |       }
172 |       .sell {
173 |         display: flex;
174 |         justify-content: space-between;
175 |         font-size: 13px;
176 |       }
177 |     }
178 |   }
179 | }
180 | </style>
181 | 


--------------------------------------------------------------------------------
/src/pages/goodsInfo/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="goodsinfo-container">
  3 |     <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
  4 |       <div class="ball" v-show="ballFlag" ref="ball"></div>
  5 |     </transition>
  6 | 
  7 |     <!-- 商品轮播图区域 -->
  8 |     <div class="mui-card">
  9 |       <div class="mui-card-content">
 10 |         <div class="mui-card-content-inner">
 11 |           <swiper :banners="lunbotu"></swiper>
 12 |         </div>
 13 |       </div>
 14 |     </div>
 15 | 
 16 |     <!-- 商品购买区域 -->
 17 |     <div class="mui-card">
 18 |       <div class="mui-card-header">{{ goodsinfo.title }}</div>
 19 |       <div class="mui-card-content">
 20 |         <div class="mui-card-content-inner">
 21 |           <p class="price">市场价：
 22 |             <del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：
 23 |             <span class="now_price">￥{{ goodsinfo.sell_price }}</span>
 24 |           </p>
 25 |           <div class="numbox">
 26 |             <span class="title">购买数量：</span>
 27 |             <input 
 28 |             @click="buyCount >= 2 && buyCount--" 
 29 |             type="button" 
 30 |             value="-"
 31 |             :disabled="buyCount == 1"
 32 |             >
 33 |             <input @change="filterMaxCount" v-model="buyCount" type="number">
 34 |             <input
 35 |               @click="buyCount < goodsinfo.stock_quantity && buyCount++"
 36 |               type="button"
 37 |               value="+"
 38 |               :disabled="buyCount == goodsinfo.stock_quantity"
 39 |             >
 40 |           </div>
 41 |           <p>
 42 |             <mt-button type="primary" size="small">立即购买</mt-button>
 43 |             <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
 44 |             <!-- 分析： 如何实现加入购物车时候，拿到 选择的数量 -->
 45 |             <!-- 1. 经过分析发现： 按钮属于 goodsinfo 页面， 数字 属于 numberbox 组件 -->
 46 |             <!-- 2. 由于涉及到了父子组件的嵌套了，所以，无法直接在 goodsinfo 页面zhong 中获取到 选中的商品数量值-->
 47 |             <!-- 3. 怎么解决这个问题：涉及到了 子组件向父组件传值了（事件调用机制） -->
 48 |             <!-- 4. 事件调用的本质： 父向子传递方法，子调用这个方法， 同时把 数据当作参数 传递给这个方法 -->
 49 |           </p>
 50 |         </div>
 51 |       </div>
 52 |     </div>
 53 | 
 54 |     <!-- 商品参数区域 -->
 55 |     <div class="mui-card">
 56 |       <div class="mui-card-header">商品参数</div>
 57 |       <div class="mui-card-content">
 58 |         <div class="mui-card-content-inner">
 59 |           <p>商品货号：{{ goodsinfo.goods_no }}</p>
 60 |           <p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
 61 |           <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
 62 |         </div>
 63 |       </div>
 64 |       <div class="mui-card-footer">
 65 |         <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
 66 |         <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | // 导入轮播图组件
 74 | // 导入 数字选择框 组件
 75 | 
 76 | export default {
 77 |   data() {
 78 |     return {
 79 |       id: this.$route.params.id, // 将路由参数对象中的 id 挂载到 data , 方便后期调用
 80 |       lunbotu: [], // 轮播图的数据
 81 |       goodsinfo: {}, // 获取到的商品的信息
 82 |       ballFlag: false, // 控制小球的隐藏和显示的标识符
 83 |       selectedCount: 1, // 保存用户选中的商品数量， 默认，认为用户买1个
 84 |       buyCount: 1
 85 |     };
 86 |   },
 87 |   created() {
 88 |     this.getLunbotu();
 89 |     this.getGoodsInfo();
 90 |   },
 91 |   methods: {
 92 |     getLunbotu() {
 93 |       this.$http.get("getthumimages/" + this.id).then(result => {
 94 |         if (result.body.status === 0) {
 95 |           // 先循环轮播图数组的每一项，为 item 添加 img 属性，因为 轮播图 组件中，只认识 item.img， 不认识 item.src
 96 |           // result.body.message.forEach(item => {
 97 |           //   item.img = item.src;
 98 |           // });
 99 |           this.lunbotu = result.body.message;
100 |         }
101 |       });
102 |     },
103 |     getGoodsInfo() {
104 |       // 获取商品的信息
105 |       this.$http.get("goods/getinfo/" + this.id).then(result => {
106 |         if (result.body.status === 0) {
107 |           this.goodsinfo = result.body.message[0];
108 |         }
109 |       });
110 |     },
111 |     filterMaxCount() {
112 |       // console.log("我被改了,现在最新的值是:" + this.buyCount);
113 |       if (this.buyCount > this.goodsinfo.stock_quantity) {
114 |         this.buyCount = this.goodsinfo.stock_quantity;
115 |       }
116 |     },
117 |     goDesc(id) {
118 |       // 点击使用编程式导航跳转到 图文介绍页面
119 |       // this.$router.push({ name: "goodsdesc", params: { id } });
120 |       this.$router.push("/home/goodsDesc/" + id);
121 |     },
122 |     goComment(id) {
123 |       // 点击跳转到 评论页面
124 |       // this.$router.push({ path: "/home/goodscomment/" + id });
125 |       this.$router.push("/home/goodsComment/" + id);
126 |     },
127 |     addToShopCar() {
128 |       // 添加到购物车
129 |       this.ballFlag = !this.ballFlag;
130 |       this.$store.commit('addToCar', {
131 |         id: this.goodsinfo.id,
132 |         count: this.buyCount,
133 |         price: this.goodsinfo.sell_price,
134 |         selected: true
135 |       })
136 |     },
137 |     // 开始执行动画之前所执行的钩子函数
138 |     beforeEnter(el) {
139 |       el.style.transform = "translate(0, 0)";
140 |     },
141 |     // 开始执行动画后的钩子函数
142 |     enter(el, done) {
143 |       // 就是得加   offsetHeight
144 |       el.offsetWidth;
145 | 
146 |       // 小球动画优化思路：
147 |       // 1. 先分析导致 动画 不准确的 本质原因： 我们把 小球 最终 位移到的 位置，已经局限在了某一分辨率下的 滚动条未滚动的情况下；
148 |       // 2. 只要分辨率和 测试的时候不一样，或者 滚动条有一定的滚动距离之后， 问题就出现了；
149 |       // 3. 因此，我们经过分析，得到结论： 不能把 位置的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；
150 |       // 4. 经过分析，得出解题思路： 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离
151 |       // 5. 如何 获取 徽标和小球的 位置？？？   domObject.getBoundingClientRect()
152 | 
153 |       // 获取小球的 在页面中的位置
154 |       const ballPosition = this.$refs.ball.getBoundingClientRect();
155 |       // 获取 徽标 在页面中的位置
156 |       const badgePosition = document
157 |         .getElementById("badge")
158 |         .getBoundingClientRect();
159 | 
160 |       const xDist = badgePosition.left - ballPosition.left;
161 |       const yDist = badgePosition.top - ballPosition.top;
162 | 
163 |       el.style.transform = `translate(${xDist}px, ${yDist}px)`;
164 |       el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
165 |       done();
166 |     },
167 |     // 动画执行完毕后的钩子函数
168 |     afterEnter(el) {
169 |       this.ballFlag = !this.ballFlag;
170 |     },
171 |     getSelectedCount(count) {
172 |       // 当子组件把 选中的数量传递给父组件的时候，把选中的值保存到 data 上
173 |       this.selectedCount = count;
174 |     }
175 |   }
176 | };
177 | </script>
178 | 
179 | <style lang="less" scoped>
180 | .goodsinfo-container {
181 |   background-color: #eee;
182 |   overflow: hidden;
183 | 
184 |   .numbox {
185 |     display: flex;
186 |     height: 50px;
187 |     align-items: center;
188 |     input {
189 |       width: 30px;
190 |       height: 30px;
191 |       padding: 0;
192 |       margin: 0;
193 |       text-align: center;
194 | 
195 |       &[type="number"] {
196 |         border-left: 0;
197 |         border-right: 0;
198 |         font-size: 12px;
199 |         color: gray;
200 |       }
201 |     }
202 |   }
203 | 
204 |   .now_price {
205 |     color: red;
206 |     font-size: 16px;
207 |     font-weight: bold;
208 |   }
209 | 
210 |   .mui-card-footer {
211 |     display: block;
212 |     button {
213 |       margin: 15px 0;
214 |     }
215 |   }
216 | 
217 |   .ball {
218 |     width: 15px;
219 |     height: 15px;
220 |     border-radius: 50%;
221 |     background-color: red;
222 |     position: absolute;
223 |     z-index: 99;
224 |     top: 390px;
225 |     left: 146px;
226 |   }
227 | }
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/libs/mui/css/mui.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * =====================================================
3 |  * Mui v3.7.0 (http://dev.dcloud.net.cn/mui)
4 |  * =====================================================
5 |  *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}body{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#efeff4;-webkit-overflow-scrolling:touch}a{text-decoration:none;color:#007aff}a:active{color:#0062cc}.mui-content{background-color:#efeff4;-webkit-overflow-scrolling:touch}.mui-bar-nav~.mui-content{padding-top:44px}.mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top:44px}.mui-bar-header-secondary~.mui-content{padding-top:88px}.mui-bar-header-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top:88px}.mui-bar-footer~.mui-content{padding-bottom:44px}.mui-bar-footer~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:44px}.mui-bar-footer-secondary~.mui-content{padding-bottom:88px}.mui-bar-footer-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:88px}.mui-bar-tab~.mui-content{padding-bottom:50px}.mui-bar-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:50px}.mui-bar-footer-secondary-tab~.mui-content{padding-bottom:94px}.mui-bar-footer-secondary-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:94px}.mui-content-padded{margin:10px}.mui-inline{display:inline-block;vertical-align:top}.mui-block{display:block!important}.mui-visibility{visibility:visible!important}.mui-hidden{display:none!important}.mui-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mui-ellipsis-2{display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mui-table{display:table;width:100%;table-layout:fixed}.mui-table-cell{position:relative;display:table-cell}.mui-text-left{text-align:left!important}.mui-text-center{text-align:center!important}.mui-text-justify{text-align:justify!important}.mui-text-right{text-align:right!important}.mui-pull-left{float:left}.mui-pull-right{float:right}.mui-list-unstyled{padding-left:0;list-style:none}.mui-list-inline{margin-left:-5px;padding-left:0;list-style:none}.mui-list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.mui-clearfix:after,.mui-clearfix:before{display:table;content:' '}.mui-clearfix:after{clear:both}.mui-bg-primary{background-color:#007aff}.mui-bg-positive{background-color:#4cd964}.mui-bg-negative{background-color:#dd524d}.mui-error{margin:88px 35px;padding:10px;border-radius:6px;background-color:#bbb}.mui-subtitle{font-size:15px}h1,h2,h3,h4,h5,h6{line-height:1;margin-top:5px;margin-bottom:5px}.mui-h1,h1{font-size:36px}.mui-h2,h2{font-size:30px}.mui-h3,h3{font-size:24px}.mui-h4,h4{font-size:18px}.mui-h5,h5{font-size:14px;font-weight:400;color:#8f8f94}.mui-h6,h6{font-size:12px;font-weight:400;color:#8f8f94}p{font-size:14px;margin-top:0;margin-bottom:10px;color:#8f8f94}.mui-row:after,.mui-row:before{display:table;content:' '}.mui-row:after{clear:both}.mui-col-sm-1,.mui-col-sm-10,.mui-col-sm-11,.mui-col-sm-12,.mui-col-sm-2,.mui-col-sm-3,.mui-col-sm-4,.mui-col-sm-5,.mui-col-sm-6,.mui-col-sm-7,.mui-col-sm-8,.mui-col-sm-9,.mui-col-xs-1,.mui-col-xs-10,.mui-col-xs-11,.mui-col-xs-12,.mui-col-xs-2,.mui-col-xs-3,.mui-col-xs-4,.mui-col-xs-5,.mui-col-xs-6,.mui-col-xs-7,.mui-col-xs-8,.mui-col-xs-9{position:relative;min-height:1px}.mui-row>[class*=mui-col-]{float:left}.mui-col-xs-12{width:100%}.mui-col-xs-11{width:91.66666667%}.mui-col-xs-10{width:83.33333333%}.mui-col-xs-9{width:75%}.mui-col-xs-8{width:66.66666667%}.mui-col-xs-7{width:58.33333333%}.mui-col-xs-6{width:50%}.mui-col-xs-5{width:41.66666667%}.mui-col-xs-4{width:33.33333333%}.mui-col-xs-3{width:25%}.mui-col-xs-2{width:16.66666667%}.mui-col-xs-1{width:8.33333333%}@media (min-width:400px){.mui-col-sm-12{width:100%}.mui-col-sm-11{width:91.66666667%}.mui-col-sm-10{width:83.33333333%}.mui-col-sm-9{width:75%}.mui-col-sm-8{width:66.66666667%}.mui-col-sm-7{width:58.33333333%}.mui-col-sm-6{width:50%}.mui-col-sm-5{width:41.66666667%}.mui-col-sm-4{width:33.33333333%}.mui-col-sm-3{width:25%}.mui-col-sm-2{width:16.66666667%}.mui-col-sm-1{width:8.33333333%}}.mui-scroll-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;overflow:hidden;width:100%}.mui-scroll{position:absolute;z-index:1;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.mui-scrollbar{position:absolute;z-index:9998;overflow:hidden;-webkit-transition:500ms;transition:500ms;transform:translateZ(0px);pointer-events:none;opacity:0}.mui-scrollbar-vertical{top:0;right:1px;bottom:2px;width:4px}.mui-scrollbar-vertical .mui-scrollbar-indicator{width:100%}.mui-scrollbar-horizontal{right:2px;bottom:0;left:2px;height:4px}.mui-scrollbar-horizontal .mui-scrollbar-indicator{height:100%}.mui-scrollbar-indicator{position:absolute;display:block;box-sizing:border-box;-webkit-transition:.01s cubic-bezier(.1,.57,.1,1);transition:.01s cubic-bezier(.1,.57,.1,1);transform:translate(0px,0) translateZ(0px);border:1px solid rgba(255,255,255,.80196);border-radius:2px;background:rgba(0,0,0,.39804)}.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll-wrapper,.mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll-wrapper{position:absolute;top:0;bottom:0;left:0;overflow:hidden;width:100%}.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll,.mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll{position:absolute;width:100%}.mui-plus-pullrefresh .mui-scroll-wrapper,.mui-plus-pullrefresh .mui-slider-group{position:static;top:auto;bottom:auto;left:auto;overflow:auto;width:auto}.mui-plus-pullrefresh .mui-slider-group{overflow:visible}.mui-plus-pullrefresh .mui-scroll{position:static;width:auto}.mui-off-canvas-wrap .mui-bar{position:absolute!important;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-box-shadow:none;box-shadow:none}.mui-off-canvas-wrap{position:relative;z-index:1;overflow:hidden;width:100%;height:100%}.mui-off-canvas-wrap .mui-inner-wrap{position:relative;z-index:1;width:100%;height:100%}.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning{-webkit-transition:-webkit-transform 350ms;transition:transform 350ms cubic-bezier(.165,.84,.44,1)}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-active{overflow:hidden;height:100%}.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop{position:absolute;z-index:998;top:0;right:0;bottom:0;left:0;display:block;transition:background 350ms cubic-bezier(.165,.84,.44,1);background:rgba(0,0,0,.4);box-shadow:-4px 0 4px rgba(0,0,0,.5),4px 0 4px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right{z-index:10000!important;-webkit-transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-left{z-index:10000!important;-webkit-transform:translate3d(-100%,0,0)}.mui-off-canvas-left,.mui-off-canvas-right{position:absolute;z-index:-1;top:0;bottom:0;visibility:hidden;box-sizing:content-box;width:70%;min-height:100%;background:#333;-webkit-overflow-scrolling:touch}.mui-off-canvas-left.mui-transitioning,.mui-off-canvas-right.mui-transitioning{-webkit-transition:-webkit-transform 350ms cubic-bezier(.165,.84,.44,1);transition:transform 350ms cubic-bezier(.165,.84,.44,1)}.mui-off-canvas-left{left:0}.mui-off-canvas-right{right:0}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable{background-color:#333}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left,.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-right{width:80%;-webkit-transform:scale(.8);transform:scale(.8);opacity:.1}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left.mui-transitioning,.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-right.mui-transitioning{-webkit-transition:-webkit-transform 350ms cubic-bezier(.165,.84,.44,1),opacity 350ms cubic-bezier(.165,.84,.44,1);transition:transform 350ms cubic-bezier(.165,.84,.44,1),opacity 350ms cubic-bezier(.165,.84,.44,1)}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left{-webkit-transform-origin:-100%;transform-origin:-100%}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-right{-webkit-transform-origin:200%;transform-origin:200%}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-inner-wrap{-webkit-transform:scale(.8);transform:scale(.8)}.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-off-canvas-left,.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-off-canvas-right{-webkit-transform:scale(1);transform:scale(1);opacity:1}.mui-loading .mui-spinner{display:block;margin:0 auto}.mui-spinner{display:inline-block;width:24px;height:24px;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:spinner-spin 1s step-end infinite;animation:spinner-spin 1s step-end infinite}.mui-spinner:after{display:block;width:100%;height:100%;content:'';background-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');background-repeat:no-repeat;background-position:50%;background-size:100%}.mui-spinner-white:after{background-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>')}@-webkit-keyframes spinner-spin{0%{-webkit-transform:rotate(0deg)}8.33333333%{-webkit-transform:rotate(30deg)}16.66666667%{-webkit-transform:rotate(60deg)}25%{-webkit-transform:rotate(90deg)}33.33333333%{-webkit-transform:rotate(120deg)}41.66666667%{-webkit-transform:rotate(150deg)}50%{-webkit-transform:rotate(180deg)}58.33333333%{-webkit-transform:rotate(210deg)}66.66666667%{-webkit-transform:rotate(240deg)}75%{-webkit-transform:rotate(270deg)}83.33333333%{-webkit-transform:rotate(300deg)}91.66666667%{-webkit-transform:rotate(330deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-spin{0%{transform:rotate(0deg)}8.33333333%{transform:rotate(30deg)}16.66666667%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.33333333%{transform:rotate(120deg)}41.66666667%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.33333333%{transform:rotate(210deg)}66.66666667%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.33333333%{transform:rotate(300deg)}91.66666667%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}.mui-btn,button,input[type=button],input[type=reset],input[type=submit]{font-size:14px;font-weight:400;line-height:1.42;position:relative;display:inline-block;margin-bottom:0;padding:6px 12px;cursor:pointer;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s;text-align:center;vertical-align:top;white-space:nowrap;color:#333;border:1px solid #ccc;border-radius:3px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#fff;background-clip:padding-box}.mui-btn.mui-active:enabled,.mui-btn:enabled:active,button.mui-active:enabled,button:enabled:active,input[type=button].mui-active:enabled,input[type=button]:enabled:active,input[type=reset].mui-active:enabled,input[type=reset]:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;background-color:#929292}.mui-btn.mui-disabled,.mui-btn:disabled,button.mui-disabled,button:disabled,input[type=button].mui-disabled,input[type=button]:disabled,input[type=reset].mui-disabled,input[type=reset]:disabled,input[type=submit].mui-disabled,input[type=submit]:disabled{opacity:.6}.mui-btn-blue,.mui-btn-primary,input[type=submit]{color:#fff;border:1px solid #007aff;background-color:#007aff}.mui-btn-blue.mui-active:enabled,.mui-btn-blue:enabled:active,.mui-btn-primary.mui-active:enabled,.mui-btn-primary:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;border:1px solid #0062cc;background-color:#0062cc}.mui-btn-green,.mui-btn-positive,.mui-btn-success{color:#fff;border:1px solid #4cd964;background-color:#4cd964}.mui-btn-green.mui-active:enabled,.mui-btn-green:enabled:active,.mui-btn-positive.mui-active:enabled,.mui-btn-positive:enabled:active,.mui-btn-success.mui-active:enabled,.mui-btn-success:enabled:active{color:#fff;border:1px solid #2ac845;background-color:#2ac845}.mui-btn-warning,.mui-btn-yellow{color:#fff;border:1px solid #f0ad4e;background-color:#f0ad4e}.mui-btn-warning.mui-active:enabled,.mui-btn-warning:enabled:active,.mui-btn-yellow.mui-active:enabled,.mui-btn-yellow:enabled:active{color:#fff;border:1px solid #ec971f;background-color:#ec971f}.mui-btn-danger,.mui-btn-negative,.mui-btn-red{color:#fff;border:1px solid #dd524d;background-color:#dd524d}.mui-btn-danger.mui-active:enabled,.mui-btn-danger:enabled:active,.mui-btn-negative.mui-active:enabled,.mui-btn-negative:enabled:active,.mui-btn-red.mui-active:enabled,.mui-btn-red:enabled:active{color:#fff;border:1px solid #cf2d28;background-color:#cf2d28}.mui-btn-purple,.mui-btn-royal{color:#fff;border:1px solid #8a6de9;background-color:#8a6de9}.mui-btn-purple.mui-active:enabled,.mui-btn-purple:enabled:active,.mui-btn-royal.mui-active:enabled,.mui-btn-royal:enabled:active{color:#fff;border:1px solid #6641e2;background-color:#6641e2}.mui-btn-grey{color:#fff;border:1px solid #c7c7cc;background-color:#c7c7cc}.mui-btn-grey.mui-active:enabled,.mui-btn-grey:enabled:active{color:#fff;border:1px solid #acacb4;background-color:#acacb4}.mui-btn-outlined{background-color:transparent}.mui-btn-outlined.mui-btn-blue,.mui-btn-outlined.mui-btn-primary{color:#007aff}.mui-btn-outlined.mui-btn-green,.mui-btn-outlined.mui-btn-positive,.mui-btn-outlined.mui-btn-success{color:#4cd964}.mui-btn-outlined.mui-btn-warning,.mui-btn-outlined.mui-btn-yellow{color:#f0ad4e}.mui-btn-outlined.mui-btn-danger,.mui-btn-outlined.mui-btn-negative,.mui-btn-outlined.mui-btn-red{color:#dd524d}.mui-btn-outlined.mui-btn-purple,.mui-btn-outlined.mui-btn-royal{color:#8a6de9}.mui-btn-outlined.mui-btn-blue:enabled:active,.mui-btn-outlined.mui-btn-danger:enabled:active,.mui-btn-outlined.mui-btn-green:enabled:active,.mui-btn-outlined.mui-btn-negative:enabled:active,.mui-btn-outlined.mui-btn-positive:enabled:active,.mui-btn-outlined.mui-btn-primary:enabled:active,.mui-btn-outlined.mui-btn-purple:enabled:active,.mui-btn-outlined.mui-btn-red:enabled:active,.mui-btn-outlined.mui-btn-royal:enabled:active,.mui-btn-outlined.mui-btn-success:enabled:active,.mui-btn-outlined.mui-btn-warning:enabled:active,.mui-btn-outlined.mui-btn-yellow:enabled:active{color:#fff}.mui-btn-link{padding-top:6px;padding-bottom:6px;color:#007aff;border:0;background-color:transparent}.mui-btn-link.mui-active:enabled,.mui-btn-link:enabled:active{color:#0062cc;background-color:transparent}.mui-btn-block{font-size:18px;display:block;width:100%;margin-bottom:10px;padding:15px 0}.mui-btn .mui-badge{font-size:14px;margin:-2px -4px -2px 4px;background-color:rgba(0,0,0,.15)}.mui-btn .mui-badge-inverted,.mui-btn:enabled:active .mui-badge-inverted{background-color:transparent}.mui-btn-negative:enabled:active .mui-badge-inverted,.mui-btn-positive:enabled:active .mui-badge-inverted,.mui-btn-primary:enabled:active .mui-badge-inverted{color:#fff}.mui-btn-block .mui-badge{position:absolute;right:0;margin-right:10px}.mui-btn .mui-icon{font-size:inherit}.mui-btn.mui-icon{font-size:14px;line-height:1.42}.mui-btn.mui-fab{width:56px;height:56px;padding:16px;border-radius:50%;outline:0}.mui-btn.mui-fab.mui-btn-mini{width:40px;height:40px;padding:8px}.mui-btn.mui-fab .mui-icon{font-size:24px;line-height:24px;width:24px;height:24px}.mui-btn .mui-spinner{width:14px;height:14px;vertical-align:text-bottom}.mui-btn-block .mui-spinner{width:22px;height:22px}.mui-bar{position:fixed;z-index:10;right:0;left:0;height:44px;padding-right:10px;padding-left:10px;border-bottom:0;background-color:#f7f7f7;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85);-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-bar .mui-title{right:40px;left:40px;display:inline-block;overflow:hidden;width:auto;margin:0;text-overflow:ellipsis}.mui-bar .mui-backdrop{background:0 0}.mui-bar-header-secondary{top:44px}.mui-bar-footer{bottom:0}.mui-bar-footer-secondary{bottom:44px}.mui-bar-footer-secondary-tab{bottom:50px}.mui-bar-footer,.mui-bar-footer-secondary,.mui-bar-footer-secondary-tab{border-top:0}.mui-bar-transparent{top:0;background-color:rgba(247,247,247,0);-webkit-box-shadow:none;box-shadow:none}.mui-bar-nav{top:0;-webkit-box-shadow:0 1px 6px #ccc;box-shadow:0 1px 6px #ccc}.mui-bar-nav~.mui-content .mui-anchor{display:block;visibility:hidden;height:45px;margin-top:-45px}.mui-bar-nav.mui-bar .mui-icon{margin-right:-10px;margin-left:-10px;padding-right:10px;padding-left:10px}.mui-title{font-size:17px;font-weight:500;line-height:44px;position:absolute;display:block;width:100%;margin:0 -10px;padding:0;text-align:center;white-space:nowrap;color:#000}.mui-title a{color:inherit}.mui-bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:0;border-bottom:0;-webkit-touch-callout:none}.mui-bar-tab .mui-tab-item{display:table-cell;overflow:hidden;width:1%;height:50px;text-align:center;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;color:#929292}.mui-bar-tab .mui-tab-item.mui-active{color:#007aff}.mui-bar-tab .mui-tab-item .mui-icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis}.mui-bar-tab .mui-tab-item .mui-icon:active{background:0 0}.mui-focusin>.mui-bar-header-secondary,.mui-focusin>.mui-bar-nav{position:absolute}.mui-focusin>.mui-bar~.mui-content{padding-bottom:0}.mui-bar .mui-btn{font-weight:400;position:relative;z-index:20;top:7px;margin-top:0;padding:6px 12px 7px}.mui-bar .mui-btn.mui-pull-right{margin-left:10px}.mui-bar .mui-btn.mui-pull-left{margin-right:10px}.mui-bar .mui-btn-link{font-size:16px;line-height:44px;top:0;padding:0;color:#007aff;border:0}.mui-bar .mui-btn-link.mui-active,.mui-bar .mui-btn-link:active{color:#0062cc}.mui-bar .mui-btn-block{font-size:16px;top:6px;margin-bottom:0;padding:5px 0}.mui-bar .mui-btn-nav.mui-pull-left{margin-left:-5px}.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav{margin-right:-3px}.mui-bar .mui-btn-nav.mui-pull-right{margin-right:-5px}.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav{margin-left:-3px}.mui-bar .mui-btn-nav:active{opacity:.3}.mui-bar .mui-icon{font-size:24px;position:relative;z-index:20;padding-top:10px;padding-bottom:10px}.mui-bar .mui-icon:active{opacity:.3}.mui-bar .mui-btn .mui-icon{top:1px;margin:0;padding:0}.mui-bar .mui-title .mui-icon{margin:0;padding:0}.mui-bar .mui-title .mui-icon.mui-icon-caret{top:4px;margin-left:-5px}.mui-bar input[type=search]{height:29px;margin:6px 0}.mui-bar .mui-input-row .mui-btn{padding:12px 10px}.mui-bar .mui-search:before{margin-top:-10px}.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech{top:0;right:12px}.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech~.mui-icon-speech{top:0;right:0}.mui-bar .mui-segmented-control{top:7px;width:auto;margin:0 auto}.mui-bar.mui-bar-header-secondary .mui-segmented-control{top:0}.mui-badge{font-size:12px;line-height:1;display:inline-block;padding:3px 6px;color:#333;border-radius:100px;background-color:rgba(0,0,0,.15)}.mui-badge.mui-badge-inverted{padding:0 5px 0 0;color:#929292;background-color:transparent}.mui-badge-blue,.mui-badge-primary{color:#fff;background-color:#007aff}.mui-badge-blue.mui-badge-inverted,.mui-badge-primary.mui-badge-inverted{color:#007aff;background-color:transparent}.mui-badge-green,.mui-badge-success{color:#fff;background-color:#4cd964}.mui-badge-green.mui-badge-inverted,.mui-badge-success.mui-badge-inverted{color:#4cd964;background-color:transparent}.mui-badge-warning,.mui-badge-yellow{color:#fff;background-color:#f0ad4e}.mui-badge-warning.mui-badge-inverted,.mui-badge-yellow.mui-badge-inverted{color:#f0ad4e;background-color:transparent}.mui-badge-danger,.mui-badge-red{color:#fff;background-color:#dd524d}.mui-badge-danger.mui-badge-inverted,.mui-badge-red.mui-badge-inverted{color:#dd524d;background-color:transparent}.mui-badge-purple,.mui-badge-royal{color:#fff;background-color:#8a6de9}.mui-badge-purple.mui-badge-inverted,.mui-badge-royal.mui-badge-inverted{color:#8a6de9;background-color:transparent}.mui-icon .mui-badge{font-size:10px;line-height:1.4;position:absolute;top:-2px;left:100%;margin-left:-10px;padding:1px 5px;color:#fff;background:red}.mui-card{font-size:14px;position:relative;overflow:hidden;margin:10px;border-radius:2px;background-color:#fff;background-clip:padding-box;box-shadow:0 1px 2px rgba(0,0,0,.3)}.mui-content>.mui-card:first-child{margin-top:15px}.mui-card .mui-input-group .mui-input-row:last-child:after,.mui-card .mui-input-group .mui-input-row:last-child:before,.mui-card .mui-input-group:after,.mui-card .mui-input-group:before{height:0}.mui-card .mui-table-view{margin-bottom:0;border-top:0;border-bottom:0;border-radius:6px}.mui-card .mui-table-view .mui-table-view-cell:first-child,.mui-card .mui-table-view .mui-table-view-divider:first-child{top:0;border-top-left-radius:6px;border-top-right-radius:6px}.mui-card .mui-table-view .mui-table-view-cell:last-child,.mui-card .mui-table-view .mui-table-view-divider:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.mui-card .mui-table-view:after,.mui-card .mui-table-view:before,.mui-card>.mui-table-view>.mui-table-view-cell:last-child:after,.mui-card>.mui-table-view>.mui-table-view-cell:last-child:before{height:0}.mui-card-footer,.mui-card-header{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;min-height:44px;padding:10px 15px;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.mui-card-footer .mui-card-link,.mui-card-header .mui-card-link{line-height:44px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;height:44px;margin-top:-10px;margin-bottom:-10px;-webkit-transition-duration:.3s;transition-duration:.3s;text-decoration:none;-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.mui-card-footer:before,.mui-card-header:after{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-card-header{font-size:17px;border-radius:2px 2px 0 0}.mui-card-header:after{top:auto;bottom:0}.mui-card-header>img:first-child{font-size:0;line-height:0;float:left;width:34px;height:34px}.mui-card-footer{color:#6d6d72;border-radius:0 0 2px 2px}.mui-card-content{font-size:14px;position:relative}.mui-card-content-inner{position:relative;padding:15px}.mui-card-media{vertical-align:bottom;color:#fff;background-position:center;background-size:cover}.mui-card-header.mui-card-media{display:block;padding:10px}.mui-card-header.mui-card-media .mui-media-body{font-size:14px;font-weight:500;line-height:17px;margin-bottom:0;margin-left:44px;color:#333}.mui-card-header.mui-card-media .mui-media-body p{font-size:13px;margin-bottom:0}.mui-table-view{position:relative;margin-top:0;margin-bottom:0;padding-left:0;list-style:none;background-color:#fff}.mui-table-view:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view:before{position:absolute;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc;top:-1px}.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon{font-size:20px;margin-top:-1px;margin-right:5px;margin-left:-5px}.mui-table-view-icon .mui-table-view-cell:after{left:40px}.mui-table-view-chevron .mui-table-view-cell{padding-right:65px}.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-radio .mui-table-view-cell{padding-right:65px}.mui-table-view-radio .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after{font-size:30px;font-weight:600;right:9px;content:'';color:#007aff}.mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after{content:'\e472'}.mui-table-view-inverted{color:#fff;background:#333}.mui-table-view-inverted:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted .mui-table-view-cell.mui-active,.mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#242424}.mui-table-view-cell{position:relative;overflow:hidden;padding:11px 15px;-webkit-touch-callout:none}.mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-cell.mui-checkbox input[type=checkbox],.mui-table-view-cell.mui-radio input[type=radio]{top:8px}.mui-table-view-cell.mui-checkbox.mui-left,.mui-table-view-cell.mui-radio.mui-left{padding-left:58px}.mui-table-view-cell.mui-active{background-color:#eee}.mui-table-view-cell:last-child:after,.mui-table-view-cell:last-child:before{height:0}.mui-table-view-cell>a:not(.mui-btn){position:relative;display:block;overflow:hidden;margin:-11px -15px;padding:inherit;white-space:nowrap;text-overflow:ellipsis;color:inherit}.mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#eee}.mui-table-view-cell p{margin-bottom:0}.mui-table-view-cell.mui-transitioning>.mui-slider-handle,.mui-table-view-cell.mui-transitioning>.mui-slider-left .mui-btn,.mui-table-view-cell.mui-transitioning>.mui-slider-right .mui-btn{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}.mui-table-view-cell.mui-active>.mui-slider-handle{background-color:#eee}.mui-table-view-cell>.mui-slider-handle{position:relative;background-color:#fff}.mui-table-view-cell>.mui-slider-handle .mui-navigate-right:after,.mui-table-view-cell>.mui-slider-handle.mui-navigate-right:after{right:0}.mui-table-view-cell>.mui-slider-handle,.mui-table-view-cell>.mui-slider-left .mui-btn,.mui-table-view-cell>.mui-slider-right .mui-btn{-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease}.mui-table-view-cell>.mui-slider-left,.mui-table-view-cell>.mui-slider-right{position:absolute;top:0;display:-webkit-box;display:-webkit-flex;display:flex;height:100%}.mui-table-view-cell>.mui-slider-left>.mui-btn,.mui-table-view-cell>.mui-slider-right>.mui-btn{position:relative;left:0;display:-webkit-box;display:-webkit-flex;display:flex;padding:0 30px;color:#fff;border:0;border-radius:0;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.mui-table-view-cell>.mui-slider-left>.mui-btn:after,.mui-table-view-cell>.mui-slider-right>.mui-btn:after{position:absolute;z-index:-1;top:0;width:600%;height:100%;content:'';background:inherit}.mui-table-view-cell>.mui-slider-left>.mui-btn.mui-icon,.mui-table-view-cell>.mui-slider-right>.mui-btn.mui-icon{font-size:30px}.mui-table-view-cell>.mui-slider-right{right:0;-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-transform:translateX(100%);transform:translateX(100%)}.mui-table-view-cell>.mui-slider-left{left:0;-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mui-table-view-cell>.mui-slider-left>.mui-btn:after{right:100%;margin-right:-1px}.mui-table-view-divider{font-weight:500;position:relative;margin-top:-1px;margin-left:0;padding-top:6px;padding-bottom:6px;padding-left:15px;color:#999;background-color:#fafafa}.mui-table-view-divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-divider:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view .mui-media,.mui-table-view .mui-media-body{overflow:hidden}.mui-table-view .mui-media-large .mui-media-object{line-height:80px;max-width:80px;height:80px}.mui-table-view .mui-media .mui-subtitle{color:#000}.mui-table-view .mui-media-object{line-height:42px;max-width:42px;height:42px}.mui-table-view .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-media-object.mui-pull-right{margin-left:10px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object{line-height:29px;max-width:29px;height:29px;margin:-4px 0}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object img{line-height:29px;max-width:29px;height:29px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object .mui-icon{font-size:29px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-body:after{position:absolute;right:0;bottom:0;left:55px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view .mui-table-view-cell.mui-media-icon:after{height:0!important}.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view{display:block}.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:after,.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:before{height:0!important}.mui-table-view.mui-unfold .mui-table-view-cell.mui-media-icon.mui-collapse .mui-media-body:after{position:absolute;right:0;bottom:0;left:70px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-cell>.mui-badge,.mui-table-view-cell>.mui-btn,.mui-table-view-cell>.mui-switch,.mui-table-view-cell>a>.mui-badge,.mui-table-view-cell>a>.mui-btn,.mui-table-view-cell>a>.mui-switch{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-table-view-cell .mui-navigate-right>.mui-badge,.mui-table-view-cell .mui-navigate-right>.mui-btn,.mui-table-view-cell .mui-navigate-right>.mui-switch,.mui-table-view-cell .mui-push-left>.mui-badge,.mui-table-view-cell .mui-push-left>.mui-btn,.mui-table-view-cell .mui-push-left>.mui-switch,.mui-table-view-cell .mui-push-right>.mui-badge,.mui-table-view-cell .mui-push-right>.mui-btn,.mui-table-view-cell .mui-push-right>.mui-switch,.mui-table-view-cell>a .mui-navigate-right>.mui-badge,.mui-table-view-cell>a .mui-navigate-right>.mui-btn,.mui-table-view-cell>a .mui-navigate-right>.mui-switch,.mui-table-view-cell>a .mui-push-left>.mui-badge,.mui-table-view-cell>a .mui-push-left>.mui-btn,.mui-table-view-cell>a .mui-push-left>.mui-switch,.mui-table-view-cell>a .mui-push-right>.mui-badge,.mui-table-view-cell>a .mui-push-right>.mui-btn,.mui-table-view-cell>a .mui-push-right>.mui-switch{right:35px}.mui-content>.mui-table-view:first-child{margin-top:15px}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:last-child:after,.mui-table-view-cell.mui-collapse .mui-table-view:after,.mui-table-view-cell.mui-collapse .mui-table-view:before{height:0}.mui-table-view-cell.mui-collapse>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse>.mui-push-right:after{content:'\e581'}.mui-table-view-cell.mui-collapse.mui-active{margin-top:-1px}.mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content,.mui-table-view-cell.mui-collapse.mui-active .mui-table-view{display:block}.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after{content:'\e580'}.mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell>a:not(.mui-btn).mui-active{margin-left:-31px;padding-left:47px}.mui-table-view-cell.mui-collapse .mui-collapse-content{position:relative;display:none;overflow:hidden;margin:11px -15px -11px;padding:8px 15px;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease;background:#fff}.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-input-group,.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider{width:auto;height:auto;margin:-8px -15px}.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider{margin:-8px -16px}.mui-table-view-cell.mui-collapse .mui-table-view{display:none;margin-top:11px;margin-right:-15px;margin-bottom:-11px;margin-left:-15px;border:0}.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron{margin-right:-65px}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell{padding-left:31px;background-position:31px 100%}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:30px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view.mui-grid-view{font-size:0;display:block;width:100%;padding:0 10px 10px 0;white-space:normal}.mui-table-view.mui-grid-view .mui-table-view-cell{font-size:17px;display:inline-block;margin-right:-4px;padding:10px 0 0 14px;text-align:center;vertical-align:middle;background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{width:100%;max-width:100%;height:auto}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){margin:-10px 0 0 -14px}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn).mui-active,.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn):active{background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{font-size:15px;line-height:15px;display:block;width:100%;height:15px;margin-top:8px;text-overflow:ellipsis;color:#333}.mui-table-view.mui-grid-view .mui-table-view-cell:after,.mui-table-view.mui-grid-view .mui-table-view-cell:before{height:0}.mui-grid-view.mui-grid-9{margin:0;padding:0;border-top:1px solid #eee;border-left:1px solid #eee;background-color:#f2f2f2}.mui-grid-view.mui-grid-9:after,.mui-grid-view.mui-grid-9:before{display:table;content:' '}.mui-grid-view.mui-grid-9:after{clear:both;position:static}.mui-grid-view.mui-grid-9 .mui-table-view-cell{margin:0;padding:11px 15px;vertical-align:top;border-right:1px solid #eee;border-bottom:1px solid #eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active{background-color:#eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){margin:0;padding:10px 0}.mui-grid-view.mui-grid-9:before{height:0}.mui-grid-view.mui-grid-9 .mui-media{color:#797979}.mui-grid-view.mui-grid-9 .mui-media .mui-icon{font-size:2.4em;position:relative}.mui-slider-cell{position:relative}.mui-slider-cell>.mui-slider-handle{z-index:1}.mui-slider-cell>.mui-slider-left,.mui-slider-cell>.mui-slider-right{position:absolute;z-index:0;top:0;bottom:0}.mui-slider-cell>.mui-slider-left{left:0}.mui-slider-cell>.mui-slider-right{right:0}input,select,textarea{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:17px;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}input:focus,select:focus,textarea:focus{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{line-height:21px;width:100%;height:40px;margin-bottom:15px;padding:10px 15px;-webkit-user-select:text;border:1px solid rgba(0,0,0,.2);border-radius:3px;outline:0;background-color:#fff;-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}input[type=search]{font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;height:34px;text-align:center;border:0;border-radius:6px;background-color:rgba(0,0,0,.1)}input[type=search]:focus{text-align:left}textarea{height:auto;resize:none}select{font-size:14px;height:auto;margin-top:1px;border:0!important;background-color:#fff}select:focus{-webkit-user-modify:read-only}.mui-input-group{position:relative;padding:0;border:0;background-color:#fff}.mui-input-group:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-group:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-group input,.mui-input-group textarea{margin-bottom:0;border:0;border-radius:0;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.mui-input-group input[type=search]{background:0 0}.mui-input-group input:last-child{background-image:none}.mui-input-row{clear:left;overflow:hidden}.mui-input-row select{font-size:17px;height:37px;padding:0}.mui-input-row .mui-btn+input,.mui-input-row label+input,.mui-input-row:last-child{background:0 0}.mui-input-group .mui-input-row{height:40px}.mui-input-group .mui-input-row:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-row label{font-family:'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;float:left;width:35%;padding:11px 15px}.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{float:right;width:65%;margin-bottom:0;padding-left:0;border:0}.mui-input-row .mui-btn{line-height:1.1;float:right;width:15%;padding:10px 15px}.mui-input-row .mui-btn~input,.mui-input-row .mui-btn~select,.mui-input-row .mui-btn~textarea{float:left;width:85%;margin-bottom:0;padding-left:0;border:0}.mui-button-row{position:relative;padding-top:5px;text-align:center}.mui-input-group .mui-button-row{height:45px}.mui-input-row{position:relative}.mui-input-row.mui-input-range{overflow:visible;padding-right:20px}.mui-input-row .mui-inline{padding:8px 0}.mui-input-row .mui-input-clear~.mui-icon-clear,.mui-input-row .mui-input-password~.mui-icon-eye,.mui-input-row .mui-input-speech~.mui-icon-speech{font-size:20px;position:absolute;z-index:1;top:10px;right:0;width:38px;height:38px;text-align:center;color:#999}.mui-input-row .mui-input-clear~.mui-icon-clear.mui-active,.mui-input-row .mui-input-password~.mui-icon-eye.mui-active,.mui-input-row .mui-input-speech~.mui-icon-speech.mui-active{color:#007aff}.mui-input-row .mui-input-speech~.mui-icon-speech{font-size:24px;top:8px}.mui-input-row .mui-input-clear~.mui-icon-clear~.mui-icon-speech{display:none}.mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{display:inline-block}.mui-input-row .mui-icon-speech~.mui-placeholder{right:38px}.mui-input-row.mui-search .mui-icon-clear{top:7px}.mui-input-row.mui-search .mui-icon-speech{top:5px}.mui-checkbox,.mui-radio{position:relative}.mui-checkbox label,.mui-radio label{display:inline-block;float:none;width:100%;padding-right:58px}.mui-checkbox.mui-left input[type=checkbox],.mui-radio.mui-left input[type=radio]{left:20px}.mui-checkbox.mui-left label,.mui-radio.mui-left label{padding-right:15px;padding-left:58px}.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{position:absolute;top:4px;right:20px;display:inline-block;width:28px;height:26px;border:0;outline:0!important;background-color:transparent;-webkit-appearance:none}.mui-checkbox input[type=checkbox][disabled]:before,.mui-radio input[type=radio][disabled]:before{opacity:.3}.mui-checkbox input[type=checkbox]:before,.mui-radio input[type=radio]:before{font-family:Muiicons;font-size:28px;font-weight:400;line-height:1;text-decoration:none;color:#aaa;border-radius:0;background:0 0;-webkit-font-smoothing:antialiased}.mui-checkbox input[type=checkbox]:checked:before,.mui-radio input[type=radio]:checked:before{color:#007aff}.mui-checkbox label.mui-disabled,.mui-checkbox.mui-disabled label,.mui-radio label.mui-disabled,.mui-radio.mui-disabled label{opacity:.4}.mui-radio input[type=radio]:before{content:'\e411'}.mui-radio input[type=radio]:checked:before{content:'\e441'}.mui-checkbox input[type=checkbox]:before{content:'\e411'}.mui-checkbox input[type=checkbox]:checked:before{content:'\e442'}.mui-select{position:relative}.mui-select:before{font-family:Muiicons;position:absolute;top:8px;right:21px;content:'\e581';color:rgba(170,170,170,.6)}.mui-input-row .mui-switch{float:right;margin-top:5px;margin-right:20px}.mui-input-range input[type=range]{position:relative;width:100%;height:2px;margin:17px 0;padding:0;cursor:pointer;border:0;border-radius:3px;outline:0;background-color:#999;-webkit-appearance:none!important}.mui-input-range input[type=range]::-webkit-slider-thumb{width:28px;height:28px;border-color:#0062cc;border-radius:50%;background-color:#007aff;background-clip:padding-box;-webkit-appearance:none!important}.mui-input-range label~input[type=range]{width:65%}.mui-input-range .mui-tooltip{font-size:36px;line-height:64px;position:absolute;z-index:1;top:-70px;width:64px;height:64px;text-align:center;opacity:.8;color:#333;border:1px solid #ddd;border-radius:6px;background-color:#fff;text-shadow:0 1px 0 #f3f3f3}.mui-search{position:relative}.mui-search input[type=search]{padding-left:30px}.mui-search .mui-placeholder{font-size:16px;line-height:34px;position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;display:inline-block;height:34px;text-align:center;color:#999;border:0;border-radius:6px;background:0 0}.mui-search .mui-placeholder .mui-icon{font-size:20px;color:#333}.mui-search:before{font-family:Muiicons;font-size:20px;font-weight:400;position:absolute;top:50%;right:50%;display:none;margin-top:-18px;margin-right:31px;content:'\e466'}.mui-search.mui-active:before{font-size:20px;right:auto;left:5px;display:block;margin-right:0}.mui-search.mui-active input[type=search]{text-align:left}.mui-search.mui-active .mui-placeholder{display:none}.mui-segmented-control{font-size:15px;font-weight:400;position:relative;display:table;overflow:hidden;width:100%;table-layout:fixed;border:1px solid #007aff;border-radius:3px;background-color:transparent;-webkit-touch-callout:none}.mui-segmented-control.mui-segmented-control-vertical{border-collapse:collapse;border-width:0;border-radius:0}.mui-segmented-control.mui-segmented-control-vertical .mui-control-item{display:block;border-bottom:1px solid #c8c7cc;border-left-width:0}.mui-segmented-control.mui-scroll-wrapper{height:38px}.mui-segmented-control.mui-scroll-wrapper .mui-scroll{width:auto;height:40px;white-space:nowrap}.mui-segmented-control.mui-scroll-wrapper .mui-control-item{display:inline-block;width:auto;padding:0 20px;border:0}.mui-segmented-control .mui-control-item{line-height:38px;display:table-cell;overflow:hidden;width:1%;-webkit-transition:background-color .1s linear;transition:background-color .1s linear;text-align:center;white-space:nowrap;text-overflow:ellipsis;color:#007aff;border-color:#007aff;border-left:1px solid #007aff}.mui-segmented-control .mui-control-item:first-child{border-left-width:0}.mui-segmented-control .mui-control-item.mui-active{color:#fff;background-color:#007aff}.mui-segmented-control.mui-segmented-control-inverted{width:100%;border:0;border-radius:0}.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active{border-bottom:1px solid #c8c7cc}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{color:inherit;border:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#007aff;border-bottom:2px solid #007aff;background:0 0}.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#007aff}.mui-segmented-control-positive{border:1px solid #4cd964}.mui-segmented-control-positive .mui-control-item{color:#4cd964;border-color:inherit}.mui-segmented-control-positive .mui-control-item.mui-active{color:#fff;background-color:#4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active{color:#4cd964;border-bottom:2px solid #4cd964;background:0 0}.mui-segmented-control-positive.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#4cd964}.mui-segmented-control-negative{border:1px solid #dd524d}.mui-segmented-control-negative .mui-control-item{color:#dd524d;border-color:inherit}.mui-segmented-control-negative .mui-control-item.mui-active{color:#fff;background-color:#dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active{color:#dd524d;border-bottom:2px solid #dd524d;background:0 0}.mui-segmented-control-negative.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#dd524d}.mui-control-content{position:relative;display:none}.mui-control-content.mui-active{display:block}.mui-popover{position:absolute;z-index:999;display:none;width:280px;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transform:none;transform:none;opacity:0;border-radius:7px;background-color:#f7f7f7;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1)}.mui-popover .mui-popover-arrow{position:absolute;z-index:1000;top:-25px;left:0;overflow:hidden;width:26px;height:26px}.mui-popover .mui-popover-arrow:after{position:absolute;top:19px;left:0;width:26px;height:26px;content:' ';-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:3px;background:#f7f7f7}.mui-popover .mui-popover-arrow.mui-bottom{top:100%;left:-26px;margin-top:-1px}.mui-popover .mui-popover-arrow.mui-bottom:after{top:-19px;left:0}.mui-popover.mui-popover-action{bottom:0;width:100%;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);border-radius:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.mui-popover.mui-popover-action .mui-popover-arrow{display:none}.mui-popover.mui-popover-action.mui-popover-bottom{position:fixed}.mui-popover.mui-popover-action.mui-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover.mui-popover-action .mui-table-view{margin:8px;text-align:center;color:#007aff;border-radius:4px}.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-popover.mui-popover-action .mui-table-view small{font-weight:400;line-height:1.3;display:block}.mui-popover.mui-active{display:block;opacity:1}.mui-popover .mui-bar~.mui-table-view{padding-top:44px}.mui-backdrop{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3)}.mui-bar-backdrop.mui-backdrop{bottom:50px;background:0 0}.mui-backdrop-action.mui-backdrop{background-color:rgba(0,0,0,.3)}.mui-backdrop-action.mui-backdrop,.mui-bar-backdrop.mui-backdrop{opacity:0}.mui-backdrop-action.mui-backdrop.mui-active,.mui-bar-backdrop.mui-backdrop.mui-active{-webkit-transition:all .4s ease;transition:all .4s ease;opacity:1}.mui-popover .mui-btn-block{margin-bottom:5px}.mui-popover .mui-btn-block:last-child{margin-bottom:0}.mui-popover .mui-bar{-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-bar-nav{border-bottom:1px solid rgba(0,0,0,.15);border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-scroll-wrapper{margin:7px 0;border-radius:7px;background-clip:padding-box}.mui-popover .mui-scroll .mui-table-view{max-height:none}.mui-popover .mui-table-view{overflow:auto;max-height:300px;margin-bottom:0;border-radius:7px;background-color:#f7f7f7;background-image:none;-webkit-overflow-scrolling:touch}.mui-popover .mui-table-view:after,.mui-popover .mui-table-view:before{height:0}.mui-popover .mui-table-view .mui-table-view-cell:first-child,.mui-popover .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn){border-top-left-radius:12px;border-top-right-radius:12px}.mui-popover .mui-table-view .mui-table-view-cell:last-child,.mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){border-bottom-right-radius:12px;border-bottom-left-radius:12px}.mui-popover.mui-bar-popover .mui-table-view{width:106px}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell{padding:11px 15px;background-position:0 100%}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell>a:not(.mui-btn){margin:-11px -15px -11px -15px}.mui-popup-backdrop{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:400ms;transition-duration:400ms;opacity:0;background:rgba(0,0,0,.4)}.mui-popup-backdrop.mui-active{opacity:1}.mui-popup{position:fixed;z-index:10000;top:50%;left:50%;display:none;overflow:hidden;width:270px;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-transform:translate3d(-50%,-50%,0) scale(1.185);transform:translate3d(-50%,-50%,0) scale(1.185);text-align:center;opacity:0;color:#000;border-radius:13px}.mui-popup.mui-popup-in{display:block;-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transform:translate3d(-50%,-50%,0) scale(1);transform:translate3d(-50%,-50%,0) scale(1);opacity:1}.mui-popup.mui-popup-out{-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transform:translate3d(-50%,-50%,0) scale(1);transform:translate3d(-50%,-50%,0) scale(1);opacity:0}.mui-popup-inner{position:relative;padding:15px;border-radius:13px 13px 0 0;background:rgba(255,255,255,.95)}.mui-popup-inner:after{position:absolute;z-index:15;top:auto;right:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;background-color:rgba(0,0,0,.2)}.mui-popup-title{font-size:18px;font-weight:500;text-align:center}.mui-popup-title+.mui-popup-text{font-family:inherit;font-size:14px;margin:5px 0 0}.mui-popup-buttons{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;height:44px;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.mui-popup-button{font-size:17px;line-height:44px;position:relative;display:block;overflow:hidden;box-sizing:border-box;width:100%;height:44px;padding:0 5px;cursor:pointer;text-align:center;white-space:nowrap;text-overflow:ellipsis;color:#007aff;background:rgba(255,255,255,.95);-webkit-box-flex:1}.mui-popup-button:after{position:absolute;z-index:15;top:0;right:0;bottom:auto;left:auto;display:block;width:1px;height:100%;content:'';-webkit-transform:scaleX(.5);transform:scaleX(.5);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;background-color:rgba(0,0,0,.2)}.mui-popup-button:first-child{border-radius:0 0 0 13px}.mui-popup-button:first-child:last-child{border-radius:0 0 13px 13px}.mui-popup-button:last-child{border-radius:0 0 13px}.mui-popup-button:last-child:after{display:none}.mui-popup-button.mui-popup-button-bold{font-weight:600}.mui-popup-input input{font-size:14px;width:100%;height:26px;margin:15px 0 0;padding:0 5px;border:1px solid rgba(0,0,0,.3);border-radius:0;background:#fff}.mui-plus.mui-android .mui-popup-backdrop{-webkit-transition-duration:1ms;transition-duration:1ms}.mui-plus.mui-android .mui-popup{-webkit-transition-duration:1ms;transition-duration:1ms;-webkit-transform:translate3d(-50%,-50%,0) scale(1);transform:translate3d(-50%,-50%,0) scale(1)}.mui-progressbar{position:relative;display:block;overflow:hidden;width:100%;height:2px;-webkit-transform-origin:center top;transform-origin:center top;vertical-align:middle;border-radius:2px;background:#b6b6b6;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-progressbar span{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:150ms;transition:150ms;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);background:#007aff}.mui-progressbar.mui-progressbar-infinite:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-origin:left center;transform-origin:left center;-webkit-animation:mui-progressbar-infinite 1s linear infinite;animation:mui-progressbar-infinite 1s linear infinite;background:#007aff}body>.mui-progressbar{position:absolute;z-index:10000;top:44px;left:0;border-radius:0}.mui-progressbar-in{-webkit-animation:mui-progressbar-in 300ms forwards;animation:mui-progressbar-in 300ms forwards}.mui-progressbar-out{-webkit-animation:mui-progressbar-out 300ms forwards;animation:mui-progressbar-out 300ms forwards}@-webkit-keyframes mui-progressbar-in{from{-webkit-transform:scaleY(0);opacity:0}to{-webkit-transform:scaleY(1);opacity:1}}@keyframes mui-progressbar-in{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@-webkit-keyframes mui-progressbar-out{from{-webkit-transform:scaleY(1);opacity:1}to{-webkit-transform:scaleY(0);opacity:0}}@keyframes mui-progressbar-out{from{transform:scaleY(1);opacity:1}to{transform:scaleY(0);opacity:0}}@-webkit-keyframes mui-progressbar-infinite{0%{-webkit-transform:translate3d(-50%,0,0) scaleX(.5)}100%{-webkit-transform:translate3d(100%,0,0) scaleX(.5)}}@keyframes mui-progressbar-infinite{0%{transform:translate3d(-50%,0,0) scaleX(.5)}100%{transform:translate3d(100%,0,0) scaleX(.5)}}.mui-pagination{display:inline-block;margin:0 auto;padding-left:0;border-radius:6px}.mui-pagination>li{display:inline}.mui-pagination>li>a,.mui-pagination>li>span{line-height:1.428571429;position:relative;float:left;margin-left:-1px;padding:6px 12px;text-decoration:none;color:#007aff;border:1px solid #ddd;background-color:#fff}.mui-pagination>li:first-child>a,.mui-pagination>li:first-child>span{margin-left:0;border-top-left-radius:6px;border-bottom-left-radius:6px;background-clip:padding-box}.mui-pagination>li:last-child>a,.mui-pagination>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px;background-clip:padding-box}.mui-pagination>li.mui-active>a,.mui-pagination>li.mui-active>a:active,.mui-pagination>li.mui-active>span,.mui-pagination>li.mui-active>span:active,.mui-pagination>li:active>a,.mui-pagination>li:active>a:active,.mui-pagination>li:active>span,.mui-pagination>li:active>span:active{z-index:2;cursor:default;color:#fff;border-color:#007aff;background-color:#007aff}.mui-pagination>li.mui-disabled>a,.mui-pagination>li.mui-disabled>a:active,.mui-pagination>li.mui-disabled>span,.mui-pagination>li.mui-disabled>span:active{opacity:.6;color:#777;border:1px solid #ddd;background-color:#fff}.mui-pagination-lg>li>a,.mui-pagination-lg>li>span{font-size:18px;padding:10px 16px}.mui-pagination-sm>li>a,.mui-pagination-sm>li>span{font-size:12px;padding:5px 10px}.mui-pager{padding-left:0;list-style:none;text-align:center}.mui-pager:after,.mui-pager:before{display:table;content:' '}.mui-pager:after{clear:both}.mui-pager li{display:inline}.mui-pager li>a,.mui-pager li>span{display:inline-block;padding:5px 14px;border:1px solid #ddd;border-radius:6px;background-color:#fff;background-clip:padding-box}.mui-pager li.mui-active>a,.mui-pager li.mui-active>span,.mui-pager li:active>a,.mui-pager li:active>span{cursor:default;text-decoration:none;color:#fff;border-color:#007aff;background-color:#007aff}.mui-pager .mui-next>a,.mui-pager .mui-next>span{float:right}.mui-pager .mui-previous>a,.mui-pager .mui-previous>span{float:left}.mui-pager .mui-disabled>a,.mui-pager .mui-disabled>a:active,.mui-pager .mui-disabled>span,.mui-pager .mui-disabled>span:active{opacity:.6;color:#777;border:1px solid #ddd;background-color:#fff}.mui-modal{position:fixed;z-index:999;top:0;overflow:hidden;width:100%;min-height:100%;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0;background-color:#fff}.mui-modal.mui-active{height:100%;-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.mui-android .mui-modal .mui-bar{position:static}.mui-android .mui-modal .mui-bar-nav~.mui-content{padding-top:0}.mui-slider{position:relative;z-index:1;overflow:hidden;width:100%}.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:0}.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border-top:1px solid #c8c7cc;border-bottom:1px solid #c8c7cc}.mui-slider .mui-slider-group{font-size:0;position:relative;-webkit-transition:all 0s linear;transition:all 0s linear;white-space:nowrap}.mui-slider .mui-slider-group .mui-slider-item{font-size:14px;position:relative;display:inline-block;width:100%;height:100%;vertical-align:top;white-space:normal}.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item){line-height:0;position:relative;display:block}.mui-slider .mui-slider-group .mui-slider-item img{width:100%}.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after,.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before{height:0}.mui-slider .mui-slider-group.mui-slider-loop{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}.mui-slider-title{line-height:30px;position:absolute;bottom:0;left:0;width:100%;height:30px;margin:0;text-align:left;text-indent:12px;opacity:.8;background-color:#000}.mui-slider-indicator{position:absolute;bottom:8px;width:100%;text-align:center;background:0 0}.mui-slider-indicator.mui-segmented-control{position:relative;bottom:auto}.mui-slider-indicator .mui-indicator{display:inline-block;width:6px;height:6px;margin:1px 6px;cursor:pointer;border-radius:50%;background:#aaa;-webkit-box-shadow:0 0 1px 1px rgba(130,130,130,.7);box-shadow:0 0 1px 1px rgba(130,130,130,.7)}.mui-slider-indicator .mui-active.mui-indicator{background:#fff}.mui-slider-indicator .mui-icon{font-size:20px;line-height:30px;width:40px;height:30px;margin:3px;text-align:center;border:1px solid #ddd}.mui-slider-indicator .mui-number{line-height:32px;display:inline-block;width:58px}.mui-slider-indicator .mui-number span{color:#ff5053}.mui-slider-progress-bar{z-index:1;height:2px;-webkit-transform:translateZ(0);transform:translateZ(0)}.mui-switch{position:relative;display:block;width:74px;height:30px;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;transition-property:background-color,border;border:2px solid #ddd;border-radius:20px;background-color:#fff;background-clip:padding-box}.mui-switch.mui-disabled{opacity:.3}.mui-switch .mui-switch-handle{position:absolute;z-index:1;top:-1px;left:-1px;width:28px;height:28px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;-webkit-transition-property:-webkit-transform,width,left;transition-property:transform,width,left;border-radius:16px;background-color:#fff;background-clip:padding-box;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4)}.mui-switch:before{font-size:13px;position:absolute;top:3px;right:11px;content:'Off';text-transform:uppercase;color:#999}.mui-switch.mui-dragging{border-color:#f7f7f7;background-color:#f7f7f7}.mui-switch.mui-dragging .mui-switch-handle{width:38px}.mui-switch.mui-dragging.mui-active .mui-switch-handle{left:-11px;width:38px}.mui-switch.mui-active{border-color:#4cd964;background-color:#4cd964}.mui-switch.mui-active .mui-switch-handle{-webkit-transform:translate(43px,0);transform:translate(43px,0)}.mui-switch.mui-active:before{right:auto;left:15px;content:'On';color:#fff}.mui-switch input[type=checkbox]{display:none}.mui-switch-mini{width:47px}.mui-switch-mini:before{display:none}.mui-switch-mini.mui-active .mui-switch-handle{-webkit-transform:translate(16px,0);transform:translate(16px,0)}.mui-switch-blue.mui-active{border:2px solid #007aff;background-color:#007aff}.mui-content.mui-fade{left:0;opacity:0}.mui-content.mui-fade.mui-in{opacity:1}.mui-content.mui-sliding{z-index:2;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-content.mui-sliding.mui-left{z-index:1;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-content.mui-sliding.mui-right{z-index:3;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{font-family:Muiicons;font-size:inherit;line-height:1;position:absolute;top:50%;display:inline-block;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-decoration:none;color:#bbb;-webkit-font-smoothing:antialiased}.mui-push-left:after{left:15px;content:'\e582'}.mui-navigate-right:after,.mui-push-right:after{right:15px;content:'\e583'}.mui-pull-bottom-pocket,.mui-pull-top-pocket{position:absolute;left:0;display:block;visibility:hidden;overflow:hidden;width:100%;height:50px}.mui-plus-pullrefresh .mui-pull-bottom-pocket,.mui-plus-pullrefresh .mui-pull-top-pocket{display:none;visibility:visible}.mui-pull-top-pocket{top:0}.mui-bar-nav~.mui-content .mui-pull-top-pocket{top:44px}.mui-bar-nav~.mui-bar-header-secondary~.mui-content .mui-pull-top-pocket{top:88px}.mui-pull-bottom-pocket{position:relative;bottom:0;height:40px}.mui-pull-bottom-pocket .mui-pull-loading{visibility:hidden}.mui-pull-bottom-pocket .mui-pull-loading.mui-in{display:inline-block}.mui-pull{font-weight:700;position:absolute;right:0;bottom:10px;left:0;text-align:center;color:#777}.mui-pull-loading{margin-right:10px;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-webkit-transition-duration:400ms;transition-duration:400ms;vertical-align:middle}.mui-pull-loading.mui-reverse{-webkit-transform:rotate(180deg) translateZ(0);transform:rotate(180deg) translateZ(0)}.mui-pull-caption{font-size:15px;line-height:24px;position:relative;display:inline-block;overflow:visible;margin-top:0;vertical-align:middle}.mui-pull-caption span{display:none}.mui-pull-caption span.mui-in{display:inline}.mui-toast-container{line-height:17px;position:fixed;z-index:9999;bottom:50px;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0}.mui-toast-container.mui-active{opacity:.9}.mui-toast-message{font-size:14px;padding:10px 25px;text-align:center;color:#fff;border-radius:6px;background-color:#323232}.mui-numbox{position:relative;display:inline-block;overflow:hidden;width:120px;height:35px;padding:0 40px;vertical-align:top;vertical-align:middle;border:solid 1px #bbb;border-radius:3px;background-color:#efeff4}.mui-numbox [class*=btn-numbox],.mui-numbox [class*=numbox-btn]{font-size:18px;font-weight:400;line-height:100%;position:absolute;top:0;overflow:hidden;width:40px;height:100%;padding:0;color:#555;border:none;border-radius:0;background-color:#f9f9f9}.mui-numbox [class*=btn-numbox]:active,.mui-numbox [class*=numbox-btn]:active{background-color:#ccc}.mui-numbox [class*=btn-numbox][disabled],.mui-numbox [class*=numbox-btn][disabled]{color:silver}.mui-numbox .mui-btn-numbox-plus,.mui-numbox .mui-numbox-btn-plus{right:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.mui-numbox .mui-btn-numbox-minus,.mui-numbox .mui-numbox-btn-minus{left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.mui-numbox .mui-input-numbox,.mui-numbox .mui-numbox-input{display:inline-block;overflow:hidden;width:100%!important;height:100%;margin:0;padding:0 3px!important;text-align:center;text-overflow:ellipsis;word-break:normal;border:none!important;border-right:solid 1px #ccc!important;border-left:solid 1px #ccc!important;border-radius:0!important}.mui-input-row .mui-numbox{float:right;margin:2px 8px}@font-face{font-family:Muiicons;font-weight:400;font-style:normal;src:url(../fonts/mui.ttf) format('truetype')}.mui-icon{font-family:Muiicons;font-size:24px;font-weight:400;font-style:normal;line-height:1;display:inline-block;text-decoration:none;-webkit-font-smoothing:antialiased}.mui-icon.mui-active{color:#007aff}.mui-icon.mui-right:before{float:right;padding-left:.2em}.mui-icon-contact:before{content:'\e100'}.mui-icon-person:before{content:'\e101'}.mui-icon-personadd:before{content:'\e102'}.mui-icon-contact-filled:before{content:'\e130'}.mui-icon-person-filled:before{content:'\e131'}.mui-icon-personadd-filled:before{content:'\e132'}.mui-icon-phone:before{content:'\e200'}.mui-icon-email:before{content:'\e201'}.mui-icon-chatbubble:before{content:'\e202'}.mui-icon-chatboxes:before{content:'\e203'}.mui-icon-phone-filled:before{content:'\e230'}.mui-icon-email-filled:before{content:'\e231'}.mui-icon-chatbubble-filled:before{content:'\e232'}.mui-icon-chatboxes-filled:before{content:'\e233'}.mui-icon-weibo:before{content:'\e260'}.mui-icon-weixin:before{content:'\e261'}.mui-icon-pengyouquan:before{content:'\e262'}.mui-icon-chat:before{content:'\e263'}.mui-icon-qq:before{content:'\e264'}.mui-icon-videocam:before{content:'\e300'}.mui-icon-camera:before{content:'\e301'}.mui-icon-mic:before{content:'\e302'}.mui-icon-location:before{content:'\e303'}.mui-icon-mic-filled:before,.mui-icon-speech:before{content:'\e332'}.mui-icon-location-filled:before{content:'\e333'}.mui-icon-micoff:before{content:'\e360'}.mui-icon-image:before{content:'\e363'}.mui-icon-map:before{content:'\e364'}.mui-icon-compose:before{content:'\e400'}.mui-icon-trash:before{content:'\e401'}.mui-icon-upload:before{content:'\e402'}.mui-icon-download:before{content:'\e403'}.mui-icon-close:before{content:'\e404'}.mui-icon-redo:before{content:'\e405'}.mui-icon-undo:before{content:'\e406'}.mui-icon-refresh:before{content:'\e407'}.mui-icon-star:before{content:'\e408'}.mui-icon-plus:before{content:'\e409'}.mui-icon-minus:before{content:'\e410'}.mui-icon-checkbox:before,.mui-icon-circle:before{content:'\e411'}.mui-icon-clear:before,.mui-icon-close-filled:before{content:'\e434'}.mui-icon-refresh-filled:before{content:'\e437'}.mui-icon-star-filled:before{content:'\e438'}.mui-icon-plus-filled:before{content:'\e439'}.mui-icon-minus-filled:before{content:'\e440'}.mui-icon-circle-filled:before{content:'\e441'}.mui-icon-checkbox-filled:before{content:'\e442'}.mui-icon-closeempty:before{content:'\e460'}.mui-icon-refreshempty:before{content:'\e461'}.mui-icon-reload:before{content:'\e462'}.mui-icon-starhalf:before{content:'\e463'}.mui-icon-spinner:before{content:'\e464'}.mui-icon-spinner-cycle:before{content:'\e465'}.mui-icon-search:before{content:'\e466'}.mui-icon-plusempty:before{content:'\e468'}.mui-icon-forward:before{content:'\e470'}.mui-icon-back:before,.mui-icon-left-nav:before{content:'\e471'}.mui-icon-checkmarkempty:before{content:'\e472'}.mui-icon-home:before{content:'\e500'}.mui-icon-navigate:before{content:'\e501'}.mui-icon-gear:before{content:'\e502'}.mui-icon-paperplane:before{content:'\e503'}.mui-icon-info:before{content:'\e504'}.mui-icon-help:before{content:'\e505'}.mui-icon-locked:before{content:'\e506'}.mui-icon-more:before{content:'\e507'}.mui-icon-flag:before{content:'\e508'}.mui-icon-home-filled:before{content:'\e530'}.mui-icon-gear-filled:before{content:'\e532'}.mui-icon-info-filled:before{content:'\e534'}.mui-icon-help-filled:before{content:'\e535'}.mui-icon-more-filled:before{content:'\e537'}.mui-icon-settings:before{content:'\e560'}.mui-icon-list:before{content:'\e562'}.mui-icon-bars:before{content:'\e563'}.mui-icon-loop:before{content:'\e565'}.mui-icon-paperclip:before{content:'\e567'}.mui-icon-eye:before{content:'\e568'}.mui-icon-arrowup:before{content:'\e580'}.mui-icon-arrowdown:before{content:'\e581'}.mui-icon-arrowleft:before{content:'\e582'}.mui-icon-arrowright:before{content:'\e583'}.mui-icon-arrowthinup:before{content:'\e584'}.mui-icon-arrowthindown:before{content:'\e585'}.mui-icon-arrowthinleft:before{content:'\e586'}.mui-icon-arrowthinright:before{content:'\e587'}.mui-icon-pulldown:before{content:'\e588'}.mui-fullscreen{position:absolute;top:0;right:0;bottom:0;left:0}.mui-fullscreen.mui-slider .mui-slider-group{height:100%}.mui-fullscreen .mui-segmented-control~.mui-slider-group{position:absolute;top:40px;bottom:0;width:100%;height:auto}.mui-fullscreen.mui-slider .mui-slider-item>a{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-fullscreen .mui-off-canvas-wrap .mui-slider-item>a{top:auto;-webkit-transform:none;transform:none}.mui-bar-nav~.mui-content .mui-slider.mui-fullscreen{top:44px}.mui-bar-tab~.mui-content .mui-slider.mui-fullscreen .mui-segmented-control~.mui-slider-group{bottom:50px}.mui-android.mui-android-4-0 input:focus,.mui-android.mui-android-4-0 textarea:focus{-webkit-user-modify:inherit}.mui-android.mui-android-4-2 input,.mui-android.mui-android-4-2 textarea,.mui-android.mui-android-4-3 input,.mui-android.mui-android-4-3 textarea{-webkit-user-select:text}.mui-ios .mui-table-view-cell{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-plus-visible,.mui-wechat-visible{display:none!important}.mui-plus-hidden,.mui-wechat-hidden{display:block!important}.mui-tab-item.mui-plus-hidden,.mui-tab-item.mui-wechat-hidden{display:table-cell!important}.mui-plus .mui-plus-visible,.mui-wechat .mui-wechat-visible{display:block!important}.mui-plus .mui-tab-item.mui-plus-visible,.mui-wechat .mui-tab-item.mui-wechat-visible{display:table-cell!important}.mui-plus .mui-plus-hidden,.mui-wechat .mui-wechat-hidden{display:none!important}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav{height:64px;padding-top:20px}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav~.mui-content{padding-top:64px}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary,.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav~.mui-content .mui-pull-top-pocket{top:64px}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary~.mui-content{padding-top:94px}.mui-iframe-wrapper{position:absolute;right:0;left:0;-webkit-overflow-scrolling:touch}.mui-iframe-wrapper iframe{width:100%;height:100%;border:0}


--------------------------------------------------------------------------------