11 lines
3.0 KiB
Vue
11 lines
3.0 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { login } from '../services/auth'
|
||
const username=ref(''),password=ref(''),error=ref(''),submitting=ref(false),router=useRouter(),route=useRoute()
|
||
const redirect=computed(()=>typeof route.query.redirect==='string'?route.query.redirect:'/')
|
||
async function submit(){if(submitting.value)return;error.value='';submitting.value=true;try{await login({username:username.value.trim(),password:password.value});await router.replace(redirect.value)}catch(cause){error.value=cause instanceof Error?cause.message:'登录失败，请稍后重试。'}finally{submitting.value=false}}
|
||
</script>
|
||
<template><main class="auth-page"><section class="auth-intro"><p>边疆红驿 · NALATI KNOWLEDGE HUB</p><h1>每一次提问，<br>都有据可查。</h1><span>聚焦那拉提红色文化、旅游资源与民宿服务的可信知识问答。</span></section><section class="auth-panel"><RouterLink to="/">边疆红驿</RouterLink><form class="auth-card" @submit.prevent="submit"><p>WELCOME BACK</p><h2>登录账户</h2><label>用户名<input v-model.trim="username" autocomplete="username" required maxlength="100" placeholder="请输入用户名"/></label><label>密码<input v-model="password" type="password" autocomplete="current-password" required placeholder="请输入密码"/></label><p v-if="error" class="auth-error" role="alert">{{error}}</p><button :disabled="submitting">{{submitting?'登录中…':'登录'}}</button><small>还没有账户？ <RouterLink to="/register">注册账户</RouterLink></small></form></section></main></template>
|
||
<style scoped>.auth-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f5f3eb}.auth-intro{padding:12vw;background:#214d3b;color:#fff;display:flex;flex-direction:column;justify-content:center}.auth-intro p,.auth-card>p{letter-spacing:.14em;font-size:11px;font-weight:700;color:#b8d1be}.auth-intro h1{font-size:clamp(42px,5vw,68px);line-height:1.08;letter-spacing:-.06em;margin:20px 0}.auth-intro span{max-width:410px;line-height:1.9;color:#d7e7da}.auth-panel{padding:34px;display:flex;flex-direction:column;align-items:center;color:#214d3b;font-weight:700}.auth-panel>a{align-self:stretch}.auth-card{width:min(100%,410px);margin:auto 0;padding:34px;border:1px solid #e3e1d8;border-radius:16px;background:#fffefa;box-shadow:0 18px 45px #27332b14;display:grid;gap:16px}.auth-card h2{margin:0;font-size:30px;letter-spacing:-.04em;color:#27332b}.auth-card label{display:grid;gap:7px;font-size:12px;color:#526052}.auth-card input{padding:12px;border:1px solid #dfe2d8;border-radius:9px;font:inherit;outline-color:#6f967c}.auth-card button{border:0;border-radius:9px;padding:13px;background:#214d3b;color:#fff;font-weight:700}.auth-card small{color:#707a70;font-weight:400}.auth-error{margin:0;padding:10px;border-radius:8px;background:#f8e9e4;color:#a5423a;font-size:12px}@media(max-width:780px){.auth-page{grid-template-columns:1fr}.auth-intro{padding:48px 28px}.auth-panel{padding:22px}.auth-card{margin:44px 0}}</style>
|