Browse Source

联系我们

master
maochaoying 2 years ago
parent
commit
d64742d7fc
  1. 92
      src/components/Contact.vue

92
src/components/Contact.vue

@ -24,6 +24,37 @@
</div> </div>
<div class="contact_form"> <div class="contact_form">
<p class="title">联系我们</p> <p class="title">联系我们</p>
<div class="input_container mb">
<input type="text" class="input" />
<div class="label_container">
<span>姓名</span>
<p class="line"></p>
</div>
</div>
<div class="input_container mb">
<input type="text" class="input" />
<div class="label_container">
<span>电话</span>
<p class="line"></p>
</div>
</div>
<div class="input_container mb">
<input type="text" class="input" />
<div class="label_container">
<span>公司</span>
<p class="line"></p>
</div>
</div>
<div class="input_container mb">
<input type="text" class="input" />
<div class="label_container">
<span>需求</span>
<p class="line"></p>
</div>
</div>
<div class="btn_con">
<div class="send">发送</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -96,7 +127,6 @@ import Email from '@/static/img/10.png'
.contact_form { .contact_form {
flex: 1; flex: 1;
margin-left: 191px; margin-left: 191px;
height: 546px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
border-top: 4px solid #f95926; border-top: 4px solid #f95926;
@ -105,6 +135,66 @@ import Email from '@/static/img/10.png'
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
margin-bottom: 44px;
margin-left: 8px;
}
.input_container {
width: 100%;
position: relative;
.input {
width: 100%;
height: 50px;
border: 1px solid #dcdfe6;
border-radius: 25px;
padding-left: 112px;
padding-right: 20px;
box-sizing: border-box;
font-size: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #dcdfe6;
line-height: 38px;
outline: none;
}
.label_container {
display: flex;
align-items: center;
font-size: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #dcdfe6;
position: absolute;
left: 0;
top: 0;
height: 50px;
padding-left: 27px;
.line {
width: 1px;
height: 17px;
background: #dcdfe6;
margin-left: 27px;
}
}
}
.mb {
margin-bottom: 36px;
}
.btn_con {
display: flex;
justify-content: flex-end;
width: 100%;
.send {
width: 102px;
height: 43px;
background: linear-gradient(90deg, #facc22, #f83600);
border-radius: 22px;
font-size: 18px;
font-weight: 300;
color: #fafafa;
display: flex;
align-items: center;
justify-content: center;
}
} }
} }
} }

Loading…
Cancel
Save