zhangyahui
543ac89f9b
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<template>
|
|
<div class="welcome-page safe-area-top safe-area-bottom">
|
|
<div class="content">
|
|
<div class="title">
|
|
AI STYLING <br />
|
|
ASSISTANT
|
|
</div>
|
|
<p class="subtitle">Redefine the styling experience with AI.</p>
|
|
<div class="btn-container flex">
|
|
<div class="log btn" @click="goToLogin">Log in</div>
|
|
<div class="sign btn" @click="goToSignup">Sign up</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
|
|
const goToSignup = () => {
|
|
router.push('/signup')
|
|
}
|
|
|
|
const goToLogin = () => {
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.welcome-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('/src/assets/images/welcome_bg.png') no-repeat center center;
|
|
background-size: cover;
|
|
padding-left: 10rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.content {
|
|
letter-spacing: 0;
|
|
position: relative;
|
|
// flex: 1;
|
|
font-size: 8rem;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
margin-bottom: 31.5rem;
|
|
.title {
|
|
font-family: 'boskaRegular';
|
|
line-height: 93%;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.subtitle {
|
|
font-size: 3.2rem;
|
|
font-family: 'satoshiRegular';
|
|
margin: 3.2rem 0 6rem;
|
|
list-style: 124%;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.btn-container {
|
|
column-gap: 3rem;
|
|
.btn {
|
|
background: transparent;
|
|
color: #fff;
|
|
width: 23.9rem;
|
|
font-size: 3rem;
|
|
height: 6.05rem;
|
|
line-height: 6.05rem;
|
|
border: 1px solid #fff;
|
|
text-align: center;
|
|
// padding: 2rem 1.3rem;
|
|
box-sizing: border-box;
|
|
font-family: 'satoshiRegular';
|
|
backdrop-filter: blur(5.27rem);
|
|
-webkit-backdrop-filter: blur(5.27rem);
|
|
-moz-backdrop-filter: blur(5.27rem);
|
|
-ms-backdrop-filter: blur(5.27rem);
|
|
-o-backdrop-filter: blur(5.27rem);
|
|
box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
|
|
}
|
|
}
|
|
}
|
|
</style>
|