<template>
      <div class="contactContent">
                <div class="main">
                    <div class="usTitle">
                        <h2>Contact Us</h2>
                    </div>
                    <!-- 表单 -->
                    <div class="formMenu">
                       
                        <el-form :model="form" :rules="rules" ref="contactForm" label-width="120px">
                            <div>
                              
                                <el-input v-model="form.name" placeholder="Name"></el-input>
                            </div>
                            <div>
                                <el-input v-model="form.businessName" placeholder="Business Name"></el-input>
                            </div>
                            <div>
                                <el-input v-model="form.mobile" placeholder="Mobile"></el-input>
                            </div>
                            <div>
                                <el-input v-model="form.email" placeholder="Email"></el-input>
                            </div>
                            <div>
                                <el-input v-model="form.message" type="textarea" :rows="6"
                                    placeholder="Message"></el-input>
                            </div>
                            <div>
                                <el-button type="primary" @click="submitForm('contactForm')">Submit</el-button>
                            </div>
                        </el-form>
                    </div>
                    <hr>
                </div>
            </div>
</template>


<script>

    export default {
        name:'IndexContact',
        data() {
            return {
                form: {
                    name: '',
                    businessName: '',
                    mobile: '',
                    email: '',
                    message: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: 'Please enter your name',
                        trigger: 'blur'
                    }],
                    businessName: [{
                        required: true,
                        message: 'Please enter your business name',
                        trigger: 'blur'
                    }],
                    mobile: [{
                        required: true,
                        message: 'Please enter your mobile',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: 'Please enter your email',
                        trigger: 'blur'
                    }],
                    message: [{
                        required: true,
                        message: 'Please enter your message',
                        trigger: 'blur'
                    }]
                }
            }
      
        },
        methods:{
                submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 在这里可以添加表单提交的逻辑,例如发送数据到服务器
                    console.log('Form submitted:', this.form)
                } else {
                    console.log('Error submitting form!')
                    return false
                }
            })
        }
            }
    }
</script>

<style lang="less" scoped>
hr {
    width: 900px;
    border: none;
    height: 2px;
    background: linear-gradient(to right, #00A0E8, #99C938, #FFF436);
}
.contactContent {
    margin: 80px 0;

    .usTitle {
        h2 {
            text-align: center;
            font-size: 44px;
            color: #1a5271;
        }
    }

    .formMenu {
        width: 560px;
        height: auto;
        margin: 0 auto;
        border-radius: 12px;
        margin-bottom: 100px;
        box-shadow: 0px 43px 43px 14px rgba(0, 0, 0, 0.25);

        .el-form {
            padding: 40px;

            .el-input {
                padding-top: 10px;
            }
        }

        /deep/.el-input__inner {
            background-color: #45c7f6 !important;
            padding: 28px 10px;
            border-radius: 12px;

            &::placeholder {
                color: #1a5271;
            }
        }

        .el-textarea {
            padding-top: 10px;
        }

        /* 多行输入框背景色 */
        /deep/.el-textarea__inner {
            background-color: #45c7f6 !important;
            border-radius: 12px;

            &::placeholder {
                color: #1a5271;
            }

        }


        /* button背景色 */
        .el-button {
            background-color: #45c7f6;
            border: #45c7f6;
            margin-top: 20px;
            width: 140px;
            height: 44px;
        }

        .el-button--primary {
            font-size: 18px;
            margin-left: 160px;
            margin-top: 40px;
        }


    }
}
</style>