style-重新修改样式

src/components/BasicInput/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <input :type="type" v-bind="$attrs" />
+  <input :type="type" :name="name" :value="value" />
 </template>
 
 <script lang="ts">
@@ -11,10 +11,18 @@
         type: String,
         default: 'text',
       },
+      name: {
+        type: String,
+        default: '',
+      },
+      value: {
+        type: String,
+        default: '',
+      },
     },
     setup(props) {
-      const test = 'Test';
+      const _props = props;
-      return { test };
+      return {};
     },
   });
 </script>

src/pages/about/index.vue

@@ -1,7 +1,7 @@
+<script lang="ts" setup></script>
+
 <template>
   <view> 页面模板 </view>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" scoped></style>

src/pages/demo/index.vue

@@ -1,7 +1,7 @@
+<script lang="ts" setup></script>
+
 <template>
   <view> 页面模板,新建pages,将此页面内容复制粘贴到新建.vue文件 </view>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" scoped></style>

src/pages/index/index.vue

@@ -10,7 +10,7 @@
 <template>
   <view class="content">
     <image class="logo" src="/static/svg/LOGO.svg" />
-    <view class="text-area mb-60rpx">
+    <view class="text-area">
       <text class="">{{ title }}</text>
     </view>
     <BasicButton @click="handleGetStarted">Get Started → </BasicButton>
@@ -33,6 +33,7 @@
   .text-area {
     display: flex;
     justify-content: center;
+    margin-bottom: 60rpx;
   }
 
   .title {

src/pages/login/index.vue

@@ -1,27 +1,3 @@
-<template>
-  <view class="max-w-4/5 mx-auto py-36rpx text-center pt-280rpx">登录</view>
-  <view class="shadow-lg max-w-4/5 mx-auto py-36rpx px-24rpx">
-    <form class="form" @submit="submit">
-      <label class="h-44px flex items-center border-0 border-b-3rpx border-solid border-blue-100">
-        <view class="min-w-96rpx">邮箱:</view>
-        <view class="flex-grow"><BasicInput name="email" :value="form.email" /></view>
-      </label>
-      <label class="h-44px flex items-center border-0 border-b-3rpx border-solid border-blue-100">
-        <view class="min-w-96rpx">密码:</view>
-        <view class="flex-grow"
-          ><BasicInput type="password" name="password" :value="form.password"
-        /></view>
-      </label>
-      <button
-        form-type="submit"
-        class="border-4rp mt-44rpx h-88rpx flex items-center justify-center border-solid border-blue-200 bg-blue-400 hover:bg-blue-500 text-xs text-light-100 hover:text-light-100"
-        hover-class="none"
-        >登录</button
-      >
-    </form>
-  </view>
-</template>
-
 <script setup lang="ts">
   import { reactive, ref } from 'vue';
   import { useAuthStore } from '@/state/modules/auth';
@@ -49,4 +25,68 @@
   };
 </script>
 
-<style lang="scss" scoped></style>
+<template>
+  <view class="container">
+    <view class="title">登录</view>
+    <view class="form-wrap">
+      <form class="form" @submit="submit">
+        <label class="form-item">
+          <view class="form-label">邮箱:</view>
+          <view class="form-element"><BasicInput name="email" :value="form.email" /></view>
+        </label>
+        <label class="form-item">
+          <view class="form-label">密码:</view>
+          <view class="form-element"
+            ><BasicInput type="password" name="password" :value="form.password"
+          /></view>
+        </label>
+        <button
+          form-type="submit"
+          class="submit-btn border-4rp mt-44rpx h-88rpx flex items-center justify-center border-solid border-blue-200 bg-blue-400 hover:bg-blue-500 text-xs text-light-100 hover:text-light-100"
+          hover-class="none"
+          >登录</button
+        >
+      </form>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .container {
+    margin: 0 auto;
+    width: 80%;
+    .title {
+      padding: 320rpx 0 32rpx 0;
+      text-align: center;
+    }
+    .form-wrap {
+      padding: 20rpx 24rpx;
+      box-shadow: 16rpx 16rpx 30rpx #e5e7eb;
+      .form {
+        .form-item {
+          display: flex;
+          height: 88rpx;
+          border-bottom: 2rpx solid #dbeafe;
+          align-items: center;
+          .form-label {
+            min-width: 96rpx;
+          }
+          .form-element {
+            flex-grow: 1;
+          }
+        }
+        .submit-btn {
+          margin-top: 44rpx;
+          border: 4rpx solid #bfdbfe;
+          background-color: #60a5fa;
+          border-radius: 8rpx;
+          font-size: 28rpx;
+          color: #ffffff;
+          :hover {
+            background-color: #3b82f6;
+          }
+        }
+      }
+    }
+  }
+</style>

src/pages/template/index.vue

@@ -1,7 +1,7 @@
+<script lang="ts" setup></script>
+
 <template>
   <view> 页面模板,新建pages,将此页面内容复制粘贴到新建.vue文件 </view>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" scoped></style>