240 lines
7.3 KiB
Vue
240 lines
7.3 KiB
Vue
|
<template>
|
|||
|
|
<!-- 联系我们 -->
|
|||
|
|
<div class="content">
|
|||
|
|
<BannerTop :options="bannerTopOptions"/>
|
|||
|
|
|
|||
|
|
<section class="container mt-5 mb-5">
|
|||
|
|
<div class="form-container box_shadow w-75 m-auto">
|
|||
|
|
<article class="header">
|
|||
|
|
<div class="title d-flex align-items-center">
|
|||
|
|
<h2 class="d-none d-md-block">{{ $t('feedback.feedback') }}</h2>
|
|||
|
|
<b-img class="mr-4" src="~assets/image/backGroundImg/contact-us-logo.png" fluid :alt="$t('index.corporateName')"></b-img>
|
|||
|
|
</div>
|
|||
|
|
<p class="row mt-3">
|
|||
|
|
<label class="col-6 col-md-3">{{ $t('contactUs.contactUs') }}：{{ $t('contactUs.contacts') }}</label>
|
|||
|
|
<label class="col-6">{{ $t('common.tel') }}：+86-531-6998513</label>
|
|||
|
|
</p>
|
|||
|
|
<p class="row">
|
|||
|
|
<label class="col-12">{{ $t('common.addressLabel') }}：{{ $t('contactUs.address') }}</label>
|
|||
|
|
</p>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<main class="form-box">
|
|||
|
|
<ul class="way row pl-0 justify-content-center ">
|
|||
|
|
<li class="col-4 text-center">
|
|||
|
|
<b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.Mob/Whatsapp/Wechat')"></b-img>
|
|||
|
|
<h5>{{ $t('common.Mob/Whatsapp/Wechat') }}</h5>
|
|||
|
|
<p>008618253112969</p>
|
|||
|
|
</li>
|
|||
|
|
<li class="col-4 text-center">
|
|||
|
|
<b-img class="mb-2" src="~assets/image//icon/fax.png" fluid :alt="$t('common.fax')"></b-img>
|
|||
|
|
<h5>{{ $t('common.fax') }}</h5>
|
|||
|
|
<p>+86-531-69885133</p>
|
|||
|
|
</li>
|
|||
|
|
<li class="col-4 text-center">
|
|||
|
|
<b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.E-mail')"></b-img>
|
|||
|
|
<h5>{{ $t('common.E-mail') }}</h5>
|
|||
|
|
<p>alicesales@scdtrailer.com</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<b-form @submit="onSubmit">
|
|||
|
|
<b-form-group
|
|||
|
|
id="input-name"
|
|||
|
|
label-for="input-name"
|
|||
|
|
:invalid-feedback="$t('contactUs.name')"
|
|||
|
|
>
|
|||
|
|
<template v-solt:lable>
|
|||
|
|
<div class="mb-2 d-flex align-items-center">
|
|||
|
|
<b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
|
|||
|
|
<h6 class="label-text">{{ $t('contactUs.name') }}</h6>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<b-form-input
|
|||
|
|
id="input-name"
|
|||
|
|
v-model="dataForm.name"
|
|||
|
|
required
|
|||
|
|
>
|
|||
|
|
</b-form-input>
|
|||
|
|
</b-form-group>
|
|||
|
|
|
|||
|
|
<b-form-group
|
|||
|
|
id="input-mail"
|
|||
|
|
label-for="input-mail"
|
|||
|
|
:invalid-feedback="$t('contactUs.mail')"
|
|||
|
|
>
|
|||
|
|
<template v-solt:lable>
|
|||
|
|
<div class="mb-2 d-flex align-items-center">
|
|||
|
|
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
|
|||
|
|
<h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<b-form-input
|
|||
|
|
id="input-mail"
|
|||
|
|
type="email"
|
|||
|
|
v-model="dataForm.email"
|
|||
|
|
required
|
|||
|
|
>
|
|||
|
|
</b-form-input>
|
|||
|
|
</b-form-group>
|
|||
|
|
|
|||
|
|
<b-form-group
|
|||
|
|
id="input-contactWay"
|
|||
|
|
label-for="input-contactWay"
|
|||
|
|
:invalid-feedback="$t('contactUs.contactWay')"
|
|||
|
|
>
|
|||
|
|
<template v-solt:lable>
|
|||
|
|
<div class="mb-2 d-flex align-items-center">
|
|||
|
|
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
|
|||
|
|
<h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<b-form-input
|
|||
|
|
id="input-contactWay"
|
|||
|
|
v-model="dataForm.phone"
|
|||
|
|
required
|
|||
|
|
>
|
|||
|
|
</b-form-input>
|
|||
|
|
</b-form-group>
|
|||
|
|
|
|||
|
|
<b-form-group
|
|||
|
|
id="input-desc"
|
|||
|
|
label-for="input-desc"
|
|||
|
|
:invalid-feedback="$t('contactUs.desc')"
|
|||
|
|
>
|
|||
|
|
<template v-solt:lable>
|
|||
|
|
<div class="mb-2 d-flex align-items-center">
|
|||
|
|
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
|
|||
|
|
<h6 class="label-text">{{ $t('contactUs.desc') }}</h6>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<b-form-textarea
|
|||
|
|
id="input-desc"
|
|||
|
|
v-model="dataForm.message"
|
|||
|
|
rows="3"
|
|||
|
|
>
|
|||
|
|
</b-form-textarea>
|
|||
|
|
</b-form-group>
|
|||
|
|
|
|||
|
|
<div class="text-center">
|
|||
|
|
<b-button class="w-25" type="submit" variant="primary" pill>
|
|||
|
|
{{ $t('common.submit') }}
|
|||
|
|
</b-button>
|
|||
|
|
</div>
|
|||
|
|
</b-form>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'feedback',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bannerTopOptions: {
|
|||
|
|
title: this.$t('feedback.feedback'),
|
|||
|
|
subTitle: this.$t('feedback.way'),
|
|||
|
|
img: require('../assets/image/banner/aboutus-banner.png')
|
|||
|
|
},
|
|||
|
|
dataForm: {
|
|||
|
|
name: '',
|
|||
|
|
email: '',
|
|||
|
|
phone: '',
|
|||
|
|
message: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onSubmit(e) {
|
|||
|
|
e.preventDefault()
|
|||
|
|
console.log(this.dataForm);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.form-container {
|
|||
|
|
height: min-content;
|
|||
|
|
border-radius: 2.125rem;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
|
|||
|
|
.header {
|
|||
|
|
width: 100%;
|
|||
|
|
height: min-content;
|
|||
|
|
background: url('~assets/image/backGroundImg/contact-us-form-bg.png') no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.title {
|
|||
|
|
margin-top: 2.5625rem;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
h2 {
|
|||
|
|
padding: .6875rem 2.75rem .6875rem 1.625rem;
|
|||
|
|
color: #fff;
|
|||
|
|
background: rgba(255,255,255,0.44);
|
|||
|
|
border-radius: 0px 3.125rem 3.125rem 0px;
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
font-family: 'SourceHanSansCN-Heavy';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
padding-left: 1.875rem;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: .875rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.form-box {
|
|||
|
|
padding: 2.25rem 5.375rem;
|
|||
|
|
.way {
|
|||
|
|
h5 {
|
|||
|
|
color: #80818a;
|
|||
|
|
font-size: .875rem;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
color: #2b2b2b;
|
|||
|
|
font-size: .875rem;
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.label-text {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
color: #2b2b2b;
|
|||
|
|
font-size: .875rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-img {
|
|||
|
|
margin-top: -5.625rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 特殊样式小屏幕处理
|
|||
|
|
@media screen and (max-width:400px) {
|
|||
|
|
.form-container {
|
|||
|
|
width: 100% !important;
|
|||
|
|
.header {
|
|||
|
|
.title {
|
|||
|
|
margin-top: .625rem;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.form-box {
|
|||
|
|
padding: 1.25rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer-img {
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|