Skip to content

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

Go to a project
Toggle navigation
Toggle navigation pinning
a8d19002 by simon
Options

默认提交

1 parent 2a145a18
Expand all
Inline Side-by-side
Showing 20 changed files with 616 additions and 161 deletions
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
8 <meta name="viewport" 8 <meta name="viewport"
9 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 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"> 10 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 <!-- <script src="<%= BASE_URL %>static/js/weixin/jweixin-1.6.0.js"></script>
12 <script src="<%= BASE_URL %>static/js/kd/kd-sdk.1.0.0.js"></script>
13 <script src="<%= BASE_URL %>static/js/kd/kd.js"></script> -->
11 <title>vue-cli3-framework</title> 14 <title>vue-cli3-framework</title>
12 </head> 15 </head>
13 16
......
1 let appId = 'e13baf8d4a0d468eae005935332c5429';
2 let appKey = '1c60d1543db640e5970ffa4a794eb5c6';
3 KD.init(appId, appKey);
4 let weixin = new KD.weixin();
5 weixin.initConfig();
6 // window.weixin = weixin;
7 let openId = weixin.getOpenId();
8 window.openId = openId;
9 window.openid = openId;
10 window.wxUserInfo = null;
11
12 let urlShortCode = 's2n7/';
13 let href = location.href;
14 if (href.indexOf("192.168.") != -1 || href.indexOf("172.20.") != -1) {
15 urlShortCode = "";
16 }
17 let domain = `${location.protocol}//${document.domain}/${urlShortCode}`;
18 let shareTitle = "";
19 let shareDesc = "";
20 let shareLink = `${domain}index.html`;
21 let shareImgUrl = `${domain}share.png`;
22
23 window.shareCodeLink = shareLink;
24
25 var KdIns = window.KdIns || ({});
26 // 设置分享
27 KdIns.setShare = function (title, desc, link, imgUrl) {
28 if (!title) title = shareTitle;
29 if (!desc) desc = shareDesc;
30 if (!link) link = shareLink;
31 if (!imgUrl) imgUrl = shareImgUrl;
32 weixin.setShare(title, desc, link, imgUrl, (pos) => {})
33 }
34
35 console.log("domain:", domain);
36 KdIns.setShare(``, ``, ``, ``);
37
38 // KdIns.setShareShareCode = function (shareCode) {
39 // let shareCodeLink = `${shareLink}#/coop?shareCode=${shareCode}`;
40 // window.shareCodeLink = shareCodeLink;
41 // KdIns.setShare(``, ``, shareCodeLink, ``);
42 // }
43
44 // KdIns.getShareLink = function (shareCode) {
45 // let shareCodeLink = `${shareLink}#/coop?shareCode=${shareCode}`;
46 // return shareCodeLink;
47 // }
48
49 //
50 KdIns.setShareShareCode = function (shareCode) {
51 let shareCodeLink = `${shareLink}?f=coop&shareCode=${shareCode}`;
52 window.shareCodeLink = shareCodeLink;
53 KdIns.setShare(``, ``, shareCodeLink, ``);
54 }
55 KdIns.getShareLink = function (shareCode) {
56 let shareCodeLink = `${shareLink}?f=coop&shareCode=${shareCode}`;
57 return shareCodeLink;
58 }
59
60
61 // 读取微信身份
62 KdIns.getUserInfo = function () {
63 return new Promise((resolve, reject) => {
64 weixin.getUserInfo((res) => {
65 window.wxUserInfo = res;
66 window.wxUserInfo.avatar = window.wxUserInfo.headimgurl;
67 resolve(res);
68 });
69 });
70 }
71
72 // 读取微信身份CGI模式，需要用户显示授权后才能获得数据。获取信息中包含了用户的关注信息与unionid
73 KdIns.getCgiUserInfo = function () {
74 return new Promise((resolve, reject) => {
75 weixin.getCgiUserInfo((res) => {
76 resolve(res);
77 });
78 });
79 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -35,8 +35,7 @@ export default { ...@@ -35,8 +35,7 @@ export default {
35 }, 35 },
36 }, 36 },
37 mounted() { 37 mounted() {
38 console.log("111"); 38 // this.initWaterMark();
39 this.initWaterMark();
40 }, 39 },
41 }; 40 };
42 </script> 41 </script>
...@@ -69,21 +68,6 @@ div { ...@@ -69,21 +68,6 @@ div {
69 margin: 20px; 68 margin: 20px;
70 } 69 }
71 70
72 .app__title {
73 font-size: $fontSize;
74 line-height: $fontSize + 4px;
75 font-weight: bold;
76 padding-bottom: 10px;
77 margin-bottom: 20px;
78 border-bottom: 0.5px solid #eeeeee;
79 }
80
81 .app__desc {
82 font-size: $fontSizeSmaller;
83 line-height: $fontSizeSmaller + 2px;
84 margin-bottom: 20px;
85 color: $colorGray;
86 }
87 71
88 .app__bgc { 72 .app__bgc {
89 position: fixed; 73 position: fixed;
......
1 module.exports = { 1 module.exports = {
2 testListGet: '/xxx/xxx/list',
3 2
3 login: '/front/userApi/login', // 登录
4 profile: '/front/userApi/profile', // 个人信息
5 uploadProfile: '/front/userApi/uploadProfile', // 更新头像昵称
6
7
8 upload: '/common/upload', // 上传文件 [x]
9 list: "xxx",
10
11 // areaQuery: 'https://api.k.wxpai.cn/bizproxy/kdapi/area', // post 区域查询
4 12
5 areaQuery: 'https://api.k.wxpai.cn/bizproxy/kdapi/area', // post 区域查询
6 } 13 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -102,7 +102,7 @@ axios.interceptors.response.use( ...@@ -102,7 +102,7 @@ axios.interceptors.response.use(
102 /** 102 /**
103 * 分解参数&拦截请求 103 * 分解参数&拦截请求
104 */ 104 */
105 function analysisParams(params) { 105 function analysisParams(params) {
106 let { 106 let {
107 url, 107 url,
108 data, 108 data,
...@@ -196,6 +196,22 @@ export const httpPost = params => { ...@@ -196,6 +196,22 @@ export const httpPost = params => {
196 data.append('path', '/pro/mzczcradmin/') 196 data.append('path', '/pro/mzczcradmin/')
197 data.append('file', file.file) 197 data.append('file', file.file)
198 */ 198 */
199 // export const formdata = params => {
200 // let {
201 // url,
202 // data,
203 // } = params;
204
205 // let formData = new FormData(); //使用formData对象
206 // for (let key in data) {
207 // formData.append(key, data[key]);
208 // }
209 // return axios.post(`${base}${url}`, formData, {
210 // headers: {
211 // "Content-Type": "multipart/form-data"
212 // }
213 // }).then(res => res.data.content);
214 // }
199 export const formdata = params => { 215 export const formdata = params => {
200 let { 216 let {
201 url, 217 url,
...@@ -208,13 +224,16 @@ export const formdata = params => { ...@@ -208,13 +224,16 @@ export const formdata = params => {
208 } 224 }
209 return axios.post(`${base}${url}`, formData, { 225 return axios.post(`${base}${url}`, formData, {
210 headers: { 226 headers: {
211 "Content-Type": "multipart/form-data" 227 "Content-Type": "multipart/form-data",
228 "-kd-platform-module": MODULE_CODE,
229 "-kd-platform-env": ENV
212 } 230 }
213 }).then(res => res.data.content); 231 }).then(res => res.data.content);
214 } 232 }
215 233
216 234
217 235
236
218 /** 237 /**
219 * 打点 238 * 打点
220 * @param {*} params 239 * @param {*} params
......
This diff could not be displayed because it is too large.
...@@ -6,13 +6,15 @@ import store from './store' ...@@ -6,13 +6,15 @@ import store from './store'
6 import api from '@/api/api' 6 import api from '@/api/api'
7 import { 7 import {
8 httpGet, 8 httpGet,
9 httpPost 9 httpPost,
10 formdata
10 } from '@/api/fetch-api.js' 11 } from '@/api/fetch-api.js'
11 12
12 // import Mock from './mock' 13 // import Mock from './mock'
13 // Mock.bootstrap(); 14 // Mock.bootstrap();
14 15
15 import 'amfe-flexible/index.js' 16 import 'amfe-flexible/index.js'
17 import vant from '@/utils/vant-util'
16 18
17 // import '@/styles/index.scss' // global css 19 // import '@/styles/index.scss' // global css
18 import '@/styles/fonticon.scss' // 图标字体 20 import '@/styles/fonticon.scss' // 图标字体
...@@ -22,30 +24,70 @@ import '@/assets/fonts/font.scss' // 字体引入 ...@@ -22,30 +24,70 @@ import '@/assets/fonts/font.scss' // 字体引入
22 Vue.config.productionTip = false 24 Vue.config.productionTip = false
23 25
24 26
25 import { 27
26 Swipe, 28
27 SwipeItem, 29 // 原app节点请通过 document.getElementById('app') 获取
28 Lazyload, 30 // routes里的component组件需要以import方式引入，否则页面创建的时候，app还没挂载。
29 Tab, 31
30 Tabs, 32
31 Sticky, 33
32 Popup, 34 // function initVue() {
33 Tabbar, 35
34 TabbarItem, 36 // let codeSn = getQuery("c");
35 Icon, 37 // if (process.env.NODE_ENV == "development") {
36 Toast, 38 // openid = "oDPvDjjha8EVFhJaceqxs3Bta-1k";
37 Button 39 // }
38 } from 'vant'; 40 // console.log("openid:", openid);
39 41 // app.post({
40 Vue.use(Swipe).use(SwipeItem) 42 // url: app.api.login,
41 .use(Lazyload) 43 // data: {
42 .use(Tab).use(Tabs) 44 // openid: openid
43 .use(Sticky) 45 // }
44 .use(Popup) 46 // }).then((result) => {
45 .use(Tabbar).use(TabbarItem) 47 // console.log("result:", result);
46 .use(Icon) 48 // setToken(result.sessionId);
47 .use(Button) 49 // // console.log("KdIns:", KdIns);
48 .use(Toast); 50
51 // // 显示授权，或者头像昵称
52 // // if (process.env.NODE_ENV == "development") {
53 // // let wxUserInfo = {}
54 // // wxUserInfo.avatar = 'https://thirdwx.qlogo.cn/mmopen/vi_32/g5XHJelCh5ca3HbruKTM38uaOk0lqzMK4vDb7bLsUNiacRfEc7wp8wLP6GDlFicFFXZ1xAuTnSl8GfSoibPUgY1eg/132';
55 // // wxUserInfo.nickname = "SimonFungC";;
56 // // app.post({
57 // // url: app.api.uploadProfile,
58 // // data: wxUserInfo
59 // // }).then((result) => {})
60 // // } else {
61 // // KdIns.getUserInfo().then((res) => {
62 // // let wxUserInfo = res;
63 // // wxUserInfo.avatar = wxUserInfo.headimgurl;
64 // // app.post({
65 // // url: app.api.uploadProfile,
66 // // data: wxUserInfo
67 // // }).then((result) => {})
68 // // })
69 // // }
70
71
72 // window.vue = new Vue({
73 // router,
74 // store,
75 // data: {
76 // isInit: false,
77 // // wxUserInfo: wxUserInfo,
78 // codeSn: codeSn,
79 // },
80 // render: h => h(VueApp)
81 // }).$mount('#app');
82
83 // // console.log('window.vue:',window.vue);
84 // }).catch((err) => {
85
86 // });
87
88 // }
89 // initVue();
90
49 91
50 let app = new Vue({ 92 let app = new Vue({
51 router, 93 router,
...@@ -56,12 +98,11 @@ let app = new Vue({ ...@@ -56,12 +98,11 @@ let app = new Vue({
56 render: h => h(VueApp) 98 render: h => h(VueApp)
57 }).$mount('#app') 99 }).$mount('#app')
58 100
101
59 // 挂载全局app 102 // 挂载全局app
60 app.api = api; 103 app.api = api;
61 app.get = httpGet; 104 app.get = httpGet;
62 app.post = httpPost; 105 app.post = httpPost;
106 app.uploadFile = formdata;
63 app.router = router; 107 app.router = router;
64 window.app = app; 108 window.app = app;
...\ No newline at end of file ...\ No newline at end of file
65
66 // 原app节点请通过 document.getElementById('app') 获取
67 // routes里的component组件需要以import方式引入，否则页面创建的时候，app还没挂载。
...\ No newline at end of file ...\ No newline at end of file
......
1 import areaList from '@common/area.js'
2 import {
3 Toast
4 } from 'vant';
5
6 export default {
7 data() {
8 return {
9 key: 'value',
10 fileList: [],
11
12 areaVisible: false,
13 areaList: [],
14 // 姓名、手机号、省市区、详细地址
15 editable: false,
16 formData: { // 奖品信息。抽奖后显示
17 "winCode": "",
18 "name": "",
19 "mobile": "",
20 "province": "",
21 "city": "",
22 "district": "",
23 "address": "",
24 "extData": "",
25 "prize": { // 奖品信息
26 "prizeName": "",
27 "prizePic": "",
28 "prizeThumb": "",
29 "prizeType": "", // 如果不中奖，奖品标识为lose
30 "outParams": "",
31 "extParams": "",
32 "outParamsVo": { // outParams参数格式化}
33 }
34 }
35 },
36
37 page: 1,
38 size: 10,
39 loading: false,
40 finished: false,
41 list: [],
42 }
43 },
44 components: {},
45 computed: {
46 areaStr() {
47 let result = "";
48 let {
49 province,
50 city,
51 district
52 } = this.formData;
53 if (province && city && district) {
54 result = `${province}-${city}-${district}`
55 }
56 return result;
57 }
58 },
59 methods: {
60 resetPage() {
61 this.loading = false;
62 this.page = 1;
63 this.total = 0;
64 this.list = [];
65 this.finished = false;
66 },
67 onLoad() {
68 if (this.finished) {
69 this.loading = false;
70 } else {
71 this.page++;
72 this.queryList();
73 }
74
75 },
76
77 queryList() {
78 app.get({
79 url: app.api.list,
80 data: {
81 page: this.page,
82 size: this.size
83 }
84 }).then((result) => {
85 this.list = this.list.concat(result.list);
86 this.finished = this.list.length >= result.total;
87 this.loading = false;
88 }).catch((err) => {
89 this.loading = false;
90 this.finished = true;
91 });
92 },
93
94
95 // 显示地区
96 onShowAreaSelect() {
97 if (!this.editable) return;
98 this.areaVisible = true;
99 },
100 // 确认省市区
101 onAreaConfirm(val) {
102 this.areaVisible = false;
103 if (val && val.length >= 3) {
104 this.formData.province = val[0].name || "";
105 this.formData.city = val[1].name || "";
106 this.formData.district = val[2].name || "";
107
108 this.formData.provinceCode = val[0].code || "";
109 this.formData.cityCode = val[1].code || "";
110 this.formData.districtCode = val[2].code || "";
111 }
112 },
113
114 beforeAvatarUpload(file) {
115 const size = 10 * 1024 * 1024;
116 if (file.size > size) {
117 Toast('上传图片大小不能超过10M');
118 return false;
119 }
120 return true;
121 },
122 afterRead(file) {
123 console.log("file:", file);
124 if (file.length == undefined) {
125 this.uploadFile(file);
126 } else {
127 for (let index = 0; index < file.length; index++) {
128 this.uploadFile(file[index]);
129 }
130 }
131 },
132 uploadFile(file) {
133 file.status = 'uploading';
134 file.message = '上传中...';
135 this.loading = true;
136 app.uploadFile({
137 url: app.api.upload,
138 // data: formData
139 data: {
140 file: file.file,
141 subPath: this.subPath
142 }
143 })
144 .then(res => {
145 file.status = 'done';
146 file.message = '';
147 file.url = res;
148 console.log("file:", file);
149 console.log("fileList:", this.fileList);
150 this.loading = false;
151 })
152 .catch(e => {
153 file.status = 'failed';
154 file.message = '上传失败';
155 this.loading = false;
156 this.refreshFileList();
157 Toast("上传失败，请上传体积小于10的文件")
158 });
159 },
160 refreshFileList() {
161 let fileList = this.fileList.filter(item => {
162 return item.url
163 });
164 this.fileList = fileList
165 },
166 initData() {
167 this.editable = true;
168 }
169 },
170 mounted() {
171 this.areaList = areaList;
172 this.initData();
173 },
174 created() {}
175 }
...\ No newline at end of file ...\ No newline at end of file
1 .top-space {
2 height: 60px;
3 }
4
5 .form {
6 margin: 0 auto 0;
7 padding: 0 30px;
8 @extend .bb;
9
10 &-item {
11 margin: 0 auto 60px;
12 &-tit {}
13
14 .cont {}
15 }
16 }
17
18 .btn-wrap {
19 margin: 60px auto 0;
20 padding: 0 30px;
21 @extend .bb;
22
23 .btn {
24 @include bc();
25 }
26 }
...\ No newline at end of file ...\ No newline at end of file
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
10 <div class="form">
11
12 <div class="form-item">
13 <div class="form-tit">列表</div>
14 <div class="cont">
15 <div class="list">
16 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
17 :immediate-check="false">
18
19 <div v-for="(item,index) in list" :key="item.id">
20 {{ index }}
21 </div>
22 </van-list>
23 </div>
24 </div>
25 </div>
26
27 <div class="form-item">
28 <div class="form-tit">地区</div>
29 <div class="cont">
30 <div @click="onShowAreaSelect" class="val">
31 <input readonly="true" v-model="areaStr" class="ipt" type="text">
32 </div>
33 </div>
34
35 </div>
36
37 <div class="form-item">
38 <div class="form-tit">图片上传</div>
39 <div class="cont">
40 <van-uploader v-model="fileList" :after-read="afterRead" accept="image/png, image/jpeg, video/mp4"
41 preview-size='26vw' :max-count="9">
42 </van-uploader>
43 </div>
44 </div>
45 </div>
46
47 <div class="btn-wrap">
48 <div class="btn">提 交</div>
49 </div>
50 </div>
51 </div>
52 <van-popup v-model="areaVisible" position="bottom" get-container="body">
53 <van-area title="省市区选择" :area-list="areaList" @confirm="onAreaConfirm" @cancel="areaVisible=false" />
54 </van-popup>
55 </div>
56 </template>
57
58 <script src="./exp.js"></script>
59 <style lang="scss" scoped>
60 @import "./exp.scss";
61 </style>
...\ No newline at end of file ...\ No newline at end of file
1 .content { 1 .content {
2 color: $colorBlue; 2
3 @extend .underline;
4 } 3 }
......
...@@ -20,6 +20,14 @@ const routes = [{ ...@@ -20,6 +20,14 @@ const routes = [{
20 } 20 }
21 }, 21 },
22 { 22 {
23 path: '/exp',
24 name: 'exp',
25 component: () => import('./pages/exp/exp.vue'),
26 meta: {
27 title: ''
28 }
29 },
30 {
23 path: '/demo', 31 path: '/demo',
24 name: 'demo', 32 name: 'demo',
25 component: () => import('./pages/demo/demo.vue'), 33 component: () => import('./pages/demo/demo.vue'),
......
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 17
18 -ms-text-overflow: ellipsis; 18 -ms-text-overflow: ellipsis;
19 } 19 }
20
20 @mixin ellipsis1() { 21 @mixin ellipsis1() {
21 display: -webkit-box; 22 display: -webkit-box;
22 word-break: break-all; 23 word-break: break-all;
...@@ -51,6 +52,7 @@ ...@@ -51,6 +52,7 @@
51 52
52 // 清除浮动 53 // 清除浮动
53 @mixin clearfix() { 54 @mixin clearfix() {
55
54 &:before, 56 &:before,
55 &:after { 57 &:after {
56 content: " "; // 1 58 content: " "; // 1
...@@ -101,81 +103,40 @@ ...@@ -101,81 +103,40 @@
101 border: 0; 103 border: 0;
102 } 104 }
103 105
104 // 橙色底实心 自定义圆角按钮 106
105 @mixin btc($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) { 107 // 居中按钮样式
106 @extend .fcc; 108 @mixin btc($width, $height) {
107 padding: 0 $padding; 109 width: $width;
108 height: $hei; 110 height: $height;
109 line-height: normal; 111 line-height: $height;
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; 112 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 } 113 }
152 114
153 // 橙框橙字 115
154 @mixin btc3($hei: 22px, $fontSize: 14px) { 116
155 height: $hei; 117 // 通用按钮
156 line-height: $hei; 118 @mixin bc($width:100%, $height:88px, $fontSize:30px) {
157 padding: 0 12px; 119 color: #FFFFFF;
120 position: relative;
121 width: $width;
122 height: $height;
123 line-height: $height;
158 text-align: center; 124 text-align: center;
159 border-radius: 2px;
160 font-size: $fontSize; 125 font-size: $fontSize;
161 letter-spacing: 1.4px; 126 border-radius: 8px;
162 cursor: pointer; 127 background-color: $colorMain;
163 user-select: none; 128 }
164 color: $cOrange; 129
165 border: solid 1px $cOrange; 130 // 通用按钮
166 } 131 @mixin bc-o($width:100%, $height:88px, $fontSize:30px) {
167 132 position: relative;
168 // 定宽 黑色底实心圆角按钮 133 width: $width;
169 @mixin btc4($wid: 118px, $hei: 22px, $fontSize: 14px) { 134 height: $height;
170 width: $wid; 135 line-height: $height;
171 height: $hei;
172 line-height: $hei + 2px;
173 text-align: center; 136 text-align: center;
174 border-radius: $hei * 0.5;
175 background-color: $cLightDard;
176 font-size: $fontSize; 137 font-size: $fontSize;
177 color: #ffffff; 138 border-radius: 8px;
178 letter-spacing: 1.4px; 139 color: $colorMain;
179 cursor: pointer; 140 border: solid 1PX $colorMain;
180 user-select: none; 141 background-color: transparent;
181 } 142 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -64,3 +64,17 @@ ...@@ -64,3 +64,17 @@
64 .pointer { 64 .pointer {
65 cursor: pointer; 65 cursor: pointer;
66 } 66 }
67
68
69 .untouch {
70 pointer-events: none;
71 }
72
73
74 .ell {
75 @include ellipsis(1);
76 }
77
78 .ell2 {
79 @include ellipsis(2);
80 }
...\ No newline at end of file ...\ No newline at end of file
......
1 /** 1 // Font 文字
2 * ------------------------------------------------------------------ 2
3 * Sass 变量 3 // 大标题 Medium 26pt 34H 500
4 * 4 $fontSizeTitleLarger: 52px;
5 * ------------------------------------------------------------------ 5
6 * 6 // 标准标题 Medium 20pt 28H 500
7 */ 7 $fontSizeTitleLarge: 40px;
8 8
9 // Margin 9 // 标准标题 Medium 18pt 24H 500
10 $marginTopSmaller: 20px; 10 $fontSizeTitle: 36rpx;
11 $marginTopSmall: 30px; 11
12 $marginTopMedium: 40px; 12 // 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400
13 $marginTopLarge: 60px; 13 $fontSizeNavLarge: 34px;
14 $marginTopLarger: 80px; 14
15 15 // 正文5 大部分正文文字+导航栏的文字 Regular 16pt 22H 400
16 // Padding 16 $fontSizeNav: 32px;
17 $paddingTopSmaller: 20px; 17
18 $paddingTopSmall: 30px; 18 // 正文4 信息较多且需要多呈现时的正文使用 Regular 15pt 21H 400
19 $paddingTopMedium: 40px; 19 $fontSize: 30px;
20 $paddingTopLarge: 60px; 20
21 $paddingTopLarger: 80px; 21 // 正文3 信息较多且需要多呈现时的正文使用 Regular 14pt 21H 400
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; 22 $fontSizeSmall: 28px;
39 $fontSizeSmaller: 24px; 23
40 $fontSizeLarge: 36px; 24 // 正文2 对主题进行释意的文字+协议条款文字等 Regular 13pt 19H 400
41 $fontSizeLarger: 44px; 25 $fontSizeRemark: 26px;
26
27 // 正文1 对主题进行释意的文字+协议条款文字等 Regular 12pt 16H 400
28 $fontSizeRemarkSmall: 24px;
29
30 // 标签栏辅助文字 Medium 10pt 14H 500
31 $fontSizeTag: 20px;
32
33 // 表单中数据文字 Regular 8pt 10H 400
34 $fontSizeData: 16px;
35
36
37 // Color 颜色 以下来自 有赞建议
38 $color: #323233; // 文字色，指主文字1
39 $colorText: #646566; // 文字色，指主文字2
40 $colorLight: #969799; // 文字色，指辅助、说明文字
41 $colorTips: #969799; // 文字色，指 disable、提示文字等
42 $colorBorder: #DCDEE0; // 边框、线色
43 $colorBorderLight: #EBEDF0; // 边框、线色
44 $colorBg: #F2F3F5; // 深色背景
45 $colorBgLight: #F7F8FA; // 浅色背景
46
47 $colorBlack: #000000; // 黑色
48 $colorWhite: #ffffff; // 白色
49
50 // 功能色
51 $colorLink:#576B95; // 文字链颜色
52 $colorSuccess: #07C160; // 成功色
53 $colorDanger: #EE0A24; // 报错色
54 $colorWarning: #ED6A0C; // 通知消息中的文本颜色
55 $colorWarning: #FFFBE8; // 通知消息中的背景颜色
56 $colorInfo: #FAAB0C; // 文字辅助颜色
57
58
59
60 // 业务色 以下颜色为自定义
61 $colorMain:#409EFF; // 主题颜色 根据业务定义 // #EE0A24有赞默认
62 $colorPrice: #ee0a24; // 价格颜色
63 // $fontGray:#9F9E9E; // 提示文字颜色
64
65
66 // BorderRadius 角边
67 $borderRaidus: 16px; // 默认卡片编辑 角边
68 $borderRaidusPopup: 40px; // 模态面板编辑 角边
69 $borderRaidusDialog: 32px; // 对话框 角边
70
71
72 // Space 间距 有赞建议为8的倍数（8点网格系统）
73 $marginLarge:32px; // 外边距 多用于主内容离屏幕边缘
74 $margin:24px; // 外边距 多用于主内容离屏幕边缘
75 $marginSmall: 16px; // 小外边距 多用于内容间上下距离
76 $marginSmaller: 8px; // 小外边距 多用列表item间上下左右距离
77
78 $paddinglarge:32px; // 内边距
79 $padding: 24px;
80 $paddingSmall: 16px;
81 $paddingSmaller: 8px;
82
83 // 页面样式
84 $pageBottom: 160px; // 页面底部
85 $contentWid: 690px; //内容宽度 （由间距为8的倍数所得）
86 $contentWidth: 710px; //内容宽度 （由间距为8的倍数所得）
87 $screenWidth: 750px; // 屏幕宽度
......
1 import Vue from 'vue'
2
3 import {
4 Swipe,
5 SwipeItem,
6 Lazyload,
7 Tab,
8 Tabs,
9 Sticky,
10 Popup,
11 Tabbar,
12 TabbarItem,
13 Icon,
14 Uploader,
15 Area,
16 List,
17 Toast,
18 Button
19 } from 'vant';
20
21 Vue.use(Swipe).use(SwipeItem)
22 .use(Lazyload)
23 .use(Tab).use(Tabs)
24 .use(Sticky)
25 .use(Popup)
26 .use(Tabbar).use(TabbarItem)
27 .use(Icon)
28 .use(Uploader)
29 .use(Area)
30 .use(List)
31 .use(Button)
32 .use(Toast);