133 lines
3.5 KiB
Vue
133 lines
3.5 KiB
Vue
<script setup>
|
|
import {useAuth} from "@/store/auth/index.js"
|
|
const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
|
|
</script>
|
|
<template>
|
|
<div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')]" style="">
|
|
<div class="relative z-10 flex items-center flex-col"> <div class="content1 mb-[123px] shrink-0 "></div>
|
|
<div class="content2 bg-cover w-[1654px] h-[1285px] bg-no-repeat bg-[url('@/assets/image/zu3270@2x.png')] pt-[241px] flex items-center flex-col">
|
|
<div class="wrap1">
|
|
<div class="wrap1_1">手机号</div>
|
|
<div class="wrap1_2">
|
|
<input v-model="telNum" v-no-space class="pl-[61px] pr-[61px] w-[1174px] h-[174px] focus:outline-none placeholder:text-primary placeholder:text-[72px] focus: bg-[#DCE5E9] border-none" placeholder="请输入手机号" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="wrap2">
|
|
<div class="wrap2_1">验证码</div>
|
|
<div class="wrap2_2">
|
|
<input v-model="code" v-no-space class="wrap2_2_1 pr-[61px]" placeholder="请输入验证码" type="text">
|
|
</div>
|
|
<div class="wrap2_3 bg-primary" @click="clickSendCode">
|
|
{{showTextCode}}
|
|
</div>
|
|
</div>
|
|
<div class="wrap3" @click="clickLogin">登录/注册</div>
|
|
</div>
|
|
<div class="content3 absolute top-0 left-0 bg-cover">
|
|
<img class="w-[671px] h-[728px]" src="@/assets/image/gdz27.png" alt="">
|
|
</div></div>
|
|
|
|
<div class="content4 absolute bottom-[200px] left-[50%] transform translate-x-[-50%]">
|
|
<img class="w-[1270px] h-[145px]" src="@/assets/image/zu733@2x.png" alt="">
|
|
</div>
|
|
<div class="absolute bottom-0 right-0">
|
|
<img src="@/assets/image/gdz12@2x.png" class="w-[865px] h-[804px]" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.content1 {
|
|
margin-top: 835px;
|
|
background-size: cover;
|
|
width: 1074px;
|
|
height: 178px;
|
|
background-repeat: no-repeat;
|
|
background-image: url("@/assets/image/zu3310@2x.png");
|
|
}
|
|
.content2 {
|
|
background-size: cover;
|
|
width: 1654px;
|
|
height: 1285px;
|
|
background-repeat: no-repeat;
|
|
background-image: url("@/assets/image/zu3270@2x.png");
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.wrap3 {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
font-size: 82px;
|
|
color: #fff;
|
|
margin-top: 261px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 866px;
|
|
height: 200px;
|
|
|
|
background-image: url("@/assets/image/fbbb@4x.png");
|
|
}
|
|
|
|
.wrap1 {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.wrap1_2 {
|
|
}
|
|
|
|
.wrap1_1 {
|
|
margin-right: 41px;
|
|
font-weight: bold;
|
|
color: #2B69A1;
|
|
font-size: 72px;
|
|
}
|
|
}
|
|
|
|
.wrap2 {
|
|
margin-top: 118px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.wrap2_3 {
|
|
margin-left: 51px;
|
|
color: #FFFFFF;
|
|
font-size: 72px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 460px;
|
|
height: 174px;
|
|
}
|
|
|
|
.wrap2_2 {
|
|
.wrap2_2_1 {
|
|
padding-left: 61px;
|
|
width: 660px;
|
|
height: 174px;
|
|
background-color: #DCE5E9;
|
|
border: none;
|
|
&:focus{
|
|
outline: none;
|
|
}
|
|
&::placeholder {
|
|
font-size: 72px;
|
|
color: #2B69A1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrap2_1 {
|
|
margin-right: 41px;
|
|
font-weight: bold;
|
|
color: #2B69A1;
|
|
font-size: 72px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|