Skip to content

dev / vue-cli3-template-master

Go to a project
Toggle navigation
Toggle navigation pinning
1a792bc3 by simon
Options

版本更新

1 parent 02c91549
Inline Side-by-side
Showing 28 changed files with 614 additions and 387 deletions
1 NODE_ENV = 'production' 1 NODE_ENV = 'production'
2 VUE_APP_TITLE = 'fev'
...\ No newline at end of file ...\ No newline at end of file
2 VUE_APP_TITLE = 'sandbox'
...\ No newline at end of file ...\ No newline at end of file
......
1 { 1 {
2 "name": "vue-cli3-framework", 2 "name": "vue-cli3-vant-framework",
3 "version": "0.1.0", 3 "version": "0.1.0",
4 "private": true, 4 "private": true,
5 "scripts": { 5 "scripts": {
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 },
...@@ -18,8 +18,12 @@ ...@@ -18,8 +18,12 @@
18 "co": "^4.6.0", 18 "co": "^4.6.0",
19 "core-js": "^2.6.5", 19 "core-js": "^2.6.5",
20 "glob": "^7.1.4", 20 "glob": "^7.1.4",
21 "js-cookie": "^2.2.1",
21 "mockjs": "^1.0.1-beta3", 22 "mockjs": "^1.0.1-beta3",
23 "postcss-px2rem": "^0.3.0",
22 "postcss-pxtorem": "^4.0.1", 24 "postcss-pxtorem": "^4.0.1",
25 "sass-resources-loader": "^2.0.3",
26 "vant": "^2.2.11",
23 "vue": "^2.6.10", 27 "vue": "^2.6.10",
24 "vue-router": "^3.0.3", 28 "vue-router": "^3.0.3",
25 "vuex": "^3.0.1" 29 "vuex": "^3.0.1"
...@@ -29,6 +33,7 @@ ...@@ -29,6 +33,7 @@
29 "@vue/cli-plugin-eslint": "^3.8.0", 33 "@vue/cli-plugin-eslint": "^3.8.0",
30 "@vue/cli-service": "^3.8.0", 34 "@vue/cli-service": "^3.8.0",
31 "babel-eslint": "^10.0.1", 35 "babel-eslint": "^10.0.1",
36 "babel-plugin-import": "^1.12.0",
32 "eslint": "^5.16.0", 37 "eslint": "^5.16.0",
33 "eslint-plugin-vue": "^5.0.0", 38 "eslint-plugin-vue": "^5.0.0",
34 "node-sass": "^4.12.0", 39 "node-sass": "^4.12.0",
......
1 module.exports = { 1 const AutoPrefixer = require("autoprefixer");
2 plugins: { 2 const px2rem = require("postcss-px2rem");
3 'autoprefixer': { 3 module.exports = ({
4 browsers: ['Android >= 4.0', 'iOS >= 7'] 4 file
5 }, 5 }) => {
6 'postcss-pxtorem': { 6 let remUnit;
7 rootValue: 75, 7 // file.dirname是绝对地址，所以项目名，文件目录不能带 'vant'
8 propList: ['*'], 8 if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
9 selectorBlackList: [] 9 remUnit = 37.5;
10 } 10 } else {
11 remUnit = 75;
11 } 12 }
12 }
...\ No newline at end of file ...\ No newline at end of file
13 return {
14 plugins: [px2rem({
15 remUnit: remUnit,
16 }), AutoPrefixer({
17 browsers: ["last 20 versions", "android >= 4.0"]
18 })]
19 };
20 };
......
...@@ -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';
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 } from '@/utils/auth'
9 12
10 // axios的默认url 13 // axios的默认url
11 // axios.defaults.baseURL = "" 14 // axios.defaults.baseURL = ""
12 15
13 // 服务器地址 16 // 服务器地址
14 let base = "https://ow.go.qudone.com"; 17 let base = "http://api.bh.kdao.xin";
15 if (location.href.indexOf("//k.wxpai.cn") > 0) { 18 if (location.href.indexOf("//k.wxpai.cn") > 0) {
16 base = "https://api.k.wxpai.cn/bizproxy" 19 base = "https://api.k.wxpai.cn/bizproxy"
17 } 20 }
...@@ -33,11 +36,37 @@ if (location.href.indexOf("//k.wxpai.cn") > 0) { ...@@ -33,11 +36,37 @@ if (location.href.indexOf("//k.wxpai.cn") > 0) {
33 // 响应拦截器 36 // 响应拦截器
34 axios.interceptors.response.use( 37 axios.interceptors.response.use(
35 response => { 38 response => {
39 let {
40 config
41 } = response;
42 let {
43 opt
44 } = config;
45 // 服务器状态码
36 if (response.status === 200) { 46 if (response.status === 200) {
47
48 // 业务状态码
37 if (response.data.code === 200) { 49 if (response.data.code === 200) {
38 return Promise.resolve(response); 50 return Promise.resolve(response);
39 } else { 51 } else {
40 Toast(response.data.bizMsg); 52 if (typeof (opt.toast) == "undefined" || opt.toast) {
53 Toast(response.data.errMsg);
54 }
55 switch (response.data.code) {
56
57 /**
58 * 登陆失败
59 * 清除cookies
60 * 根据业务可能要引导回登陆页
61 */
62 case 403:
63 removeToken();
64 break;
65
66 default:
67 break;
68 }
69
41 return Promise.reject(response); 70 return Promise.reject(response);
42 } 71 }
43 } else { 72 } else {
...@@ -48,49 +77,7 @@ axios.interceptors.response.use( ...@@ -48,49 +77,7 @@ axios.interceptors.response.use(
48 error => { 77 error => {
49 if (error.response.status) { 78 if (error.response.status) {
50 switch (error.response.status) { 79 switch (error.response.status) {
51 // 401: 未登录 80 // 其他错误，直接抛出错误提示
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: 81 default:
95 Toast({ 82 Toast({
96 message: error.response.data.message, 83 message: error.response.data.message,
...@@ -103,6 +90,7 @@ axios.interceptors.response.use( ...@@ -103,6 +90,7 @@ axios.interceptors.response.use(
103 } 90 }
104 ); 91 );
105 92
93
106 //formDataHeaders设置 94 //formDataHeaders设置
107 let formDataHeaders = { 95 let formDataHeaders = {
108 headers: { 96 headers: {
...@@ -113,15 +101,30 @@ let formDataHeaders = { ...@@ -113,15 +101,30 @@ let formDataHeaders = {
113 /** 101 /**
114 * 封装get方法 102 * 封装get方法
115 * @param {*} params 103 * @param {*} params
104 *
116 */ 105 */
117 export const httpGet = params => { 106 export const httpGet = params => {
118 let { 107 let {
119 url, 108 url,
120 data 109 data,
110 mode,
111 opt = Object.assign({}, params.opt),
112 sid = true
121 } = params; 113 } = params;
122 return axios.get(`${base}${url}`, { 114 let reqUrl = `${base}${url}`;
115 if (mode == "custom") {
116 reqUrl = `${url}`
117 }
118 let headers = {}
119 if (sid) {
120 headers.sessionId = getToken();
121 }
122 return axios.get(reqUrl, {
123 params: data 123 params: data
124 }).then(res => res.data.content); 124 }, {
125 headers,
126 opt
127 }).then(res => res.data);
125 } 128 }
126 129
127 /** 130 /**
...@@ -131,9 +134,23 @@ export const httpGet = params => { ...@@ -131,9 +134,23 @@ export const httpGet = params => {
131 export const httpPost = params => { 134 export const httpPost = params => {
132 let { 135 let {
133 url, 136 url,
134 data 137 data,
138 mode,
139 opt = Object.assign({}, params.opt),
140 sid = true
135 } = params; 141 } = params;
136 return axios.post(`${base}${url}`, data).then(res => res.data.content); 142 let reqUrl = `${base}${url}`;
143 if (mode == "custom") {
144 reqUrl = `${url}`
145 }
146 let headers = {}
147 if (sid) {
148 headers.sessionId = getToken();
149 }
150 return axios.post(reqUrl, data, {
151 headers,
152 opt
153 }).then(res => res.data);
137 } 154 }
138 155
139 156
...@@ -143,14 +160,19 @@ export const httpPost = params => { ...@@ -143,14 +160,19 @@ export const httpPost = params => {
143 * data数据是 formdata格式 160 * data数据是 formdata格式
144 * 例如： 161 * 例如：
145 * this.file = file 162 * this.file = file
146 let data = new FormData() //使用formData对象 163 let data = new FormData() //使用formData对象
147 data.append('path', '/pro/mzczcradmin/') 164 data.append('path', '/pro/mzczcradmin/')
148 data.append('file', file.file) 165 data.append('file', file.file)
149 */ 166 */
150 export const formdata = params => { 167 export const formdata = params => {
151 let { 168 let {
152 url, 169 url,
153 data 170 data,
171 config,
154 } = params; 172 } = params;
155 return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data); 173 if (!config) {
174 config = {}
175 }
176 config.header = formDataHeaders.headers
177 return axios.post(`${base}${url}`, data, config).then(res => res.data);
156 } 178 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,17 +3,50 @@ import App from './App.vue' ...@@ -3,17 +3,50 @@ 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'; 9 import 'amfe-flexible/index.js'
10 10
11 import '@/styles/index.scss' // global css
11 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' /*引入公共样式*/
12 18
13 Vue.config.productionTip = false 19 Vue.config.productionTip = false
14 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
15 new Vue({ 45 new Vue({
16 router, 46 router,
17 store, 47 store,
18 render: h => h(App) 48 data: {
49 isInit: false,
50 },
51 render: h => h(App)
19 }).$mount('#app') 52 }).$mount('#app')
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="about"> 2 <div class="about">
3 <h1>This is an about page</h1> 3 <div>This is an about page</div>
4 <div class="cc"> 4 <van-button type="default">默认按钮</van-button>
5 <div class="ddd">1233</div> 5 <div class="ccc"></div>
6 </div>
7 </div> 6 </div>
8 </template> 7 </template>
9 8
10 <style lang="scss" scoped> 9 <script>
11 .cc { 10 import { Button } from 'vant'
12 .ddd { 11 export default {
13 width: 746px; 12 name: 'about',
14 height: 300px; 13 components: {
15 background-color: wheat; 14 [Button.name]: Button
16 } 15 }
17 } 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 }
18 </style> 28 </style>
19 29
......
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>
...@@ -9,9 +12,8 @@ export default { ...@@ -9,9 +12,8 @@ export default {
9 </script> 12 </script>
10 13
11 <style lang="scss" scoped> 14 <style lang="scss" scoped>
12 @import "../../styles/support";
13 .home { 15 .home {
14 // @extend .u-flex;
15 text-align: center; 16 text-align: center;
17 font-size: 14PX;
16 } 18 }
17 </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 // @import "utils";
15
16 // 图标字体
17 @import "fonticon";
18
19 // 字体引入
20 @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 = 'kd-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 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 const path = require('path')
4
3 // 打包目录 5 // 打包目录
4 let webpack_public_path = 'dist' 6 let webpack_public_path = 'dist'
5 if (process.env.NODE_ENV === 'production') { 7 if (process.env.NODE_ENV === 'production') {
6 webpack_public_path = process.env.VUE_APP_TITLE 8 webpack_public_path = process.env.VUE_APP_TITLE
7 } 9 }
10
11 function resolve(dir) {
12 return path.join(__dirname, dir);
13 }
14
8 module.exports = { 15 module.exports = {
16 chainWebpack: (config) => {
17 config.resolve.alias
18 .set('@', resolve('src'))
19 .set('@public', resolve('public'))
20 .set('@assets', resolve('src/assets'))
21 .set('@components', resolve('src/components'))
22 .set('@pages', resolve('src/pages'))
23 .set('@api', resolve('src/api'))
24 .set('@styles', resolve('src/styles'))
25 .set('@store', resolve('src/store'))
26 .set('@utils', resolve('src/utils'))
27 .set('@common', resolve('src/common'));
28
29 const oneOfsMap = config.module.rule('scss').oneOfs.store
30 oneOfsMap.forEach(item => {
31 item
32 .use('sass-resources-loader')
33 .loader('sass-resources-loader')
34 .options({
35 // Provide path to the file with resources
36 // 要公用的scss的路径
37 resources: ['./src/styles/vars.scss', './src/styles/mixins.scss', './src/styles/utils.scss']
38 })
39 .end()
40 })
41
42 },
9 configureWebpack: { // webpack 配置 43 configureWebpack: { // webpack 配置
10 // 修改打包后js文件名 44 // 修改打包后js文件名
11 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 45 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
...@@ -70,11 +104,11 @@ module.exports = { ...@@ -70,11 +104,11 @@ module.exports = {
70 productionSourceMap: false, 104 productionSourceMap: false,
71 105
72 // 它支持webPack-dev-server的所有选项 106 // 它支持webPack-dev-server的所有选项
73 devServer: { 107 // devServer: {
74 host: "localhost", 108 // host: "localhost",
75 port: 9001, // 端口号 109 // port: 9001, // 端口号
76 https: false, // https:{type:Boolean} 110 // https: false, // https:{type:Boolean}
77 open: true, //配置自动启动浏览器 111 // open: true, //配置自动启动浏览器
78 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 112 // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
79 } 113 // }
80 }; 114 };
...\ No newline at end of file ...\ No newline at end of file
......