优化移动端布局样式和配置
This commit is contained in:
wangqiao
104
layouts/m.vue
104
layouts/m.vue
@ -14,3 +14,107 @@
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 移动端样式重置 - 只在移动端布局中生效 */
|
||||
.m {
|
||||
/* 重置 body 的最小宽度限制 */
|
||||
:global(body) {
|
||||
min-width: unset !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* 重置 #__nuxt 容器的样式 */
|
||||
:global(#__nuxt) {
|
||||
min-width: unset !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
||||
// .page-content {
|
||||
// padding: 0 !important;
|
||||
// overflow-x: hidden !important;
|
||||
|
||||
// .page-table-wrap {
|
||||
// padding: 8px !important;
|
||||
// }
|
||||
|
||||
// .page-card {
|
||||
// padding: 8px !important;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
/* 移动端优化滚动条 */
|
||||
:global(::-webkit-scrollbar) {
|
||||
width: 4px !important;
|
||||
height: 4px !important;
|
||||
}
|
||||
|
||||
/* 移动端表格优化 */
|
||||
:global(.el-table) {
|
||||
font-size: 12px !important;
|
||||
|
||||
th .cell {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
td .cell {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端按钮优化 */
|
||||
:global(.el-button) {
|
||||
padding: 6px 8px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* 移动端表单优化 */
|
||||
:global(.el-form-item) {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
|
||||
:global(.el-form-item__label) {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
:global(.el-input__inner) {
|
||||
height: 32px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* 移动端对话框优化 */
|
||||
:global(.el-dialog) {
|
||||
width: 95% !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
:global(.el-dialog__body) {
|
||||
padding: 12px !important;
|
||||
max-height: calc(100vh - 200px) !important;
|
||||
}
|
||||
|
||||
/* 移动端分页器优化 */
|
||||
:global(.el-pagination) {
|
||||
--el-pagination-font-size: 11px !important;
|
||||
--el-pagination-font-size-small: 11px !important;
|
||||
--el-pagination-button-height: 24px !important;
|
||||
--el-pagination-button-width: 24px !important;
|
||||
--el-pagination-button-height-small: 24px !important;
|
||||
--el-pagination-button-width-small: 24px !important;
|
||||
}
|
||||
|
||||
/* 移动端标签页优化 */
|
||||
:global(.el-tabs__item) {
|
||||
padding: 0 12px 6px 0 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* 移动端徽章优化 */
|
||||
:global(.el-badge) {
|
||||
--el-badge-size: 14px !important;
|
||||
--el-badge-padding: 3px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,20 +31,25 @@ export default defineNuxtConfig({
|
||||
postcss: {
|
||||
plugins: [
|
||||
postcsspxtoviewport({
|
||||
unitToConvert: 'px', // 要转化的单位
|
||||
viewportWidth: 750, // UI设计稿的宽度
|
||||
unitPrecision: 6, // 转换后的精度，即小数点位数
|
||||
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
|
||||
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
|
||||
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
|
||||
selectorBlackList: ['el-'], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
|
||||
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
|
||||
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
|
||||
replace: true, // 是否转换后直接更换属性值
|
||||
exclude: [/node_modules/, /^(?!.*\/pages\/mobile\/).*$/], // 排除node_modules和非pages/m目录下的文件
|
||||
landscape: false, // 是否处理横屏情况
|
||||
// 只转换pages下的m文件
|
||||
include: [/pages\/mobile/],
|
||||
unitToConvert: 'px',
|
||||
viewportWidth: 750,
|
||||
unitPrecision: 6,
|
||||
propList: ['*'],
|
||||
viewportUnit: 'vw',
|
||||
fontViewportUnit: 'vw',
|
||||
selectorBlackList: ['el-'],
|
||||
minPixelValue: 1,
|
||||
mediaQuery: true,
|
||||
replace: true,
|
||||
// 严格只允许 pages/mobile 下的文件被转换
|
||||
// 使用强排除：排除 node_modules 和 所有不在 pages/mobile 下的文件
|
||||
exclude: [
|
||||
/node_modules/,
|
||||
/^(?!.*\/(pages|src)\/mobile\/).*$/
|
||||
],
|
||||
landscape: false,
|
||||
// 可选：进一步放宽 include，以便某些移动端专用布局文件也参与
|
||||
include: [/\/pages\/mobile\//],
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Mobile Page</h1>
|
||||
<div class="mobile-page">
|
||||
<h1 class="page-title">移动端页面</h1>
|
||||
<div class="test-content">
|
||||
<p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
|
||||
<div class="test-box">
|
||||
<p>测试盒子 - 宽度应该适应屏幕</p>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button class="el-button el-button--primary">主要按钮</button>
|
||||
<button class="el-button el-button--default">默认按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,4 +21,55 @@ definePageMeta({
|
||||
// Mobile specific logic can be added here
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.mobile-page {
|
||||
padding: 16px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.test-content {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.test-box {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #e8f4fd;
|
||||
border: 1px solid #b3d8ff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 16px 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user