1h27min

components/login.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="begin">
+		<image src="/static/logo.png"></image>
+		<view>
+			<view>账号密码登录</view>
+			<view>欢迎使用原住民宿</view>
+		</view>
+		<view>
+			<view>
+				<view>手机号码</view>
+				<input type="text" placeholder="请输入手机号码" />
+			</view>
+			<view>
+				<view>密码</view>
+				<view><input type="text" placeholder="请输入密码" />
+					<image src="/static/眼睛.png"></image>
+				</view>
+			</view>
+		</view>
+		<view>
+			<view>
+				<image src="/static/组 151.png" mode="">
+				</image>
+				<view>我已同意并阅读<text>《用户隐私政策》</text>
+				</view>
+			</view>
+			<view></view>
+			<view>忘记密码？</view>
+		</view>
+		<view><button type="primary" @click="goto()">登录</button></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			goto() {
+				uni.navigateTo({
+					url:"/pages/index/index"
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	* {
+		padding: 0;
+		margin: 0;
+	}
+
+	.begin {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.begin>view:nth-child(2) {
+		align-self: flex-start;
+		margin-left: 3%;
+		margin-bottom: 20%;
+	}
+
+	.begin>view:nth-child(2) view:first-child {
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	.begin>view:nth-child(2) view:nth-child(2) {
+		font-size: 0.9rem;
+
+	}
+
+	.begin>view:nth-child(3) {
+		align-self: flex-start;
+		margin: 5% auto;
+		width: 90%;
+	}
+
+	.begin>view:nth-child(3) view {
+		margin-bottom: 7%;
+
+	}
+
+	.begin>view:nth-child(3) view>view:first-child {
+		font-weight: bold;
+		margin-bottom: 2%;
+
+	}
+
+	.begin>view:nth-child(3) view+input {
+		display: block;
+		padding: 10px;
+		border: 1px solid #999;
+		border-radius: 5px;
+	}
+
+	.begin>view:nth-child(3) view>view:nth-child(2) {
+		display: flex;
+		border: 1px solid #999;
+		border-radius: 5px;
+		padding: 10px;
+		justify-content: space-between;
+	}
+
+	.begin>view:nth-child(3) view>view:nth-child(2) image {
+		width: 20px;
+		height: 20px;
+	}
+
+	.begin>view:nth-child(4) {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	.begin>view:nth-child(4) view image {
+		width: 20px;
+		height: 20px;
+	}
+
+	.begin>view:nth-child(4) view:first-child {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+	}
+
+	.begin>view:nth-child(4) view:first-child text {
+		color: cornflowerblue;
+	}
+
+	.begin>view:last-child {
+		width: 100%;
+		margin-top: 5%;
+
+	}
+
+	.begin>view:last-child button {
+		margin: 10px;
+	}
+</style>