<template>
    <div id="messahe_all">
        <div id="allstyle">
            <div class="header">
                <h1>留言板</h1>
            </div>
        </div>
        <div id="allstyle" class="botom">
            <h1>发送评论(请正确填写邮箱地址，否则将会当成垃圾评论处理)</h1>
            <el-form :model="form">
                <!-- 输入框 -->
                <el-form-item >
                    <el-input v-model="form" placeholder="评论内容" type="textarea" />
                </el-form-item>
                <div class="botom_form_input">
                    <el-form-item >
                        <el-input v-model="form" placeholder="昵称" clearable />
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="form" placeholder="邮箱/QQ号" clearable />
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="form" placeholder="验证码" clearable />
                    </el-form-item>
                </div>
                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">发送</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}

</script>
<style>
.botom{
    padding: 20px;
}

#allstyle.botom{
    margin-top: 10px;
}

.botom_form_input{
    display: flex;
}
.botom_form_input .el-form-item{
    width: 30%;
    display: block;
}
.botom_form_input .el-form-item:nth-child(2){
    margin: 0 2.5%;
}
.botom_form_input .el-form-item .el-input__inner  {
    height: 45px;
}
</style>