145 lines
2.7 KiB
Vue
145 lines
2.7 KiB
Vue
<template>
|
||
<LoginBackground :show-logo="false">
|
||
<view class="welcome-container">
|
||
<!-- 主卡片：女孩 + 粉色玩偶 -->
|
||
<view class="welcome-card">
|
||
<image
|
||
class="welcome-bg"
|
||
src="/static/login/portal/welcome-bg.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 进入 TOPFANS 世界按钮 -->
|
||
<view class="enter-btn-wrapper">
|
||
<view class="enter-btn" @tap="handleEnter">
|
||
<text class="enter-btn-text">进入 TOPFANS 世界</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</LoginBackground>
|
||
</template>
|
||
|
||
<script setup>
|
||
import LoginBackground from "@/components/LoginBackground.vue";
|
||
|
||
const emit = defineEmits(["enter"]);
|
||
|
||
const handleEnter = () => {
|
||
emit("enter");
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.welcome-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 背景 */
|
||
.bg-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.68;
|
||
}
|
||
|
||
.bg-character {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%) rotate(0.5deg);
|
||
width: 128%;
|
||
height: 60%;
|
||
z-index: 1;
|
||
filter: blur(2rpx);
|
||
opacity: 0.9;
|
||
object-fit: contain;
|
||
object-position: center top;
|
||
}
|
||
|
||
.bg-character-shadow {
|
||
position: absolute;
|
||
top: 470rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%) rotate(0.5deg);
|
||
width: 145%;
|
||
height: 50%;
|
||
z-index: 2;
|
||
filter: blur(4rpx);
|
||
opacity: 0.9;
|
||
object-fit: contain;
|
||
object-position: center bottom;
|
||
}
|
||
|
||
.topfans-logo-img {
|
||
position: absolute;
|
||
top: 100rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 698rpx;
|
||
height: 150rpx;
|
||
z-index: 10;
|
||
filter: drop-shadow(0 4rpx 18rpx rgba(177, 19, 19, 0.49));
|
||
}
|
||
|
||
/* 欢迎卡片 */
|
||
.welcome-card {
|
||
position: absolute;
|
||
top: 128rpx;
|
||
left: 20rpx;
|
||
width: 710rpx;
|
||
height: 1376rpx;
|
||
border-radius: 56rpx;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.15);
|
||
box-shadow: 0 0 41rpx 0 rgba(0, 0, 0, 0.31);
|
||
overflow: hidden;
|
||
z-index: 5;
|
||
}
|
||
|
||
.welcome-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 进入按钮 */
|
||
.enter-btn-wrapper {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 160rpx;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
}
|
||
|
||
.enter-btn {
|
||
width: 450rpx;
|
||
height: 90rpx;
|
||
border-radius: 58rpx;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(255, 222, 8, 0.38) 0%,
|
||
rgba(252, 100, 102, 0.78) 64%,
|
||
rgba(244, 88, 104, 0.78) 100%
|
||
);
|
||
box-shadow: 4rpx 4rpx 8rpx 0 rgba(242, 21, 21, 0.47);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.96;
|
||
}
|
||
|
||
.enter-btn-text {
|
||
font-size: 46rpx;
|
||
color: #fff9e7;
|
||
text-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.84);
|
||
font-family: "Abhaya Libre Medium", sans-serif;
|
||
}
|
||
</style>
|