<template>
|
<div class="content">
|
<div>
|
<h1 style="margin-left: 1%; font-size: 22px">在线留言</h1>
|
<div style="width: 100%; background: #eee; padding: 15px; font-size: 14px">
|
请在此留下您的问题，我们将及时与您取得联系，谢谢您的留言！
|
</div>
|
</div>
|
<div style="margin-top: 10px">
|
<el-form :model="formInline" label-width="100px">
|
<el-row :gutter="30">
|
<el-col :span="8">
|
<el-form-item label="联系人：">
|
<el-input label="large" v-model="formInline.user" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="联系电话：">
|
<el-input label="large" v-model="formInline.phone" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="电子邮箱：">
|
<el-input v-model="formInline.email" label="large" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<div>
|
<el-form-item label="留言内容：">
|
<el-input v-model="formInline.date" label="large" type="textarea" style="width: 100%" />
|
</el-form-item>
|
</div>
|
<div style="text-align: center; margin-bottom: 50px">
|
<el-button type="info" @click="onSubmit">提交内容</el-button>
|
<el-button type="info" @click="resetForm">重新填写</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive } from 'vue'
|
import { ElMessage } from 'element-plus'
|
const formInline = reactive({
|
user: '',
|
phone: '',
|
email: '',
|
date: ''
|
})
|
|
const onSubmit = () => {
|
ElMessage({
|
message: '提交成功！',
|
type: 'success'
|
})
|
}
|
const resetForm = () => {
|
formInline.user = ''
|
formInline.email = ''
|
formInline.phone = ''
|
formInline.date = ''
|
}
|
</script>
|
|
<style scoped>
|
.content {
|
margin-top: 50px;
|
width: 1270px;
|
margin: 0 auto;
|
}
|
h1 {
|
margin-top: 20px;
|
margin-bottom: 10px;
|
}
|
</style>
|
