模板更新
Showing
11 changed files
with
202 additions
and
46 deletions
src/components/demo-item/demo-item.js
0 → 100644
src/components/demo-item/demo-item.scss
0 → 100644
1 | .comp {} |
src/components/demo-item/demo-item.vue
0 → 100644
... | @@ -16,14 +16,17 @@ import { | ... | @@ -16,14 +16,17 @@ import { |
16 | import 'amfe-flexible/index.js' | 16 | import 'amfe-flexible/index.js' |
17 | import vant from '@/utils/vant-util' | 17 | import vant from '@/utils/vant-util' |
18 | 18 | ||
19 | // import '@/styles/index.scss' // global css | 19 | import '@/styles/index.scss' // global css |
20 | import '@/styles/fonticon.scss' // 图标字体 | 20 | import '@/styles/fonticon.scss' // 图标字体 |
21 | import '@/assets/fonts/font.scss' // 字体引入 | 21 | import '@/assets/fonts/font.scss' // 字体引入 |
22 | // import '@styles/utils.scss' /*引入公共样式*/ | 22 | // import '@styles/utils.scss' /*引入公共样式*/ |
23 | 23 | ||
24 | Vue.config.productionTip = false | 24 | Vue.config.productionTip = false |
25 | 25 | ||
26 | 26 | import { | |
27 | Dialog, | ||
28 | Toast | ||
29 | } from "vant"; | ||
27 | 30 | ||
28 | 31 | ||
29 | // 原app节点请通过 document.getElementById('app') 获取 | 32 | // 原app节点请通过 document.getElementById('app') 获取 |
... | @@ -88,12 +91,23 @@ Vue.config.productionTip = false | ... | @@ -88,12 +91,23 @@ Vue.config.productionTip = false |
88 | // } | 91 | // } |
89 | // initVue(); | 92 | // initVue(); |
90 | 93 | ||
94 | let util = require('@/utils/utils'); | ||
95 | let func = require('@/utils/func'); | ||
96 | |||
97 | // let Toast = vant.Toast; | ||
98 | // let Dialog = vant.Dialog; | ||
91 | 99 | ||
92 | let app = new Vue({ | 100 | let app = new Vue({ |
93 | router, | 101 | router, |
94 | store, | 102 | store, |
95 | data: { | 103 | data: { |
96 | isInit: false, | 104 | isInit: false, |
105 | globalData: { | ||
106 | ui: { | ||
107 | colorUI: "#409EFF", | ||
108 | colorDanger: "#EE0A24" | ||
109 | }, | ||
110 | }, | ||
97 | }, | 111 | }, |
98 | render: h => h(VueApp) | 112 | render: h => h(VueApp) |
99 | }).$mount('#app') | 113 | }).$mount('#app') |
... | @@ -105,4 +119,10 @@ app.get = httpGet; | ... | @@ -105,4 +119,10 @@ app.get = httpGet; |
105 | app.post = httpPost; | 119 | app.post = httpPost; |
106 | app.uploadFile = formdata; | 120 | app.uploadFile = formdata; |
107 | app.router = router; | 121 | app.router = router; |
122 | app.util = util; | ||
123 | app.func = func; | ||
124 | app.vant = { | ||
125 | Dialog, | ||
126 | Toast | ||
127 | } | ||
108 | window.app = app; | 128 | window.app = app; |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -6,14 +6,10 @@ export default { | ... | @@ -6,14 +6,10 @@ export default { |
6 | }, | 6 | }, |
7 | components: {}, | 7 | components: {}, |
8 | methods: { | 8 | methods: { |
9 | toLottery() { | 9 | async initData() {}, |
10 | app.router.push({ | ||
11 | name: "lottery" | ||
12 | }); | ||
13 | }, | 10 | }, |
14 | initData() {}, | 11 | mounted() { |
12 | this.initData(); | ||
15 | }, | 13 | }, |
16 | mounted() {}, | 14 | created() {} |
17 | created() { | ||
18 | } | ||
19 | } | 15 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
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 | <div @click="toLottery">Index</div> | 9 | Index |
10 | </div> | 10 | </div> |
11 | </div> | 11 | </div> |
12 | </div> | 12 | </div> | ... | ... |
... | @@ -23,21 +23,6 @@ div { | ... | @@ -23,21 +23,6 @@ div { |
23 | margin: 20px; | 23 | margin: 20px; |
24 | } | 24 | } |
25 | 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 | 26 | ||
42 | .app__bgc { | 27 | .app__bgc { |
43 | position: fixed; | 28 | position: fixed; |
... | @@ -63,3 +48,16 @@ div { | ... | @@ -63,3 +48,16 @@ div { |
63 | .app__content { | 48 | .app__content { |
64 | position: relative; | 49 | position: relative; |
65 | } | 50 | } |
51 | |||
52 | |||
53 | .box { | ||
54 | @extend .bb; | ||
55 | @extend .shadow; | ||
56 | position: relative; | ||
57 | width: $contentWid; | ||
58 | margin: 24px auto; | ||
59 | position: relative; | ||
60 | background-color: #fff; | ||
61 | border-radius: 10px; | ||
62 | padding: 28px 24px; | ||
63 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | $fontSizeFix:0px; // 用于整体字号放大 | ||
2 | |||
1 | // Font 文字 | 3 | // Font 文字 |
2 | 4 | ||
3 | // 大标题 Medium 26pt 34H 500 | 5 | // 大标题 Medium 26pt 34H 500 |
... | @@ -7,7 +9,7 @@ $fontSizeTitleLarger: 52px; | ... | @@ -7,7 +9,7 @@ $fontSizeTitleLarger: 52px; |
7 | $fontSizeTitleLarge: 40px; | 9 | $fontSizeTitleLarge: 40px; |
8 | 10 | ||
9 | // 标准标题 Medium 18pt 24H 500 | 11 | // 标准标题 Medium 18pt 24H 500 |
10 | $fontSizeTitle: 36rpx; | 12 | $fontSizeTitle: 36px; |
11 | 13 | ||
12 | // 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400 | 14 | // 正文5 大部分正文文字+导航栏的文字 Regular 17pt 23H 400 |
13 | $fontSizeNavLarge: 34px; | 15 | $fontSizeNavLarge: 34px; |
... | @@ -38,7 +40,9 @@ $fontSizeData: 16px; | ... | @@ -38,7 +40,9 @@ $fontSizeData: 16px; |
38 | $color: #323233; // 文字色,指主文字1 | 40 | $color: #323233; // 文字色,指主文字1 |
39 | $colorText: #646566; // 文字色,指主文字2 | 41 | $colorText: #646566; // 文字色,指主文字2 |
40 | $colorLight: #969799; // 文字色,指辅助、说明文字 | 42 | $colorLight: #969799; // 文字色,指辅助、说明文字 |
41 | $colorTips: #969799; // 文字色,指 disable、提示文字等 | 43 | $colorDesc: #969799; // 文字色,指 disable、提示文字等 |
44 | $colorTips: #999; // 文字色,指 disable、提示文字等 | ||
45 | $colorDisable: #bbb; // 文字色,指 disable、提示文字等 | ||
42 | $colorBorder: #DCDEE0; // 边框、线色 | 46 | $colorBorder: #DCDEE0; // 边框、线色 |
43 | $colorBorderLight: #EBEDF0; // 边框、线色 | 47 | $colorBorderLight: #EBEDF0; // 边框、线色 |
44 | $colorBg: #F2F3F5; // 深色背景 | 48 | $colorBg: #F2F3F5; // 深色背景 |
... | @@ -48,11 +52,13 @@ $colorBlack: #000000; // 黑色 | ... | @@ -48,11 +52,13 @@ $colorBlack: #000000; // 黑色 |
48 | $colorWhite: #ffffff; // 白色 | 52 | $colorWhite: #ffffff; // 白色 |
49 | 53 | ||
50 | // 功能色 | 54 | // 功能色 |
55 | $colorGray: #969799; | ||
56 | $colorGrayLight: #C8C9CC; | ||
57 | |||
51 | $colorLink:#576B95; // 文字链颜色 | 58 | $colorLink:#576B95; // 文字链颜色 |
52 | $colorSuccess: #07C160; // 成功色 | 59 | $colorSuccess: #07C160; // 成功色 |
53 | $colorDanger: #EE0A24; // 报错色 | 60 | $colorDanger: #ee0a24; // 报错色 |
54 | $colorWarning: #ED6A0C; // 通知消息中的文本颜色 | 61 | $colorWarning: #ED6A0C; // 通知消息中的文本颜色 |
55 | $colorWarning: #FFFBE8; // 通知消息中的背景颜色 | ||
56 | $colorInfo: #FAAB0C; // 文字辅助颜色 | 62 | $colorInfo: #FAAB0C; // 文字辅助颜色 |
57 | 63 | ||
58 | 64 | ||
... | @@ -81,7 +87,9 @@ $paddingSmall: 16px; | ... | @@ -81,7 +87,9 @@ $paddingSmall: 16px; |
81 | $paddingSmaller: 8px; | 87 | $paddingSmaller: 8px; |
82 | 88 | ||
83 | // 页面样式 | 89 | // 页面样式 |
84 | $pageBottom: 160px; // 页面底部 | 90 | $pageBottomTabBar: 160px; // 页面底部 |
91 | $pageBottom: 40px; // 页面底部 | ||
92 | $popupWid: 610px; //内容宽度 (由间距为8的倍数所得) | ||
85 | $contentWid: 690px; //内容宽度 (由间距为8的倍数所得) | 93 | $contentWid: 690px; //内容宽度 (由间距为8的倍数所得) |
86 | $contentWidth: 710px; //内容宽度 (由间距为8的倍数所得) | 94 | $contentWidth: 710px; //内容宽度 (由间距为8的倍数所得) |
87 | $screenWidth: 750px; // 屏幕宽度 | 95 | $screenWidth: 750px; // 屏幕宽度 |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
src/utils/func.js
0 → 100644
File mode changed
1 | // 正在表达式 | 1 | // 验证手机 以1开头的11位数字 |
2 | export const REGEXPS = { | 2 | export function checkMobile(str) { |
3 | "mobile": /^1\d{10}$/ | 3 | var pattern = /^1\d{10}$/; |
4 | return pattern.test(str); | ||
4 | } | 5 | } |
5 | 6 | ||
6 | // 验证手机 | 7 | |
7 | export function checkMobile(str) { | 8 | // 验证邮箱 |
8 | return REGEXPS.mobile.test(str); | 9 | export function checkEmail(email) { |
10 | var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
11 | return pattern.test(email); | ||
9 | } | 12 | } |
10 | 13 | ||
14 | |||
11 | // 判断是否微信环境 | 15 | // 判断是否微信环境 |
12 | export function isWeiXin() { | 16 | export function isWeiXin() { |
13 | var ua = window.navigator.userAgent.toLowerCase(); | 17 | var ua = window.navigator.userAgent.toLowerCase(); |
... | @@ -40,6 +44,107 @@ export function param2Obj(url) { | ... | @@ -40,6 +44,107 @@ export function param2Obj(url) { |
40 | 44 | ||
41 | 45 | ||
42 | /** | 46 | /** |
47 | * 分转元 | ||
48 | * @param {*} fen | ||
49 | * @returns | ||
50 | */ | ||
51 | export function regFenToYuan(fen) { | ||
52 | var num = fen; | ||
53 | num = fen * 0.01; | ||
54 | num += ''; | ||
55 | var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g; | ||
56 | num = num.replace(reg, '$1'); | ||
57 | num = toDecimal2(num) | ||
58 | return num | ||
59 | }; | ||
60 | |||
61 | /** | ||
62 | * 元转分 | ||
63 | * @param {*} yuan | ||
64 | * @param {*} digit | ||
65 | * @returns | ||
66 | */ | ||
67 | export function regYuanToFen(yuan, digit = 100) { | ||
68 | var m = 0, | ||
69 | s1 = yuan.toString(), | ||
70 | s2 = digit.toString(); | ||
71 | try { | ||
72 | m += s1.split(".")[1].length | ||
73 | } catch (e) {} | ||
74 | try { | ||
75 | m += s2.split(".")[1].length | ||
76 | } catch (e) {} | ||
77 | return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) | ||
78 | } | ||
79 | |||
80 | |||
81 | /** | ||
82 | * 强制保留2位小数,如:2,会在2后面补上00.即2.00 | ||
83 | * @param {*} x | ||
84 | * @returns | ||
85 | */ | ||
86 | export function toDecimal2(x) { | ||
87 | var f = parseFloat(x); | ||
88 | if (isNaN(f)) { | ||
89 | return false; | ||
90 | } | ||
91 | var f = Math.round(x * 100) / 100; | ||
92 | var s = f.toString(); | ||
93 | var rs = s.indexOf('.'); | ||
94 | if (rs < 0) { | ||
95 | rs = s.length; | ||
96 | s += '.'; | ||
97 | } | ||
98 | while (s.length <= rs + 2) { | ||
99 | s += '0'; | ||
100 | } | ||
101 | return s; | ||
102 | } | ||
103 | |||
104 | // 格式化星期几 | ||
105 | export function formatWeek(week) { | ||
106 | let result = ""; | ||
107 | switch (week) { | ||
108 | case 1: | ||
109 | result = "一"; | ||
110 | break; | ||
111 | case 2: | ||
112 | result = "二"; | ||
113 | break; | ||
114 | case 3: | ||
115 | result = "三"; | ||
116 | break; | ||
117 | case 4: | ||
118 | result = "四"; | ||
119 | break; | ||
120 | case 5: | ||
121 | result = "五"; | ||
122 | break; | ||
123 | case 6: | ||
124 | result = "六"; | ||
125 | break; | ||
126 | case 0: | ||
127 | result = "日"; | ||
128 | break; | ||
129 | |||
130 | default: | ||
131 | break; | ||
132 | } | ||
133 | return result; | ||
134 | } | ||
135 | |||
136 | // 数组去重 | ||
137 | export function uniqueArr(arr, key) { | ||
138 | let obj = {}; | ||
139 | let newArr = arr.reduce((cur, next) => { | ||
140 | obj[next[key]] ? "" : obj[next[key]] = true && cur.push(next); | ||
141 | return cur; | ||
142 | }, []) | ||
143 | return newArr | ||
144 | } | ||
145 | |||
146 | |||
147 | /** | ||
43 | * 从数组中获取 key未value的对象 | 148 | * 从数组中获取 key未value的对象 |
44 | * @param {*} value | 149 | * @param {*} value |
45 | * @param {*} key | 150 | * @param {*} key |
... | @@ -211,9 +316,9 @@ export function formatDate(date, fmt) { | ... | @@ -211,9 +316,9 @@ export function formatDate(date, fmt) { |
211 | * @param wait 延迟执行毫秒数 | 316 | * @param wait 延迟执行毫秒数 |
212 | * @param immediate true 表立即执行,false 表非立即执行 | 317 | * @param immediate true 表立即执行,false 表非立即执行 |
213 | */ | 318 | */ |
214 | let debounceTimeout; | 319 | let debounceTimeout; |
215 | 320 | ||
216 | export function debounce(func, wait, immediate) { | 321 | export function debounce(func, wait, immediate) { |
217 | return function () { | 322 | return function () { |
218 | let context = this; | 323 | let context = this; |
219 | let args = arguments; | 324 | let args = arguments; |
... | @@ -231,19 +336,19 @@ export function formatDate(date, fmt) { | ... | @@ -231,19 +336,19 @@ export function formatDate(date, fmt) { |
231 | }, wait); | 336 | }, wait); |
232 | } | 337 | } |
233 | }(); | 338 | }(); |
234 | } | 339 | } |
235 | 340 | ||
236 | /** | 341 | /** |
237 | * @desc 函数节流 | 342 | * @desc 函数节流 |
238 | * @param func 函数 | 343 | * @param func 函数 |
239 | * @param wait 延迟执行毫秒数 | 344 | * @param wait 延迟执行毫秒数 |
240 | * @param type 1 表时间戳版,2 表定时器版 | 345 | * @param type 1 表时间戳版,2 表定时器版 |
241 | * 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。 | 346 | * 时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。 |
242 | */ | 347 | */ |
243 | let throttleTimeout; | 348 | let throttleTimeout; |
244 | let throttlePrevious; | 349 | let throttlePrevious; |
245 | 350 | ||
246 | export function throttle(func, wait, type) { | 351 | export function throttle(func, wait, type) { |
247 | if (type === 1) { | 352 | if (type === 1) { |
248 | throttlePrevious = 0; | 353 | throttlePrevious = 0; |
249 | } else if (type === 2) { | 354 | } else if (type === 2) { |
... | @@ -268,5 +373,4 @@ export function formatDate(date, fmt) { | ... | @@ -268,5 +373,4 @@ export function formatDate(date, fmt) { |
268 | } | 373 | } |
269 | } | 374 | } |
270 | }(); | 375 | }(); |
271 | } | ||
272 | |||
... | \ No newline at end of file | ... | \ No newline at end of file |
376 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment