Merge pull request #161 from vue-zone/refactor/font-base-16

refactor: set default base font size

Author: cwandev

src/pages/[...all].vue

@@ -14,7 +14,7 @@ function onBack() {
     <van-icon name="warn-o" size="3em" />
     <div> Not found </div>
 
-    <div class="mt-10">
+    <div class="mt-2">
       <button van-haptics-feedback class="btn" @click="onBack">
         Back
       </button>

src/pages/counter/index.vue

@@ -7,7 +7,7 @@ const { counter } = storeToRefs(counterStore)
 </script>
 
 <template>
-  <div class="text-14 space-y-10">
+  <div class="text-sm space-y-2">
     <p> {{ $t('counter.description') }}</p>
     <van-stepper v-model="counter" />
   </div>

src/pages/forgot-password/index.vue

@@ -73,9 +73,9 @@ async function getCode() {
 </script>
 
 <template>
-  <div class="m-x-a text-center w-7xl">
+  <div class="mx-auto p-3 text-center w-full">
     <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="reset">
-      <div class="rounded-3xl overflow-hidden">
+      <div class="rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.email"
           :rules="rules.email"
@@ -84,7 +84,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.code"
           :rules="rules.code"
@@ -99,7 +99,7 @@ async function getCode() {
         </van-field>
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.password"
           type="password"
@@ -109,7 +109,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.confirmPassword"
           type="password"
@@ -119,7 +119,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16">
+      <div class="mt-4">
         <van-button
           :loading="loading"
           type="primary"

src/pages/keepalive/index.vue

@@ -7,7 +7,7 @@ const value = ref(0)
 </script>
 
 <template>
-  <div class="text-14 space-y-10">
+  <div class="text-sm space-y-2">
     <p>{{ $t('keepAlive.label') }}</p>
     <van-stepper v-model="value" />
   </div>

src/pages/login/index.vue

@@ -54,13 +54,13 @@ async function login(values: any) {
 </script>
 
 <template>
-  <div class="m-x-a text-center w-7xl">
-    <div class="mb-32 mt-20">
-      <van-image :src="dark ? logoDark : logo" class="h-120 w-120" alt="brand logo" />
+  <div class="mx-auto p-3 text-center w-full">
+    <div class="mb-8 mt-2">
+      <van-image :src="dark ? logoDark : logo" class="h-30 w-30" alt="brand logo" />
     </div>
 
     <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="login">
-      <div class="rounded-3xl overflow-hidden">
+      <div class="rounded-md overflow-hidden">
         <van-field
           v-model="postData.email"
           :rules="rules.email"
@@ -69,7 +69,7 @@ async function login(values: any) {
         />
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model="postData.password"
           type="password"
@@ -79,7 +79,7 @@ async function login(values: any) {
         />
       </div>
 
-      <div class="mt-16">
+      <div class="mt-4">
         <van-button
           :loading="loading"
           type="primary"
@@ -95,7 +95,7 @@ async function login(values: any) {
       {{ $t('login.signUp') }}
     </GhostButton>
 
-    <GhostButton block to="forgot-password">
+    <GhostButton block to="forgot-password" class="mt-2">
       {{ $t('login.forgotPassword') }}
     </GhostButton>
   </div>

src/pages/mock/index.vue

@@ -23,7 +23,7 @@ function pull() {
     <VanEmpty v-else :description="$t('mock.noData')" />
   </div>
 
-  <van-space class="m-10" direction="vertical" fill>
+  <van-space class="m-2" direction="vertical" fill>
     <VanButton type="primary" round block @click="pull">
       {{ $t('mock.pull') }}
     </VanButton>

src/pages/profile/index.vue

@@ -20,7 +20,7 @@ function login() {
     <VanCellGroup :inset="true">
       <van-cell center :is-link="!isLogin" @click="login">
         <template #title>
-          <van-image :src="userInfo.avatar || defaultAvatar" round class="h-56 w-56" />
+          <van-image :src="userInfo.avatar || defaultAvatar" round class="h-14 w-14" />
         </template>
 
         <template #value>
@@ -30,15 +30,15 @@ function login() {
       </van-cell>
     </VanCellGroup>
 
-    <VanCellGroup :inset="true" class="!mt-16">
+    <VanCellGroup :inset="true" class="!mt-4">
       <van-cell :title="$t('profile.settings')" icon="setting-o" is-link to="/settings">
         <template #icon>
-          <div class="i-carbon:settings text-gray-400 mr-5 self-center" />
+          <div class="i-carbon:settings text-gray-400 mr-2 self-center" />
         </template>
       </van-cell>
       <van-cell :title="$t('profile.docs')" is-link url="https://vue-zone.github.io/docs/vue3-vant-mobile/">
         <template #icon>
-          <div class="i-carbon:doc text-gray-400 mr-5 self-center" />
+          <div class="i-carbon:doc text-gray-400 mr-2 self-center" />
         </template>
       </van-cell>
     </VanCellGroup>

src/pages/register/index.vue

@@ -77,9 +77,9 @@ async function getCode() {
 </script>
 
 <template>
-  <div class="m-x-a text-center w-7xl">
+  <div class="mx-auto p-3 text-center w-full">
     <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="register">
-      <div class="rounded-3xl overflow-hidden">
+      <div class="rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.email"
           :rules="rules.email"
@@ -88,7 +88,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.code"
           :rules="rules.code"
@@ -103,7 +103,7 @@ async function getCode() {
         </van-field>
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.nickname"
           :rules="rules.nickname"
@@ -112,7 +112,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.password"
           type="password"
@@ -122,7 +122,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16 rounded-3xl overflow-hidden">
+      <div class="mt-4 rounded-md overflow-hidden">
         <van-field
           v-model.trim="postData.confirmPassword"
           type="password"
@@ -132,7 +132,7 @@ async function getCode() {
         />
       </div>
 
-      <div class="mt-16">
+      <div class="mt-4">
         <van-button
           :loading="loading"
           type="primary"

src/pages/scroll-cache/index.vue

@@ -43,24 +43,24 @@ onBeforeRouteLeave(() => {
     :loading-text="$t('scrollCache.loading')"
     @load="onLoad"
   >
-    <ul class="space-y-10">
-      <li v-for="item in list" :key="item" class="p-3 flex gap-12">
+    <ul class="space-y-2">
+      <li v-for="item in list" :key="item" class="p-1 flex gap-3">
         <div class="shrink-0">
-          <div class="rounded-full bg-gray-500/20 flex h-48 w-48 items-center justify-center overflow-hidden">
-            <span class="text-[16px] text-zinc-600 tabular-nums dark:text-zinc-400"> {{ item }} </span>
+          <div class="rounded-full bg-gray-500/20 flex h-12 w-12 items-center justify-center overflow-hidden">
+            <span class="text-base text-zinc-600 tabular-nums dark:text-zinc-400"> {{ item }} </span>
           </div>
         </div>
 
         <div class="flex-1 min-w-0">
-          <div class="mb-2 flex flex-row gap-1 w-full justify-between">
-            <h3 class="text-[16px] text-zinc-600 tracking-tight font-semibold w-1/2 dark:text-white">
+          <div class="flex flex-row gap-2 w-full justify-between">
+            <h3 class="text-base text-zinc-600 tracking-tight font-semibold w-1/2 dark:text-white">
               <van-text-ellipsis :content="`${$t('scrollCache.sectionTitle')}`" />
             </h3>
 
-            <time class="text-[12px] text-zinc-400 tabular-nums">2025-05-16</time>
+            <time class="text-xs text-zinc-400 tabular-nums">2025-05-16</time>
           </div>
 
-          <p class="text-[14px] text-zinc-500">
+          <p class="text-sm text-zinc-500">
             <van-text-ellipsis :rows="2" :content="$t('scrollCache.sectionText')" />
           </p>
         </div>

src/pages/settings/index.vue

@@ -26,7 +26,7 @@ function Logout() {
       <van-cell v-if="userInfo.uid" :title="$t('settings.logout')" clickable class="van-text-color" @click="Logout" />
     </VanCellGroup>
 
-    <div class="text-gray mt-10">
+    <div class="text-gray mt-2">
       {{ $t("settings.currentVersion") }}: v{{ version }}
     </div>
   </div>