登录页

pages.json

@@ -4,11 +4,17 @@
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/login/login",
+			 "style": {
+			        "navigationStyle": "custom"
+			      }
+		}, {
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "uni-app"
 			}
 		}
+
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/login/login.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="login-bg">
+    <view class="login-welcome">
+      <image
+        class="login-bg-img"
+        src="../../static/img/login-top.png"
+        mode="aspectFill"
+      ></image>
+      <view class="login-welcome-content">
+        <text class="login-title">您好！</text>
+        <text class="login-title">欢迎使用</text>
+      </view>
+    </view>
+    <view class="login-form-box">
+      <view class="login-form-item">
+        <text class="login-label">手机号</text>
+        <u-input
+          v-model="form.phone"
+          placeholder="请输入手机号"
+          type="number"
+          border="none"
+          shape="circle"
+          custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
+        />
+      </view>
+      <view class="login-form-item">
+        <text class="login-label">密码</text>
+        <u-input
+          v-model="form.password"
+          placeholder="请输入密码"
+          type="password"
+          border="none"
+          shape="circle"
+          custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
+        />
+      </view>
+    </view>
+    <view class="login-btn-box">
+      <u-button
+        hairline="false"
+        shape="circle"
+        :custom-style="btnStyle"
+        @click="handleLogin"
+        color="#fff"
+        >登录</u-button
+      >
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        phone: "",
+        password: "",
+      },
+      btnStyle: {
+        width: "60%",
+        height: "44px",
+        fontSize: "18px",
+        margin: "50px",
+        marginTop: "200rpx",
+        background: "linear-gradient(90deg, #3ec6c6 0%, #4edfa7 100%)",
+      },
+    };
+  },
+  methods: {
+    handleLogin() {
+      uni.showToast({ title: "登录", icon: "none" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.login-bg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #f7fafd;
+	height: 100vh;
+}
+.login-welcome {
+  position: relative;
+  width: 100vw;
+  padding-top: 244rpx;
+  overflow: hidden;
+}
+.login-bg-img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 526px;
+  z-index: 1;
+}
+.login-welcome-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 60rpx;
+  margin-bottom: 70rpx;
+}
+.login-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 10rpx;
+}
+
+.login-form-box {
+  width: 85%;
+  background: #fff;
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
+  padding: 40rpx 30rpx 30rpx 30rpx;
+  margin-bottom: 60rpx;
+}
+.login-form-item {
+  margin-bottom: 36rpx;
+}
+.login-label {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #222;
+  margin-bottom: 12rpx;
+  display: block;
+}
+.login-btn-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>