tk-page-Fan/src/views/HomeView.vue

<template>
	<div class="main">
		<!-- <button @click="callPython">设置数据"123"到 Python</button>
    <button @click="getPythonData">从 Python 获取数据</button> -->
		<!-- <input type="text" id="input" v-model="inputValue"></input>
    <div id="output">{{ output }}</div> -->

		<div class="container">
			<div class="left">

			</div>
			<div class="right">
				<!-- 设置 -->
				<div class="center-align">
					<div></div>
					<div class="setup">
						<div class="setup-item center-justify">
							<div></div>
							<span>
								网络设置
							</span>
						</div>
						<div class="setup-item center-justify">
							<div></div>
							<span>
								简体中文
							</span>
						</div>
					</div>
				</div>

				<!-- logo -->
				<div class="logo">
					<div style="height: 80px; width: 300px; background-color: aqua;">

					</div>
				</div>

				<!-- From -->
				<div class="from">
					<div class="from-title">
						<div>账号登陆</div>
					</div>

					<div class="from-input">
						<el-form label-position="left" label-width="100px" :model="formData">

							<div class="from-input-item">
								<div class="from-input-item-title center-justify">
									账号：
								</div>
								<el-input style="height: 50px;" v-model="formData.userId" placeholder="请输入登录账号"
									clearable />
							</div>

							<div class="from-input-item">
								<div class="from-input-item-title center-justify">
									密码：
								</div>
								<el-input style="height: 50px;" v-model="formData.password" type="password"
									placeholder="请输入登录密码" show-password />
							</div>

							<div class="from-input-item">
								<el-button style="width: 100%; height: 40px;" type="primary"
									@click="onSubmit">登录</el-button>
							</div>


						</el-form>
					</div>


				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/account';
import { getToken, setToken, setUser } from '@/utils/storage'

const router = useRouter();

// import { usePythonBridge } from '@/utils/pythonBridge';

// let inputValue = ref('999');
// const output = ref('');
// const { callPython, getPythonData } = usePythonBridge();
const formData = ref({
	userId: '',
	password: '',
})


const onSubmit = () => {
	console.log('submit!')
	login({
		userId: formData.value.userId,
		password: formData.value.password,
	}).then(res => {
		console.log(res)
		setToken(res.currcode)
		setUser(res)
		router.push('/hostsList');

	})


}

</script>

<style lang="less">
.main {
	height: 100vh;
	width: 100vw;
	// background-color: #ffffff;

	.container {
		display: flex;

		.left {
			width: 40%;
			height: 100vh;
			background-color: #1db97d;
			padding: 20px 40px;

		}

		.right {
			width: 60%;
			height: 100vh;
			background-color: #ffffff;
			padding: 20px 40px 20px 50px;

			.setup {
				display: flex;

				.setup-item {
					padding: 10px 6px;
					display: flex;

					div {
						width: 20px;
						height: 20px;
						border-radius: 50%;
						background-color: red;
						margin-right: 5px;
					}
				}
			}

			.logo {
				padding: 20px 0;
			}

			.from {

				.from-title {
					display: flex;
					padding: 10px 0 0 0;

					div {
						font-size: 20px;
						font-weight: 600;
						border-bottom: 4px solid #1db97d;
					}
				}

				.from-input {
					width: 100%;
					padding: 15px 0;

					.from-input-item {
						display: flex;
						padding: 20px 0;

						.from-input-item-title {
							width: 80px;
							height: 50px;
						}
					}
				}
			}
		}
	}

}

.center-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
}

.center-justify {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.center-align {
	display: flex;
	justify-content: space-between;

}

.center-flex {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>