452 lines
11 KiB
Vue
452 lines
11 KiB
Vue
<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
|
||
ref="feekform"
|
||
:model="form"
|
||
:rules="formRules"
|
||
label-width="110rem"
|
||
style="margin-top: 40rem"
|
||
>
|
||
<div class="formBarContent">
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<el-form-item
|
||
label="标题"
|
||
prop="captionName"
|
||
>
|
||
<el-input v-model="form.captionName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item
|
||
label="反馈人"
|
||
prop="userName"
|
||
>
|
||
<el-input v-model="form.userName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item
|
||
label="联系方式"
|
||
prop="phoneNumber"
|
||
>
|
||
<el-input v-model="form.phoneNumber" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item
|
||
label="反馈内容"
|
||
prop="abstracts"
|
||
>
|
||
<el-input
|
||
v-model="form.abstracts"
|
||
: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"
|
||
@click="handleAdd"
|
||
>
|
||
提交
|
||
</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: {
|
||
captionName: '',
|
||
userName: '',
|
||
phoneNumber: '',
|
||
abstracts: '',
|
||
},
|
||
formRules: {
|
||
captionName: [
|
||
{ required: true, message: '请输入标题', trigger: 'blur' },
|
||
],
|
||
userName: [
|
||
{ required: true, message: '请输入联系人', trigger: 'blur' },
|
||
],
|
||
phoneNumber: [
|
||
{ required: true, message: '请输入联系方式', trigger: 'blur' },
|
||
{
|
||
validator: function (rule, value, callback) {
|
||
const reg = /^1[3456789]\d{9}$/;
|
||
const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
||
if (!(reg.test(value) || reg3.test(value))) {
|
||
callback(new Error('请输入手机号、座机号或邮箱'));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
abstracts: [
|
||
{ required: true, message: '请输入反馈内容', trigger: 'blur' },
|
||
],
|
||
},
|
||
};
|
||
},
|
||
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) {}
|
||
},
|
||
handleAdd () {
|
||
try {
|
||
this.$refs["feekform"].validate(valid => {
|
||
if (valid) {
|
||
this.$request.post(
|
||
'/official/message/add',
|
||
this.form,
|
||
).then(res => {
|
||
if(res.code == 200) {
|
||
this.form = {
|
||
captionName: '',
|
||
userName: '',
|
||
phoneNumber: '',
|
||
abstracts: '',
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} 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__error {
|
||
font-size: 12rem;
|
||
padding-top: 4rem;
|
||
}
|
||
/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>
|