├── config ├── prod.env.js ├── dev.env.js └── index.js ├── static ├── images │ ├── add.png │ ├── arrow.png │ ├── blur.jpg │ ├── close.png │ ├── ellis.png │ ├── list.png │ ├── logo.png │ ├── loop.png │ ├── music.png │ ├── next.png │ ├── pause.png │ ├── play.png │ ├── play2.png │ ├── play3.png │ ├── prev.png │ ├── stop.png │ ├── active.png │ ├── arrow_l.png │ ├── arrow_r.png │ ├── avatar.gif │ ├── avatar.jpg │ ├── circle.png │ ├── random.png │ ├── search.png │ ├── ellipsis.png │ └── logo.svg └── weui │ └── weui.css ├── src ├── pages │ ├── counter │ │ ├── main.js │ │ ├── store.js │ │ └── index.vue │ ├── index │ │ ├── main.js │ │ └── index.vue │ └── logs │ │ ├── main.js │ │ └── index.vue ├── css │ ├── button.css │ └── app.css ├── components │ └── card.vue ├── utils │ ├── index.js │ ├── apiUtil.js │ ├── httpUtil.js │ └── api.js ├── main.js └── App.vue ├── .editorconfig ├── .gitignore ├── index.html ├── .postcssrc.js ├── .babelrc ├── README.md └── package.json /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /static/images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/add.png -------------------------------------------------------------------------------- /static/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/arrow.png -------------------------------------------------------------------------------- /static/images/blur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/blur.jpg -------------------------------------------------------------------------------- /static/images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/close.png -------------------------------------------------------------------------------- /static/images/ellis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/ellis.png -------------------------------------------------------------------------------- /static/images/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/list.png -------------------------------------------------------------------------------- /static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/logo.png -------------------------------------------------------------------------------- /static/images/loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/loop.png -------------------------------------------------------------------------------- /static/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/music.png -------------------------------------------------------------------------------- /static/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/next.png -------------------------------------------------------------------------------- /static/images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/pause.png -------------------------------------------------------------------------------- /static/images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/play.png -------------------------------------------------------------------------------- /static/images/play2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/play2.png -------------------------------------------------------------------------------- /static/images/play3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/play3.png -------------------------------------------------------------------------------- /static/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/prev.png -------------------------------------------------------------------------------- /static/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/stop.png -------------------------------------------------------------------------------- /static/images/active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/active.png -------------------------------------------------------------------------------- /static/images/arrow_l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/arrow_l.png -------------------------------------------------------------------------------- /static/images/arrow_r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/arrow_r.png -------------------------------------------------------------------------------- /static/images/avatar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/avatar.gif -------------------------------------------------------------------------------- /static/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/avatar.jpg -------------------------------------------------------------------------------- /static/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/circle.png -------------------------------------------------------------------------------- /static/images/random.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/random.png -------------------------------------------------------------------------------- /static/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/search.png -------------------------------------------------------------------------------- /static/images/ellipsis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ALazyTiger/mpvue-demo/HEAD/static/images/ellipsis.png -------------------------------------------------------------------------------- /src/pages/counter/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './index' 3 | 4 | const app = new Vue(App) 5 | app.$mount() 6 | -------------------------------------------------------------------------------- /src/pages/index/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './index' 3 | 4 | const app = new Vue(App) 5 | app.$mount() 6 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/css/button.css: -------------------------------------------------------------------------------- 1 | .button-sp-area{ 2 | margin: 0 auto; 3 | padding-top: 15px; 4 | width: 60%; 5 | } 6 | .mini-btn{ 7 | width: auto !important; 8 | margin-right: 5px !important; 9 | } -------------------------------------------------------------------------------- /.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 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /src/pages/logs/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './index' 3 | 4 | const app = new Vue(App) 5 | app.$mount() 6 | 7 | export default { 8 | config: { 9 | navigationBarTitleText: '查看启动日志' 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | my-project 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {}, 7 | "postcss-mpvue-wxss": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/card.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /.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-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/counter/store.js: -------------------------------------------------------------------------------- 1 | // https://vuex.vuejs.org/zh-cn/intro.html 2 | // make sure to call Vue.use(Vuex) if using a module system 3 | import Vue from 'vue' 4 | import Vuex from 'vuex' 5 | 6 | Vue.use(Vuex) 7 | 8 | const store = new Vuex.Store({ 9 | state: { 10 | count: 0 11 | }, 12 | mutations: { 13 | increment: (state) => { 14 | const obj = state 15 | obj.count += 1 16 | }, 17 | decrement: (state) => { 18 | const obj = state 19 | obj.count -= 1 20 | } 21 | } 22 | }) 23 | 24 | export default store 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # my-project 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 detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | function formatNumber (n) { 2 | const str = n.toString() 3 | return str[1] ? str : `0${str}` 4 | } 5 | 6 | export function formatTime (date) { 7 | const year = date.getFullYear() 8 | const month = date.getMonth() + 1 9 | const day = date.getDate() 10 | 11 | const hour = date.getHours() 12 | const minute = date.getMinutes() 13 | const second = date.getSeconds() 14 | 15 | const t1 = [year, month, day].map(formatNumber).join('/') 16 | const t2 = [hour, minute, second].map(formatNumber).join(':') 17 | 18 | return `${t1} ${t2}` 19 | } 20 | 21 | -------------------------------------------------------------------------------- /src/utils/apiUtil.js: -------------------------------------------------------------------------------- 1 | //封装httpApi 2 | import request from './httpUtil' 3 | const host = "https://easy-mock.com/mock/5b3047469b9262598cb0933d/example" 4 | const api = { 5 | // test地址 6 | policy:(params) => request.get(`${host}/policy`, params ), 7 | checkTeamUserInfo:(params) => request.post(`${host}/checkTeamUserInfo`,params), 8 | testPut:(params) => request.put(`${host}/checkTeamUserInfo`,params), 9 | testDel:(params) => request.delete(`${host}/checkTeamUserInfo`+ params.id,params), 10 | } 11 | // export default api 12 | export default { //作为组件库(install) 13 | install: function(Vue,name="$http") {//自定义名字(vue-resource也使用$http) 14 | Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上 15 | } 16 | } -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | @import './button.css'; 2 | page { 3 | background-color: #F8F8F8; 4 | font-size: 16px; 5 | font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif; 6 | } 7 | 8 | .page__hd { 9 | padding: 40px; 10 | } 11 | 12 | .page__bd { 13 | padding-bottom: 40px; 14 | } 15 | 16 | .page__bd_spacing { 17 | padding-left: 15px; 18 | padding-right: 15px; 19 | } 20 | 21 | .page__ft { 22 | padding-bottom: 10px; 23 | text-align: center; 24 | } 25 | 26 | .page__title { 27 | text-align: left; 28 | font-size: 20px; 29 | font-weight: 400; 30 | } 31 | 32 | .page__desc { 33 | margin-top: 5px; 34 | color: #888888; 35 | text-align: left; 36 | font-size: 14px; 37 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import '../static/weui/weui.css' 4 | import './css/app.css' 5 | // import flyioPlugin from './utils/apiUtil.js' 6 | // Vue.use(flyioPlugin);//使用组件库 7 | import fly from './utils/api' 8 | Vue.prototype.$http = fly; 9 | Vue.config.productionTip = false 10 | App.mpType = 'app' 11 | 12 | const app = new Vue(App) 13 | app.$mount() 14 | 15 | export default { 16 | // 这个字段走 app.json 17 | config: { 18 | pages: [ 19 | 'pages/index/index',// 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去 20 | 'pages/logs/logs', 21 | '^pages/counter/counter', 22 | ], 23 | window: { 24 | backgroundTextStyle: 'light', 25 | navigationBarBackgroundColor: '#fff', 26 | navigationBarTitleText: '懒懒de尐彪', 27 | navigationBarTextStyle: 'black' 28 | }, 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/utils/httpUtil.js: -------------------------------------------------------------------------------- 1 | // import Fly from 'flyio/dist/npm/wx' 2 | // 'flyio'(与axios、fentch对比 https://wendux.github.io/dist/#/doc/flyio/compare) 3 | var Fly=require("flyio/dist/npm/wx") //npm引入方式 4 | 5 | const request = new Fly() 6 | 7 | request.interceptors.request.use((request) => { 8 | wx.showLoading({ title: '加载中..' }) 9 | // wx.showNavigationBarLoading() //显示导航条加载动画。 10 | return request 11 | }) 12 | 13 | request.interceptors.response.use( 14 | (response, promise) => { 15 | wx.hideLoading() 16 | // wx.hideNavigationBarLoading() 17 | return promise.resolve(response.data) 18 | }, 19 | (err, promise) => { 20 | wx.hideNavigationBarLoading() 21 | wx.showToast({ 22 | title: err.message, 23 | icon: 'none', 24 | duration:1000 25 | }) 26 | return promise.resolve() 27 | } 28 | ) 29 | 30 | export default request -------------------------------------------------------------------------------- /src/pages/logs/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | 33 | 44 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 42 | -------------------------------------------------------------------------------- /src/pages/counter/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 40 | 54 | -------------------------------------------------------------------------------- /src/utils/api.js: -------------------------------------------------------------------------------- 1 | // import Fly from 'flyio/dist/npm/wx' 2 | // 'flyio'(与axios、fentch对比 https://wendux.github.io/dist/#/doc/flyio/compare) 3 | var Fly=require("flyio/dist/npm/wx") //npm引入方式 4 | const fly = new Fly(); 5 | const host = "http://www.dtworkroom.com/doris/1/2.0.0" 6 | fly.interceptors.request.use((request) => { 7 | wx.showLoading({ title: '加载中..' }) 8 | wx.showNavigationBarLoading() //显示导航条加载动画。 9 | // console.log(request) 10 | request.headers = { 11 | 'X-Tag': 'flyio', 12 | 'content-type': 'application/json' 13 | } 14 | let authParams = { 15 | // 公共参数 16 | // 'categoryType': 'SaleGoodsType@sim', 17 | // 'streamNo': 'wxb046455998284b1d', 18 | // 'reqSource': 'MALL_H5', 19 | // 'appid': 'string', 20 | // 'timestamp': new Date().getTime(), 21 | // 'sign': 'string' 22 | } 23 | 24 | request.body && Object.keys(request.body).forEach((val) => { 25 | if (request.body[val] === '') { 26 | delete request.body[val] 27 | }; 28 | }) 29 | request.body = { 30 | ...request.body, 31 | ...authParams 32 | } 33 | 34 | return request; 35 | }) 36 | // 添加响应拦截器 37 | fly.interceptors.response.use((response) => { 38 | wx.hideLoading() 39 | return response.data // 请求成功之后将返回值返回 40 | }, 41 | (err) => {// 请求出错，根据返回状态码判断出错原因 42 | console.log(err) 43 | wx.hideLoading() 44 | if (err) { 45 | return '请求失败' 46 | }; 47 | } 48 | ) 49 | 50 | fly.config.baseURL = host 51 | 52 | export default fly -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: false, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | // 在小程序开发者工具中不需要自动打开浏览器 28 | autoOpenBrowser: false, 29 | assetsSubDirectory: 'static', 30 | assetsPublicPath: '/', 31 | proxyTable: {}, 32 | // CSS Sourcemaps off by default because relative paths are "buggy" 33 | // with this option, according to the CSS-Loader README 34 | // (https://github.com/webpack/css-loader#sourcemaps) 35 | // In our experience, they generally work as expected, 36 | // just be aware of this issue when enabling this option. 37 | cssSourceMap: false 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "e ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "flyio": "^0.5.9", 14 | "mpvue": "^1.0.1", 15 | "vuex": "^2.3.1" 16 | }, 17 | "devDependencies": { 18 | "mpvue-loader": "^1.0.2", 19 | "mpvue-webpack-target": "^1.0.0", 20 | "mpvue-template-compiler": "^1.0.1", 21 | "postcss-mpvue-wxss": "^1.0.0", 22 | "px2rpx-loader": "^0.1.8", 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-transform-runtime": "^6.22.0", 27 | "babel-preset-env": "^1.3.2", 28 | "babel-preset-stage-2": "^6.22.0", 29 | "babel-register": "^6.22.0", 30 | "chalk": "^2.0.1", 31 | "connect-history-api-fallback": "^1.3.0", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "cssnano": "^3.10.0", 35 | "eventsource-polyfill": "^0.9.6", 36 | "express": "^4.14.1", 37 | "extract-text-webpack-plugin": "^2.0.0", 38 | "file-loader": "^0.11.1", 39 | "friendly-errors-webpack-plugin": "^1.1.3", 40 | "html-webpack-plugin": "^2.28.0", 41 | "http-proxy-middleware": "^0.17.3", 42 | "webpack-bundle-analyzer": "^2.2.1", 43 | "semver": "^5.3.0", 44 | "shelljs": "^0.7.6", 45 | "opn": "^5.1.0", 46 | "optimize-css-assets-webpack-plugin": "^2.0.0", 47 | "ora": "^1.2.0", 48 | "rimraf": "^2.6.0", 49 | "url-loader": "^0.5.8", 50 | "vue-style-loader": "^3.0.1", 51 | "webpack": "^2.6.1", 52 | "webpack-dev-middleware": "^1.10.0", 53 | "webpack-hot-middleware": "^2.18.0", 54 | "webpack-dev-middleware-hard-disk": "^1.10.0", 55 | "webpack-merge": "^4.1.0", 56 | "postcss-loader": "^2.0.6" 57 | }, 58 | "engines": { 59 | "node": ">= 4.0.0", 60 | "npm": ">= 3.0.0" 61 | }, 62 | "browserslist": [ 63 | "> 1%", 64 | "last 2 versions", 65 | "not ie <= 8" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /static/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 154 | 155 | 314 | -------------------------------------------------------------------------------- /static/weui/weui.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | 7 | page { 8 | line-height: 1.6; 9 | font-family: -apple-system-font, Helvetica Neue, sans-serif; 10 | } 11 | 12 | icon { 13 | vertical-align: middle; 14 | } 15 | 16 | .weui-cells { 17 | position: relative; 18 | margin-top: 1.17647059em; 19 | background-color: #fff; 20 | line-height: 1.41176471; 21 | font-size: 17px; 22 | } 23 | 24 | .weui-cells:before { 25 | top: 0; 26 | border-top: 1rpx solid #d9d9d9; 27 | } 28 | 29 | .weui-cells:after, 30 | .weui-cells:before { 31 | content: " "; 32 | position: absolute; 33 | left: 0; 34 | right: 0; 35 | height: 1px; 36 | color: #d9d9d9; 37 | } 38 | 39 | .weui-cells:after { 40 | bottom: 0; 41 | border-bottom: 1rpx solid #d9d9d9; 42 | } 43 | 44 | .weui-cells__title { 45 | margin-top: 0.77em; 46 | margin-bottom: 0.3em; 47 | padding-left: 15px; 48 | padding-right: 15px; 49 | color: #999; 50 | font-size: 14px; 51 | } 52 | 53 | .weui-cells_after-title { 54 | margin-top: 0; 55 | } 56 | 57 | .weui-cells__tips { 58 | margin-top: 0.3em; 59 | color: #999; 60 | padding-left: 15px; 61 | padding-right: 15px; 62 | font-size: 14px; 63 | } 64 | 65 | .weui-cell { 66 | padding: 10px 15px; 67 | position: relative; 68 | display: -webkit-box; 69 | display: -webkit-flex; 70 | display: flex; 71 | -webkit-box-align: center; 72 | -webkit-align-items: center; 73 | align-items: center; 74 | } 75 | 76 | .weui-cell:before { 77 | content: " "; 78 | position: absolute; 79 | left: 0; 80 | top: 0; 81 | right: 0; 82 | height: 1px; 83 | border-top: 1rpx solid #d9d9d9; 84 | color: #d9d9d9; 85 | left: 15px; 86 | } 87 | 88 | .weui-cell:first-child:before { 89 | display: none; 90 | } 91 | 92 | .weui-cell_active { 93 | background-color: #ececec; 94 | } 95 | 96 | .weui-cell_primary { 97 | -webkit-box-align: start; 98 | -webkit-align-items: flex-start; 99 | align-items: flex-start; 100 | } 101 | 102 | .weui-cell__bd { 103 | -webkit-box-flex: 1; 104 | -webkit-flex: 1; 105 | flex: 1; 106 | } 107 | 108 | .weui-cell__ft { 109 | text-align: right; 110 | color: #999; 111 | } 112 | 113 | .weui-cell_access { 114 | color: inherit; 115 | } 116 | 117 | .weui-cell__ft_in-access { 118 | padding-right: 13px; 119 | position: relative; 120 | } 121 | 122 | .weui-cell__ft_in-access:after { 123 | content: " "; 124 | display: inline-block; 125 | height: 6px; 126 | width: 6px; 127 | border-width: 2px 2px 0 0; 128 | border-color: #c8c8cd; 129 | border-style: solid; 130 | -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); 131 | transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); 132 | position: relative; 133 | top: -2px; 134 | position: absolute; 135 | top: 50%; 136 | margin-top: -4px; 137 | right: 2px; 138 | } 139 | 140 | .weui-cell_link { 141 | color: #586c94; 142 | font-size: 14px; 143 | } 144 | 145 | .weui-cell_link:active { 146 | background-color: #ececec; 147 | } 148 | 149 | .weui-cell_link:first-child:before { 150 | display: block; 151 | } 152 | 153 | .weui-icon-radio { 154 | margin-left: 3.2px; 155 | margin-right: 3.2px; 156 | } 157 | 158 | .weui-icon-checkbox_circle, 159 | .weui-icon-checkbox_success { 160 | margin-left: 4.6px; 161 | margin-right: 4.6px; 162 | } 163 | 164 | .weui-check__label:active { 165 | background-color: #ececec; 166 | } 167 | 168 | .weui-check { 169 | position: absolute; 170 | left: -9999px; 171 | } 172 | 173 | .weui-check__hd_in-checkbox { 174 | padding-right: 0.35em; 175 | } 176 | 177 | .weui-cell__ft_in-radio { 178 | padding-left: 0.35em; 179 | } 180 | 181 | .weui-cell_input { 182 | padding-top: 0; 183 | padding-bottom: 0; 184 | } 185 | 186 | .weui-label { 187 | width: 105px; 188 | word-wrap: break-word; 189 | word-break: break-all; 190 | } 191 | 192 | .weui-input { 193 | height: 2.58823529em; 194 | min-height: 2.58823529em; 195 | line-height: 2.58823529em; 196 | } 197 | 198 | .weui-toptips { 199 | position: fixed; 200 | -webkit-transform: translateZ(0); 201 | transform: translateZ(0); 202 | top: 0; 203 | left: 0; 204 | right: 0; 205 | padding: 5px; 206 | font-size: 14px; 207 | text-align: center; 208 | color: #fff; 209 | z-index: 5000; 210 | word-wrap: break-word; 211 | word-break: break-all; 212 | } 213 | 214 | .weui-toptips_warn { 215 | background-color: #e64340; 216 | } 217 | 218 | .weui-textarea { 219 | display: block; 220 | width: 100%; 221 | } 222 | 223 | .weui-textarea-counter { 224 | color: #b2b2b2; 225 | text-align: right; 226 | } 227 | 228 | .weui-cell_warn, 229 | .weui-textarea-counter_warn { 230 | color: #e64340; 231 | } 232 | 233 | .weui-form-preview { 234 | position: relative; 235 | background-color: #fff; 236 | } 237 | 238 | .weui-form-preview:before { 239 | top: 0; 240 | border-top: 1rpx solid #d9d9d9; 241 | } 242 | 243 | .weui-form-preview:after, 244 | .weui-form-preview:before { 245 | content: " "; 246 | position: absolute; 247 | left: 0; 248 | right: 0; 249 | height: 1px; 250 | color: #d9d9d9; 251 | } 252 | 253 | .weui-form-preview:after { 254 | bottom: 0; 255 | border-bottom: 1rpx solid #d9d9d9; 256 | } 257 | 258 | .weui-form-preview__value { 259 | font-size: 14px; 260 | } 261 | 262 | .weui-form-preview__value_in-hd { 263 | font-size: 26px; 264 | } 265 | 266 | .weui-form-preview__hd { 267 | position: relative; 268 | padding: 10px 15px; 269 | text-align: right; 270 | line-height: 2.5em; 271 | } 272 | 273 | .weui-form-preview__hd:after { 274 | content: " "; 275 | position: absolute; 276 | left: 0; 277 | bottom: 0; 278 | right: 0; 279 | height: 1px; 280 | border-bottom: 1rpx solid #d9d9d9; 281 | color: #d9d9d9; 282 | left: 15px; 283 | } 284 | 285 | .weui-form-preview__bd { 286 | padding: 10px 15px; 287 | font-size: 0.9em; 288 | text-align: right; 289 | color: #999; 290 | line-height: 2; 291 | } 292 | 293 | .weui-form-preview__ft { 294 | position: relative; 295 | line-height: 50px; 296 | display: -webkit-box; 297 | display: -webkit-flex; 298 | display: flex; 299 | } 300 | 301 | .weui-form-preview__ft:after { 302 | content: " "; 303 | position: absolute; 304 | left: 0; 305 | top: 0; 306 | right: 0; 307 | height: 1px; 308 | border-top: 1rpx solid #d5d5d6; 309 | color: #d5d5d6; 310 | } 311 | 312 | .weui-form-preview__item { 313 | overflow: hidden; 314 | } 315 | 316 | .weui-form-preview__label { 317 | float: left; 318 | margin-right: 1em; 319 | min-width: 4em; 320 | color: #999; 321 | text-align: justify; 322 | text-align-last: justify; 323 | } 324 | 325 | .weui-form-preview__value { 326 | display: block; 327 | overflow: hidden; 328 | word-break: normal; 329 | word-wrap: break-word; 330 | } 331 | 332 | .weui-form-preview__btn { 333 | position: relative; 334 | display: block; 335 | -webkit-box-flex: 1; 336 | -webkit-flex: 1; 337 | flex: 1; 338 | color: #3cc51f; 339 | text-align: center; 340 | } 341 | 342 | .weui-form-preview__btn:after { 343 | content: " "; 344 | position: absolute; 345 | left: 0; 346 | top: 0; 347 | width: 1px; 348 | bottom: 0; 349 | border-left: 1rpx solid #d5d5d6; 350 | color: #d5d5d6; 351 | } 352 | 353 | .weui-form-preview__btn:first-child:after { 354 | display: none; 355 | } 356 | 357 | .weui-form-preview__btn_active { 358 | background-color: #eee; 359 | } 360 | 361 | .weui-form-preview__btn_default { 362 | color: #999; 363 | } 364 | 365 | .weui-form-preview__btn_primary { 366 | color: #0bb20c; 367 | } 368 | 369 | .weui-cell_select { 370 | padding: 0; 371 | } 372 | 373 | .weui-select { 374 | position: relative; 375 | padding-left: 15px; 376 | padding-right: 30px; 377 | height: 2.58823529em; 378 | min-height: 2.58823529em; 379 | line-height: 2.58823529em; 380 | border-right: 1rpx solid #d9d9d9; 381 | } 382 | 383 | .weui-select:before { 384 | content: " "; 385 | display: inline-block; 386 | height: 6px; 387 | width: 6px; 388 | border-width: 2px 2px 0 0; 389 | border-color: #c8c8cd; 390 | border-style: solid; 391 | -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); 392 | transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); 393 | position: relative; 394 | top: -2px; 395 | position: absolute; 396 | top: 50%; 397 | right: 15px; 398 | margin-top: -4px; 399 | } 400 | 401 | .weui-select_in-select-after { 402 | padding-left: 0; 403 | } 404 | 405 | .weui-cell__bd_in-select-before, 406 | .weui-cell__hd_in-select-after { 407 | padding-left: 15px; 408 | } 409 | 410 | .weui-cell_vcode { 411 | padding-right: 0; 412 | } 413 | 414 | .weui-vcode-btn, 415 | .weui-vcode-img { 416 | margin-left: 5px; 417 | height: 2.58823529em; 418 | vertical-align: middle; 419 | } 420 | 421 | .weui-vcode-btn { 422 | display: inline-block; 423 | padding: 0 0.6em 0 0.7em; 424 | border-left: 1px solid #e5e5e5; 425 | line-height: 2.58823529em; 426 | font-size: 17px; 427 | color: #3cc51f; 428 | white-space: nowrap; 429 | } 430 | 431 | .weui-vcode-btn:active { 432 | color: #52a341; 433 | } 434 | 435 | .weui-cell_switch { 436 | padding-top: 6px; 437 | padding-bottom: 6px; 438 | } 439 | 440 | .weui-uploader__hd { 441 | display: -webkit-box; 442 | display: -webkit-flex; 443 | display: flex; 444 | padding-bottom: 10px; 445 | -webkit-box-align: center; 446 | -webkit-align-items: center; 447 | align-items: center; 448 | } 449 | 450 | .weui-uploader__title { 451 | -webkit-box-flex: 1; 452 | -webkit-flex: 1; 453 | flex: 1; 454 | } 455 | 456 | .weui-uploader__info { 457 | color: #b2b2b2; 458 | } 459 | 460 | .weui-uploader__bd { 461 | margin-bottom: -4px; 462 | margin-right: -9px; 463 | overflow: hidden; 464 | } 465 | 466 | .weui-uploader__file { 467 | float: left; 468 | margin-right: 9px; 469 | margin-bottom: 9px; 470 | } 471 | 472 | .weui-uploader__img { 473 | display: block; 474 | width: 79px; 475 | height: 79px; 476 | } 477 | 478 | .weui-uploader__file_status { 479 | position: relative; 480 | } 481 | 482 | .weui-uploader__file_status:before { 483 | content: " "; 484 | position: absolute; 485 | top: 0; 486 | right: 0; 487 | bottom: 0; 488 | left: 0; 489 | background-color: rgba(0, 0, 0, 0.5); 490 | } 491 | 492 | .weui-uploader__file-content { 493 | position: absolute; 494 | top: 50%; 495 | left: 50%; 496 | -webkit-transform: translate(-50%, -50%); 497 | transform: translate(-50%, -50%); 498 | color: #fff; 499 | } 500 | 501 | .weui-uploader__input-box { 502 | float: left; 503 | position: relative; 504 | margin-right: 9px; 505 | margin-bottom: 9px; 506 | width: 77px; 507 | height: 77px; 508 | border: 1px solid #d9d9d9; 509 | } 510 | 511 | .weui-uploader__input-box:after, 512 | .weui-uploader__input-box:before { 513 | content: " "; 514 | position: absolute; 515 | top: 50%; 516 | left: 50%; 517 | -webkit-transform: translate(-50%, -50%); 518 | transform: translate(-50%, -50%); 519 | background-color: #d9d9d9; 520 | } 521 | 522 | .weui-uploader__input-box:before { 523 | width: 2px; 524 | height: 39.5px; 525 | } 526 | 527 | .weui-uploader__input-box:after { 528 | width: 39.5px; 529 | height: 2px; 530 | } 531 | 532 | .weui-uploader__input-box:active { 533 | border-color: #999; 534 | } 535 | 536 | .weui-uploader__input-box:active:after, 537 | .weui-uploader__input-box:active:before { 538 | background-color: #999; 539 | } 540 | 541 | .weui-uploader__input { 542 | position: absolute; 543 | z-index: 1; 544 | top: 0; 545 | left: 0; 546 | width: 100%; 547 | height: 100%; 548 | opacity: 0; 549 | } 550 | 551 | .weui-article { 552 | padding: 20px 15px; 553 | font-size: 15px; 554 | } 555 | 556 | .weui-article__section { 557 | margin-bottom: 1.5em; 558 | } 559 | 560 | .weui-article__h1 { 561 | font-size: 18px; 562 | font-weight: 400; 563 | margin-bottom: 0.9em; 564 | } 565 | 566 | .weui-article__h2 { 567 | font-size: 16px; 568 | font-weight: 400; 569 | margin-bottom: 0.34em; 570 | } 571 | 572 | .weui-article__h3 { 573 | font-weight: 400; 574 | font-size: 15px; 575 | margin-bottom: 0.34em; 576 | } 577 | 578 | .weui-article__p { 579 | margin: 0 0 0.8em; 580 | } 581 | 582 | .weui-msg { 583 | padding-top: 36px; 584 | text-align: center; 585 | } 586 | 587 | .weui-msg__link { 588 | display: inline; 589 | color: #586c94; 590 | } 591 | 592 | .weui-msg__icon-area { 593 | margin-bottom: 30px; 594 | } 595 | 596 | .weui-msg__text-area { 597 | margin-bottom: 25px; 598 | padding: 0 20px; 599 | } 600 | 601 | .weui-msg__title { 602 | margin-bottom: 5px; 603 | font-weight: 400; 604 | font-size: 20px; 605 | } 606 | 607 | .weui-msg__desc { 608 | font-size: 14px; 609 | color: #999; 610 | } 611 | 612 | .weui-msg__opr-area { 613 | margin-bottom: 25px; 614 | } 615 | 616 | .weui-msg__extra-area { 617 | margin-bottom: 15px; 618 | font-size: 14px; 619 | color: #999; 620 | } 621 | 622 | @media screen and (min-height:438px) { 623 | .weui-msg__extra-area { 624 | position: fixed; 625 | left: 0; 626 | bottom: 0; 627 | width: 100%; 628 | text-align: center; 629 | } 630 | } 631 | 632 | .weui-flex { 633 | display: -webkit-box; 634 | display: -webkit-flex; 635 | display: flex; 636 | } 637 | 638 | .weui-flex__item { 639 | -webkit-box-flex: 1; 640 | -webkit-flex: 1; 641 | flex: 1; 642 | } 643 | 644 | .weui-btn { 645 | margin-top: 15px; 646 | } 647 | 648 | .weui-btn:first-child { 649 | margin-top: 0; 650 | } 651 | 652 | .weui-btn-area { 653 | margin: 1.17647059em 15px 0.3em; 654 | } 655 | 656 | .weui-agree { 657 | display: block; 658 | padding: 0.5em 15px; 659 | font-size: 13px; 660 | } 661 | 662 | .weui-agree__text { 663 | color: #999; 664 | } 665 | 666 | .weui-agree__link { 667 | display: inline; 668 | color: #586c94; 669 | } 670 | 671 | .weui-agree__checkbox { 672 | position: absolute; 673 | left: -9999px; 674 | } 675 | 676 | .weui-agree__checkbox-icon { 677 | position: relative; 678 | top: 2px; 679 | display: inline-block; 680 | border: 1px solid #d1d1d1; 681 | background-color: #fff; 682 | border-radius: 3px; 683 | width: 11px; 684 | height: 11px; 685 | } 686 | 687 | .weui-agree__checkbox-icon-check { 688 | position: absolute; 689 | top: 1px; 690 | left: 1px; 691 | } 692 | 693 | .weui-footer { 694 | color: #999; 695 | font-size: 14px; 696 | text-align: center; 697 | } 698 | 699 | .weui-footer_fixed-bottom { 700 | position: fixed; 701 | bottom: 0.52em; 702 | left: 0; 703 | right: 0; 704 | } 705 | 706 | .weui-footer__links { 707 | font-size: 0; 708 | } 709 | 710 | .weui-footer__link { 711 | display: inline-block; 712 | vertical-align: top; 713 | margin: 0 0.62em; 714 | position: relative; 715 | font-size: 14px; 716 | color: #586c94; 717 | } 718 | 719 | .weui-footer__link:before { 720 | content: " "; 721 | position: absolute; 722 | left: 0; 723 | top: 0; 724 | width: 1px; 725 | bottom: 0; 726 | border-left: 1rpx solid #c7c7c7; 727 | color: #c7c7c7; 728 | left: -.65em; 729 | top: 0.36em; 730 | bottom: 0.36em; 731 | } 732 | 733 | .weui-footer__link:first-child:before { 734 | display: none; 735 | } 736 | 737 | .weui-footer__text { 738 | padding: 0 0.34em; 739 | font-size: 12px; 740 | } 741 | 742 | .weui-grids { 743 | border-top: 1rpx solid #d9d9d9; 744 | border-left: 1rpx solid #d9d9d9; 745 | overflow: hidden; 746 | } 747 | 748 | .weui-grid { 749 | position: relative; 750 | float: left; 751 | padding: 20px 10px; 752 | width: 33.33333333%; 753 | box-sizing: border-box; 754 | border-right: 1rpx solid #d9d9d9; 755 | border-bottom: 1rpx solid #d9d9d9; 756 | } 757 | 758 | .weui-grid_active { 759 | background-color: #ececec; 760 | } 761 | 762 | .weui-grid__icon { 763 | display: block; 764 | width: 28px; 765 | height: 28px; 766 | margin: 0 auto; 767 | } 768 | 769 | .weui-grid__label { 770 | margin-top: 5px; 771 | display: block; 772 | text-align: center; 773 | color: #000; 774 | font-size: 14px; 775 | white-space: nowrap; 776 | text-overflow: ellipsis; 777 | overflow: hidden; 778 | } 779 | 780 | .weui-loading { 781 | margin: 0 5px; 782 | width: 20px; 783 | height: 20px; 784 | display: inline-block; 785 | vertical-align: middle; 786 | -webkit-animation: a 1s steps(12) infinite; 787 | animation: a 1s steps(12) infinite; 788 | background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; 789 | background-size: 100%; 790 | } 791 | 792 | .weui-loading.weui-loading_transparent { 793 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); 794 | } 795 | 796 | @-webkit-keyframes a { 797 | 0% { 798 | -webkit-transform: rotate(0deg); 799 | transform: rotate(0deg); 800 | } 801 | to { 802 | -webkit-transform: rotate(1turn); 803 | transform: rotate(1turn); 804 | } 805 | } 806 | 807 | @keyframes a { 808 | 0% { 809 | -webkit-transform: rotate(0deg); 810 | transform: rotate(0deg); 811 | } 812 | to { 813 | -webkit-transform: rotate(1turn); 814 | transform: rotate(1turn); 815 | } 816 | } 817 | 818 | .weui-badge { 819 | display: inline-block; 820 | padding: 0.15em 0.4em; 821 | min-width: 8px; 822 | border-radius: 18px; 823 | background-color: #e64340; 824 | color: #fff; 825 | line-height: 1.2; 826 | text-align: center; 827 | font-size: 12px; 828 | vertical-align: middle; 829 | } 830 | 831 | .weui-badge_dot { 832 | padding: 0.4em; 833 | min-width: 0; 834 | } 835 | 836 | .weui-loadmore { 837 | width: 65%; 838 | margin: 1.5em auto; 839 | line-height: 1.6em; 840 | font-size: 14px; 841 | text-align: center; 842 | } 843 | 844 | .weui-loadmore__tips { 845 | display: inline-block; 846 | vertical-align: middle; 847 | } 848 | 849 | .weui-loadmore_line { 850 | border-top: 1px solid #e5e5e5; 851 | margin-top: 2.4em; 852 | } 853 | 854 | .weui-loadmore__tips_in-line { 855 | position: relative; 856 | top: -.9em; 857 | padding: 0 0.55em; 858 | background-color: #fff; 859 | color: #999; 860 | } 861 | 862 | .weui-loadmore__tips_in-dot { 863 | position: relative; 864 | padding: 0 0.16em; 865 | width: 4px; 866 | height: 1.6em; 867 | } 868 | 869 | .weui-loadmore__tips_in-dot:before { 870 | content: " "; 871 | position: absolute; 872 | top: 50%; 873 | left: 50%; 874 | margin-top: -1px; 875 | margin-left: -2px; 876 | width: 4px; 877 | height: 4px; 878 | border-radius: 50%; 879 | background-color: #e5e5e5; 880 | } 881 | 882 | .weui-panel { 883 | background-color: #fff; 884 | margin-top: 10px; 885 | position: relative; 886 | overflow: hidden; 887 | } 888 | 889 | .weui-panel:first-child { 890 | margin-top: 0; 891 | } 892 | 893 | .weui-panel:before { 894 | top: 0; 895 | border-top: 1rpx solid #e5e5e5; 896 | } 897 | 898 | .weui-panel:after, 899 | .weui-panel:before { 900 | content: " "; 901 | position: absolute; 902 | left: 0; 903 | right: 0; 904 | height: 1px; 905 | color: #e5e5e5; 906 | } 907 | 908 | .weui-panel:after { 909 | bottom: 0; 910 | border-bottom: 1rpx solid #e5e5e5; 911 | } 912 | 913 | .weui-panel__hd { 914 | padding: 14px 15px 10px; 915 | color: #999; 916 | font-size: 13px; 917 | position: relative; 918 | } 919 | 920 | .weui-panel__hd:after { 921 | content: " "; 922 | position: absolute; 923 | left: 0; 924 | bottom: 0; 925 | right: 0; 926 | height: 1px; 927 | border-bottom: 1rpx solid #e5e5e5; 928 | color: #e5e5e5; 929 | left: 15px; 930 | } 931 | 932 | .weui-media-box { 933 | padding: 15px; 934 | position: relative; 935 | } 936 | 937 | .weui-media-box:before { 938 | content: " "; 939 | position: absolute; 940 | left: 0; 941 | top: 0; 942 | right: 0; 943 | height: 1px; 944 | border-top: 1rpx solid #e5e5e5; 945 | color: #e5e5e5; 946 | left: 15px; 947 | } 948 | 949 | .weui-media-box:first-child:before { 950 | display: none; 951 | } 952 | 953 | .weui-media-box__title { 954 | font-weight: 400; 955 | font-size: 17px; 956 | width: auto; 957 | overflow: hidden; 958 | text-overflow: ellipsis; 959 | white-space: nowrap; 960 | word-wrap: normal; 961 | word-wrap: break-word; 962 | word-break: break-all; 963 | } 964 | 965 | .weui-media-box__desc { 966 | color: #999; 967 | font-size: 13px; 968 | line-height: 1.2; 969 | overflow: hidden; 970 | text-overflow: ellipsis; 971 | display: -webkit-box; 972 | -webkit-box-orient: vertical; 973 | -webkit-line-clamp: 2; 974 | } 975 | 976 | .weui-media-box__info { 977 | margin-top: 15px; 978 | padding-bottom: 5px; 979 | font-size: 13px; 980 | color: #cecece; 981 | line-height: 1em; 982 | list-style: none; 983 | overflow: hidden; 984 | } 985 | 986 | .weui-media-box__info__meta { 987 | float: left; 988 | padding-right: 1em; 989 | } 990 | 991 | .weui-media-box__info__meta_extra { 992 | padding-left: 1em; 993 | border-left: 1px solid #cecece; 994 | } 995 | 996 | .weui-media-box__title_in-text { 997 | margin-bottom: 8px; 998 | } 999 | 1000 | .weui-media-box_appmsg { 1001 | display: -webkit-box; 1002 | display: -webkit-flex; 1003 | display: flex; 1004 | -webkit-box-align: center; 1005 | -webkit-align-items: center; 1006 | align-items: center; 1007 | } 1008 | 1009 | .weui-media-box__thumb { 1010 | width: 100%; 1011 | height: 100%; 1012 | vertical-align: top; 1013 | } 1014 | 1015 | .weui-media-box__hd_in-appmsg { 1016 | margin-right: 0.8em; 1017 | width: 60px; 1018 | height: 60px; 1019 | line-height: 60px; 1020 | text-align: center; 1021 | } 1022 | 1023 | .weui-media-box__bd_in-appmsg { 1024 | -webkit-box-flex: 1; 1025 | -webkit-flex: 1; 1026 | flex: 1; 1027 | min-width: 0; 1028 | } 1029 | 1030 | .weui-media-box_small-appmsg { 1031 | padding: 0; 1032 | } 1033 | 1034 | .weui-cells_in-small-appmsg { 1035 | margin-top: 0; 1036 | } 1037 | 1038 | .weui-cells_in-small-appmsg:before { 1039 | display: none; 1040 | } 1041 | 1042 | .weui-progress { 1043 | display: -webkit-box; 1044 | display: -webkit-flex; 1045 | display: flex; 1046 | -webkit-box-align: center; 1047 | -webkit-align-items: center; 1048 | align-items: center; 1049 | } 1050 | 1051 | .weui-progress__bar { 1052 | -webkit-box-flex: 1; 1053 | -webkit-flex: 1; 1054 | flex: 1; 1055 | } 1056 | 1057 | .weui-progress__opr { 1058 | margin-left: 15px; 1059 | font-size: 0; 1060 | } 1061 | 1062 | .weui-navbar { 1063 | display: -webkit-box; 1064 | display: -webkit-flex; 1065 | display: flex; 1066 | position: absolute; 1067 | z-index: 500; 1068 | top: 0; 1069 | width: 100%; 1070 | border-bottom: 1rpx solid #ccc; 1071 | } 1072 | 1073 | .weui-navbar__item { 1074 | position: relative; 1075 | display: block; 1076 | -webkit-box-flex: 1; 1077 | -webkit-flex: 1; 1078 | flex: 1; 1079 | padding: 13px 0; 1080 | text-align: center; 1081 | font-size: 0; 1082 | } 1083 | 1084 | .weui-navbar__item.weui-bar__item_on { 1085 | color: #1aad19; 1086 | } 1087 | 1088 | .weui-navbar__slider { 1089 | position: absolute; 1090 | content: " "; 1091 | left: 0; 1092 | bottom: 0; 1093 | width: 6em; 1094 | height: 3px; 1095 | background-color: #1aad19; 1096 | -webkit-transition: -webkit-transform 0.3s; 1097 | transition: -webkit-transform 0.3s; 1098 | transition: transform 0.3s; 1099 | transition: transform 0.3s, -webkit-transform 0.3s; 1100 | } 1101 | 1102 | .weui-navbar__title { 1103 | display: inline-block; 1104 | font-size: 15px; 1105 | max-width: 8em; 1106 | width: auto; 1107 | overflow: hidden; 1108 | text-overflow: ellipsis; 1109 | white-space: nowrap; 1110 | word-wrap: normal; 1111 | } 1112 | 1113 | .weui-tab { 1114 | position: relative; 1115 | height: 100%; 1116 | } 1117 | 1118 | .weui-tab__panel { 1119 | box-sizing: border-box; 1120 | height: 100%; 1121 | padding-top: 50px; 1122 | overflow: auto; 1123 | -webkit-overflow-scrolling: touch; 1124 | } 1125 | 1126 | .weui-search-bar { 1127 | position: relative; 1128 | padding: 8px 10px; 1129 | display: -webkit-box; 1130 | display: -webkit-flex; 1131 | display: flex; 1132 | box-sizing: border-box; 1133 | background-color: #efeff4; 1134 | border-top: 1rpx solid #d7d6dc; 1135 | border-bottom: 1rpx solid #d7d6dc; 1136 | } 1137 | 1138 | .weui-icon-search { 1139 | margin-right: 8px; 1140 | font-size: inherit; 1141 | } 1142 | 1143 | .weui-icon-search_in-box { 1144 | position: absolute; 1145 | left: 10px; 1146 | top: 7px; 1147 | } 1148 | 1149 | .weui-search-bar__text { 1150 | display: inline-block; 1151 | font-size: 14px; 1152 | vertical-align: middle; 1153 | } 1154 | 1155 | .weui-search-bar__form { 1156 | position: relative; 1157 | -webkit-box-flex: 1; 1158 | -webkit-flex: auto; 1159 | flex: auto; 1160 | border-radius: 5px; 1161 | background: #fff; 1162 | border: 1rpx solid #e6e6ea; 1163 | } 1164 | 1165 | .weui-search-bar__box { 1166 | position: relative; 1167 | padding-left: 30px; 1168 | padding-right: 30px; 1169 | width: 100%; 1170 | box-sizing: border-box; 1171 | z-index: 1; 1172 | } 1173 | 1174 | .weui-search-bar__input { 1175 | height: 28px; 1176 | line-height: 28px; 1177 | font-size: 14px; 1178 | } 1179 | 1180 | .weui-icon-clear { 1181 | position: absolute; 1182 | top: 0; 1183 | right: 0; 1184 | padding: 7px 8px; 1185 | font-size: 0; 1186 | } 1187 | 1188 | .weui-search-bar__label { 1189 | position: absolute; 1190 | top: 0; 1191 | right: 0; 1192 | bottom: 0; 1193 | left: 0; 1194 | z-index: 2; 1195 | border-radius: 3px; 1196 | text-align: center; 1197 | color: #9b9b9b; 1198 | background: #fff; 1199 | line-height: 28px; 1200 | } 1201 | 1202 | .weui-search-bar__cancel-btn { 1203 | margin-left: 10px; 1204 | line-height: 28px; 1205 | color: #09bb07; 1206 | white-space: nowrap; 1207 | } 1208 | 1209 | /* add by KuangPF V1.0.0*/ 1210 | 1211 | a { 1212 | text-decoration: none; 1213 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 1214 | } 1215 | 1216 | body { 1217 | -webkit-tap-highlight-color: transparent; 1218 | } --------------------------------------------------------------------------------