mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-20 05:50:53 +08:00
87 lines
1.5 KiB
Vue
87 lines
1.5 KiB
Vue
<template>
|
|
<div class="login-overlay">
|
|
<div class="login-overlay-blur"></div>
|
|
<div class="login-overlay-content">
|
|
<user-icon class="login-overlay-icon" />
|
|
<div class="login-overlay-text">{{ props.text }}</div>
|
|
<div class="login-overlay-button" @click="goLogin">{{ props.buttonText }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
text: {
|
|
type: String,
|
|
default: '请先登录，点击跳转到登录页面',
|
|
},
|
|
buttonText: {
|
|
type: String,
|
|
default: '登录',
|
|
},
|
|
buttonLink: {
|
|
type: String,
|
|
default: '/login',
|
|
},
|
|
})
|
|
|
|
const goLogin = () => {
|
|
navigateTo(props.buttonLink, { replace: true })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 15;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-overlay-blur {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
backdrop-filter: var(--blur-4);
|
|
z-index: 1;
|
|
}
|
|
|
|
.login-overlay-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
padding: 24px 32px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
row-gap: 20px;
|
|
}
|
|
|
|
.login-overlay-icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.login-overlay-button {
|
|
padding: 4px 12px;
|
|
border-radius: 5px;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.login-overlay-button:hover {
|
|
background-color: var(--primary-color-hover);
|
|
}
|
|
</style>
|