mirror of
https://github.com/xiangshu233/vue3-vant4-mobile.git
synced 2025-04-05 06:22:45 +08:00
refactor: ♻️ 修复原子化 css 移动端适配问题
在写原子化 css 的时候通过 unocss 的 presetRemToPx 预设它可以原子化默认 rem 转换成 px，最后再由 postcss 把 px 转成 vw，从而让我们无痛使用原子化css closed #6, #20
This commit is contained in:
xiangshu233
parent
05dcc6ba72
commit
1e8f780b78
12
index.html
12
index.html
@ -38,7 +38,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
.first-loading-wrap > h1 {
|
||||
font-size: 128px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.first-loading-wrap .loading-wrap {
|
||||
padding: 98px;
|
||||
@ -51,14 +51,14 @@
|
||||
transform: rotate(45deg);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 52px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
font-size: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dot i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #1890ff;
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
"@types/node": "^20.10.5",
|
||||
"@types/qs": "^6.9.11",
|
||||
"@unocss/eslint-plugin": "^0.58.4",
|
||||
"@unocss/preset-rem-to-px": "^0.58.5",
|
||||
"@unocss/transformer-directives": "^0.58.4",
|
||||
"@unocss/transformer-variant-group": "^0.58.4",
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
@ -98,12 +99,10 @@
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^1.8.27"
|
||||
},
|
||||
|
||||
"simple-git-hooks": {
|
||||
"pre-commit": "pnpm lint-staged",
|
||||
"commit-msg": "npx --no-install commitlint --edit $1"
|
||||
},
|
||||
|
||||
"lint-staged": {
|
||||
"*": "eslint --fix"
|
||||
},
|
||||
|
||||
9
pnpm-lock.yaml
generated
9
pnpm-lock.yaml
generated
@ -82,6 +82,9 @@ devDependencies:
|
||||
'@unocss/eslint-plugin':
|
||||
specifier: ^0.58.4
|
||||
version: 0.58.5(eslint@8.56.0)(typescript@5.3.3)
|
||||
'@unocss/preset-rem-to-px':
|
||||
specifier: ^0.58.5
|
||||
version: 0.58.5
|
||||
'@unocss/transformer-directives':
|
||||
specifier: ^0.58.4
|
||||
version: 0.58.5
|
||||
@ -2068,6 +2071,12 @@ packages:
|
||||
'@unocss/rule-utils': 0.58.5
|
||||
dev: true
|
||||
|
||||
/@unocss/preset-rem-to-px@0.58.5:
|
||||
resolution: {integrity: sha512-gM1jy/HoUS/HeiuOt5u+fAAWT/PPLqfC8eWGRrtqm22zKOq0Ea/Lp8Jh+BApc1cGby2xw6lwiFJRbFbiPaFoNw==}
|
||||
dependencies:
|
||||
'@unocss/core': 0.58.5
|
||||
dev: true
|
||||
|
||||
/@unocss/preset-tagify@0.58.5:
|
||||
resolution: {integrity: sha512-UB9IXi8vA/SzmmRLMWR7bzeBpxpiRo7y9xk3ruvDddYlsyiwIeDIMwG23YtcA6q41FDQvkrmvTxUEH9LFlv6aA==}
|
||||
dependencies:
|
||||
|
||||
@ -20,7 +20,7 @@ import viewport from 'postcss-mobile-forever'
|
||||
|
||||
const baseViewportOpts = {
|
||||
appSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式
|
||||
viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度
|
||||
viewportWidth: 375, // 设计稿的视口宽度，可传递函数动态生成视图宽度
|
||||
unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）
|
||||
maxDisplayWidth: 600, // 桌面端最大展示宽度
|
||||
propList: [
|
||||
@ -45,8 +45,8 @@ export default {
|
||||
autoprefixer(),
|
||||
viewport({
|
||||
...baseViewportOpts,
|
||||
// 只将 vant 转为 350 设计稿的 viewport，其它样式的视图宽度为 750
|
||||
viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
|
||||
// 只将 vant 转为 375 设计稿的 viewport，其它样式的视图宽度为 750
|
||||
// viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
|
||||
}),
|
||||
],
|
||||
}
|
||||
|
||||
@ -94,7 +94,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.xicon {
|
||||
font-size: 42px;
|
||||
font-size: 18px;
|
||||
|
||||
svg {
|
||||
width: 100% !important;
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div class="mb-6 mt-4 w-full">
|
||||
<van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
|
||||
<van-swipe-item
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleReset">
|
||||
<van-field
|
||||
v-model="formData.username"
|
||||
class="enter-y mb-25px items-center !rounded-md"
|
||||
class="enter-y mb-4 items-center !rounded-md"
|
||||
name="username"
|
||||
placeholder="用户名"
|
||||
:rules="getFormRules.username"
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<van-field
|
||||
v-model="formData.mobile"
|
||||
class="enter-y mb-25px items-center !rounded-md"
|
||||
class="enter-y mb-4 items-center !rounded-md"
|
||||
name="password"
|
||||
placeholder="手机号码"
|
||||
:rules="getFormRules.mobile"
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
<van-field
|
||||
v-model="formData.sms"
|
||||
class="enter-y mb-70px items-center !rounded-md"
|
||||
class="enter-y mb-10 items-center !rounded-md"
|
||||
center
|
||||
clearable
|
||||
placeholder="请输入短信验证码"
|
||||
@ -47,9 +47,11 @@
|
||||
</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-button type="success">
|
||||
成功按钮
|
||||
</van-button>
|
||||
<van-button
|
||||
class="enter-y !mb-25px !rounded-md"
|
||||
class="enter-y !mb-4 !rounded-md"
|
||||
type="primary"
|
||||
block
|
||||
native-type="submit"
|
||||
@ -59,7 +61,7 @@
|
||||
</van-button>
|
||||
|
||||
<van-button
|
||||
class="enter-y !mb-150px !rounded-md"
|
||||
class="enter-y !rounded-md"
|
||||
plain
|
||||
type="primary"
|
||||
block
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleSubmit">
|
||||
<van-field
|
||||
v-model="formData.username"
|
||||
class="enter-y mb-25px items-center !rounded-md"
|
||||
class="enter-y mb-4 items-center !rounded-md"
|
||||
name="username"
|
||||
placeholder="用户名"
|
||||
:rules="getFormRules.username"
|
||||
@ -15,7 +15,7 @@
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="formData.password"
|
||||
class="enter-y mb-25px items-center !rounded-md"
|
||||
class="enter-y mb-4 items-center !rounded-md"
|
||||
:type="switchPassType ? 'password' : 'text'"
|
||||
name="password"
|
||||
placeholder="密码"
|
||||
@ -37,16 +37,16 @@
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<div class="enter-y mb-100px w-full flex justify-between px-5px">
|
||||
<div class="enter-y mb-10 w-full flex justify-between px-5px">
|
||||
<div class="flex items-center">
|
||||
<van-switch v-model="rememberMe" class="mr-8px !text-30px" />
|
||||
<span class="!text-25px">记住我</span>
|
||||
<van-switch v-model="rememberMe" size="18px" class="mr-8px" />
|
||||
<span>记住我</span>
|
||||
</div>
|
||||
<a class="!text-25px" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
|
||||
<a @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
|
||||
</div>
|
||||
|
||||
<van-button
|
||||
class="enter-y !mb-25px !rounded-md"
|
||||
class="enter-y !mb-4 !rounded-md"
|
||||
type="primary"
|
||||
block
|
||||
native-type="submit"
|
||||
@ -55,7 +55,7 @@
|
||||
登 录
|
||||
</van-button>
|
||||
<van-button
|
||||
class="enter-y !mb-25 !rounded-md"
|
||||
class="enter-y !rounded-md"
|
||||
plain
|
||||
type="primary"
|
||||
block
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="logo enter-y my-35px">
|
||||
<SvgIcon class="!h-250px !w-250px" name="logo" />
|
||||
<div class="logo enter-y mb-2 mt-8">
|
||||
<SvgIcon class="!h-30 !w-30" name="logo" />
|
||||
</div>
|
||||
<div class="text-darkBlue dark:text-garyWhite enter-y mb-80px text-45px font-black">
|
||||
<div class="text-darkBlue dark:text-garyWhite enter-y mb-8 text-2xl font-black">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<van-form v-if="getShow" ref="formRef" class="flex flex-col" @submit="handleRegister">
|
||||
<van-cell-group inset class="enter-y !mx-0 !mb-60px">
|
||||
<van-cell-group inset class="enter-y !mx-0 !mb-10">
|
||||
<van-field
|
||||
v-model="formData.username"
|
||||
class="enter-y items-center !rounded-md"
|
||||
@ -111,7 +111,7 @@
|
||||
</van-cell-group>
|
||||
|
||||
<van-button
|
||||
class="enter-y !mb-25px !rounded-md"
|
||||
class="enter-y !mb-4 !rounded-md"
|
||||
type="primary"
|
||||
block
|
||||
native-type="submit"
|
||||
@ -121,7 +121,7 @@
|
||||
</van-button>
|
||||
|
||||
<van-button
|
||||
class="enter-y !mb-150px !rounded-md"
|
||||
class="enter-y !rounded-md"
|
||||
plain
|
||||
type="primary"
|
||||
block
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<div>
|
||||
<NavBar>
|
||||
<template #right>
|
||||
<span class="text-32px" @click="handleNickname">保存</span>
|
||||
<span @click="handleNickname">保存</span>
|
||||
</template>
|
||||
</NavBar>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formValue.nickname"
|
||||
class="mt-20px"
|
||||
class="mt-4"
|
||||
name="nickname"
|
||||
placeholder="请输入昵称（2-12字）"
|
||||
:rules="[
|
||||
@ -20,7 +20,7 @@
|
||||
/>
|
||||
</van-form>
|
||||
|
||||
<div class="note px-30px">
|
||||
<div class="note p-6">
|
||||
<p>昵称支持2-12个中文字符或3-24个英文字符，</p>
|
||||
<p>符号仅支持”-“和”_“和”.“以及“·”</p>
|
||||
</div>
|
||||
@ -82,9 +82,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.note {
|
||||
margin-top: 15px;
|
||||
font-size: 25px;
|
||||
.note {
|
||||
color: var(--van-text-color-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<NavBar>
|
||||
<template #right>
|
||||
<span class="text-32px" @click="handleNickname">保存</span>
|
||||
<span @click="handleNickname">保存</span>
|
||||
</template>
|
||||
</NavBar>
|
||||
<van-form ref="formRef">
|
||||
@ -16,7 +16,7 @@
|
||||
label="签名"
|
||||
type="textarea"
|
||||
maxlength="70"
|
||||
placeholder="介绍一下你自己"
|
||||
placeholder="随知修行乃当务之急，然怠惰度日至今"
|
||||
show-word-limit
|
||||
/>
|
||||
</van-form>
|
||||
@ -65,9 +65,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.note {
|
||||
margin-top: 15px;
|
||||
font-size: 25px;
|
||||
color: var(--van-text-color-2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
>
|
||||
<template #input>
|
||||
<UploaderImage>
|
||||
<van-image class="avatar" round fit="cover" :src="avatar" />
|
||||
<van-image
|
||||
class="h-16 w-16"
|
||||
round fit="cover"
|
||||
:src="avatar"
|
||||
/>
|
||||
</UploaderImage>
|
||||
</template>
|
||||
</van-field>
|
||||
@ -65,7 +69,11 @@
|
||||
>
|
||||
<template #input>
|
||||
<UploaderImage>
|
||||
<van-image class="cover" fit="cover" :src="cover ? cover : avatar" />
|
||||
<van-image
|
||||
class="cover h-15 w-25"
|
||||
fit="cover"
|
||||
:src="cover ? cover : avatar"
|
||||
/>
|
||||
</UploaderImage>
|
||||
</template>
|
||||
</van-field>
|
||||
@ -121,10 +129,8 @@ const showIndustryPicker = ref(false)
|
||||
const state = reactive({
|
||||
nickname: '',
|
||||
sign: '',
|
||||
// the field v-model
|
||||
genderText: '',
|
||||
industryText: '',
|
||||
// the pick v-model
|
||||
industryValues: [0],
|
||||
genderValues: [0],
|
||||
})
|
||||
@ -165,13 +171,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.avatar {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
.cover {
|
||||
width: 170px;
|
||||
height: 100px;
|
||||
:deep(.van-image__img) {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
@ -14,17 +14,17 @@
|
||||
<span
|
||||
v-for="(item, index) in designStore.appThemeList"
|
||||
:key="index"
|
||||
h="70px"
|
||||
w="70px"
|
||||
h="9"
|
||||
w="9"
|
||||
items-center
|
||||
border="2 rounded-md border-white"
|
||||
border="2 rounded-md"
|
||||
flex="~"
|
||||
justify="center"
|
||||
:style="{ 'background-color': item }"
|
||||
@click="togTheme(item)"
|
||||
>
|
||||
<Icon v-if="item === designStore.appTheme">
|
||||
<CheckOutlined h="!60px" w="!60px" text="white" />
|
||||
<CheckOutlined text="white" />
|
||||
</Icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :style="getUserCoverBg" class="my-bg h-550px -z-19" />
|
||||
<div :style="getUserCoverBg" class="my-bg h-70" />
|
||||
<div
|
||||
class="my-card relative mx-40px flex flex-col items-center rounded-2xl pb-20px shadow-xl -top-150px"
|
||||
class="my-card relative mx-6 flex flex-col items-center rounded-2xl pb-2 shadow-xl -top-18"
|
||||
>
|
||||
<van-image
|
||||
class="h-170px w-170px border-4 border-solid !absolute -top-90px"
|
||||
class="fixed h-22 w-22 border-2 border-solid -top-10"
|
||||
round
|
||||
fit="cover"
|
||||
:src="avatar"
|
||||
/>
|
||||
<div class="mt-90px flex flex-col items-center">
|
||||
<p class="mb-20px text-40px font-black">
|
||||
<div class="flex flex-col items-center -mt-10">
|
||||
<p class="mb-2 text-5 font-black">
|
||||
{{ nickname }}
|
||||
</p>
|
||||
<p class="px-36px text-30px">
|
||||
<p class="text-4">
|
||||
{{ sign }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<SvgIcon :size="130" name="logo" />
|
||||
</div>
|
||||
<div
|
||||
class="text-darkBlue dark:text-garyWhite enter-y mb-4 mt-12 text-center text-2xl font-black"
|
||||
class="enter-y text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black"
|
||||
>
|
||||
欢迎来到 {{ title }}
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// uno.config.ts
|
||||
import {
|
||||
defineConfig,
|
||||
presetAttributify,
|
||||
@ -7,7 +6,7 @@ import {
|
||||
presetUno,
|
||||
presetWebFonts,
|
||||
} from 'unocss'
|
||||
|
||||
import presetRemToPx from '@unocss/preset-rem-to-px'
|
||||
import transformerVariantGroup from '@unocss/transformer-variant-group'
|
||||
import transformerDirectives from '@unocss/transformer-directives'
|
||||
|
||||
@ -17,6 +16,11 @@ export default defineConfig({
|
||||
// 此预设尝试提供流行的实用程序优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等
|
||||
presetUno(),
|
||||
|
||||
// 模板使用 viewport 作为移动端适配方案，unocss 默认单位为 rem
|
||||
// 所以需要转成 px，然后由 postcss 把 px 转成 vw/vh，完成适配
|
||||
// https://unocss.dev/presets/rem-to-px
|
||||
presetRemToPx(),
|
||||
|
||||
// 图标预设: https://unocss.dev/presets/icons
|
||||
presetIcons({
|
||||
extraProperties: {
|
||||
|
||||
@ -152,7 +152,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
// }
|
||||
},
|
||||
|
||||
// 有需要再打开，否则 既不优化 也不排除
|
||||
optimizeDeps: {
|
||||
/**
|
||||
* 依赖预构建，vite 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，
|
||||
@ -172,7 +171,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
],
|
||||
// 打包时强制排除的依赖项
|
||||
exclude: [
|
||||
|
||||
// https://www.mulingyuer.com/archives/928/
|
||||
'vant',
|
||||
'@vant/use',
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user