登录页面

登录页面

app.json

@@ -25,7 +25,8 @@
     "van-col": "@vant/weapp/col/index",
     "van-panel": "@vant/weapp/panel/index",
     "van-cell": "@vant/weapp/cell/index",
-    "van-cell-group": "@vant/weapp/cell-group/index"
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-image": "@vant/weapp/image/index"
   },
   "sitemapLocation": "sitemap.json"
 }

pages/login/login.wxml

@@ -1,2 +1,14 @@
-<!--pages/login/login.wxml-->
-<text>pages/login/login.wxml</text>
+<view class="login">
+  <!-- 头像 -->
+  <van-image class="header" round width="230rpx" height="230rpx" src="/images/header.png" />
+
+  <!-- 输入框 -->
+  <van-cell-group>
+    <van-field  value="{{ username }}" placeholder="请输入你的账号" border="{{ false }}"/>
+
+    <van-field  value="{{ password }}" type="password" placeholder="请输入新密码" border="{{ false }}"/>
+  </van-cell-group>
+
+  <!-- 登录按钮 -->
+  <van-button type="info">登录</van-button>
+</view>

pages/login/login.wxss

@@ -1 +1,27 @@
-/* pages/login/login.wxss */
+/* 登陆页面总样式 */
+.login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 头像样式 */ 
+.header {
+  margin: 130rpx;
+}
+/* 输入框样式 */
+.van-field__control {
+  border: 1px solid #ccc !important;
+  width: 600rpx !important;
+  height: 100rpx !important;
+  border-radius: 5px;
+  padding-left: 20rpx !important;
+}
+
+/* 登录按钮样式 */
+.van-button {
+  margin-top: 280rpx;
+  width: 600rpx;
+  border-radius: 5px !important;
+}

project.config.json

@@ -47,7 +47,7 @@
   },
   "compileType": "miniprogram",
   "libVersion": "2.19.4",
-  "appid": "wxe1ecd56185c011f9",
+  "appid": "wx57c1363607c7f1e8",
   "projectname": "miniprogram-92",
   "condition": {},
   "editorSetting": {