5c4c91fd by Evan_Fong

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

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