Skip to content

web-framework-temp / vue-cli3-vt-template-master

Go to a project
Toggle navigation
Toggle navigation pinning
743d837e by simon
Options

默认提交

1 parent 2aa603f3
Expand all
Inline Side-by-side
Showing 34 changed files with 703 additions and 409 deletions
1 NODE_ENV = 'development'
2 VUE_APP_TITLE = 'development'
3 VUE_APP_PUBLIC_PATH = './'
4 VUE_APP_OUTPUT_DIR = 'dist'
...\ No newline at end of file ...\ No newline at end of file
1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'fev'
...\ No newline at end of file ...\ No newline at end of file
1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'production'
3 VUE_APP_PUBLIC_PATH = './'
4 VUE_APP_OUTPUT_DIR = 'dist'
...\ No newline at end of file ...\ No newline at end of file
1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'sandbox'
3 VUE_APP_PUBLIC_PATH = './'
4 VUE_APP_OUTPUT_DIR = 'sandbox'
...@@ -3,6 +3,8 @@ node_modules ...@@ -3,6 +3,8 @@ node_modules
3 /dist 3 /dist
4 /fev 4 /fev
5 5
6 sync.sh
7
6 # local env files 8 # local env files
7 .env.local 9 .env.local
8 .env.*.local 10 .env.*.local
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 "serve": "vue-cli-service serve", 6 "serve": "vue-cli-service serve",
7 "dev": "vue-cli-service serve", 7 "dev": "vue-cli-service serve",
8 "build": "vue-cli-service build", 8 "build": "vue-cli-service build",
9 "fev": "vue-cli-service build --mode fev", 9 "sandbox": "vue-cli-service build --mode sandbox",
10 "lint": "vue-cli-service lint", 10 "lint": "vue-cli-service lint",
11 "oss": "node build/oss-released.js" 11 "oss": "node build/oss-released.js"
12 }, 12 },
...@@ -17,11 +17,16 @@ ...@@ -17,11 +17,16 @@
17 "axios-mock-adapter": "^1.16.0", 17 "axios-mock-adapter": "^1.16.0",
18 "co": "^4.6.0", 18 "co": "^4.6.0",
19 "core-js": "^2.6.5", 19 "core-js": "^2.6.5",
20 "crypto-js": "^4.0.0",
21 "jsencrypt": "^3.0.0-rc.1",
22 "moment": "^2.29.1",
20 "glob": "^7.1.4", 23 "glob": "^7.1.4",
24 "js-cookie": "^2.2.1",
21 "mockjs": "^1.0.1-beta3", 25 "mockjs": "^1.0.1-beta3",
22 "postcss-px2rem": "^0.3.0", 26 "postcss-px2rem": "^0.3.0",
23 "postcss-pxtorem": "^4.0.1", 27 "postcss-pxtorem": "^4.0.1",
24 "vant": "^1.6.21", 28 "sass-resources-loader": "^2.0.3",
29 "vant": "^2.2.11",
25 "vue": "^2.6.10", 30 "vue": "^2.6.10",
26 "vue-router": "^3.0.3", 31 "vue-router": "^3.0.3",
27 "vuex": "^3.0.1" 32 "vuex": "^3.0.1"
...@@ -34,8 +39,8 @@ ...@@ -34,8 +39,8 @@
34 "babel-plugin-import": "^1.12.0", 39 "babel-plugin-import": "^1.12.0",
35 "eslint": "^5.16.0", 40 "eslint": "^5.16.0",
36 "eslint-plugin-vue": "^5.0.0", 41 "eslint-plugin-vue": "^5.0.0",
37 "node-sass": "^4.12.0", 42 "node-sass": "^5.0.0",
38 "sass-loader": "^7.1.0", 43 "sass-loader": "^10.1.0",
39 "vue-template-compiler": "^2.6.10" 44 "vue-template-compiler": "^2.6.10"
40 } 45 }
41 } 46 }
......
...@@ -4,13 +4,11 @@ ...@@ -4,13 +4,11 @@
4 <router-link to="/">Home</router-link> | 4 <router-link to="/">Home</router-link> |
5 <router-link to="/about">About</router-link> 5 <router-link to="/about">About</router-link>
6 </div>--> 6 </div>-->
7 <router-view/> 7 <router-view />
8 </div> 8 </div>
9 </template> 9 </template>
10 10
11 <style lang="scss"> 11 <style lang="scss">
12 @import './styles/support.scss';
13
14 #app { 12 #app {
15 /* font-family: 'Avenir', Helvetica, Arial, sans-serif; 13 /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 -webkit-font-smoothing: antialiased; 14 -webkit-font-smoothing: antialiased;
...@@ -82,6 +80,4 @@ div { ...@@ -82,6 +80,4 @@ div {
82 .app__content { 80 .app__content {
83 position: relative; 81 position: relative;
84 } 82 }
85
86
87 </style> 83 </style>
......
1 import axios from 'axios'; 1 import axios from 'axios';
2 // import {
3 // Toast
4 // } from 'vant';
5 2
6 function Toast(msg) { 3 import {
7 console.log("msg:", msg); 4 Toast
8 } 5 } from 'vant';
6
7 import router from '@/router'
8 import {
9 getToken,
10 setToken,
11 removeToken
12 } from '@/utils/auth'
13
14 import {
15 makeEncrypt
16 } from '@/utils/encrypt-util'
17
18 import api from '@/api/api';
9 19
10 // axios的默认url 20 // axios的默认url
11 // axios.defaults.baseURL = "" 21 // axios.defaults.baseURL = ""
12 22
13 // 服务器地址 23 // 服务器地址
24 // let base = process.env.VUE_APP_API_HOST + "/jxMallApi";
14 let base = "https://ow.go.qudone.com"; 25 let base = "https://ow.go.qudone.com";
15 if (location.href.indexOf("//k.wxpai.cn") > 0) { 26 if (location.href.indexOf("//k.wxpai.cn") > 0) {
16 base = "https://api.k.wxpai.cn/bizproxy" 27 base = "https://api.k.wxpai.cn/bizproxy"
17 } 28 }
18 // let base = COM.baseUrl;
19 29
20 // 请求拦截器 30 // 请求拦截器
21 // axios.interceptors.request.use( 31 // axios.interceptors.request.use(
...@@ -33,11 +43,37 @@ if (location.href.indexOf("//k.wxpai.cn") > 0) { ...@@ -33,11 +43,37 @@ if (location.href.indexOf("//k.wxpai.cn") > 0) {
33 // 响应拦截器 43 // 响应拦截器
34 axios.interceptors.response.use( 44 axios.interceptors.response.use(
35 response => { 45 response => {
46 let {
47 config
48 } = response;
49 let {
50 opt
51 } = config;
52 // 服务器状态码
36 if (response.status === 200) { 53 if (response.status === 200) {
54
55 // 业务状态码
37 if (response.data.code === 200) { 56 if (response.data.code === 200) {
38 return Promise.resolve(response); 57 return Promise.resolve(response);
39 } else { 58 } else {
40 Toast(response.data.bizMsg); 59 if (typeof (opt) == "undefined" || typeof (opt.toast) == "undefined" || opt.toast) {
60 Toast(response.data.errMsg);
61 }
62 switch (response.data.code) {
63
64 /**
65 * 登陆失败
66 * 清除cookies
67 * 根据业务可能要引导回登陆页
68 */
69 case 403:
70 removeToken();
71 break;
72
73 default:
74 break;
75 }
76
41 return Promise.reject(response); 77 return Promise.reject(response);
42 } 78 }
43 } else { 79 } else {
...@@ -48,49 +84,7 @@ axios.interceptors.response.use( ...@@ -48,49 +84,7 @@ axios.interceptors.response.use(
48 error => { 84 error => {
49 if (error.response.status) { 85 if (error.response.status) {
50 switch (error.response.status) { 86 switch (error.response.status) {
51 // 401: 未登录 87 // 其他错误，直接抛出错误提示
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: 88 default:
95 Toast({ 89 Toast({
96 message: error.response.data.message, 90 message: error.response.data.message,
...@@ -103,6 +97,7 @@ axios.interceptors.response.use( ...@@ -103,6 +97,7 @@ axios.interceptors.response.use(
103 } 97 }
104 ); 98 );
105 99
100
106 //formDataHeaders设置 101 //formDataHeaders设置
107 let formDataHeaders = { 102 let formDataHeaders = {
108 headers: { 103 headers: {
...@@ -113,14 +108,31 @@ let formDataHeaders = { ...@@ -113,14 +108,31 @@ let formDataHeaders = {
113 /** 108 /**
114 * 封装get方法 109 * 封装get方法
115 * @param {*} params 110 * @param {*} params
111 *
116 */ 112 */
117 export const httpGet = params => { 113 export const httpGet = params => {
118 let { 114 let {
119 url, 115 url,
120 data 116 data,
117 mode,
118 opt = Object.assign({}, params.opt),
119 sid = true
121 } = params; 120 } = params;
122 return axios.get(`${base}${url}`, { 121 if (opt.enc) {
123 params: data 122 data = makeEncrypt(data);
123 }
124 let reqUrl = `${base}${url}`;
125 if (mode == "custom") {
126 reqUrl = `${url}`
127 }
128 let headers = {}
129 if (sid) {
130 headers.sessionId = getToken();
131 }
132 return axios.get(reqUrl, {
133 params: data,
134 headers,
135 opt
124 }).then(res => res.data.content); 136 }).then(res => res.data.content);
125 } 137 }
126 138
...@@ -131,9 +143,26 @@ export const httpGet = params => { ...@@ -131,9 +143,26 @@ export const httpGet = params => {
131 export const httpPost = params => { 143 export const httpPost = params => {
132 let { 144 let {
133 url, 145 url,
134 data 146 data,
147 mode,
148 opt = Object.assign({}, params.opt),
149 sid = true
135 } = params; 150 } = params;
136 return axios.post(`${base}${url}`, data).then(res => res.data.content); 151 if (opt.enc) {
152 data = makeEncrypt(data);
153 }
154 let reqUrl = `${base}${url}`;
155 if (mode == "custom") {
156 reqUrl = `${url}`
157 }
158 let headers = {}
159 if (sid) {
160 headers.sessionId = getToken();
161 }
162 return axios.post(reqUrl, data, {
163 headers,
164 opt
165 }).then(res => res.data.content);
137 } 166 }
138 167
139 168
...@@ -143,14 +172,40 @@ export const httpPost = params => { ...@@ -143,14 +172,40 @@ export const httpPost = params => {
143 * data数据是 formdata格式 172 * data数据是 formdata格式
144 * 例如： 173 * 例如：
145 * this.file = file 174 * this.file = file
146 let data = new FormData() //使用formData对象 175 let data = new FormData() //使用formData对象
147 data.append('path', '/pro/mzczcradmin/') 176 data.append('path', '/pro/mzczcradmin/')
148 data.append('file', file.file) 177 data.append('file', file.file)
149 */ 178 */
150 export const formdata = params => { 179 export const formdata = params => {
151 let { 180 let {
152 url, 181 url,
153 data 182 data,
154 } = params; 183 } = params;
155 return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data); 184
185 let formData = new FormData(); //使用formData对象
186 for (let key in data) {
187 formData.append(key, data[key]);
188 }
189 return axios.post(`${base}${url}`, formData, formDataHeaders).then(res => res.data.content);
190 }
191
192
193
194 /**
195 * 打点
196 * @param {*} params
197 */
198 export const stat = data => {
199 data.s = encodeURIComponent(getToken());
200 let reqUrl = `${base}${api.stat}`;
201 let opt = {
202 toast: false
203 }
204 let headers = {}
205 // headers.sessionId = getToken();
206 return axios.get(reqUrl, {
207 params: data,
208 headers,
209 opt
210 }).then(res => res.data.content);;
156 } 211 }
...\ No newline at end of file ...\ No newline at end of file
......
1 // 字体放在同目录下
1 // @font-face { 2 // @font-face {
2 // font-family: 'vivo-BoldExtended'; 3 // font-family: 'BentonSans';
3 // src: url('./vivo-BoldExtended.ttf'); 4 // src: url('BentonSans-Regular_sOT.otf');
4 // font-weight: normal;
5 // font-style: normal;
6 // } 5 // }
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
6
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,13 +3,45 @@ import App from './App.vue' ...@@ -3,13 +3,45 @@ import App from './App.vue'
3 import router from './router' 3 import router from './router'
4 import store from './store' 4 import store from './store'
5 5
6 import Mock from './mock' 6 // import Mock from './mock'
7 Mock.bootstrap(); 7 // Mock.bootstrap();
8 8
9 import 'amfe-flexible/index.js' 9 import 'amfe-flexible/index.js'
10 10
11 import '@/styles/index.scss' // global css
12
13 import '@/styles/index.scss' // global css
14 import '@/styles/fonticon.scss' // 图标字体
15 import '@/assets/fonts/font.scss' // 字体引入
16
17 // import '@styles/utils.scss' /*引入公共样式*/
18
11 Vue.config.productionTip = false 19 Vue.config.productionTip = false
12 20
21
22 import {
23 Swipe,
24 SwipeItem,
25 Lazyload,
26 Tab,
27 Tabs,
28 Sticky,
29 Popup,
30 Tabbar,
31 TabbarItem,
32 Icon,
33 Toast
34 } from 'vant';
35
36 Vue.use(Swipe).use(SwipeItem)
37 .use(Lazyload)
38 .use(Tab).use(Tabs)
39 .use(Sticky)
40 .use(Popup)
41 .use(Tabbar).use(TabbarItem)
42 .use(Icon)
43 .use(Toast);
44
13 new Vue({ 45 new Vue({
14 router, 46 router,
15 store, 47 store,
...@@ -17,4 +49,4 @@ new Vue({ ...@@ -17,4 +49,4 @@ new Vue({
17 isInit: false, 49 isInit: false,
18 }, 50 },
19 render: h => h(App) 51 render: h => h(App)
20 }).$mount('#app') 52 }).$mount('#app')
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="home">home</div> 2 <div class="home">
3
4 <div >旅游必备清单</div>
5 </div>
3 </template> 6 </template>
4 7
5 <script> 8 <script>
...@@ -11,5 +14,6 @@ export default { ...@@ -11,5 +14,6 @@ export default {
11 <style lang="scss" scoped> 14 <style lang="scss" scoped>
12 .home { 15 .home {
13 text-align: center; 16 text-align: center;
17 font-size: 14PX;
14 } 18 }
15 </style> 19 </style>
......
...@@ -15,7 +15,5 @@ export default { ...@@ -15,7 +15,5 @@ export default {
15 initData() {} 15 initData() {}
16 }, 16 },
17 mounted() {}, 17 mounted() {},
18 created() { 18 created() {}
19 console.log("demo created");
20 }
21 } 19 }
...\ No newline at end of file ...\ No newline at end of file
......
File mode changed
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 demo
11 </div>
12 </div>
13 </div>
14 </template>
15
16 <script src="./demo.js"></script>
17 <style lang="scss" scoped>
18 @import './demo.scss';
19 </style>
...\ No newline at end of file ...\ No newline at end of file
1 @import './../../styles/support';
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 toLottery() {
17 this.$router.push({
18 path: "/lottery"
19 })
20 }
21 },
22 mounted() {},
23 created() {
24 }
25 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
6 <div class="app__content main"> 6 <div class="app__content main">
7 <div class="top-space"></div> 7 <div class="top-space"></div>
8 <div class="content"> 8 <div class="content">
9 <span class="iconfont iconclose">demo</span> 9 <div @click="toLottery">Index</div>
10 </div> 10 </div>
11 </div> 11 </div>
12 </div> 12 </div>
13 </template> 13 </template>
14 14
15 <script src="./index.js"></script> 15 <script src="./index.js"></script>
16 <style lang="scss" scoped> 16 <style lang="scss" scoped>
17 // @import './index.scss'; 17 @import "./index.scss";
18 </style> 18 </style>
...\ No newline at end of file ...\ No newline at end of file
......
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 toIndex() {
17 this.$router.push({
18 path: "/"
19 })
20 },
21 },
22 mounted() {},
23 created() {}
24 }
...\ No newline at end of file ...\ No newline at end of file
1 .content {
2 color: $colorBlue;
3 @extend .underline;
4 }
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 <div @click="toIndex">lottery</div>
10 </div>
11 </div>
12 </div>
13 </template>
14
15 <script src="./lottery.js"></script>
16 <style lang="scss" scoped>
17 @import "./lottery.scss";
18 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 import Home from './pages/Home.vue' 3 import Index from './pages/index/index.vue'
4 4
5 Vue.use(Router) 5 Vue.use(Router)
6 6
7 const routes = [{ 7 const routes = [{
8 path: '/', 8 path: '/',
9 name: 'home', 9 name: 'index',
10 component: Home, 10 component: Index,
11 meta: { 11 meta: {
12 title: '首页' 12 title: ''
13 }
14 },
15 {
16 path: '/lottery',
17 name: 'lottery',
18 component: () => import('./pages/lottery/lottery.vue'),
19 meta: {
20 title: 'lottery'
13 } 21 }
14 }, 22 },
15 { 23 {
16 path: '/demo', 24 path: '/demo',
17 name: 'demo', 25 name: 'demo',
18 component: () => import('./pages/demo/index.vue'), 26 component: () => import('./pages/demo/demo.vue'),
19 meta: { 27 meta: {
20 title: '模板' 28 title: '模板'
21 } 29 }
......
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
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 }
1 #app {
2 border: 0;
3 margin: 0;
4 padding: 0;
5 }
6
7 body,
8 div {
9 border: 0;
10 margin: 0;
11 padding: 0;
12 }
13
14 .app__width {
15 width: 750px;
16 }
17
18 .app__width {
19 width: 750px;
20 }
21
22 .app__inner {
23 margin: 20px;
24 }
25
26 .app__title {
27 font-size: $fontSize;
28 line-height: $fontSize + 4px;
29 font-weight: bold;
30 padding-bottom: 10px;
31 margin-bottom: 20px;
32 border-bottom: 0.5px solid #eeeeee;
33 }
34
35 .app__desc {
36 font-size: $fontSizeSmaller;
37 line-height: $fontSizeSmaller + 2px;
38 margin-bottom: 20px;
39 color: $colorGray;
40 }
41
42 .app__bgc {
43 position: fixed;
44 background-color: #ffffff;
45 width: 100%;
46 height: 100%;
47 }
48
49 .app__bg {
50 position: absolute;
51 width: 100%;
52 height: 100%;
53 }
54
55 .app__top-shadow {
56 position: fixed;
57 width: 750px;
58 height: 1px;
59 box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07);
60 background-color: #ffffff;
61 }
62
63 .app__content {
64 position: relative;
65 }
1 /** 1 // 居中按钮样式
2 * ------------------------------------------------------------------ 2 @mixin btn-center($width, $height) {
3 * Sass Minxins 3 width: $width;
4 * 4 height: $height;
5 * 参考收集： 5 line-height: $height;
6 * https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins 6 text-align: center;
7 * ------------------------------------------------------------------ 7 }
8 * 8
9 */ 9 // 超过多少行自动省略 默认一行
10 @mixin ellipsis($line: 1) {
11 display: -webkit-box;
12 word-break: break-all;
13 -webkit-box-orient: vertical;
14 -webkit-line-clamp: $line;
15 overflow: hidden;
16 text-overflow: ellipsis;
17
18 -ms-text-overflow: ellipsis;
19 }
20 @mixin ellipsis1() {
21 display: -webkit-box;
22 word-break: break-all;
23 -webkit-box-orient: vertical;
24 -webkit-line-clamp: 1;
25 overflow: hidden;
26 text-overflow: ellipsis;
27 white-space: nowrap;
28 }
10 29
11 // 文字截取 30 // 文字截取
12 @mixin text-overflow() { 31 @mixin text-overflow() {
13 overflow: hidden; 32 overflow: hidden;
14 white-space: normal; 33 white-space: normal;
15 text-overflow: ellipsis; 34 text-overflow: ellipsis;
16 word-break: break-all; 35 word-break: break-all;
17 word-wrap: normal; 36 word-wrap: normal;
18 } 37 }
19 38
20 @mixin word-break() { 39 @mixin word-break() {
21 word-break: break-all; 40 word-break: break-all;
22 word-wrap: break-word; 41 word-wrap: break-word;
23 white-space: normal; 42 white-space: normal;
24 } 43 }
25 44
26 // No wrap 45 // No wrap
27 @mixin no-wrap() { 46 @mixin no-wrap() {
28 word-break: normal; 47 word-break: normal;
29 word-wrap: normal; 48 word-wrap: normal;
30 white-space: nowrap; 49 white-space: nowrap;
31 } 50 }
32 51
33 // 清除浮动 52 // 清除浮动
34 @mixin clearfix() { 53 @mixin clearfix() {
35 &:before, 54 &:before,
36 &:after { 55 &:after {
37 content: " "; // 1 56 content: " "; // 1
38 display: table; // 2 57 display: table; // 2
39 } 58 }
40 &:after { 59
41 clear: both; 60 &:after {
42 } 61 clear: both;
62 }
43 } 63 }
44 64
45 // Single side border-radius 65 // Single side border-radius
46 @mixin border-top-radius($radius) { 66 @mixin border-top-radius($radius) {
47 border-top-right-radius: $radius; 67 border-top-right-radius: $radius;
48 border-top-left-radius: $radius; 68 border-top-left-radius: $radius;
49 } 69 }
50 70
51 @mixin border-right-radius($radius) { 71 @mixin border-right-radius($radius) {
52 border-bottom-right-radius: $radius; 72 border-bottom-right-radius: $radius;
53 border-top-right-radius: $radius; 73 border-top-right-radius: $radius;
54 } 74 }
55 75
56 @mixin border-bottom-radius($radius) { 76 @mixin border-bottom-radius($radius) {
57 border-bottom-right-radius: $radius; 77 border-bottom-right-radius: $radius;
58 border-bottom-left-radius: $radius; 78 border-bottom-left-radius: $radius;
59 } 79 }
60 80
61 @mixin border-left-radius($radius) { 81 @mixin border-left-radius($radius) {
62 border-bottom-left-radius: $radius; 82 border-bottom-left-radius: $radius;
63 border-top-left-radius: $radius; 83 border-top-left-radius: $radius;
64 } 84 }
65 85
66 // Center-align a block level element 86 // Center-align a block level element
67 @mixin center-block() { 87 @mixin center-block() {
68 display: block; 88 display: block;
69 margin-left: auto; 89 margin-left: auto;
70 margin-right: auto; 90 margin-right: auto;
71 } 91 }
72 92
73 // CSS image replacement 93 // CSS image replacement
74 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 94 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
75 @mixin hide-text() { 95 @mixin hide-text() {
76 font-size: 0; 96 font-size: 0;
77 line-height: 0; 97 line-height: 0;
78 color: transparent; 98 color: transparent;
79 text-shadow: none; 99 text-shadow: none;
80 background-color: transparent; 100 background-color: transparent;
81 border: 0; 101 border: 0;
102 }
103
104 // 橙色底实心 自定义圆角按钮
105 @mixin btc($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) {
106 @extend .fcc;
107 padding: 0 $padding;
108 height: $hei;
109 line-height: normal;
110 text-align: center;
111 border-radius: $borderRadius;
112 background-color: $cOrange;
113 font-size: $fontSize;
114 color: #ffffff;
115 letter-spacing: 1.4px;
116 cursor: pointer;
117 user-select: none;
118 }
119
120 // 白底空心 自定义圆角按钮
121 @mixin btc-o($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) {
122 @extend .fcc;
123 @extend .bb;
124 padding: 0 $padding;
125 height: $hei;
126 line-height: normal;
127 text-align: center;
128 border-radius: $borderRadius;
129 font-size: $fontSize;
130 color: $cOrange;
131 letter-spacing: 1.4px;
132 background-color: #ffffff;
133 cursor: pointer;
134 border: solid 1px $cOrange;
135 user-select: none;
136 }
137
138 // 定宽 橙色底实心圆角按钮
139 @mixin btc2($wid: 118px, $hei: 22px, $fontSize: 14px) {
140 width: $wid;
141 height: $hei;
142 line-height: $hei + 2px;
143 text-align: center;
144 border-radius: $hei * 0.5;
145 background-color: $cOrange;
146 font-size: $fontSize;
147 color: #ffffff;
148 letter-spacing: 1.4px;
149 cursor: pointer;
150 user-select: none;
151 }
152
153 // 橙框橙字
154 @mixin btc3($hei: 22px, $fontSize: 14px) {
155 height: $hei;
156 line-height: $hei;
157 padding: 0 12px;
158 text-align: center;
159 border-radius: 2px;
160 font-size: $fontSize;
161 letter-spacing: 1.4px;
162 cursor: pointer;
163 user-select: none;
164 color: $cOrange;
165 border: solid 1px $cOrange;
166 }
167
168 // 定宽 黑色底实心圆角按钮
169 @mixin btc4($wid: 118px, $hei: 22px, $fontSize: 14px) {
170 width: $wid;
171 height: $hei;
172 line-height: $hei + 2px;
173 text-align: center;
174 border-radius: $hei * 0.5;
175 background-color: $cLightDard;
176 font-size: $fontSize;
177 color: #ffffff;
178 letter-spacing: 1.4px;
179 cursor: pointer;
180 user-select: none;
82 } 181 }
......
1 .bis {
2 background-repeat: no-repeat;
3 background-size: 100% 100%;
4 }
5
6 //flex 布局和 子元素 对其方式
7 .fl {
8 display: flex;
9 }
10
11 .flc {
12 display: flex;
13 justify-content: center;
14 }
15
16 .flb {
17 display: flex;
18 justify-content: space-between;
19 }
20
21 .fla {
22 display: flex;
23 align-items: center;
24 }
25
26 //水平和垂直居中
27 .fcc {
28 display: flex;
29 justify-content: center;
30 align-items: center;
31 }
32
33 // 为元素设定的宽度和高度决定了元素的边框盒。
34 .bb {
35 box-sizing: border-box;
36 }
37
38 // 满屏
39 .fullp {
40 width: 100%;
41 height: 100%;
42 }
43
44 .pointer {
45 cursor: pointer;
46 }
47
48 .text-l {
49 text-align: left;
50 }
51
52 .text-r {
53 text-align: right;
54 }
55
56 .text-c {
57 text-align: center;
58 }
59
60 .underline {
61 text-decoration: underline;
62 }
63
64 .pointer {
65 cursor: pointer;
66 }
1 import Cookies from 'js-cookie'
2
3 const TokenKey = 'temp-app-token'
4
5 export function getToken() {
6 return Cookies.get(TokenKey)
7 }
8
9 export function setToken(token) {
10 return Cookies.set(TokenKey, token)
11 }
12
13 export function removeToken() {
14 return Cookies.remove(TokenKey)
15 }
1 import CryptoJS from "crypto-js";
2 import JsEncrypt from "jsencrypt";
3 let rsa = new JsEncrypt();
4
5 /*
6 * 创建加密
7 * @param data
8 *
9 * 设置项
10 * key 公钥
11 * iv 偏移量
12 */
13 export function makeEncrypt(param) {
14 let key = "";
15 let iv = ""
16 rsa.setPublicKey(key);
17 let chars = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
18
19 function randomAesKey() {
20 let res = "";
21 for (let i = 0; i < 16; i++) {
22 let id = Math.ceil(Math.random() * (chars.length - 1));
23 res += chars[id];
24 }
25 return res;
26 };
27
28 function encryptContent(obj) {
29 let aesKey = randomAesKey();
30 let key = CryptoJS.enc.Utf8.parse(aesKey);
31 let ivR = CryptoJS.enc.Utf8.parse(iv);
32 var encrypted = CryptoJS.AES.encrypt(JSON.stringify(obj), key, {
33 iv: ivR,
34 mode: CryptoJS.mode.CBC,
35 padding: CryptoJS.pad.Pkcs7
36 });
37 let content = encrypted.toString(); //返回的是base64格式的密文
38 let securityKey = rsa.encrypt(aesKey);
39
40 let result = {
41 k: securityKey,
42 v: content
43 };
44 return result;
45 };
46 let data = encryptContent(param)
47 return data;
48 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -8,6 +8,16 @@ export function checkMobile(str) { ...@@ -8,6 +8,16 @@ export function checkMobile(str) {
8 return REGEXPS.mobile.test(str); 8 return REGEXPS.mobile.test(str);
9 } 9 }
10 10
11 // 判断是否微信环境
12 export function isWeiXin() {
13 var ua = window.navigator.userAgent.toLowerCase();
14 if (ua.match(/MicroMessenger/i) == 'micromessenger') {
15 return true;
16 } else {
17 return false;
18 }
19 }
20
11 /** 21 /**
12 * 链接参数转换为obj 22 * 链接参数转换为obj
13 * 入参 完整链接 23 * 入参 完整链接
...@@ -29,33 +39,22 @@ export function param2Obj(url) { ...@@ -29,33 +39,22 @@ export function param2Obj(url) {
29 } 39 }
30 40
31 41
32 42 /**
33 //获取cookie、 43 * 从数组中获取 key未value的对象
34 export function getCookie(name) { 44 * @param {*} value
35 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); 45 * @param {*} key
36 if (arr = document.cookie.match(reg)) 46 * @param {*} list
37 return (arr[2]); 47 */
38 else 48 export function getObjByListKeyValue(value, key, list) {
39 return null; 49 let result = null;
50 list.forEach(element => {
51 if (element[key + ""] == value) {
52 result = element;
53 }
54 });
55 return result;
40 } 56 }
41 57
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 /** 58 /**
60 * 获取环境信息 59 * 获取环境信息
61 * @return {Object} 环境信息对象 60 * @return {Object} 环境信息对象
......
1 const Timestamp = new Date().getTime(); 1 const Timestamp = new Date().getTime();
2 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 // 打包目录 3 const path = require('path')
4 let webpack_public_path = 'dist' 4
5 if (process.env.NODE_ENV === 'production') { 5 // 配置资源包路径
6 webpack_public_path = process.env.VUE_APP_TITLE 6 let webpack_public_path = process.env.VUE_APP_PUBLIC_PATH;
7
8 let webpack_output_dir = "dist";
9 webpack_output_dir = process.env.VUE_APP_OUTPUT_DIR;
10
11
12 function resolve(dir) {
13 return path.join(__dirname, dir);
7 } 14 }
15
8 module.exports = { 16 module.exports = {
17 chainWebpack: (config) => {
18 config.resolve.alias
19 .set('@', resolve('src'))
20 .set('@public', resolve('public'))
21 .set('@assets', resolve('src/assets'))
22 .set('@components', resolve('src/components'))
23 .set('@pages', resolve('src/pages'))
24 .set('@api', resolve('src/api'))
25 .set('@styles', resolve('src/styles'))
26 .set('@store', resolve('src/store'))
27 .set('@utils', resolve('src/utils'))
28 .set('@common', resolve('src/common'));
29
30 const oneOfsMap = config.module.rule('scss').oneOfs.store
31 oneOfsMap.forEach(item => {
32 item
33 .use('sass-resources-loader')
34 .loader('sass-resources-loader')
35 .options({
36 // Provide path to the file with resources
37 // 要公用的scss的路径
38 resources: ['./src/styles/vars.scss', './src/styles/mixins.scss', './src/styles/utils.scss']
39 })
40 .end()
41 })
42
43 },
9 configureWebpack: { // webpack 配置 44 configureWebpack: { // webpack 配置
10 // 修改打包后js文件名 45 // 修改打包后js文件名
11 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 46 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
...@@ -42,10 +77,11 @@ module.exports = { ...@@ -42,10 +77,11 @@ module.exports = {
42 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。 77 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
43 //baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath 78 //baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
44 //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/", 79 //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
45 publicPath: process.env.NODE_ENV === "dev" ? "/" : "./", 80 // publicPath: process.env.NODE_ENV === "dev" ? "/" : "./",
81 publicPath: process.env.NODE_ENV === "dev" ? "/" : webpack_public_path, // history模式 用短码？
46 82
47 // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致） 83 // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
48 outputDir: webpack_public_path, 84 outputDir: webpack_output_dir,
49 //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下） 85 //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
50 assetsDir: "assets", 86 assetsDir: "assets",
51 //指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名) 87 //指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
...@@ -70,11 +106,11 @@ module.exports = { ...@@ -70,11 +106,11 @@ module.exports = {
70 productionSourceMap: false, 106 productionSourceMap: false,
71 107
72 // 它支持webPack-dev-server的所有选项 108 // 它支持webPack-dev-server的所有选项
73 devServer: { 109 // devServer: {
74 host: "localhost", 110 // host: "localhost",
75 port: 9001, // 端口号 111 // port: 9001, // 端口号
76 https: false, // https:{type:Boolean} 112 // https: false, // https:{type:Boolean}
77 open: true, //配置自动启动浏览器 113 // open: true, //配置自动启动浏览器
78 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 114 // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
79 } 115 // }
80 }; 116 };
...\ No newline at end of file ...\ No newline at end of file
......