JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-04-06 03:57:50 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Evan_Fong 2022-07-29 00:29:14 +08:00
parent fd3c5ea0d7
commit 5c4c91fd8f
5 changed files with 29 additions and 13387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
.postcssrc.js
View File

@ -1,31 +1,20 @@
// https://github.com/michael-ciniawsky/postcss-load-config // https://github.com/michael-ciniawsky/postcss-load-config
const path = require('path')
module.exports = { module.exports = ({ file }) => {
plugins: { console.log(file)
autoprefixer: {}, return {
'postcss-px-to-viewport': { plugins: {
unitToConvert: 'px', // 要转化的单位 autoprefixer: {},
viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 'postcss-px-to-viewport': {
viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 unitToConvert: 'px', // 要转化的单位
unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数 viewportWidth: file.includes('vant') ? 375 : 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
selectorBlackList: [ unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
'.van-cell', viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
'.van-button', selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
'.van-skeleton', minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
'.van-toast', mediaQuery: false // 允许在媒体查询中转换`px`
'.van-popup__close-icon', }
'.van-field',
'.van-dropdown-menu',
'.van-radio',
'.van-swipe',
'.van-list',
'.van-dialog',
'.van-tabbar'
], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
} }
} }
} }

13351
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -24,11 +24,11 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.18.6", "@babel/core": "^7.18.6",
"@babel/eslint-parser": "^7.18.2", "@babel/eslint-parser": "^7.18.2",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.8",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.8",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.5", "babel-plugin-import": "^1.13.5",
"babel-plugin-transform-remove-console": "^6.9.4", "babel-plugin-transform-remove-console": "^6.9.4",

2
src/assets/css/index.scss
View File

@ -9,5 +9,5 @@ body .app {
} }
.app-container { .app-container {
padding-bottom: 50px; padding-bottom: 100px;
} }

12
src/views/home/index.vue
View File

@ -37,18 +37,21 @@ let list = ref([
<style lang="scss" scoped> <style lang="scss" scoped>
.index-container { .index-container {
.warpper { .warpper {
padding: 12px; padding: 24px;
background: #fff; background: #fff;
.demo-home__title { .demo-home__title {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 6px; margin: 0 0 6px;
font-size: 64px; font-size: 56px;
.demo-home__title img, .demo-home__title img,
.demo-home__title span { .demo-home__title span {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
img { img {
width: 32px; width: 64px;
} }
span { span {
margin-left: 16px; margin-left: 16px;
@ -56,9 +59,10 @@ let list = ref([
} }
} }
.demo-home__desc { .demo-home__desc {
text-align: center;
margin: 0 0 20px; margin: 0 0 20px;
color: rgba(69, 90, 100, 0.6); color: rgba(69, 90, 100, 0.6);
font-size: 14px; font-size: 28px;
} }
} }
} }