|
@@ -1,349 +1,336 @@ |
|
|
<template> |
|
|
|
|
|
<div class="tailBox"> |
|
|
|
|
|
<div class="taillong"> |
|
|
|
|
|
<img src="../../assets/img/LOGO1.png" alt /> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="tiemBox"> |
|
|
|
|
|
<div class="taolIconBox"> |
|
|
|
|
|
<div class="taolIconText"> |
|
|
|
|
|
{{ characters == 1 ? '关注我们' : 'follow Us' }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="iconBox"> |
|
|
|
|
|
<img src="../../assets/img/f.png" alt /> |
|
|
|
|
|
<img src="../../assets/img/o.png" alt /> |
|
|
|
|
|
<img src="../../assets/img/ft.png" alt /> |
|
|
|
|
|
<img src="../../assets/img/x.png" alt /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="contentBox"> |
|
|
|
|
|
<div class="taolIconText"> |
|
|
|
|
|
{{ characters == 1 ? '联系我们' : 'Contact us' }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="contentInput"> |
|
|
|
|
|
<!-- <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> --> |
|
|
|
|
|
<el-input |
|
|
|
|
|
v-model="userName" |
|
|
|
|
|
:placeholder="characters == 1 ? '姓名' : 'Name'" |
|
|
|
|
|
></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="contentInput"> |
|
|
|
|
|
<!-- <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> --> |
|
|
|
|
|
<el-input |
|
|
|
|
|
v-model="phone" |
|
|
|
|
|
:placeholder="characters == 1 ? '手机' : 'Phone Number'" |
|
|
|
|
|
></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="contentInput"> |
|
|
|
|
|
<!-- <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> --> |
|
|
|
|
|
<el-input |
|
|
|
|
|
v-model="email" |
|
|
|
|
|
:placeholder="characters == 1 ? 'E-mail' : 'Mail'" |
|
|
|
|
|
></el-input> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="subBtn" @click="submit()"> |
|
|
|
|
|
{{ characters == 1 ? '提交' : 'Submit' }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="rqCodeBox"> |
|
|
|
|
|
<div class="phone">TEL:+86 152-1093-7300</div> |
|
|
|
|
|
<div class="site"> |
|
|
|
|
|
{{ |
|
|
|
|
|
characters == 1 |
|
|
|
|
|
? '北京市海淀区中关村南大街12号农业科学院信息楼311室' |
|
|
|
|
|
: '311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing' |
|
|
|
|
|
}} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rqCodeTiemBox"> |
|
|
|
|
|
<div class="rqCodeTiem"> |
|
|
|
|
|
<div class="rqcode"> |
|
|
|
|
|
<img src="../../assets/img/wechat.png" alt /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rqtext">Wechat</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rqCodeTiem1"> |
|
|
|
|
|
<div class="rqcode"> |
|
|
|
|
|
<img src="../../assets/img/tiktok.png" alt /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rqtext">Tiktok</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="tailText"> |
|
|
|
|
|
<!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 --> |
|
|
|
|
|
© 2021 Copyright 北京邃芒科技有限公司 版权所有 |
|
|
|
|
|
<a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<script> |
|
|
|
|
|
import { mapState } from 'vuex' |
|
|
|
|
|
export default { |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
userName: '', |
|
|
|
|
|
phone: '', |
|
|
|
|
|
email: '' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
submit() { |
|
|
|
|
|
let phone = /^1[35789]\d{9}$/ |
|
|
|
|
|
if (this.userName == '') { |
|
|
|
|
|
this.$message.error( |
|
|
|
|
|
this.characters == 1 ? '请输入姓名' : 'Please enter your name' |
|
|
|
|
|
) |
|
|
|
|
|
return |
|
|
|
|
|
} else if (!phone.test(this.phone)) { |
|
|
|
|
|
this.$message.error( |
|
|
|
|
|
this.characters == 1 |
|
|
|
|
|
? '请输入手机号' |
|
|
|
|
|
: 'Please enter your mobile phone number' |
|
|
|
|
|
) |
|
|
|
|
|
return |
|
|
|
|
|
} else if (this.email == '') { |
|
|
|
|
|
this.$message.error( |
|
|
|
|
|
this.characters == 1 ? '请输入邮箱' : 'Please enter email address' |
|
|
|
|
|
) |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
let params = { |
|
|
|
|
|
mallName: this.email, //邮箱 |
|
|
|
|
|
applicant: this.userName, //姓名 |
|
|
|
|
|
phone: this.phone //电话 |
|
|
|
|
|
} |
|
|
|
|
|
this.$axios({ |
|
|
|
|
|
method: 'post', |
|
|
|
|
|
url: '/api/callback/wxMallApply/add', |
|
|
|
|
|
headers: { |
|
|
|
|
|
'Content-Type': 'application/json;charset=UTF-8' |
|
|
|
|
|
}, |
|
|
|
|
|
data: params |
|
|
|
|
|
}) |
|
|
|
|
|
.then((res) => { |
|
|
|
|
|
this.email = '' |
|
|
|
|
|
this.userName = '' |
|
|
|
|
|
this.phone = '' |
|
|
|
|
|
this.$message.success( |
|
|
|
|
|
this.characters == 1 ? '提交成功' : 'submit successfully' |
|
|
|
|
|
) |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
this.$message.error(err.message) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
...mapState({ |
|
|
|
|
|
characters: (state) => state.publicObj.characters |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.tailBox { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
height: 578px; |
|
|
|
|
|
background: #f1f4f7; |
|
|
|
|
|
padding-bottom: 54px; |
|
|
|
|
|
|
|
|
|
|
|
.taillong { |
|
|
|
|
|
width: 168px; |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
margin-top: 60px; |
|
|
|
|
|
margin-left: 360px; |
|
|
|
|
|
img { |
|
|
|
|
|
width: 168px; |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.tiemBox { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
.taolIconBox { |
|
|
|
|
|
margin-left: 380px; |
|
|
|
|
|
float: left; |
|
|
|
|
|
} |
|
|
|
|
|
.taolIconText { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
font-family: Inter; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #323232; |
|
|
|
|
|
line-height: 62px; |
|
|
|
|
|
} |
|
|
|
|
|
.iconBox { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
width: 124px; |
|
|
|
|
|
img { |
|
|
|
|
|
width: 24px; |
|
|
|
|
|
height: 24px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.contentBox { |
|
|
|
|
|
// position: absolute; |
|
|
|
|
|
// margin-top: 120px; |
|
|
|
|
|
float: left; |
|
|
|
|
|
margin-left: 260px; |
|
|
|
|
|
.contentInput { |
|
|
|
|
|
width: 286px; |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
// background: #ffffff; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
margin-bottom: 11px; |
|
|
|
|
|
input { |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
} |
|
|
|
|
|
input::placeholder { |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #949494; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.subBtn { |
|
|
|
|
|
width: 140px; |
|
|
|
|
|
height: 48px; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
border-radius: 24px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 48px; |
|
|
|
|
|
margin-top: 24px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
|
&:hover { |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
background-color: #16e9d6; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.rqCodeBox { |
|
|
|
|
|
width: 360px; |
|
|
|
|
|
// position: absolute; |
|
|
|
|
|
// top: 130px; |
|
|
|
|
|
float: left; |
|
|
|
|
|
margin-left: 260px; |
|
|
|
|
|
.phone { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
font-family: Inter; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #191919; |
|
|
|
|
|
} |
|
|
|
|
|
.site { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #191919; |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
.rqCodeTiemBox { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
margin-top: 30px; |
|
|
|
|
|
.rqCodeTiem { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
.rqcode { |
|
|
|
|
|
width: 150px; |
|
|
|
|
|
height: 150px; |
|
|
|
|
|
img { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.rqtext { |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
font-family: Inter; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #172c34; |
|
|
|
|
|
line-height: 62px; |
|
|
|
|
|
height: 62px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.rqCodeTiem1 { |
|
|
|
|
|
margin-left: 30px; |
|
|
|
|
|
.rqcode { |
|
|
|
|
|
width: 150px; |
|
|
|
|
|
height: 150px; |
|
|
|
|
|
img { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.rqtext { |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
font-family: Inter; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #172c34; |
|
|
|
|
|
line-height: 62px; |
|
|
|
|
|
height: 62px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.showBoxP { |
|
|
|
|
|
font-size: 16px !important; |
|
|
|
|
|
text-align: center !important; |
|
|
|
|
|
line-height: 20px !important; |
|
|
|
|
|
color: #696969 !important; |
|
|
|
|
|
} |
|
|
|
|
|
.tailText { |
|
|
|
|
|
// position: absolute; |
|
|
|
|
|
// width: 100%; |
|
|
|
|
|
// bottom: 6%; |
|
|
|
|
|
margin-top: 80px; |
|
|
|
|
|
// left: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #191919; |
|
|
|
|
|
line-height: 62px; |
|
|
|
|
|
opacity: 0.5; |
|
|
|
|
|
a { |
|
|
|
|
|
text-decoration: none; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
} |
|
|
|
|
|
a:hover, |
|
|
|
|
|
a:visited, |
|
|
|
|
|
a:link, |
|
|
|
|
|
a:active { |
|
|
|
|
|
color: #333; |
|
|
|
|
|
// 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写 |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
::-webkit-input-placeholder { |
|
|
|
|
|
/* WebKit browsers,webkit内核浏览器 */ |
|
|
|
|
|
color: #ccc; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
:-moz-placeholder { |
|
|
|
|
|
/* Mozilla Firefox 4 to 18 */ |
|
|
|
|
|
color: #ccc; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
::-moz-placeholder { |
|
|
|
|
|
/* Mozilla Firefox 19+ */ |
|
|
|
|
|
color: #ccc; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
:-ms-input-placeholder { |
|
|
|
|
|
/* Internet Explorer 10+ */ |
|
|
|
|
|
color: #ccc; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
.el-input.is-active .el-input__inner, |
|
|
|
|
|
.el-input__inner:focus { |
|
|
|
|
|
border-color: #16e9d6; |
|
|
|
|
|
outline: 0; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="tailBox">
|
|
|
|
|
|
<div class="taillong">
|
|
|
|
|
|
<img src="../../assets/img/LOGO1.png" alt />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tiemBox">
|
|
|
|
|
|
<div class="taolIconBox">
|
|
|
|
|
|
<div class="taolIconText">
|
|
|
|
|
|
{{ characters == 1 ? '关注我们' : 'follow Us' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="iconBox">
|
|
|
|
|
|
<img src="../../assets/img/f.png" alt />
|
|
|
|
|
|
<img src="../../assets/img/o.png" alt />
|
|
|
|
|
|
<img src="../../assets/img/ft.png" alt />
|
|
|
|
|
|
<img src="../../assets/img/x.png" alt />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="contentBox">
|
|
|
|
|
|
<div class="taolIconText">
|
|
|
|
|
|
{{ characters == 1 ? '联系我们' : 'Contact us' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="contentInput">
|
|
|
|
|
|
<!-- <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> -->
|
|
|
|
|
|
<el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="contentInput">
|
|
|
|
|
|
<!-- <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> -->
|
|
|
|
|
|
<el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="contentInput">
|
|
|
|
|
|
<!-- <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> -->
|
|
|
|
|
|
<el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="subBtn" @click="submit()">
|
|
|
|
|
|
{{ characters == 1 ? '提交' : 'Submit' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="rqCodeBox">
|
|
|
|
|
|
<div class="phone">TEL:+86 152-1093-7300</div>
|
|
|
|
|
|
<div class="site">
|
|
|
|
|
|
{{
|
|
|
|
|
|
characters == 1
|
|
|
|
|
|
? '北京市海淀区中关村南大街12号农业科学院信息楼311室'
|
|
|
|
|
|
: '311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'
|
|
|
|
|
|
}}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="phone" v-if="characters == 1">周先生 +65 9422 2858</div>
|
|
|
|
|
|
<div class="phone" v-if="characters != 1">Chow +65 9422 2858</div>
|
|
|
|
|
|
<div class="site">
|
|
|
|
|
|
{{ characters == 1 ? '新加坡北桥路111号,半岛广场07-11号,邮编179098' : '111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098' }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rqCodeTiemBox">
|
|
|
|
|
|
<div class="rqCodeTiem">
|
|
|
|
|
|
<div class="rqcode">
|
|
|
|
|
|
<img src="../../assets/img/wechat.png" alt />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rqtext">Wechat</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rqCodeTiem1">
|
|
|
|
|
|
<div class="rqcode">
|
|
|
|
|
|
<img src="../../assets/img/tiktok.png" alt />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="rqtext">Tiktok</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tailText">
|
|
|
|
|
|
<!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 -->
|
|
|
|
|
|
© 2021 Copyright 北京邃芒科技有限公司 版权所有
|
|
|
|
|
|
<a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { mapState } from 'vuex';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
userName: '',
|
|
|
|
|
|
phone: '',
|
|
|
|
|
|
email: ''
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
submit() {
|
|
|
|
|
|
let phone = /^1[35789]\d{9}$/;
|
|
|
|
|
|
if (this.userName == '') {
|
|
|
|
|
|
this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name');
|
|
|
|
|
|
return;
|
|
|
|
|
|
} else if (!phone.test(this.phone)) {
|
|
|
|
|
|
this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number');
|
|
|
|
|
|
return;
|
|
|
|
|
|
} else if (this.email == '') {
|
|
|
|
|
|
this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
mallName: this.email, //邮箱
|
|
|
|
|
|
applicant: this.userName, //姓名
|
|
|
|
|
|
phone: this.phone //电话
|
|
|
|
|
|
};
|
|
|
|
|
|
this.$axios({
|
|
|
|
|
|
method: 'post',
|
|
|
|
|
|
url: '/api/callback/wxMallApply/add',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json;charset=UTF-8'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: params
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
this.email = '';
|
|
|
|
|
|
this.userName = '';
|
|
|
|
|
|
this.phone = '';
|
|
|
|
|
|
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully');
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(err => {
|
|
|
|
|
|
this.$message.error(err.message);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
...mapState({
|
|
|
|
|
|
characters: state => state.publicObj.characters
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.tailBox {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
height: 578px;
|
|
|
|
|
|
background: #f1f4f7;
|
|
|
|
|
|
padding-bottom: 54px;
|
|
|
|
|
|
|
|
|
|
|
|
.taillong {
|
|
|
|
|
|
width: 168px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
margin-top: 60px;
|
|
|
|
|
|
margin-left: 360px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 168px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.tiemBox {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.taolIconBox {
|
|
|
|
|
|
margin-left: 380px;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.taolIconText {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: Inter;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #323232;
|
|
|
|
|
|
line-height: 62px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.iconBox {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
width: 124px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 24px;
|
|
|
|
|
|
height: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.contentBox {
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// margin-top: 120px;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
margin-left: 260px;
|
|
|
|
|
|
.contentInput {
|
|
|
|
|
|
width: 286px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
// background: #ffffff;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 11px;
|
|
|
|
|
|
input {
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
}
|
|
|
|
|
|
input::placeholder {
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #949494;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.subBtn {
|
|
|
|
|
|
width: 140px;
|
|
|
|
|
|
height: 48px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 24px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: #16e9d6;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.rqCodeBox {
|
|
|
|
|
|
width: 360px;
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// top: 130px;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
margin-left: 260px;
|
|
|
|
|
|
.phone {
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: Inter;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #191919;
|
|
|
|
|
|
}
|
|
|
|
|
|
.site {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #191919;
|
|
|
|
|
|
// margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.rqCodeTiemBox {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
.rqCodeTiem {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
.rqcode {
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 150px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.rqtext {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-family: Inter;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #172c34;
|
|
|
|
|
|
line-height: 62px;
|
|
|
|
|
|
height: 62px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.rqCodeTiem1 {
|
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
|
.rqcode {
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 150px;
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.rqtext {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-family: Inter;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #172c34;
|
|
|
|
|
|
line-height: 62px;
|
|
|
|
|
|
height: 62px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.showBoxP {
|
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
|
line-height: 20px !important;
|
|
|
|
|
|
color: #696969 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.tailText {
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// width: 100%;
|
|
|
|
|
|
// bottom: 6%;
|
|
|
|
|
|
margin-top: 80px;
|
|
|
|
|
|
// left: 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #191919;
|
|
|
|
|
|
line-height: 62px;
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
|
a {
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
a:hover,
|
|
|
|
|
|
a:visited,
|
|
|
|
|
|
a:link,
|
|
|
|
|
|
a:active {
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
// 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
::-webkit-input-placeholder {
|
|
|
|
|
|
/* WebKit browsers,webkit内核浏览器 */
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
:-moz-placeholder {
|
|
|
|
|
|
/* Mozilla Firefox 4 to 18 */
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
::-moz-placeholder {
|
|
|
|
|
|
/* Mozilla Firefox 19+ */
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
:-ms-input-placeholder {
|
|
|
|
|
|
/* Internet Explorer 10+ */
|
|
|
|
|
|
color: #ccc;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.el-input.is-active .el-input__inner,
|
|
|
|
|
|
.el-input__inner:focus {
|
|
|
|
|
|
border-color: #16e9d6;
|
|
|
|
|
|
outline: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|