5c4c91fd by Evan_Fong

feat: 更新依赖和修改适配方案

1 parent fd3c5ea0
1 // https://github.com/michael-ciniawsky/postcss-load-config 1 // https://github.com/michael-ciniawsky/postcss-load-config
2 const path = require('path')
3 2
4 module.exports = { 3 module.exports = ({ file }) => {
5 plugins: { 4 console.log(file)
6 autoprefixer: {}, 5 return {
7 'postcss-px-to-viewport': { 6 plugins: {
8 unitToConvert: 'px', // 要转化的单位 7 autoprefixer: {},
9 viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 8 'postcss-px-to-viewport': {
10 viewportHeight: 812, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 9 unitToConvert: 'px', // 要转化的单位
11 unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数 10 viewportWidth: file.includes('vant') ? 375 : 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
12 viewportUnit: 'vw', //指定需要转换成的视窗单位,建议使用vw 11 viewportHeight: 812, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
13 selectorBlackList: [ 12 unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
14 '.van-cell', 13 viewportUnit: 'vw', //指定需要转换成的视窗单位,建议使用vw
15 '.van-button', 14 selectorBlackList: [], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
16 '.van-skeleton', 15 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
17 '.van-toast', 16 mediaQuery: false // 允许在媒体查询中转换`px`
18 '.van-popup__close-icon', 17 }
19 '.van-field',
20 '.van-dropdown-menu',
21 '.van-radio',
22 '.van-swipe',
23 '.van-list',
24 '.van-dialog',
25 '.van-tabbar'
26 ], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
27 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
28 mediaQuery: false // 允许在媒体查询中转换`px`
29 } 18 }
30 } 19 }
31 } 20 }
......
This diff could not be displayed because it is too large.
...@@ -24,11 +24,11 @@ ...@@ -24,11 +24,11 @@
24 "devDependencies": { 24 "devDependencies": {
25 "@babel/core": "^7.18.6", 25 "@babel/core": "^7.18.6",
26 "@babel/eslint-parser": "^7.18.2", 26 "@babel/eslint-parser": "^7.18.2",
27 "@vue/cli-plugin-babel": "~5.0.0", 27 "@vue/cli-plugin-babel": "~5.0.8",
28 "@vue/cli-plugin-eslint": "~5.0.0", 28 "@vue/cli-plugin-eslint": "~5.0.8",
29 "@vue/cli-plugin-router": "~5.0.0", 29 "@vue/cli-plugin-router": "~5.0.8",
30 "@vue/cli-plugin-vuex": "~5.0.0", 30 "@vue/cli-plugin-vuex": "~5.0.8",
31 "@vue/cli-service": "~5.0.0", 31 "@vue/cli-service": "~5.0.8",
32 "babel-eslint": "^10.1.0", 32 "babel-eslint": "^10.1.0",
33 "babel-plugin-import": "^1.13.5", 33 "babel-plugin-import": "^1.13.5",
34 "babel-plugin-transform-remove-console": "^6.9.4", 34 "babel-plugin-transform-remove-console": "^6.9.4",
......
...@@ -9,5 +9,5 @@ body .app { ...@@ -9,5 +9,5 @@ body .app {
9 } 9 }
10 10
11 .app-container { 11 .app-container {
12 padding-bottom: 50px; 12 padding-bottom: 100px;
13 } 13 }
......
...@@ -37,18 +37,21 @@ let list = ref([ ...@@ -37,18 +37,21 @@ let list = ref([
37 <style lang="scss" scoped> 37 <style lang="scss" scoped>
38 .index-container { 38 .index-container {
39 .warpper { 39 .warpper {
40 padding: 12px; 40 padding: 24px;
41 background: #fff; 41 background: #fff;
42 .demo-home__title { 42 .demo-home__title {
43 display: flex;
44 align-items: center;
45 justify-content: center;
43 margin: 0 0 6px; 46 margin: 0 0 6px;
44 font-size: 64px; 47 font-size: 56px;
45 .demo-home__title img, 48 .demo-home__title img,
46 .demo-home__title span { 49 .demo-home__title span {
47 display: inline-block; 50 display: inline-block;
48 vertical-align: middle; 51 vertical-align: middle;
49 } 52 }
50 img { 53 img {
51 width: 32px; 54 width: 64px;
52 } 55 }
53 span { 56 span {
54 margin-left: 16px; 57 margin-left: 16px;
...@@ -56,9 +59,10 @@ let list = ref([ ...@@ -56,9 +59,10 @@ let list = ref([
56 } 59 }
57 } 60 }
58 .demo-home__desc { 61 .demo-home__desc {
62 text-align: center;
59 margin: 0 0 20px; 63 margin: 0 0 20px;
60 color: rgba(69, 90, 100, 0.6); 64 color: rgba(69, 90, 100, 0.6);
61 font-size: 14px; 65 font-size: 28px;
62 } 66 }
63 } 67 }
64 } 68 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!