122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
||
<section class="welcome-page">
|
||
<div class="welcome-content">
|
||
<p class="eyebrow">WELCOME</p>
|
||
<h1>欢迎使用智聪综合管理平台</h1>
|
||
<p class="subtitle">让数据管理更清晰，让日常协作更高效。</p>
|
||
<div class="welcome-notes">
|
||
<span>统一入口</span>
|
||
<span>高效管理</span>
|
||
<span>稳定运行</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup name="Index"></script>
|
||
|
||
<style scoped lang="scss">
|
||
.welcome-page {
|
||
position: relative;
|
||
min-height: calc(100vh - 84px);
|
||
padding: 64px;
|
||
overflow: hidden;
|
||
background: linear-gradient(90deg, rgba(8, 24, 54, 0.94), rgba(10, 47, 92, 0.82) 46%, rgba(15, 82, 128, 0.54)),
|
||
linear-gradient(135deg, rgba(41, 171, 226, 0.28) 0 1px, transparent 1px 42px), linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 58px),
|
||
radial-gradient(circle at 82% 18%, rgba(81, 198, 255, 0.42), transparent 28%), radial-gradient(circle at 72% 72%, rgba(76, 220, 178, 0.22), transparent 34%),
|
||
#071832;
|
||
color: #fff;
|
||
}
|
||
|
||
.welcome-page::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: 8%;
|
||
top: 18%;
|
||
width: 420px;
|
||
height: 420px;
|
||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||
border-radius: 50%;
|
||
box-shadow: inset 0 0 0 42px rgba(255, 255, 255, 0.03), inset 0 0 0 108px rgba(255, 255, 255, 0.025), 0 0 48px rgba(44, 180, 255, 0.18);
|
||
}
|
||
|
||
.welcome-page::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 12%;
|
||
bottom: 14%;
|
||
width: 34%;
|
||
max-width: 520px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
|
||
transform: rotate(-18deg);
|
||
}
|
||
|
||
.welcome-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 720px;
|
||
padding-top: 9vh;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin: 0 0 18px;
|
||
color: rgba(255, 255, 255, 0.72);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0;
|
||
font-size: 44px;
|
||
font-weight: 800;
|
||
line-height: 1.22;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.subtitle {
|
||
max-width: 520px;
|
||
margin: 22px 0 0;
|
||
color: rgba(255, 255, 255, 0.78);
|
||
font-size: 18px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.welcome-notes {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 34px;
|
||
|
||
span {
|
||
padding: 10px 18px;
|
||
color: rgba(255, 255, 255, 0.88);
|
||
background: rgba(255, 255, 255, 0.12);
|
||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||
border-radius: 6px;
|
||
backdrop-filter: blur(8px);
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.welcome-page {
|
||
min-height: calc(100vh - 50px);
|
||
padding: 36px 22px;
|
||
}
|
||
|
||
.welcome-content {
|
||
padding-top: 7vh;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
</style>
|