132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<div class="content1"></div>
|
||
|
|
<div class="content2">
|
||
|
|
<div class="wrap1">
|
||
|
|
<div class="wrap1_1">手机号</div>
|
||
|
|
<div class="wrap1_2">
|
||
|
|
<input class="wrap1_2_1" placeholder="请输入手机号" type="text">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrap2">
|
||
|
|
<div class="wrap2_1">验证码</div>
|
||
|
|
<div class="wrap2_2">
|
||
|
|
<input class="wrap2_2_1" placeholder="请输入验证码" type="text">
|
||
|
|
</div>
|
||
|
|
<div class="wrap2_3">
|
||
|
|
获取验证码
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrap3">登录/注册</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.container{
|
||
|
|
width: 1920px;
|
||
|
|
height: 100vh;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-image:url("@/assets/image/zu3237.png");
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
.content1{
|
||
|
|
margin-top: 835px;
|
||
|
|
background-size: contain;
|
||
|
|
width: 1074px;
|
||
|
|
height: 178px;
|
||
|
|
font-size: 72px;
|
||
|
|
background-image: url("@/assets/image/zu3310@2x.png");
|
||
|
|
}
|
||
|
|
.content2{
|
||
|
|
margin-top: 123px;
|
||
|
|
background-size: contain;
|
||
|
|
width: 1654px;
|
||
|
|
height: 1285px;
|
||
|
|
background-image: url("@/assets/image/zu3270@2x.png");
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 241px;
|
||
|
|
.wrap3{
|
||
|
|
background-size: contain;
|
||
|
|
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_2_1{
|
||
|
|
padding-left: 61px;
|
||
|
|
width: 1174px;
|
||
|
|
height: 174px;
|
||
|
|
background-color: #DCE5E9;
|
||
|
|
border: none;
|
||
|
|
&::placeholder{
|
||
|
|
font-size: 72px;
|
||
|
|
color: #2B69A1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
background-color: #2B69A1;
|
||
|
|
}
|
||
|
|
.wrap2_2{
|
||
|
|
.wrap2_2_1{
|
||
|
|
padding-left: 61px;
|
||
|
|
width: 660px;
|
||
|
|
height: 174px;
|
||
|
|
background-color: #DCE5E9;
|
||
|
|
border: none;
|
||
|
|
&::placeholder{
|
||
|
|
font-size: 72px;
|
||
|
|
color: #2B69A1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.wrap2_1{
|
||
|
|
margin-right: 41px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #2B69A1;
|
||
|
|
font-size: 72px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|