浅更新了一下样式

src/components/Login.vue

@@ -60,21 +60,21 @@
 
 <template>
 
-  <div class="flex flex-col items-center justify-center px-6 py-6 space-y-10 min-h-screen">
+  <div class="h-full w-full flex flex-col items-center justify-center px-6 py-6 space-y-10">
 
     <span class="flex items-center text-2xl font-semibold text-gray-900">
       Blue Whale Shopping Online
     </span>
 
-    <el-card class="w-full bg-white rounded-lg shadow-md md:mt-0 sm:max-w-md xl:p-0">
+    <el-card class="w-full bg-white rounded-lg shadow-md max-w-lg">
 
-      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+      <div class="p-6 space-y-4 h-full overflow-scroll">
 
         <h1 class="text-2xl font-bold leading-tight tracking-tight text-gray-900">
           登入您的账户
         </h1>
 
-        <el-form class="space-y-4 md:space-y-6">
+        <el-form class="space-y-6">
 
           <el-form-item>
             <label v-if="!hasTelInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">注册手机号</label>
@@ -83,9 +83,9 @@
 
             <input id="tel" type="tel" v-model="tel"
                    required
-                   class="bg-gray-50 border border-gray-300 text-gray-900 focus:outline-primary-600 sm:text-sm rounded-lg block w-full p-2.5"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:outline-primary-600 rounded-lg block w-full p-2.5"
                    :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
-                   placeholder="请输入中国大陆手机号">
+                   placeholder="请输入手机号">
           </el-form-item>
 
           <el-form-item>
@@ -94,7 +94,7 @@
             <input id="password" type="password" v-model="password"
                    required
                    placeholder="••••••••"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" >
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" >
           </el-form-item>
 
 <!--          <el-form-item class="pb-2">-->

src/components/Register.vue

@@ -74,31 +74,31 @@
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center px-6 py-6 space-y-10 min-h-screen">
+  <div class="h-fit w-full flex flex-col items-center justify-center px-6 py-6 space-y-10">
+
 
     <span class="flex items-center text-2xl font-semibold text-gray-900">
       Blue Whale Shopping Online
     </span>
 
-    <el-card class="w-2/3 bg-white rounded-lg shadow-md md:mt-0  xl:p-0">
-
+    <el-card class="w-3/5 min-w-max max-w-xl bg-white rounded-lg shadow-md ">
 
-      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+      <div class="p-6 space-y-4 ">
 
         <h1 class="text-2xl font-bold leading-tight tracking-tight text-gray-900">
           创建一个新的账户
         </h1>
 
-        <el-form class="space-y-6">
+        <el-form class="space-y-6 h-full">
 
           <el-row class="flex flex-row justify-between">
 
             <el-col :span="15">
               <el-form-item>
-                <label for="name" class="block mb-2 text-sm font-medium text-gray-900">昵称</label>
+                <label for="name" class="inline-block mb-2 text-sm font-medium text-gray-900">昵称</label>
                 <input id="name"
                        v-model="name"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                        placeholder="小明">
               </el-form-item>
             </el-col>
@@ -120,7 +120,7 @@
           </el-row>
 
 
-          <el-row class="flex justify-between">
+          <el-row class="flex flex-row justify-between">
             <el-col :span="8">
               <el-form-item>
                 <!--            <label for="tel" class="block mb-2 text-sm font-medium text-gray-900">手机号</label>-->
@@ -138,9 +138,9 @@
 
                 <input type="tel" id="tel"
                        v-model="tel"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                        :class="{'focus:outline-red-600':hasTelInput && !telLegal}"
-                       placeholder="请输入中国大陆手机号">
+                       placeholder="请输入手机号">
               </el-form-item>
             </el-col>
 
@@ -154,7 +154,7 @@
 
                 <input id="address"
                        v-model="address"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                        placeholder="请输入地址">
               </el-form-item>
             </el-col>
@@ -168,7 +168,7 @@
             <label for="password" class="block mb-2 text-sm font-medium text-gray-900">密码</label>
             <input type="password" id="password"
                    v-model="password"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    placeholder="••••••••">
           </el-form-item>
 
@@ -179,7 +179,7 @@
 
             <input type="password" id="confirm-password"
                    v-model="confirmPassword"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    :class="{'focus:outline-red-600': hasConfirmPasswordInput && !isPasswordIdentical}"
                    placeholder="••••••••">
           </el-form-item>
@@ -210,10 +210,10 @@
           </el-form-item>
 
 
-          <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+          <p class="text-sm font-light text-gray-500 ">
             已经有账户了？
             <router-link to="/login" v-slot="{navigate}">
-              <a @click="navigate" class="font-medium text-primary-600 hover:underline dark:text-primary-500">
+              <a @click="navigate" class="font-medium text-primary-600 hover:underline">
                 点击登陆
               </a>
             </router-link>
@@ -223,6 +223,7 @@
       </div>
 
     </el-card>
+
   </div>
 </template>