【第一版开发】

1.更换logo图标文件
2.增加登录页面

src/pages/login.vue

@@ -1,8 +1,22 @@
 <template>
   <view class="login-container">
-    <img class="logo" src="/static/logo.png" alt="应用Logo"></img>
-    <input class="input-field" type="text" v-model="nickname" placeholder="请输入昵称" />
-    <button class="login-button" @click="handleLogin">登录</button>
+    <view class="login-avator"></view>
+    <view class="login-nickname">
+      <!-- <input v-model="loginFormData.nickname" placeholder="请输入昵称" /> -->
+      <input placeholder="请输入昵称" />
+    </view>
+
+    <view style="display: none">
+      <!-- <uni-forms ref="loginForm" :modelValue="loginFormData" :rules="loginFormRules"
+						err-show-type="modal">
+						<uni-forms-item name="nickname">
+							<uni-easyinput type="text" v-model="loginFormData.nickname" placeholder="请输入昵称"
+								:clearable="false" :inputBorder="false" />
+						</uni-forms-item>
+					</uni-forms> -->
+    </view>
+
+    <view class="login-btn" @click="login">登录/注册</view>
   </view>
 </template>
 
@@ -19,35 +33,76 @@ const handleLogin = () => {
 
 <style lang="scss" scoped>
 .login-container {
+  margin-top: 150rpx;
+
+  width: 100%;
+  height: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  height: 100vh;
-}
+  align-items: center;
+  flex-direction: column;
 
-.logo {
-  // width: auto; // 修改: 将宽度设置为auto以适应SVG的实际尺寸
-  // height: 100px; // 修改: 设置固定高度以确保图片在垂直方向上有一个固定的尺寸
-  // margin-bottom: 20px;
-}
+  .login-avator {
+    width: 300rpx;
+    height: 300rpx;
+    background-image: url("/static/logo.svg");
+    background-size: cover;
+    /* 覆盖整个容器 */
+    background-position: center;
+    /* 图像居中 */
+    border-radius: 50%;
 
-.input-field {
-  width: 80%;
-  padding: 10px;
-  margin-bottom: 20px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
+    // 阴影
+    border: 0.5px solid #e4e4e4;
+    box-shadow: 0px 1px 6px #d8d8d8;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .login-nickname {
+    margin-top: 50rpx;
+
+    width: 599rpx;
+    height: 100rpx;
+    border-radius: 8px;
+    background: #ffffff;
+
+    // 阴影
+    border: 0.5px solid #e4e4e4;
+    box-shadow: 0px 1px 6px #d8d8d8;
+
+    input {
+      width: 100%;
+      height: 100%;
+      font-size: 36rpx;
+      font-weight: 700;
+      letter-spacing: 0rpx;
+      line-height: 52.13rpx;
+      color: #000000;
+      border-radius: 24rpx;
+      text-align: center;
+    }
+  }
+
+  .login-btn {
+    margin-top: 150rpx;
+
+    width: 599rpx;
+    height: 100rpx;
+    border-radius: 24rpx;
+    background: #FFD800;
+
+    font-size: 36rpx;
+    font-weight: 400;
+    letter-spacing: 0rpx;
+    line-height: 52.13rpx;
+    color: #000000;
 
-.login-button {
-  width: 80%;
-  padding: 10px;
-  background-color: #FFD800;
-  border: none;
-  border-radius: 5px;
-  color: #000;
-  font-size: 16px;
-  cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
-</style>
+</style>