You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.2 KiB
109 lines
2.2 KiB
<template>
|
|
<div class="login-page">
|
|
<div class="logo-box">
|
|
<img class="logo" src="/static/auth/headImage.png" alt="logo" />
|
|
</div>
|
|
<div class="title">瀚涵中文网</div>
|
|
<LoginButton type="primary" @click="onLogin">登录</LoginButton>
|
|
<div class="cancel-row">
|
|
<LoginButton type="secondary" @click="onCancel">取消登录</LoginButton>
|
|
<span class="arrow-icon">◆</span>
|
|
<span class="dashed-line"></span>
|
|
</div>
|
|
<AgreementCheck v-model:checked="checked">
|
|
我已阅读并同意<a href="#">《服务协议》</a>和<a href="#">《隐私政策》</a>
|
|
</AgreementCheck>
|
|
<div class="book-bg"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LoginButton from './components/LoginButton.vue';
|
|
import AgreementCheck from './components/AgreementCheck.vue';
|
|
|
|
export default {
|
|
name: 'NovelLogin',
|
|
components: { LoginButton, AgreementCheck },
|
|
data() {
|
|
return {
|
|
checked: false
|
|
};
|
|
},
|
|
methods: {
|
|
onLogin() {
|
|
if (!this.checked) {
|
|
this.$toast && this.$toast('请先同意协议');
|
|
return;
|
|
}
|
|
// 登录逻辑
|
|
},
|
|
onCancel() {
|
|
// 取消登录逻辑
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-page {
|
|
min-height: 100vh;
|
|
background: #eef2fc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
padding-top: 60px;
|
|
}
|
|
.logo-box {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 2px 8px #e0e6f6;
|
|
}
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: contain;
|
|
}
|
|
.title {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #222;
|
|
margin-bottom: 32px;
|
|
}
|
|
.cancel-row {
|
|
width: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-bottom: 8px;
|
|
}
|
|
.arrow-icon {
|
|
color: #fd7e14;
|
|
font-size: 18px;
|
|
margin: 0 6px;
|
|
z-index: 2;
|
|
}
|
|
.dashed-line {
|
|
flex: 1;
|
|
border-bottom: 2px dashed #fd7e14;
|
|
height: 0;
|
|
margin-left: -8px;
|
|
}
|
|
.book-bg {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 220px;
|
|
height: 180px;
|
|
background: url('/static/auth/headImage.png') no-repeat center/contain;
|
|
opacity: 0.08;
|
|
z-index: 0;
|
|
}
|
|
</style>
|