first commit

src/views/messageboard.vue

@@ -0,0 +1,73 @@
+<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>