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

8
src/App.vue
View File

@@ -4,7 +4,7 @@
:date-locale="dateZhCN"
:theme="lightTheme"
:theme-overrides="themeOverrides"
class="h-full"
class="app-wrapper"
>
<NNotificationProvider>
<NMessageProvider>
@@ -27,3 +27,9 @@ const themeOverrides: GlobalThemeOverrides = {
}
}
</script>
<style scoped>
.app-wrapper {
height: 100%;
}
</style>

1
src/assets/style/index.ts
View File

@@ -1,2 +1 @@
import './tailwind.css'
import './base.css'

14
src/assets/style/tailwind.css
View File

@@ -1,14 +0,0 @@
@import 'tailwindcss';
@utility flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@utility flex-col-center {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

102
src/layouts/AuthPageLayout.vue
View File

@@ -1,24 +1,22 @@
<template>
<div class="flex min-h-lvh flex-1 overflow-x-hidden select-none">
<div class="relative flex-center w-full">
<div class="login-background absolute top-0 left-0 size-full"></div>
<div
class="flex-col-center relative bg-white rounded-3xl pb-10 px-6 py-10 md:w-2/3 lg:w-1/2 xl:w-[36%]"
>
<div class="auth-layout">
<div class="auth-layout__center">
<div class="auth-layout__bg"></div>
<div class="auth-layout__card">
<RouterView v-slot="{ Component, route }">
<Transition appear mode="out-in" name="slide-right">
<KeepAlive :include="['Login']">
<component
:is="Component"
:key="route.fullPath"
class="side-content mt-6 w-full sm:mx-auto md:max-w-md"
class="auth-layout__content"
/>
</KeepAlive>
</Transition>
</RouterView>
<div class="absolute bottom-3 flex text-center text-xs">
<div class="auth-layout__footer">
<span style="color: #71717a">Copyright © 2024</span>
<a href="javascript:void(0)" class="ml-2" style="color: #2080f0">MarchGlow</a>
<a href="javascript:void(0)" class="auth-layout__footer-link" style="color: #2080f0">MarchGlow</a>
</div>
</div>
</div>
@@ -31,7 +29,28 @@ const themeVars = useThemeVars()
</script>
<style scoped>
.login-background {
.auth-layout {
display: flex;
min-height: 100lvh;
flex: 1;
overflow-x: hidden;
user-select: none;
}
.auth-layout__center {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.auth-layout__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
154deg,
#07070915 30%,
@@ -40,4 +59,67 @@ const themeVars = useThemeVars()
);
filter: blur(100px);
}
.auth-layout__card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 24px;
padding: 40px 24px 40px 24px;
width: 100%;
}
/* 平板端宽度 */
@media (min-width: 768px) {
.auth-layout__card {
width: 66.666%;
}
}
/* 桌面端宽度 */
@media (min-width: 1024px) {
.auth-layout__card {
width: 50%;
}
}
/* 大屏端宽度 */
@media (min-width: 1280px) {
.auth-layout__card {
width: 36%;
}
}
.auth-layout__content {
margin-top: 24px;
width: 100%;
}
@media (min-width: 640px) {
.auth-layout__content {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 768px) {
.auth-layout__content {
max-width: 448px;
}
}
.auth-layout__footer {
position: absolute;
bottom: 12px;
display: flex;
text-align: center;
font-size: 12px;
}
.auth-layout__footer-link {
margin-left: 8px;
}
</style>

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>

63
src/views/auth/PhoneLogin.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="phone-login-wrapper">
<div class="phone-login-wrapper__header">
<h2 class="phone-login-wrapper__title">欢迎回来 📲</h2>
<p>
<span style="color: #71717a">请输入手机号码登录账号以进入对战</span>
</p>
@@ -11,13 +11,13 @@
:model="loginModel"
:rules="rules"
:show-label="false"
class="w-full mt-10"
class="phone-login-wrapper__form"
>
<n-form-item path="phoneNumber">
<n-input v-model:value="loginModel.phoneNumber" placeholder="手机号码" :maxlength="20" />
</n-form-item>
<n-form-item path="code">
<div class="flex flex-1 gap-4">
<div class="phone-login-wrapper__code-row">
<n-input-otp
block
v-model:value="loginModel.code"
@@ -33,8 +33,8 @@
</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/login')"> 返回 </n-button>
<div class="phone-login-wrapper__back-row">
<n-button class="phone-login-wrapper__back-btn" @click="router.push('/auth/login')"> 返回 </n-button>
</div>
</n-form-item>
</n-form>
@@ -120,4 +120,51 @@ const phoneLoginFun = () => {
}
</script>
<style scoped></style>
<style scoped>
.phone-login-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.phone-login-wrapper__header {
width: 100%;
}
.phone-login-wrapper__title {
font-size: 30px;
line-height: 36px;
margin-bottom: 12px;
font-weight: bold;
}
@media (min-width: 1024px) {
.phone-login-wrapper__title {
font-size: 36px;
}
}
.phone-login-wrapper__form {
width: 100%;
margin-top: 40px;
}
.phone-login-wrapper__code-row {
display: flex;
flex: 1;
gap: 16px;
}
.phone-login-wrapper__back-row {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
gap: 16px;
}
.phone-login-wrapper__back-btn {
flex: 1;
}
</style>

55
src/views/auth/QRCodeLogin.vue
View File

@@ -1,12 +1,12 @@
<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="qrcode-login-wrapper">
<div class="qrcode-login-wrapper__header">
<h2 class="qrcode-login-wrapper__title">欢迎回来 📱</h2>
<p>
<span style="color: #71717a">请用手机扫描二维码登录</span>
</p>
</div>
<n-form :show-label="false" class="w-full mt-10">
<n-form :show-label="false" class="qrcode-login-wrapper__form">
<n-form-item>
<n-space vertical style="align-items: center; flex: 1">
<n-qr-code v-model:value="qrcode" :size="180" />
@@ -14,8 +14,8 @@
</n-space>
</n-form-item>
<n-form-item>
<div class="flex-center flex-1 gap-4">
<n-button class="flex-1" @click="router.push('/auth/login')"> 返回 </n-button>
<div class="qrcode-login-wrapper__back-row">
<n-button class="qrcode-login-wrapper__back-btn" @click="router.push('/auth/login')"> 返回 </n-button>
</div>
</n-form-item>
</n-form>
@@ -32,4 +32,45 @@ const accountStore = useAccountStore()
const qrcode = ref('')
</script>
<style scoped></style>
<style scoped>
.qrcode-login-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.qrcode-login-wrapper__header {
width: 100%;
}
.qrcode-login-wrapper__title {
font-size: 30px;
line-height: 36px;
margin-bottom: 12px;
font-weight: bold;
}
@media (min-width: 1024px) {
.qrcode-login-wrapper__title {
font-size: 36px;
}
}
.qrcode-login-wrapper__form {
width: 100%;
margin-top: 40px;
}
.qrcode-login-wrapper__back-row {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
gap: 16px;
}
.qrcode-login-wrapper__back-btn {
flex: 1;
}
</style>

131
src/views/auth/Register.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="register-wrapper">
<div class="register-wrapper__header">
<h2 class="register-wrapper__title">创建一个账号 🚀</h2>
<p>
<span style="color: #71717a">创建账号进入对战</span>
</p>
@@ -11,13 +11,13 @@
:model="registerModel"
:rules="rules"
:show-label="false"
class="w-full mt-10"
class="register-wrapper__form"
>
<n-form-item path="username">
<n-input v-model:value="registerModel.username" placeholder="请输入账号" :maxlength="20" />
</n-form-item>
<n-form-item path="password">
<div class="flex flex-col flex-1">
<div class="register-wrapper__password-group">
<n-input
v-model:value="registerModel.password"
type="password"
@@ -25,39 +25,19 @@
placeholder="密码"
:maxlength="20"
/>
<div class="flex flex-1 gap-1 mt-2">
<div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
<div class="register-wrapper__strength-bars">
<div
v-for="level in 5"
:key="level"
class="register-wrapper__strength-bar-track"
>
<div
:class="securityLevel > 0 ? 'w-full' : 'w-0'"
class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
></div>
</div>
<div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
<div
:class="securityLevel > 1 ? 'w-full' : 'w-0'"
class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
></div>
</div>
<div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
<div
:class="securityLevel > 2 ? 'w-full' : 'w-0'"
class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
></div>
</div>
<div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
<div
:class="securityLevel > 3 ? 'w-full' : 'w-0'"
class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
></div>
</div>
<div class="flex-1 h-2 rounded-xl relative bg-gray-200 overflow-hidden">
<div
:class="securityLevel > 4 ? 'w-full' : 'w-0'"
class="absolute left-0 top-0 h-full bg-red-500 transition-all duration-500"
class="register-wrapper__strength-bar-fill"
:style="{ width: securityLevel >= level ? '100%' : '0' }"
></div>
</div>
</div>
<p class="text-xs mt-2" style="color: #71717a">
<p class="register-wrapper__password-hint" style="color: #71717a">
使用 8 个或更多字符，混合大小写字母、数字
</p>
</div>
@@ -72,7 +52,7 @@
/>
</n-form-item>
<n-form-item path="agreement">
<div class="flex flex-1">
<div class="register-wrapper__agreement">
<n-checkbox v-model:checked="registerModel.agreement">我同意</n-checkbox>
<a href="javascript:void(0)" style="color: #2080f0">隐私政策 & 条款</a>
</div>
@@ -83,7 +63,7 @@
</n-button>
</n-form-item>
<n-form-item>
<div class="flex-center flex-1">
<div class="register-wrapper__login-link">
<span>已经有账号了？</span>
<router-link to="/auth/login" style="color: #2080f0">去登录</router-link>
</div>
@@ -247,4 +227,81 @@ const userRegisterFun = () => {
}
</script>
<style scoped></style>
<style scoped>
.register-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.register-wrapper__header {
width: 100%;
}
.register-wrapper__title {
font-size: 30px;
line-height: 36px;
margin-bottom: 12px;
font-weight: bold;
}
@media (min-width: 1024px) {
.register-wrapper__title {
font-size: 36px;
}
}
.register-wrapper__form {
width: 100%;
margin-top: 40px;
}
.register-wrapper__password-group {
display: flex;
flex-direction: column;
flex: 1;
}
.register-wrapper__strength-bars {
display: flex;
flex: 1;
gap: 4px;
margin-top: 8px;
}
.register-wrapper__strength-bar-track {
flex: 1;
height: 8px;
border-radius: 12px;
position: relative;
background-color: #e5e7eb;
overflow: hidden;
}
.register-wrapper__strength-bar-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #ef4444;
transition: all 500ms;
}
.register-wrapper__password-hint {
font-size: 12px;
margin-top: 8px;
}
.register-wrapper__agreement {
display: flex;
flex: 1;
}
.register-wrapper__login-link {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
</style>