weilaizhixing_official_website/src/views/About/ContactUs/Index.vue
2024-11-29 17:06:26 +08:00

384 lines
8.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="part-building">
<div style="height:104rem;"></div>
<div class="screen1">
<img
:src="screen1.bannerUrl"
alt=""
style="width:100%;"
/>
</div>
<div class="screen2">
<div class="wrapper1680">
<div class="lineTtile">
{{ screen2.title }}
</div>
<div class="lineTime">
{{ screen2.lineTime }}
</div>
<div class="lineNumber">
{{ screen2.lineNumber }}
</div>
<div class="list-wrapper">
<div
v-for="(item, index) in contacts"
:key="'itemkey' + index"
class="list-item"
>
<el-row>
<el-col
:span="8"
class="imgCol"
>
<div class="list-img">
<img
:src="item.src"
alt=""
>
</div>
</el-col>
<el-col
:span="16"
class="listContent"
>
<div class="list-title">
{{ item.title }}
</div>
<div class="list-value">
{{ item.value }}
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
<div class="screen3">
<div class="wrapper1680">
<div class="formContent">
<div class="formBarContent">
<div class="formBar"></div>
<div class="formTitle">
留言反馈
</div>
</div>
<el-form
:model="form"
label-width="110rem"
style="margin-top: 40rem"
>
<div class="formBarContent">
<el-row>
<el-col :span="10">
<el-form-item label="标题">
<el-input v-model="form.title" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="反馈人">
<el-input v-model="form.feedbackPerson" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式">
<el-input v-model="form.contactWay" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="反馈内容">
<el-input
v-model="form.feedbackContent"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
</el-form-item>
<el-form-item label="">
<div class="formRemark">
我们敬重每一位反馈人的留言,如您对我们有任何想法、要求或建议,敬请留言,我们会在第一时间受理并向您表示衷心的感谢。
</div>
</el-form-item>
</div>
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
<el-button class="subBtn">
提交
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
<FootBar theme="dark"></FootBar>
</div>
</template>
<script>
import { mapState } from 'vuex';
import FootBar from '@/components/FootBar.vue';
export default {
components: {
FootBar,
},
data () {
return {
screen1: {
bannerUrl: '',
},
screen2: {
title: '服务热线',
lineNumber: '400-001-6725',
lineTime: '服务时间周一至周五AM 09:00-12:00 PM 01:00-06:00',
},
contacts: [
{ title: '公司网址', value: 'www.Fshg.cc', src: '/static/img/contactUs/website.png' },
{ title: '公司邮箱', value: 'Info@Fshg.cc', src: '/static/img/contactUs/email.png' },
{ title: '公众号', value: 'FutureStarHolding', src: '/static/img/contactUs/publicAccount.png' },
{ title: '公司地址', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
],
form: {
title: '',
feedbackPerson: '',
contactWay: '',
feedbackContent: '',
},
};
},
computed: {
...mapState({
scrollTop: state => state.scroll.scrollTop,
webScale: state => state.web.scale,
}),
},
created () {
this.$event.$emit('nav-theme', 'light');
this.getScreen1Banner();
},
methods: {
async getScreen1Banner () {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 1, captionName: '联系我们/banner' } },
);
this.screen1.bannerUrl = res.rows[0].imageurl;
} catch (error) {}
},
},
};
</script>
<style scoped>
.part-building {
width: 100%;
}
.screen2 {
padding: 80rem 0;
height: 580rem;
box-sizing: border-box;
background: #FFFFFF;
}
.screen2 .lineTtile {
width: 100%;
text-align: center;
font-family: MicrosoftYaHeiSemibold;
font-weight: 400;
font-size: 28rem;
color: #111111;
line-height: 64rem;
}
.screen2 .lineTime {
width: 100%;
text-align: center;
font-family: MicrosoftYaHeiLight;
font-size: 20rem;
color: #8B8A8A;
line-height: 20rem;
margin-bottom: 55rem;
}
.screen2 .lineNumber {
width: 100%;
text-align: center;
font-family: Impact;
font-size: 44rem;
color: #111111;
line-height: 44rem;
font-style: normal;
text-transform: none;
letter-spacing:2.8rem;
}
.screen2 .wrapper1680 {
height: 100%;
position: relative;
}
.screen2 .list-wrapper {
position: absolute;
top: 280rem;
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0rem;
box-sizing: border-box;
}
.screen2 .list-item {
width: 375rem;
height: 120rem;
border: 1rem solid #C7C7C7;
background: #ffffff;
margin: 0 20rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.screen2 .imgCol {
padding: 30rem 30rem 30rem 60rem;
}
.screen2 .list-img {
width: 50rem;
height: 50rem;
}
.screen2 .listContent {
padding-right: 50rem;
}
.screen2 .list-title {
margin-top: 18rem;
font-family: MicrosoftYaHeiSemibold;
font-size: 18rem;
color: #000000;
line-height: 40rem;
text-align: left;
font-style: normal;
text-transform: none;
}
.screen2 .list-value {
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #545454;
line-height: 22rem;
text-align: left;
font-style: normal;
text-transform: none;
}
.screen3 {
padding: 80rem 120rem;
background: #F5F5F7;
}
.screen3 .wrapper1680 {
height: 478rem;
background: #FFFFFF;
border-radius: 10rem 10rem 10rem 10rem;
}
.el-form-item {
margin-bottom: 22rem !important;
}
/deep/.el-form-item__label {
font-size: 14rem;
line-height: 40rem;
padding: 0 12rem 0 0;
}
/deep/.el-form-item__content {
line-height: 40rem;
font-size: 14rem;
}
/deep/.el-input {
font-size: 14rem;
}
/deep/.el-input__inner {
border-radius: 4rem;
border: 1rem solid #DCDFE6;
height: 40rem;
line-height: 40rem;
padding: 0 15rem;
}
/deep/.el-checkbox {
font-size: 14rem;
margin-right: 30rem;
}
/deep/.el-checkbox__inner {
border: 1rem solid #DCDFE6;
border-radius: 2rem;
width: 14rem;
height: 14rem;
}
/deep/.el-checkbox__label {
padding-left: 10rem;
line-height: 19rem;
font-size: 14rem;
}
/deep/.el-textarea {
font-size: 14rem;
}
/deep/.el-textarea__inner {
padding: 5rem 15rem;
border: 1rem solid #DCDFE6;
border-radius: 4rem;
height: 138rem !important;
min-height: 138rem !important;
}
/deep/.el-upload-list__item {
font-size: 14rem;
margin-top: 5rem;
border-radius: 4rem;
}
/deep/.el-button--small {
padding: 9rem 15rem;
font-size: 12rem;
border-radius: 3rem;
}
/deep/.el-upload-list{
display: inline-flex;
}
/deep/.el-upload-list__item-name {
margin-right: 40rem;
padding-left: 4rem;
}
/deep/.el-upload-list__item-status-label {
right: 5rem;
}
.formContent {
padding: 20rem 0rem;
}
.formBarContent {
padding: 0rem 30rem;
}
.formBar {
display: inline-block;
width: 4rem;
height: 20rem;
background: #014DB5;
}
.formTitle {
display: inline-block;
padding-left: 10rem;
font-family: MicrosoftYaHeiSemibold;
font-size: 24rem;
color: #014DB5;
line-height: 64rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
}
.formRemark {
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #BBBBBB;
line-height: 18rem;
text-align: left;
font-style: normal;
text-transform: none;
}
.subBtn {
width: 140rem;
height: 50rem;
background: #014DB5;
border-radius: 4rem;
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
padding: 12rem 20rem;
}
</style>