hw-bm-app/pages/login/index.vue

<template>
	<view class="bgImg"></view>
	<view class="logo"></view>
	<view class="form">
		<view class="username">
			<view class="icon"></view>
			<input class="input" autocomplete="off" @input="usernameInput" placeholder="请输入用户名"
				placeholder-style="color: rgba(25, 132, 238, 0.6);" />
		</view>
		<view class="password">
			<view class="icon"></view>
			<input class="input" autocomplete="off" type="password" @input="passwordInput" placeholder="请输入密码"
				placeholder-style="color: rgba(25, 132, 238, 0.6);" />
		</view>
		<view class="loginBtn" @tap="login">登 录</view>
		<view class="subBtns">
			<!-- <text>忘记密码？</text> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		setGlobalData,
		getGlobalData
	} from '@/store/index.js'

	import {
		loginApi
	} from '@/api/login'
	const loginForm = ref({})
	const usernameInput = (event) => {
		loginForm.value.username = event.detail.value
	}
	const passwordInput = (event) => {
		loginForm.value.password = event.detail.value
	}
	const login = async () => {
		const data = await loginApi(loginForm.value)
		if (data) {
			setGlobalData('token', data.data.access_token)
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni.scss";

	.bgImg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
		background-image: url(#{$img-url}/login.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.logo {
		position: absolute;
		top: 14vh;
		left: 50%;
		width: 25vw;
		height: 19vw;
		transform: translateX(-50%);
		background-image: url(#{$img-url}/logo.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.form {
		position: absolute;
		top: calc(14vh + 19vw + 7vh);
		left: 50%;
		width: 58vw;
		transform: translateX(-50%);
		padding: 7vh 10vw;
		background-color: rgba(255, 255, 255, 0.24);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1rpx solid #fff;

		.username {
			width: 58vw;
			height: 11vw;
			background-color: rgba(0, 77, 154, 0.2);
			border-radius: 5rpx;
			border: 1rpx solid rgba(255, 255, 255, 0.24);
			position: relative;

			.icon {
				position: absolute;
				width: 5vw;
				height: 5.5vw;
				top: 50%;
				left: 5vw;
				transform: translateY(-50%);
				background-image: url(#{$img-url}/username.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.input {
				position: absolute;
				top: 50%;
				left: 15vw;
				width: 40vw;
				height: 10vw;
				transform: translateY(-50%);
				font-size: 26rpx;

			}
		}

		.password {
			width: 58vw;
			height: 11vw;
			margin-top: 3.7vh;
			background-color: rgba(0, 77, 154, 0.2);
			border-radius: 5rpx;
			border: 1rpx solid rgba(255, 255, 255, 0.24);
			position: relative;

			.icon {
				position: absolute;
				width: 4.625vw;
				height: 5.375vw;
				top: 50%;
				left: 5vw;
				transform: translateY(-50%);
				background-image: url(#{$img-url}/password.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.input {
				position: absolute;
				top: 50%;
				left: 15vw;
				width: 40vw;
				height: 10vw;
				transform: translateY(-50%);
				font-size: 26rpx;

			}
		}

		.loginBtn {
			width: 58vw;
			height: 11vw;
			margin-top: 7vh;
			background: linear-gradient(to top,
					rgba(64, 140, 247, 1),
					rgba(16, 103, 225, 1));
			border-radius: 5rpx;
			color: rgba(255, 255, 255, 1);
			line-height: 11vw;
			text-align: center;
			font-size: 34rpx;
		}

		.subBtns {
			width: 58vw;
			margin-top: 2vh;
			border-radius: 5rpx;
			font-size: 24rpx;
		}

	}
</style>