youxi-app/pages/user/login.uvue

<template>
	<cl-page>
		<Back />
		<img src="/static/home/1.jpg" alt="" class="w-full h-full object-cover">
		<view class="title">
			少儿物理启蒙
		</view>
		<view class="group">
			<cl-image src="/static/home/8.png" width="150px" height="150px" mode="heightFix" />
			<view class="w-[40vw]">
				<cl-tabs v-model="val" :list="list" :form="formData"></cl-tabs>
				<cl-form v-model="formData" :pt="{ className: 'mt-1' }">
					<view v-if="val === 'quickly_login'">
						<phone :form="formData" />
					</view>
					<view v-else>
						密码登录
					</view>
					<cl-button :pt="{ className: '!h-[45px] !rounded-full w-[200px] mx-auto' }" :loading="loading" @tap="toLogin">
						登录
					</cl-button>
				</cl-form>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import Back from '@/components/back.uvue'
import type { LoginForm } from "./components/types";
import phone from './components/phone.uvue';
import { ref } from 'vue'
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import type { user } from '@/.cool';
const val = ref('quickly_login')
const list: ClTabsItem[] = [
	{
		label: '验证码登录',
		value: 'quickly_login'
	},
	{
		label: '密码登录',
		value: 'password'
	},
]
const formData = ref<LoginForm>({
	username: '17812345678',
	password: '',
	randomStr: 0,
	grant_type: 'password',
	scope: 'server',
	loginType: 1,
	code: ''
})
const loading = ref(false)
function toLogin() {
	// loading.value = true
	console.log(formData.value);

}
</script>

<style lang="scss" scoped>
.title {
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
	//设置字间距
	letter-spacing: 0.1em;
	@apply text-white text-5xl font-bold;
}

.group {
	@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-4 py-2 rounded-xl;
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 60vh;
}
</style>