marchglow/webgame-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 去除tailwindcss

Browse Source
This commit is contained in:
Azure
2026-06-17 11:55:13 +08:00
parent 09221c819a
commit dedf172539
12 changed files with 363 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/auth/Login.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex-col-center">
<div class="w-full">
<h2 class="text-3xl/9 mb-3 font-bold lg:text-4xl">欢迎回来 👋🏻</h2>
<div class="login-wrapper">
<div class="login-wrapper__header">
<h2 class="login-wrapper__title">欢迎回来 👋🏻</h2>
<p>
<span style="color: #71717a">登录账号以进入对战</span>
</p>
@@ -11,7 +11,7 @@
:model="loginModel"
:rules="rules"
:show-label="false"
class="w-full mt-10"
class="login-wrapper__form"
>
<n-form-item path="username">
<n-input v-model:value="loginModel.username" placeholder="请输入账号" :maxlength="20" />
@@ -26,7 +26,7 @@
/>
</n-form-item>
<n-form-item>
<div class="flex flex-1 items-center justify-between">
<div class="login-wrapper__actions">
<n-checkbox v-model:checked="rememberAccount">记住账号</n-checkbox>
<a href="javascript:void(0)" style="color: #2080f0">忘记密码？</a>
</div>
@@ -37,13 +37,13 @@
</n-button>
</n-form-item>
<n-form-item>
<div class="flex-center flex-1 gap-4">
<n-button class="flex-1" @click="router.push('/auth/phone-login')"> 手机登录 </n-button>
<n-button class="flex-1" @click="router.push('/auth/qrcode-login')"> 扫码登录 </n-button>
<div class="login-wrapper__quick-btns">
<n-button class="login-wrapper__quick-btn" @click="router.push('/auth/phone-login')"> 手机登录 </n-button>
<n-button class="login-wrapper__quick-btn" @click="router.push('/auth/qrcode-login')"> 扫码登录 </n-button>
</div>
</n-form-item>
<n-form-item>
<div class="flex-center flex-1">
<div class="login-wrapper__register-link">
<span>没有账号？</span>
<router-link to="/auth/register" style="color: #2080f0">创建账号</router-link>
</div>
@@ -177,4 +177,59 @@ const userLoginFun = () => {
}
</script>
<style scoped></style>
<style scoped>
.login-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login-wrapper__header {
width: 100%;
}
.login-wrapper__title {
font-size: 30px;
line-height: 36px;
margin-bottom: 12px;
font-weight: bold;
}
@media (min-width: 1024px) {
.login-wrapper__title {
font-size: 36px;
}
}
.login-wrapper__form {
width: 100%;
margin-top: 40px;
}
.login-wrapper__actions {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
.login-wrapper__quick-btns {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
gap: 16px;
}
.login-wrapper__quick-btn {
flex: 1;
}
.login-wrapper__register-link {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
</style>