no message
0 parents
Showing
43 changed files
with
1612 additions
and
0 deletions
.browserslistrc
0 → 100644
.env.build
0 → 100644
.env.fev
0 → 100644
.eslintrc.js
0 → 100644
| 1 | module.exports = { | ||
| 2 | root: true, | ||
| 3 | env: { | ||
| 4 | node: true | ||
| 5 | }, | ||
| 6 | 'extends': [ | ||
| 7 | 'plugin:vue/essential', | ||
| 8 | // 'eslint:recommended' | ||
| 9 | ], | ||
| 10 | rules: { | ||
| 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', | ||
| 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', | ||
| 13 | "no-unused-vars": 'off' | ||
| 14 | }, | ||
| 15 | parserOptions: { | ||
| 16 | parser: 'babel-eslint' | ||
| 17 | } | ||
| 18 | } |
.gitignore
0 → 100644
README.md
0 → 100644
| 1 | # vue-cli3-framework | ||
| 2 | |||
| 3 | ## Project setup | ||
| 4 | ``` | ||
| 5 | npm install | ||
| 6 | ``` | ||
| 7 | |||
| 8 | ### Compiles and hot-reloads for development | ||
| 9 | ``` | ||
| 10 | npm run serve | ||
| 11 | ``` | ||
| 12 | |||
| 13 | ### Compiles and minifies for production | ||
| 14 | ``` | ||
| 15 | npm run build | ||
| 16 | ``` | ||
| 17 | |||
| 18 | ### Run your tests | ||
| 19 | ``` | ||
| 20 | npm run test | ||
| 21 | ``` | ||
| 22 | |||
| 23 | ### Lints and fixes files | ||
| 24 | ``` | ||
| 25 | npm run lint | ||
| 26 | ``` | ||
| 27 | |||
| 28 | ### Customize configuration | ||
| 29 | See [Configuration Reference](https://cli.vuejs.org/config/). |
babel.config.js
0 → 100644
build/oss-released.js
0 → 100644
| 1 | /** | ||
| 2 | * Created by pc on 2018/5/11. | ||
| 3 | * 需要的库为(co, ali-oss, glob) | ||
| 4 | * npm i co ali-oss glob --save | ||
| 5 | * ossConfig.json格式如下 | ||
| 6 | { | ||
| 7 | "region": "oss-cn-shanghai", //OSS region | ||
| 8 | "accessKeyId": "XXXXXXXX", //OSS accessKeyId | ||
| 9 | "accessKeySecret": "XXXXXXXX", //OSS accessKeySecret | ||
| 10 | "bucket": "ogo", //OSS bucket | ||
| 11 | "localPath": "./dist/**", //本地需要上传的文件目录,(/**)为遍历根号后所有目录 | ||
| 12 | "ossPath": "/mobile/", //oss线上文件目录(不能为根目录,避免误操作,最后加上'/') | ||
| 13 | "callbackUrl": "http://nodejs.org/dist/index.json" //预留请求服务器更新缓存的API | ||
| 14 | } | ||
| 15 | * | ||
| 16 | * | ||
| 17 | */ | ||
| 18 | |||
| 19 | let co = require('co') | ||
| 20 | let OSS = require('ali-oss') | ||
| 21 | let glob = require('glob') | ||
| 22 | let http = require('http') | ||
| 23 | let Config = require('./ossConfig.json') | ||
| 24 | |||
| 25 | // 配置oss信息 | ||
| 26 | let client = new OSS({ | ||
| 27 | region: Config.region, | ||
| 28 | accessKeyId: Config.accessKeyId, | ||
| 29 | accessKeySecret: Config.accessKeySecret, | ||
| 30 | bucket: Config.bucket | ||
| 31 | }) | ||
| 32 | |||
| 33 | // 删除线上目录 | ||
| 34 | function deleteFiles() { | ||
| 35 | if (Config.ossPath !== '' && Config.ossPath !== '/') { | ||
| 36 | co(function* () { | ||
| 37 | let result = yield client.list({ | ||
| 38 | prefix: Config.ossPath.slice(1, -1), | ||
| 39 | marker: Config.ossPath.slice(0, -1) | ||
| 40 | }) | ||
| 41 | let index = 0 | ||
| 42 | if (result.objects !== undefined) { | ||
| 43 | yield result.objects.map(i => { | ||
| 44 | co(function* () { | ||
| 45 | yield client.delete(i.name) | ||
| 46 | index += 1 | ||
| 47 | if (index === result.objects.length) { | ||
| 48 | console.log(`全部删除成功~,总共${result.objects.length}个文件`) | ||
| 49 | uploadFiles() | ||
| 50 | } | ||
| 51 | }) | ||
| 52 | }) | ||
| 53 | } else { | ||
| 54 | uploadFiles() | ||
| 55 | } | ||
| 56 | }).catch(function (err) { | ||
| 57 | console.log(err) | ||
| 58 | }) | ||
| 59 | } else { | ||
| 60 | console.error('上传失败,线上路径为根目录~') | ||
| 61 | } | ||
| 62 | } | ||
| 63 | |||
| 64 | function uploadFiles() { | ||
| 65 | // 遍历目录树之后上传 | ||
| 66 | glob(Config.localPath, { | ||
| 67 | nodir: true | ||
| 68 | }, (er, files) => { | ||
| 69 | let index = 0 | ||
| 70 | files.map(i => { | ||
| 71 | co(function* () { | ||
| 72 | let ossPath = Config.ossPath.substr(Config.ossPath.length - 1, 1) === '/' ? Config.ossPath.slice(0, -1) : Config.ossPath | ||
| 73 | yield client.put(ossPath + i.slice(6), i) | ||
| 74 | index += 1 | ||
| 75 | if (index === files.length) { | ||
| 76 | consoleStr(files.length) | ||
| 77 | } | ||
| 78 | }).catch(function (err) { | ||
| 79 | console.error(err.params.object) | ||
| 80 | }) | ||
| 81 | }) | ||
| 82 | }) | ||
| 83 | } | ||
| 84 | |||
| 85 | function consoleStr(length) { | ||
| 86 | console.log(`全部上传成功~,总共${length}个文件`) | ||
| 87 | // http.get(Config.callbackUrl, () => { | ||
| 88 | // console.log('更新缓存成功~') | ||
| 89 | // }).on('error', (e) => { | ||
| 90 | // console.error(`错误: ${e.message}`) | ||
| 91 | // }) | ||
| 92 | } | ||
| 93 | |||
| 94 | // 清空目录后上传 | ||
| 95 | // deleteFiles() | ||
| 96 | |||
| 97 | // 增量上传 | ||
| 98 | uploadFiles() | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
build/ossConfig.json
0 → 100644
| 1 | |||
| 2 | { | ||
| 3 | "region": "oss-cn-shenzhen", | ||
| 4 | "accessKeyId": "LTAIhDZsL5yCN90c", | ||
| 5 | "accessKeySecret": "LIj3OEJ8cMCQeRlUVVznJpMek2dPD2", | ||
| 6 | "bucket": "kdcdn", | ||
| 7 | "localPath": "./dist/**", | ||
| 8 | "ossPath": "/app/rtdn/", | ||
| 9 | "callbackUrl": "http://nodejs.org/dist/index.json" | ||
| 10 | } | ||
| 11 | |||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
package-lock.json
0 → 100644
This diff could not be displayed because it is too large.
package.json
0 → 100644
| 1 | { | ||
| 2 | "name": "vue-cli3-vant-framework", | ||
| 3 | "version": "0.1.0", | ||
| 4 | "private": true, | ||
| 5 | "scripts": { | ||
| 6 | "serve": "vue-cli-service serve", | ||
| 7 | "dev": "vue-cli-service serve", | ||
| 8 | "build": "vue-cli-service build", | ||
| 9 | "fev": "vue-cli-service build --mode fev", | ||
| 10 | "lint": "vue-cli-service lint", | ||
| 11 | "oss": "node build/oss-released.js" | ||
| 12 | }, | ||
| 13 | "dependencies": { | ||
| 14 | "ali-oss": "^6.1.1", | ||
| 15 | "amfe-flexible": "^2.2.1", | ||
| 16 | "axios": "^0.19.0", | ||
| 17 | "axios-mock-adapter": "^1.16.0", | ||
| 18 | "co": "^4.6.0", | ||
| 19 | "core-js": "^2.6.5", | ||
| 20 | "glob": "^7.1.4", | ||
| 21 | "mockjs": "^1.0.1-beta3", | ||
| 22 | "postcss-px2rem": "^0.3.0", | ||
| 23 | "postcss-pxtorem": "^4.0.1", | ||
| 24 | "vant": "^1.6.21", | ||
| 25 | "vue": "^2.6.10", | ||
| 26 | "vue-router": "^3.0.3", | ||
| 27 | "vuex": "^3.0.1" | ||
| 28 | }, | ||
| 29 | "devDependencies": { | ||
| 30 | "@vue/cli-plugin-babel": "^3.8.0", | ||
| 31 | "@vue/cli-plugin-eslint": "^3.8.0", | ||
| 32 | "@vue/cli-service": "^3.8.0", | ||
| 33 | "babel-eslint": "^10.0.1", | ||
| 34 | "babel-plugin-import": "^1.12.0", | ||
| 35 | "eslint": "^5.16.0", | ||
| 36 | "eslint-plugin-vue": "^5.0.0", | ||
| 37 | "node-sass": "^4.12.0", | ||
| 38 | "sass-loader": "^7.1.0", | ||
| 39 | "vue-template-compiler": "^2.6.10" | ||
| 40 | } | ||
| 41 | } |
postcss.config.js
0 → 100644
| 1 | const AutoPrefixer = require("autoprefixer"); | ||
| 2 | const px2rem = require("postcss-px2rem"); | ||
| 3 | module.exports = ({ | ||
| 4 | file | ||
| 5 | }) => { | ||
| 6 | let remUnit; | ||
| 7 | // file.dirname是绝对地址,所以项目名,文件目录不能带 'vant' | ||
| 8 | if (file && file.dirname && file.dirname.indexOf("vant") > -1) { | ||
| 9 | remUnit = 37.5; | ||
| 10 | } else { | ||
| 11 | remUnit = 75; | ||
| 12 | } | ||
| 13 | return { | ||
| 14 | plugins: [px2rem({ | ||
| 15 | remUnit: remUnit, | ||
| 16 | }), AutoPrefixer({ | ||
| 17 | browsers: ["last 20 versions", "android >= 4.0"] | ||
| 18 | })] | ||
| 19 | }; | ||
| 20 | }; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
public/favicon.ico
0 → 100644
No preview for this file type
public/index.html
0 → 100644
| 1 | <!DOCTYPE html> | ||
| 2 | <html lang="en"> | ||
| 3 | |||
| 4 | <head> | ||
| 5 | <meta charset="utf-8"> | ||
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| 7 | <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | ||
| 8 | <meta name="viewport" | ||
| 9 | content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
| 10 | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||
| 11 | <title>vue-cli3-framework</title> | ||
| 12 | </head> | ||
| 13 | |||
| 14 | <body> | ||
| 15 | <noscript> | ||
| 16 | <strong>We're sorry but vue-cli3-framework doesn't work properly without JavaScript enabled. Please enable it to | ||
| 17 | continue.</strong> | ||
| 18 | </noscript> | ||
| 19 | <div id="app"></div> | ||
| 20 | <!-- built files will be auto injected --> | ||
| 21 | </body> | ||
| 22 | |||
| 23 | </html> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/App.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div id="app"> | ||
| 3 | <!-- <div id="nav"> | ||
| 4 | <router-link to="/">Home</router-link> | | ||
| 5 | <router-link to="/about">About</router-link> | ||
| 6 | </div>--> | ||
| 7 | <router-view/> | ||
| 8 | </div> | ||
| 9 | </template> | ||
| 10 | |||
| 11 | <style lang="scss"> | ||
| 12 | @import './styles/support.scss'; | ||
| 13 | |||
| 14 | #app { | ||
| 15 | /* font-family: 'Avenir', Helvetica, Arial, sans-serif; | ||
| 16 | -webkit-font-smoothing: antialiased; | ||
| 17 | -moz-osx-font-smoothing: grayscale; | ||
| 18 | text-align: center; | ||
| 19 | color: #2c3e50; | ||
| 20 | margin-top: 60px; */ | ||
| 21 | border: 0; | ||
| 22 | margin: 0; | ||
| 23 | padding: 0; | ||
| 24 | } | ||
| 25 | |||
| 26 | body, | ||
| 27 | div { | ||
| 28 | border: 0; | ||
| 29 | margin: 0; | ||
| 30 | padding: 0; | ||
| 31 | } | ||
| 32 | |||
| 33 | .app__width { | ||
| 34 | width: 750px; | ||
| 35 | } | ||
| 36 | |||
| 37 | .app__width { | ||
| 38 | width: 750px; | ||
| 39 | } | ||
| 40 | |||
| 41 | .app__inner { | ||
| 42 | margin: 20px; | ||
| 43 | } | ||
| 44 | |||
| 45 | .app__title { | ||
| 46 | font-size: $fontSize; | ||
| 47 | line-height: $fontSize + 4px; | ||
| 48 | font-weight: bold; | ||
| 49 | padding-bottom: 10px; | ||
| 50 | margin-bottom: 20px; | ||
| 51 | border-bottom: 0.5px solid #eeeeee; | ||
| 52 | } | ||
| 53 | |||
| 54 | .app__desc { | ||
| 55 | font-size: $fontSizeSmaller; | ||
| 56 | line-height: $fontSizeSmaller + 2px; | ||
| 57 | margin-bottom: 20px; | ||
| 58 | color: $colorGray; | ||
| 59 | } | ||
| 60 | |||
| 61 | .app__bgc { | ||
| 62 | position: fixed; | ||
| 63 | background-color: #ffffff; | ||
| 64 | width: 100%; | ||
| 65 | height: 100%; | ||
| 66 | } | ||
| 67 | |||
| 68 | .app__bg { | ||
| 69 | position: absolute; | ||
| 70 | width: 100%; | ||
| 71 | height: 100%; | ||
| 72 | } | ||
| 73 | |||
| 74 | .app__top-shadow { | ||
| 75 | position: fixed; | ||
| 76 | width: 750px; | ||
| 77 | height: 1px; | ||
| 78 | box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07); | ||
| 79 | background-color: #ffffff; | ||
| 80 | } | ||
| 81 | |||
| 82 | .app__content { | ||
| 83 | position: relative; | ||
| 84 | } | ||
| 85 | |||
| 86 | |||
| 87 | </style> |
src/api/api.js
0 → 100644
src/api/fetch-api.js
0 → 100644
| 1 | import axios from 'axios'; | ||
| 2 | // import { | ||
| 3 | // Toast | ||
| 4 | // } from 'vant'; | ||
| 5 | |||
| 6 | function Toast(msg) { | ||
| 7 | console.log("msg:", msg); | ||
| 8 | } | ||
| 9 | |||
| 10 | // axios的默认url | ||
| 11 | // axios.defaults.baseURL = "" | ||
| 12 | |||
| 13 | // 服务器地址 | ||
| 14 | let base = "https://ow.go.qudone.com"; | ||
| 15 | if (location.href.indexOf("//k.wxpai.cn") > 0) { | ||
| 16 | base = "https://api.k.wxpai.cn/bizproxy" | ||
| 17 | } | ||
| 18 | // let base = COM.baseUrl; | ||
| 19 | |||
| 20 | // 请求拦截器 | ||
| 21 | // axios.interceptors.request.use( | ||
| 22 | // config => { | ||
| 23 | // // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了 | ||
| 24 | // // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断 | ||
| 25 | // const token = "token"; //这里写入token | ||
| 26 | // token && (config.headers.Authorization = token); | ||
| 27 | // return config; | ||
| 28 | // }, | ||
| 29 | // error => { | ||
| 30 | // return Promise.error(error); | ||
| 31 | // }) | ||
| 32 | |||
| 33 | // 响应拦截器 | ||
| 34 | axios.interceptors.response.use( | ||
| 35 | response => { | ||
| 36 | if (response.status === 200) { | ||
| 37 | if (response.data.code === 200) { | ||
| 38 | return Promise.resolve(response); | ||
| 39 | } else { | ||
| 40 | Toast(response.data.bizMsg); | ||
| 41 | return Promise.reject(response); | ||
| 42 | } | ||
| 43 | } else { | ||
| 44 | return Promise.reject(response); | ||
| 45 | } | ||
| 46 | }, | ||
| 47 | // 服务器状态码不是200的情况 | ||
| 48 | error => { | ||
| 49 | if (error.response.status) { | ||
| 50 | switch (error.response.status) { | ||
| 51 | // 401: 未登录 | ||
| 52 | // 未登录则跳转登录页面,并携带当前页面的路径 | ||
| 53 | // 在登录成功后返回当前页面,这一步需要在登录页操作。 | ||
| 54 | case 401: | ||
| 55 | router.replace({ | ||
| 56 | path: '/login', | ||
| 57 | query: { | ||
| 58 | redirect: router.currentRoute.fullPath | ||
| 59 | } | ||
| 60 | }); | ||
| 61 | break; | ||
| 62 | // 403 token过期 | ||
| 63 | // 登录过期对用户进行提示 | ||
| 64 | // 清除本地token和清空vuex中token对象 | ||
| 65 | // 跳转登录页面 | ||
| 66 | case 403: | ||
| 67 | Toast({ | ||
| 68 | message: '登录过期,请重新登录', | ||
| 69 | duration: 1000, | ||
| 70 | forbidClick: true | ||
| 71 | }); | ||
| 72 | // 清除token | ||
| 73 | localStorage.removeItem('token'); | ||
| 74 | store.commit('loginSuccess', null); | ||
| 75 | // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面 | ||
| 76 | setTimeout(() => { | ||
| 77 | router.replace({ | ||
| 78 | path: '/login', | ||
| 79 | query: { | ||
| 80 | redirect: router.currentRoute.fullPath | ||
| 81 | } | ||
| 82 | }); | ||
| 83 | }, 1000); | ||
| 84 | break; | ||
| 85 | // 404请求不存在 | ||
| 86 | case 404: | ||
| 87 | Toast({ | ||
| 88 | message: '网络请求不存在', | ||
| 89 | duration: 1500, | ||
| 90 | forbidClick: true | ||
| 91 | }); | ||
| 92 | break; | ||
| 93 | // 其他错误,直接抛出错误提示 | ||
| 94 | default: | ||
| 95 | Toast({ | ||
| 96 | message: error.response.data.message, | ||
| 97 | duration: 1500, | ||
| 98 | forbidClick: true | ||
| 99 | }); | ||
| 100 | } | ||
| 101 | return Promise.reject(error.response); | ||
| 102 | } | ||
| 103 | } | ||
| 104 | ); | ||
| 105 | |||
| 106 | //formDataHeaders设置 | ||
| 107 | let formDataHeaders = { | ||
| 108 | headers: { | ||
| 109 | "Content-Type": "multipart/form-data" | ||
| 110 | } | ||
| 111 | } | ||
| 112 | |||
| 113 | /** | ||
| 114 | * 封装get方法 | ||
| 115 | * @param {*} params | ||
| 116 | */ | ||
| 117 | export const httpGet = params => { | ||
| 118 | let { | ||
| 119 | url, | ||
| 120 | data | ||
| 121 | } = params; | ||
| 122 | return axios.get(`${base}${url}`, { | ||
| 123 | params: data | ||
| 124 | }).then(res => res.data.content); | ||
| 125 | } | ||
| 126 | |||
| 127 | /** | ||
| 128 | * 封装post方法 | ||
| 129 | * @param {*} params | ||
| 130 | */ | ||
| 131 | export const httpPost = params => { | ||
| 132 | let { | ||
| 133 | url, | ||
| 134 | data | ||
| 135 | } = params; | ||
| 136 | return axios.post(`${base}${url}`, data).then(res => res.data.content); | ||
| 137 | } | ||
| 138 | |||
| 139 | |||
| 140 | /** | ||
| 141 | * 封装post方法 | ||
| 142 | * @param {*} params | ||
| 143 | * data数据是 formdata格式 | ||
| 144 | * 例如: | ||
| 145 | * this.file = file | ||
| 146 | let data = new FormData() //使用formData对象 | ||
| 147 | data.append('path', '/pro/mzczcradmin/') | ||
| 148 | data.append('file', file.file) | ||
| 149 | */ | ||
| 150 | export const formdata = params => { | ||
| 151 | let { | ||
| 152 | url, | ||
| 153 | data | ||
| 154 | } = params; | ||
| 155 | return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data); | ||
| 156 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/api/index.js
0 → 100644
src/assets/fonts/font.scss
0 → 100644
| 1 | // @font-face { | ||
| 2 | // font-family: 'vivo-BoldExtended'; | ||
| 3 | // src: url('./vivo-BoldExtended.ttf'); | ||
| 4 | // font-weight: normal; | ||
| 5 | // font-style: normal; | ||
| 6 | // } | ||
| 7 | // @font-face { | ||
| 8 | // font-family: 'vivo-Regular'; | ||
| 9 | // src: url('./vivo-Regular.ttf'); | ||
| 10 | // font-weight: normal; | ||
| 11 | // font-style: normal; | ||
| 12 | // } | ||
| 13 | // @font-face { | ||
| 14 | // font-family: 'regular2'; | ||
| 15 | // src: url('./regular2.otf'); | ||
| 16 | // font-weight: normal; | ||
| 17 | // font-style: normal; | ||
| 18 | // } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/assets/logo.png
0 → 100644
6.69 KB
src/components/bottom-tips/bottom-tips.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div class="bottom-tips" v-if="visb"> | ||
| 3 | <div class="line"></div> | ||
| 4 | <div class="tips-wrap"> | ||
| 5 | <div class="tips">{{innerText ? innerText :'我是有底线的'}}</div> | ||
| 6 | </div> | ||
| 7 | </div> | ||
| 8 | </template> | ||
| 9 | |||
| 10 | <script> | ||
| 11 | export default { | ||
| 12 | props: ['visb', 'innerText'], | ||
| 13 | data() { | ||
| 14 | return { | ||
| 15 | key: 'value' | ||
| 16 | } | ||
| 17 | }, | ||
| 18 | created() { | ||
| 19 | console.log('visb:', this.visb) | ||
| 20 | } | ||
| 21 | } | ||
| 22 | </script> | ||
| 23 | |||
| 24 | <style lang="less" scoped> | ||
| 25 | /// 底线 | ||
| 26 | .bottom-tips { | ||
| 27 | position: relative; | ||
| 28 | padding: 40px 0; | ||
| 29 | width: 100%; | ||
| 30 | text-align: center; | ||
| 31 | color: #666666; | ||
| 32 | |||
| 33 | .line { | ||
| 34 | border-bottom: dashed 1px #cccccc; | ||
| 35 | width: 80%; | ||
| 36 | position: absolute; | ||
| 37 | top: 50%; | ||
| 38 | left: 0; | ||
| 39 | right: 0; | ||
| 40 | margin: 0 auto; | ||
| 41 | } | ||
| 42 | |||
| 43 | .tips-wrap { | ||
| 44 | font-size: 28px; | ||
| 45 | display: flex; | ||
| 46 | justify-content: center; | ||
| 47 | .tips { | ||
| 48 | position: relative; | ||
| 49 | padding: 0 20px; | ||
| 50 | background-color: #ffffff; | ||
| 51 | } | ||
| 52 | } | ||
| 53 | } | ||
| 54 | </style> |
src/components/empty-tips/index.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div class="empty-tips" v-if="visb"> | ||
| 3 | <div class="tips"> | ||
| 4 | <span class="iconfont iconempty"></span> | ||
| 5 | <div class="tips">{{innerText ? innerText :'这里空空如也~'}}</div> | ||
| 6 | </div> | ||
| 7 | </div> | ||
| 8 | </template> | ||
| 9 | |||
| 10 | <script> | ||
| 11 | export default { | ||
| 12 | props: ['visb', 'innerText'], | ||
| 13 | data() { | ||
| 14 | return { | ||
| 15 | key: 'value' | ||
| 16 | } | ||
| 17 | } | ||
| 18 | } | ||
| 19 | </script> | ||
| 20 | |||
| 21 | <style lang="scss" scoped> | ||
| 22 | .empty-tips { | ||
| 23 | box-sizing: border-box; | ||
| 24 | position: fixed; | ||
| 25 | text-align: center; | ||
| 26 | color: #666666; | ||
| 27 | font-size: 32px; | ||
| 28 | width: 100%; | ||
| 29 | height: 100%; | ||
| 30 | display: flex; | ||
| 31 | justify-content: center; | ||
| 32 | top: 35%; | ||
| 33 | |||
| 34 | .iconfont { | ||
| 35 | font-size: 100px; | ||
| 36 | } | ||
| 37 | |||
| 38 | .tips { | ||
| 39 | position: relative; | ||
| 40 | padding: 20px; | ||
| 41 | } | ||
| 42 | } | ||
| 43 | </style> |
src/const/EVT.js
0 → 100644
| 1 | // 全局事件 | ||
| 2 | module.exports = { | ||
| 3 | NAV_FILTER: '_nav_filter', // 导航菜单过滤,触发请求 | ||
| 4 | TAB_SELECT: '_tab_select', // 选择tab ,主题 classify | ||
| 5 | EVT_SET_TAB_INDEX: '_evt_set_tab_index', // 选择tab ,主题 classify | ||
| 6 | EVT_TAB_INDEX_CHANGE: '_evt_tab_index_change', // 从navbar发至index 点击头部导航 index | ||
| 7 | } | ||
| 8 | |||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/main.js
0 → 100644
| 1 | import Vue from 'vue' | ||
| 2 | import App from './App.vue' | ||
| 3 | import router from './router' | ||
| 4 | import store from './store' | ||
| 5 | |||
| 6 | import Mock from './mock' | ||
| 7 | Mock.bootstrap(); | ||
| 8 | |||
| 9 | import 'amfe-flexible/index.js' | ||
| 10 | |||
| 11 | Vue.config.productionTip = false | ||
| 12 | |||
| 13 | new Vue({ | ||
| 14 | router, | ||
| 15 | store, | ||
| 16 | render: h => h(App) | ||
| 17 | }).$mount('#app') | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/mock/data/user.js
0 → 100755
| 1 | import Mock from 'mockjs'; | ||
| 2 | const LoginUsers = [ | ||
| 3 | { | ||
| 4 | id: 1, | ||
| 5 | username: 'admin', | ||
| 6 | password: 'admin', | ||
| 7 | avatar: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png', | ||
| 8 | name: '张某某' | ||
| 9 | } | ||
| 10 | ]; | ||
| 11 | |||
| 12 | const Users = []; | ||
| 13 | |||
| 14 | for (let i = 0; i < 5; i++) { | ||
| 15 | Users.push(Mock.mock({ | ||
| 16 | id: Mock.Random.guid(), | ||
| 17 | province: Mock.Random.province(), | ||
| 18 | city: Mock.Random.city(), | ||
| 19 | fieldName: Mock.Random.cname(), | ||
| 20 | address: Mock.mock('@county(true)'), | ||
| 21 | 'age|18-60': 1, | ||
| 22 | birth: Mock.Random.date(), | ||
| 23 | sex: Mock.Random.integer(0, 1) | ||
| 24 | })); | ||
| 25 | } | ||
| 26 | |||
| 27 | export { LoginUsers, Users }; |
src/mock/index.js
0 → 100755
src/mock/mock.js
0 → 100755
| 1 | import axios from 'axios'; | ||
| 2 | import MockAdapter from 'axios-mock-adapter'; | ||
| 3 | import { | ||
| 4 | LoginUsers, | ||
| 5 | Users | ||
| 6 | } from './data/user'; | ||
| 7 | let _Users = Users; | ||
| 8 | |||
| 9 | export default { | ||
| 10 | /** | ||
| 11 | * mock bootstrap | ||
| 12 | */ | ||
| 13 | bootstrap() { | ||
| 14 | return; | ||
| 15 | // 紧在dev环境下使用 | ||
| 16 | if (process.env.NODE_ENV !== "development") { | ||
| 17 | return; | ||
| 18 | } | ||
| 19 | let mock = new MockAdapter(axios); | ||
| 20 | |||
| 21 | // mock success request | ||
| 22 | mock.onGet('/success').reply(200, { | ||
| 23 | msg: 'success' | ||
| 24 | }); | ||
| 25 | |||
| 26 | // mock error request | ||
| 27 | mock.onGet('/error').reply(500, { | ||
| 28 | msg: 'failure' | ||
| 29 | }); | ||
| 30 | |||
| 31 | // 拦截 get方法demo | ||
| 32 | mock.onGet('/path1/path2/getdemo').reply(config => { | ||
| 33 | // 拦截参数 | ||
| 34 | let { | ||
| 35 | params1, | ||
| 36 | params2 | ||
| 37 | } = config.params; | ||
| 38 | return new Promise((resolve, reject) => { | ||
| 39 | let content = {}; | ||
| 40 | let success = true; | ||
| 41 | resolve([200, { | ||
| 42 | code: 2000, | ||
| 43 | msg: '请求成功', | ||
| 44 | success, | ||
| 45 | content | ||
| 46 | }]); | ||
| 47 | }); | ||
| 48 | }); | ||
| 49 | |||
| 50 | // 拦截post方法demo | ||
| 51 | mock.onPost('/path1/path2/postdemo').reply(config => { | ||
| 52 | let { | ||
| 53 | params1, | ||
| 54 | params2 | ||
| 55 | } = JSON.parse(config.data); | ||
| 56 | return new Promise((resolve, reject) => { | ||
| 57 | let content = {}; | ||
| 58 | let success = true; | ||
| 59 | resolve([200, { | ||
| 60 | code: 2000, | ||
| 61 | msg: '请求成功', | ||
| 62 | success, | ||
| 63 | content | ||
| 64 | }]); | ||
| 65 | }); | ||
| 66 | }); | ||
| 67 | |||
| 68 | } | ||
| 69 | }; |
src/pages/About.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div class="about"> | ||
| 3 | <div>This is an about page</div> | ||
| 4 | <van-button type="default">默认按钮</van-button> | ||
| 5 | <div class="ccc"></div> | ||
| 6 | </div> | ||
| 7 | </template> | ||
| 8 | |||
| 9 | <script> | ||
| 10 | import { Button } from 'vant' | ||
| 11 | export default { | ||
| 12 | name: 'about', | ||
| 13 | components: { | ||
| 14 | [Button.name]: Button | ||
| 15 | } | ||
| 16 | } | ||
| 17 | </script> | ||
| 18 | |||
| 19 | <style lang="scss" scoped> | ||
| 20 | .about{ | ||
| 21 | font-size: 32px; | ||
| 22 | } | ||
| 23 | .ccc{ | ||
| 24 | width: 746px; | ||
| 25 | height: 300px; | ||
| 26 | background-color: wheat; | ||
| 27 | } | ||
| 28 | </style> | ||
| 29 |
src/pages/Home.vue
0 → 100644
src/pages/demo/index.js
0 → 100644
| 1 | import api from '../../api/api' | ||
| 2 | import { | ||
| 3 | httpGet, | ||
| 4 | httpPost | ||
| 5 | } from '../../api/fetch-api.js' | ||
| 6 | |||
| 7 | export default { | ||
| 8 | data() { | ||
| 9 | return { | ||
| 10 | key: 'value' | ||
| 11 | } | ||
| 12 | }, | ||
| 13 | components: {}, | ||
| 14 | methods: { | ||
| 15 | initData() {} | ||
| 16 | }, | ||
| 17 | mounted() {}, | ||
| 18 | created() { | ||
| 19 | console.log("demo created"); | ||
| 20 | } | ||
| 21 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/pages/demo/index.scss
0 → 100644
| 1 | @import './../../styles/support'; |
src/pages/demo/index.vue
0 → 100644
| 1 | |||
| 2 | <template> | ||
| 3 | <div class="page"> | ||
| 4 | <div class="app__bgc bgc"></div> | ||
| 5 | <div class="app__bg bg"></div> | ||
| 6 | <div class="app__content main"> | ||
| 7 | <div class="top-space"></div> | ||
| 8 | <div class="content"> | ||
| 9 | <span class="iconfont iconclose">demo</span> | ||
| 10 | </div> | ||
| 11 | </div> | ||
| 12 | </div> | ||
| 13 | </template> | ||
| 14 | |||
| 15 | <script src="./index.js"></script> | ||
| 16 | <style lang="scss" scoped> | ||
| 17 | // @import './index.scss'; | ||
| 18 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/router.js
0 → 100644
| 1 | import Vue from 'vue' | ||
| 2 | import Router from 'vue-router' | ||
| 3 | import Home from './pages/Home.vue' | ||
| 4 | |||
| 5 | Vue.use(Router) | ||
| 6 | |||
| 7 | const routes = [{ | ||
| 8 | path: '/', | ||
| 9 | name: 'home', | ||
| 10 | component: Home, | ||
| 11 | meta: { | ||
| 12 | title: '首页' | ||
| 13 | } | ||
| 14 | }, | ||
| 15 | { | ||
| 16 | path: '/demo', | ||
| 17 | name: 'demo', | ||
| 18 | component: () => import('./pages/demo/index.vue'), | ||
| 19 | meta: { | ||
| 20 | title: '模板' | ||
| 21 | } | ||
| 22 | }, | ||
| 23 | { | ||
| 24 | path: '/about', | ||
| 25 | name: 'about', | ||
| 26 | component: () => import('./pages/About.vue'), | ||
| 27 | meta: { | ||
| 28 | title: '关于' | ||
| 29 | } | ||
| 30 | } | ||
| 31 | ] | ||
| 32 | |||
| 33 | // add route path | ||
| 34 | routes.forEach(route => { | ||
| 35 | route.path = route.path || '/' + (route.name || ''); | ||
| 36 | }); | ||
| 37 | |||
| 38 | const router = new Router({ | ||
| 39 | routes | ||
| 40 | }); | ||
| 41 | |||
| 42 | router.beforeEach((to, from, next) => { | ||
| 43 | const title = to.meta && to.meta.title; | ||
| 44 | if (title) { | ||
| 45 | document.title = title; | ||
| 46 | } | ||
| 47 | next(); | ||
| 48 | }); | ||
| 49 | |||
| 50 | export default router; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/store.js
0 → 100644
src/styles/_fonticon.scss
0 → 100644
| 1 | /* 图片字体 */ | ||
| 2 | @font-face { | ||
| 3 | font-family: 'iconfont'; | ||
| 4 | src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASEAAsAAAAACSAAAAQ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqFGIQnATYCJAMYCw4ABCAFhG0HVBvZBxGVnNvIfhzYDV+BAe9wtJiGONTGYuHBZ/Oh77Q3OxupItOeFFTcQjpRXwK+AIbn08ne766XppsiwRKPksQTj7AO4xAOv3fOAdsJc0KNZO3Io89Lf8K9BkY+ce+4df4Dms+yXMacNNbEAOOAAtrbF1mBxAlqy/Dq8uqwrgMBiPGAD4g6dbgGQhSseQRAKstK8iFMmFAVBMHSdsFWFpkNHhYzhbkEYJb3efIGQUQIDCaFtXQ0l1KEhOfKV+G019Ary7GgbzgHAGEXUIAPABZIZ6GrGTSI+oBia7/A4gVAioWBeq58vvHlkJeNr8INBhIyy0dwwV8esJg4MBAgfGCVlKUNj/HguZIawGrqjZgLPHg5xACK1Y2YCwy8Cpdclo4/YIMIcBLANZh9YGkIPHta2NorTKxUSlUNV7Koz2zswo0mRfNNRs9fbFq8YJr5uEXLWo7cEd+6pbl9W3v3rj4g7tzRpU+7HauR0YbmJ2+dalLELZy6ude0uGh+75Zp5iXFCxZMW2Q+0IQOKsa7SMJIKH18h3y9hWY+mN4tEtW0bYT2memWpk1db7L81tQ7dgs3isUbt1rrl0kU0yy1Sza7ZCw0m4lCIzFMF2ww15+Qp1u43sRk/hJT7YJN5uaLluolPZSTvq1m4vmbgR7veM116OjBGp2K21oMbkRGnvqglnCLVharuAM6gl+toTNYPZs5doyZDXyHbx/RSvZMt6tNtx7RlzkWlcysWQySV2I+Pio008Np8mQvL/j0CEVLLIItloiEIPIFnCBDN7ZpC6n3i/erE0uXICT/t+269rVrjx4de+wrwynfjo1BaN/tXQmzJ3wIF9krghUHqN1eFB4fMvuCROrnvVwdkUeWLff2k70IiO8fs2yOabXpHHdlvX+A5rmK6dx4piXlbHunib+iNeVM+UnXFvWZjR2uleVF/jsbK12wo8OWDpY+TRH0jP8syLs0WIlOAIDhFHOP+gIA1TF3kCOBOcbaj9FjgYCJ97CEFvwt35GfKZ2Yq4j5JiGUsAC+Juu7saSZavDK1Wgs/jeaagB/Q0WUsuYutTOdIKDlmTLhATa03MskN0+G0t1vcjyETCMMArY4CLmQiuaDSSIETSgem7dBu0/G6o2REgGeJiAQSrvAkDsKSukyiaU9Bo+Zd+BTZgwxXdZHSrjFro4ZoqKlgj+VSe4UsdaVX3iDfgeR41KP8UIuNkCBfgHpxBUd8hArGj760FgVcZkjpaLbEAJTbWYHWTeltfaNvz9X9KJNIcfBSrIMhApapMAfKSOxjnJ6V6vM+29AewuEXNFR432BrLCDk0B+AhqQrqquUceljG7woR00qhQ7i5OxiKRiBwSIMlJbPMkBqdoo7RDuNfyZblxT1WZ6TbzLfbBZ53QYQglLeIRPBBB9hPTHH9oLMhQ5r5ipDFwwMRwxRezrfzAAAA==') | ||
| 5 | format('woff2'); | ||
| 6 | } | ||
| 7 | |||
| 8 | .iconfont { | ||
| 9 | font-family: 'iconfont' !important; | ||
| 10 | font-size: 16px; | ||
| 11 | font-style: normal; | ||
| 12 | -webkit-font-smoothing: antialiased; | ||
| 13 | -moz-osx-font-smoothing: grayscale; | ||
| 14 | } | ||
| 15 | |||
| 16 | .iconrefresh:before { | ||
| 17 | content: '\e874'; | ||
| 18 | } | ||
| 19 | |||
| 20 | .iconempty:before { | ||
| 21 | content: '\e6a6'; | ||
| 22 | } | ||
| 23 | .iconclose:before { | ||
| 24 | content: '\e849'; | ||
| 25 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/styles/_mixins.scss
0 → 100755
| 1 | /** | ||
| 2 | * ------------------------------------------------------------------ | ||
| 3 | * Sass Minxins | ||
| 4 | * | ||
| 5 | * 参考收集: | ||
| 6 | * https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins | ||
| 7 | * ------------------------------------------------------------------ | ||
| 8 | * | ||
| 9 | */ | ||
| 10 | |||
| 11 | // 文字截取 | ||
| 12 | @mixin text-overflow() { | ||
| 13 | overflow: hidden; | ||
| 14 | white-space: normal; | ||
| 15 | text-overflow: ellipsis; | ||
| 16 | word-break: break-all; | ||
| 17 | word-wrap: normal; | ||
| 18 | } | ||
| 19 | |||
| 20 | @mixin word-break() { | ||
| 21 | word-break: break-all; | ||
| 22 | word-wrap: break-word; | ||
| 23 | white-space: normal; | ||
| 24 | } | ||
| 25 | |||
| 26 | // No wrap | ||
| 27 | @mixin no-wrap() { | ||
| 28 | word-break: normal; | ||
| 29 | word-wrap: normal; | ||
| 30 | white-space: nowrap; | ||
| 31 | } | ||
| 32 | |||
| 33 | // 清除浮动 | ||
| 34 | @mixin clearfix() { | ||
| 35 | &:before, | ||
| 36 | &:after { | ||
| 37 | content: " "; // 1 | ||
| 38 | display: table; // 2 | ||
| 39 | } | ||
| 40 | &:after { | ||
| 41 | clear: both; | ||
| 42 | } | ||
| 43 | } | ||
| 44 | |||
| 45 | // Single side border-radius | ||
| 46 | @mixin border-top-radius($radius) { | ||
| 47 | border-top-right-radius: $radius; | ||
| 48 | border-top-left-radius: $radius; | ||
| 49 | } | ||
| 50 | |||
| 51 | @mixin border-right-radius($radius) { | ||
| 52 | border-bottom-right-radius: $radius; | ||
| 53 | border-top-right-radius: $radius; | ||
| 54 | } | ||
| 55 | |||
| 56 | @mixin border-bottom-radius($radius) { | ||
| 57 | border-bottom-right-radius: $radius; | ||
| 58 | border-bottom-left-radius: $radius; | ||
| 59 | } | ||
| 60 | |||
| 61 | @mixin border-left-radius($radius) { | ||
| 62 | border-bottom-left-radius: $radius; | ||
| 63 | border-top-left-radius: $radius; | ||
| 64 | } | ||
| 65 | |||
| 66 | // Center-align a block level element | ||
| 67 | @mixin center-block() { | ||
| 68 | display: block; | ||
| 69 | margin-left: auto; | ||
| 70 | margin-right: auto; | ||
| 71 | } | ||
| 72 | |||
| 73 | // CSS image replacement | ||
| 74 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 | ||
| 75 | @mixin hide-text() { | ||
| 76 | font-size: 0; | ||
| 77 | line-height: 0; | ||
| 78 | color: transparent; | ||
| 79 | text-shadow: none; | ||
| 80 | background-color: transparent; | ||
| 81 | border: 0; | ||
| 82 | } |
src/styles/_support.scss
0 → 100755
| 1 | /** | ||
| 2 | * ------------------------------------------------------------------ | ||
| 3 | * 支持文件 | ||
| 4 | * 需要引用的地方均需要加上这个支持文件 | ||
| 5 | * | ||
| 6 | * ------------------------------------------------------------------ | ||
| 7 | * | ||
| 8 | */ | ||
| 9 | |||
| 10 | @import "mixins"; | ||
| 11 | |||
| 12 | @import "var"; | ||
| 13 | |||
| 14 | // 图标字体 | ||
| 15 | @import "fonticon"; | ||
| 16 | |||
| 17 | // 字体引入 | ||
| 18 | @import './../assets/fonts/font.scss' | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/styles/_utils.scss
0 → 100755
| 1 | /** | ||
| 2 | * ------------------------------------------------------------------ | ||
| 3 | * 原子类 | ||
| 4 | * | ||
| 5 | * ------------------------------------------------------------------ | ||
| 6 | * | ||
| 7 | */ | ||
| 8 | @import "support"; | ||
| 9 | |||
| 10 | // Margin | ||
| 11 | .u-mt-smaller { | ||
| 12 | margin-top: $marginTopSmaller; | ||
| 13 | } | ||
| 14 | |||
| 15 | .u-mt-small { | ||
| 16 | margin-top: $marginTopSmall; | ||
| 17 | } | ||
| 18 | |||
| 19 | .u-mt-medium { | ||
| 20 | margin-top: $marginTopMedium; | ||
| 21 | } | ||
| 22 | |||
| 23 | .u-mt-large { | ||
| 24 | margin-top: $marginTopLarge; | ||
| 25 | } | ||
| 26 | |||
| 27 | .u-mt-larger { | ||
| 28 | margin-top: $marginTopLarger; | ||
| 29 | } | ||
| 30 | |||
| 31 | .u-mb-smaller { | ||
| 32 | margin-bottom: $marginTopSmaller; | ||
| 33 | } | ||
| 34 | |||
| 35 | .u-mb-small { | ||
| 36 | margin-bottom: $marginTopSmall; | ||
| 37 | } | ||
| 38 | |||
| 39 | .u-mb-medium { | ||
| 40 | margin-bottom: $marginTopMedium; | ||
| 41 | } | ||
| 42 | |||
| 43 | .u-mb-large { | ||
| 44 | margin-bottom: $marginTopLarge; | ||
| 45 | } | ||
| 46 | |||
| 47 | .u-mb-larger { | ||
| 48 | margin-bottom: $marginTopLarger; | ||
| 49 | } | ||
| 50 | |||
| 51 | // Padding | ||
| 52 | .u-pt-smaller { | ||
| 53 | padding-top: $paddingTopSmaller; | ||
| 54 | } | ||
| 55 | |||
| 56 | .u-pt-small { | ||
| 57 | padding-top: $paddingTopSmall; | ||
| 58 | } | ||
| 59 | |||
| 60 | .u-pt-medium { | ||
| 61 | padding-top: $paddingTopMedium; | ||
| 62 | } | ||
| 63 | |||
| 64 | .u-pt-large { | ||
| 65 | padding-top: $paddingTopLarge; | ||
| 66 | } | ||
| 67 | |||
| 68 | .u-pt-larger { | ||
| 69 | padding-top: $paddingTopLarger; | ||
| 70 | } | ||
| 71 | |||
| 72 | .u-pb-smaller { | ||
| 73 | padding-bottom: $paddingTopSmaller; | ||
| 74 | } | ||
| 75 | |||
| 76 | .u-pb-small { | ||
| 77 | padding-bottom: $paddingTopSmall; | ||
| 78 | } | ||
| 79 | |||
| 80 | .u-pb-medium { | ||
| 81 | padding-bottom: $paddingTopMedium; | ||
| 82 | } | ||
| 83 | |||
| 84 | .u-pb-large { | ||
| 85 | padding-bottom: $paddingTopLarge; | ||
| 86 | } | ||
| 87 | |||
| 88 | .u-pb-larger { | ||
| 89 | padding-bottom: $paddingTopLarger; | ||
| 90 | } | ||
| 91 | |||
| 92 | // 布局方位 | ||
| 93 | .u-ta-c { | ||
| 94 | text-align: center !important; | ||
| 95 | } | ||
| 96 | |||
| 97 | .u-ta-l { | ||
| 98 | text-align: left !important; | ||
| 99 | } | ||
| 100 | |||
| 101 | .u-ta-r { | ||
| 102 | text-align: right !important; | ||
| 103 | } | ||
| 104 | |||
| 105 | .u-fl-l { | ||
| 106 | float: left; | ||
| 107 | } | ||
| 108 | |||
| 109 | .u-fl-n { | ||
| 110 | float: none; | ||
| 111 | } | ||
| 112 | |||
| 113 | .u-fl-r { | ||
| 114 | float: right; | ||
| 115 | } | ||
| 116 | |||
| 117 | .u-d-b { | ||
| 118 | display: block; | ||
| 119 | } | ||
| 120 | |||
| 121 | .u-d-i { | ||
| 122 | display: inline !important; | ||
| 123 | } | ||
| 124 | |||
| 125 | .u-d-ib { | ||
| 126 | display: inline-block !important; | ||
| 127 | } | ||
| 128 | |||
| 129 | .u-d-n { | ||
| 130 | display: none !important; | ||
| 131 | } | ||
| 132 | |||
| 133 | .u-d-t { | ||
| 134 | display: table; | ||
| 135 | table-layout: fixed; | ||
| 136 | } | ||
| 137 | |||
| 138 | .u-d-tc { | ||
| 139 | display: table-cell; | ||
| 140 | } | ||
| 141 | |||
| 142 | .u-va-b { | ||
| 143 | vertical-align: bottom; | ||
| 144 | } | ||
| 145 | |||
| 146 | .u-va-m { | ||
| 147 | vertical-align: middle; | ||
| 148 | } | ||
| 149 | |||
| 150 | .u-va-t { | ||
| 151 | vertical-align: top; | ||
| 152 | } | ||
| 153 | |||
| 154 | // clearfix | ||
| 155 | .u-clearfix { | ||
| 156 | @include clearfix; | ||
| 157 | } | ||
| 158 | |||
| 159 | // 虚拟格式 | ||
| 160 | .u-cur-d { | ||
| 161 | cursor: default; | ||
| 162 | } | ||
| 163 | |||
| 164 | .u-cur-p { | ||
| 165 | cursor: pointer; | ||
| 166 | } | ||
| 167 | |||
| 168 | // flex | ||
| 169 | .u-flex { | ||
| 170 | display: -webkit-box; | ||
| 171 | display: -webkit-flex; | ||
| 172 | display: flex; | ||
| 173 | } | ||
| 174 | |||
| 175 | .u-flex-item { | ||
| 176 | -webkit-box-flex: 1; | ||
| 177 | -webkit-flex: 1; | ||
| 178 | flex: 1; | ||
| 179 | } | ||
| 180 | |||
| 181 | // 小程序中模拟ul、li | ||
| 182 | .u-ul { | ||
| 183 | padding-left: 30px; | ||
| 184 | text-align: left; | ||
| 185 | display: block; | ||
| 186 | } | ||
| 187 | |||
| 188 | .u-li { | ||
| 189 | position: relative; | ||
| 190 | font-size: $fontSizeSmall; | ||
| 191 | line-height: $fontSizeSmall + 4px; | ||
| 192 | margin-bottom: $marginTopSmall; | ||
| 193 | |||
| 194 | &:before { | ||
| 195 | position: absolute; | ||
| 196 | content: " "; | ||
| 197 | top: 14px; | ||
| 198 | left: -20px; | ||
| 199 | width: 8px; | ||
| 200 | height: 8px; | ||
| 201 | border-radius: 8px; | ||
| 202 | background-color: $colorBlack; | ||
| 203 | } | ||
| 204 | } |
src/styles/_var.scss
0 → 100755
| 1 | /** | ||
| 2 | * ------------------------------------------------------------------ | ||
| 3 | * Sass 变量 | ||
| 4 | * | ||
| 5 | * ------------------------------------------------------------------ | ||
| 6 | * | ||
| 7 | */ | ||
| 8 | |||
| 9 | // Margin | ||
| 10 | $marginTopSmaller: 20px; | ||
| 11 | $marginTopSmall: 30px; | ||
| 12 | $marginTopMedium: 40px; | ||
| 13 | $marginTopLarge: 60px; | ||
| 14 | $marginTopLarger: 80px; | ||
| 15 | |||
| 16 | // Padding | ||
| 17 | $paddingTopSmaller: 20px; | ||
| 18 | $paddingTopSmall: 30px; | ||
| 19 | $paddingTopMedium: 40px; | ||
| 20 | $paddingTopLarge: 60px; | ||
| 21 | $paddingTopLarger: 80px; | ||
| 22 | |||
| 23 | // Color | ||
| 24 | $colorBlue: #20A0FF; | ||
| 25 | $colorGreen: #13CE66; | ||
| 26 | $colorGray: #475669; | ||
| 27 | $colorBlack: #000; | ||
| 28 | $colorRed: #FF4949; | ||
| 29 | $colorYellow: #F7BA2A; | ||
| 30 | |||
| 31 | $color: #787878; | ||
| 32 | $colorLink: #1D8CE0; | ||
| 33 | |||
| 34 | $backGroundColor: #fff; | ||
| 35 | |||
| 36 | // Font | ||
| 37 | $fontSize: 32px; | ||
| 38 | $fontSizeSmall: 28px; | ||
| 39 | $fontSizeSmaller: 24px; | ||
| 40 | $fontSizeLarge: 36px; | ||
| 41 | $fontSizeLarger: 44px; |
src/utils/date.js
0 → 100755
This diff is collapsed.
Click to expand it.
src/utils/utils.js
0 → 100644
| 1 | // 正在表达式 | ||
| 2 | export const REGEXPS = { | ||
| 3 | "mobile": /^1\d{10}$/ | ||
| 4 | } | ||
| 5 | |||
| 6 | // 验证手机 | ||
| 7 | export function checkMobile(str) { | ||
| 8 | return REGEXPS.mobile.test(str); | ||
| 9 | } | ||
| 10 | |||
| 11 | /** | ||
| 12 | * 链接参数转换为obj | ||
| 13 | * 入参 完整链接 | ||
| 14 | * @param {*} url | ||
| 15 | */ | ||
| 16 | export function param2Obj(url) { | ||
| 17 | const search = url.split('?')[1] | ||
| 18 | if (!search) { | ||
| 19 | return {} | ||
| 20 | } | ||
| 21 | return JSON.parse( | ||
| 22 | '{"' + | ||
| 23 | decodeURIComponent(search) | ||
| 24 | .replace(/"/g, '\\"') | ||
| 25 | .replace(/&/g, '","') | ||
| 26 | .replace(/=/g, '":"') + | ||
| 27 | '"}' | ||
| 28 | ) | ||
| 29 | } | ||
| 30 | |||
| 31 | |||
| 32 | |||
| 33 | //获取cookie、 | ||
| 34 | export function getCookie(name) { | ||
| 35 | var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); | ||
| 36 | if (arr = document.cookie.match(reg)) | ||
| 37 | return (arr[2]); | ||
| 38 | else | ||
| 39 | return null; | ||
| 40 | } | ||
| 41 | |||
| 42 | //设置cookie | ||
| 43 | export function setCookie(c_name, value, expiredays) { | ||
| 44 | var exdate = new Date(); | ||
| 45 | exdate.setDate(exdate.getDate() + expiredays); | ||
| 46 | document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); | ||
| 47 | }; | ||
| 48 | |||
| 49 | //删除cookie | ||
| 50 | export function delCookie(name) { | ||
| 51 | var exp = new Date(); | ||
| 52 | exp.setTime(exp.getTime() - 1); | ||
| 53 | var cval = getCookie(name); | ||
| 54 | if (cval != null) | ||
| 55 | document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); | ||
| 56 | }; | ||
| 57 | |||
| 58 | |||
| 59 | /** | ||
| 60 | * 获取环境信息 | ||
| 61 | * @return {Object} 环境信息对象 | ||
| 62 | */ | ||
| 63 | export function getEnv() { | ||
| 64 | var nav = window.navigator; | ||
| 65 | var env = { | ||
| 66 | "iphone": false, | ||
| 67 | "ipad": false, | ||
| 68 | "android": false, | ||
| 69 | "pc": false, | ||
| 70 | "ios": false, | ||
| 71 | "ver": "0" | ||
| 72 | }; | ||
| 73 | |||
| 74 | var ua = nav.userAgent; | ||
| 75 | var android = ua.match(/(Android)\s+([\d.]+)/); | ||
| 76 | var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); | ||
| 77 | var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); | ||
| 78 | if (ipad) { | ||
| 79 | env.ipad = ipad[1] && true || false; | ||
| 80 | env.ver = ipad[2] && ipad[2].replace(/-/g, ".") || ""; | ||
| 81 | env.ios = true; | ||
| 82 | } else if (iphone) { | ||
| 83 | env.iphone = iphone[1] && true || false; | ||
| 84 | env.ver = iphone[2] && iphone[2].replace(/-/g, ".") || ""; | ||
| 85 | env.ios = true; | ||
| 86 | } else if (android) { | ||
| 87 | env.android = android[1] && true || false; | ||
| 88 | env.ver = android[2]; | ||
| 89 | } else { | ||
| 90 | env.pc = true; | ||
| 91 | } | ||
| 92 | |||
| 93 | return env; | ||
| 94 | } | ||
| 95 | |||
| 96 | /** | ||
| 97 | * 设定页面 title | ||
| 98 | * @param {[type]} title [description] | ||
| 99 | */ | ||
| 100 | export function setTitle(title) { | ||
| 101 | if (!title) { | ||
| 102 | return; | ||
| 103 | } | ||
| 104 | document.title = title; | ||
| 105 | // if (ENV.ios && navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) { | ||
| 106 | // 修复微信端IOS无法修改document.title的情况 | ||
| 107 | if (getEnv().ios && (navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 || navigator.userAgent.toLowerCase().indexOf("alipay") !== -1)) { | ||
| 108 | //修复IOS微信端和支付宝无法修改document.title的情况 | ||
| 109 | var $iframe = document.createElement('iframe'); | ||
| 110 | $iframe.className = "C-hiddenIframe"; | ||
| 111 | $iframe.src = "/" + location.pathname.split('/')[1] + "/favicon.ico"; | ||
| 112 | $iframe.style.visibility = 'hidden'; | ||
| 113 | $iframe.style.width = '1px'; | ||
| 114 | $iframe.style.height = '1px'; | ||
| 115 | $iframe.onload = function onIframeLoad() { | ||
| 116 | setTimeout(function () { | ||
| 117 | $iframe.onload = null; | ||
| 118 | onIframeLoad = null; | ||
| 119 | document.body.removeChild($iframe); | ||
| 120 | $iframe = null; | ||
| 121 | }, 0); | ||
| 122 | }; | ||
| 123 | document.body.appendChild($iframe); | ||
| 124 | } | ||
| 125 | } | ||
| 126 | |||
| 127 | // 为链接添加参数 | ||
| 128 | export function addQuery(url, query) { | ||
| 129 | query = query || {} | ||
| 130 | query = (function (query) { | ||
| 131 | var q = [] | ||
| 132 | Object.keys(query).forEach(function (_q) { | ||
| 133 | q.push(_q + '=' + query[_q]) | ||
| 134 | }) | ||
| 135 | return q.join('&') | ||
| 136 | })(query) | ||
| 137 | if (url.indexOf('?') !== -1) { | ||
| 138 | url += '&' + query | ||
| 139 | } else { | ||
| 140 | url += '?' + query | ||
| 141 | } | ||
| 142 | return url | ||
| 143 | } | ||
| 144 | |||
| 145 | |||
| 146 | /** | ||
| 147 | * 获得当前页面的path | ||
| 148 | * @return {String} 页面path | ||
| 149 | */ | ||
| 150 | export function getPath() { | ||
| 151 | var path = window.location.hash; | ||
| 152 | path = path || "#/"; | ||
| 153 | path = path === "#/" ? "#/index" : path; | ||
| 154 | path = path.split("?"); | ||
| 155 | return path[0]; | ||
| 156 | } | ||
| 157 | |||
| 158 | // 获取 url 参数 | ||
| 159 | export function getQuery(name) { | ||
| 160 | return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; | ||
| 161 | } | ||
| 162 | |||
| 163 | /** | ||
| 164 | * 把 \n换行符转换成<br> | ||
| 165 | * 转换后需要用 v-html渲染 | ||
| 166 | * 用{{}}会当成字符串把 html渲染出来 | ||
| 167 | */ | ||
| 168 | export function formatBr(str) { | ||
| 169 | str = str.replace(/\n/g, '<br/>') | ||
| 170 | return str | ||
| 171 | }; | ||
| 172 | |||
| 173 | |||
| 174 | /** | ||
| 175 | * @desc 函数防抖 | ||
| 176 | * @param func 函数 | ||
| 177 | * @param wait 延迟执行毫秒数 | ||
| 178 | * @param immediate true 表立即执行,false 表非立即执行 | ||
| 179 | */ | ||
| 180 | export function debounce(func, wait, immediate) { | ||
| 181 | let timeout; | ||
| 182 | |||
| 183 | return function () { | ||
| 184 | let context = this; | ||
| 185 | let args = arguments; | ||
| 186 | |||
| 187 | if (timeout) clearTimeout(timeout); | ||
| 188 | if (immediate) { | ||
| 189 | var callNow = !timeout; | ||
| 190 | timeout = setTimeout(() => { | ||
| 191 | timeout = null; | ||
| 192 | }, wait) | ||
| 193 | if (callNow) func.apply(context, args) | ||
| 194 | } else { | ||
| 195 | timeout = setTimeout(function () { | ||
| 196 | func.apply(context, args) | ||
| 197 | }, wait); | ||
| 198 | } | ||
| 199 | } | ||
| 200 | } | ||
| 201 | |||
| 202 | /** | ||
| 203 | * @desc 函数节流 | ||
| 204 | * @param func 函数 | ||
| 205 | * @param wait 延迟执行毫秒数 | ||
| 206 | * @param type 1 表时间戳版,2 表定时器版 | ||
| 207 | * 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。 | ||
| 208 | */ | ||
| 209 | export function throttle(func, wait, type) { | ||
| 210 | if (type === 1) { | ||
| 211 | var previous = 0; | ||
| 212 | } else if (type === 2) { | ||
| 213 | var timeout; | ||
| 214 | } | ||
| 215 | return function () { | ||
| 216 | let context = this; | ||
| 217 | let args = arguments; | ||
| 218 | if (type === 1) { | ||
| 219 | let now = Date.now(); | ||
| 220 | |||
| 221 | if (now - previous > wait) { | ||
| 222 | func.apply(context, args); | ||
| 223 | previous = now; | ||
| 224 | } | ||
| 225 | } else if (type === 2) { | ||
| 226 | if (!timeout) { | ||
| 227 | timeout = setTimeout(() => { | ||
| 228 | timeout = null; | ||
| 229 | func.apply(context, args) | ||
| 230 | }, wait) | ||
| 231 | } | ||
| 232 | } | ||
| 233 | } | ||
| 234 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
src/utils/wechat.js
0 → 100644
| 1 | import wx from 'weixin-js-sdk'; | ||
| 2 | |||
| 3 | wx.ready(function () { //通过ready接口处理成功验证 | ||
| 4 | // config信息验证成功后会执行ready方法 | ||
| 5 | wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表,然后这个方法才可以用 | ||
| 6 | title: '这里是标题', // 分享标题 | ||
| 7 | desc: 'This is a test!', // 分享描述 | ||
| 8 | link: '链接', // 分享链接 | ||
| 9 | imgUrl: '图片', // 分享图标 | ||
| 10 | type: '', // 分享类型,music、video或link,不填默认为link | ||
| 11 | dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 | ||
| 12 | success: function () { | ||
| 13 | // 用户确认分享后执行的回调函数 | ||
| 14 | }, | ||
| 15 | cancel: function () { | ||
| 16 | // 用户取消分享后执行的回调函数 | ||
| 17 | } | ||
| 18 | }); | ||
| 19 | wx.onMenuShareTimeline({ //分享朋友圈 | ||
| 20 | title: '标题', // 分享标题 | ||
| 21 | link: '链接', | ||
| 22 | imgUrl: '图片', // 分享图标 | ||
| 23 | success: function () { | ||
| 24 | // 用户确认分享后执行的回调函数 | ||
| 25 | }, | ||
| 26 | cancel: function () { | ||
| 27 | // 用户取消分享后执行的回调函数 | ||
| 28 | } | ||
| 29 | }); | ||
| 30 | }); | ||
| 31 | wx.error(function (res) {//通过error接口处理失败验证 | ||
| 32 | // config信息验证失败会执行error函数 | ||
| 33 | }); | ||
| 34 | |||
| 35 | |||
| 36 | wx.config({ | ||
| 37 | debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 | ||
| 38 | appId: '', // 必填,公众号的唯一标识 | ||
| 39 | timestamp: '', // 必填,生成签名的时间戳 | ||
| 40 | nonceStr: '', // 必填,生成签名的随机串 | ||
| 41 | signature: '',// 必填,签名,见附录1 | ||
| 42 | jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 | ||
| 43 | }); |
vue.config.js
0 → 100644
| 1 | // 打包目录 | ||
| 2 | let webpack_public_path = 'dist' | ||
| 3 | if (process.env.NODE_ENV === 'production') { | ||
| 4 | webpack_public_path = process.env.VUE_APP_TITLE | ||
| 5 | } | ||
| 6 | module.exports = { | ||
| 7 | // 部署生产环境和开发环境下的URL。 | ||
| 8 | // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 | ||
| 9 | //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。 | ||
| 10 | //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath | ||
| 11 | //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/", | ||
| 12 | publicPath: process.env.NODE_ENV === "dev" ? "/" : "./", | ||
| 13 | |||
| 14 | // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致) | ||
| 15 | outputDir: webpack_public_path, | ||
| 16 | //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) | ||
| 17 | assetsDir: "assets", | ||
| 18 | //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名) | ||
| 19 | // indexPath: "myIndex.html", | ||
| 20 | //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) | ||
| 21 | filenameHashing: false, | ||
| 22 | |||
| 23 | // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint | ||
| 24 | lintOnSave: true, | ||
| 25 | //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置 | ||
| 26 | // lintOnSave: process.env.NODE_ENV !== 'production', | ||
| 27 | |||
| 28 | //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false) | ||
| 29 | // runtimeCompiler: false, | ||
| 30 | |||
| 31 | /** | ||
| 32 | * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 | ||
| 33 | * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件 | ||
| 34 | * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 | ||
| 35 | * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 | ||
| 36 | * */ | ||
| 37 | productionSourceMap: false, | ||
| 38 | |||
| 39 | // 它支持webPack-dev-server的所有选项 | ||
| 40 | devServer: { | ||
| 41 | host: "localhost", | ||
| 42 | port: 9001, // 端口号 | ||
| 43 | https: false, // https:{type:Boolean} | ||
| 44 | open: true, //配置自动启动浏览器 | ||
| 45 | // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 | ||
| 46 | } | ||
| 47 | }; | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or sign in to post a comment