更新样式和功能：添加背景图、打字机效果，优化留言板和吐槽区布局

src/views/messageboard.vue

@@ -1,29 +1,36 @@
 <template>
-    <div id="messahe_all">
-        <div id="allstyle">
-            <div class="header">
-                <h1>留言板</h1>
-            </div>
+    <div id="message_all">
+        <!-- 上：标题区 -->
+        <div class="message-header">
+            <h1>留言板</h1>
         </div>
-        <div id="allstyle" class="botom">
-            <h1>发送评论(请正确填写邮箱地址，否则将会当成垃圾评论处理)</h1>
-            <el-form :model="form">
-                <!-- 输入框 -->
-                <el-form-item >
-                    <el-input v-model="form" placeholder="评论内容" type="textarea" />
+        <!-- 中：留言内容区 -->
+        <div class="message-list">
+            <div class="message-item" v-for="msg in messages" :key="msg.id">
+                <div class="message-nickname">{{ msg.nickname }}</div>
+                <div class="message-content">{{ msg.content }}</div>
+                <div class="message-time">{{ msg.time }}</div>
+            </div>
+            <div v-if="messages.length === 0" class="message-empty">还没有留言，快来抢沙发吧！</div>
+        </div>
+        <!-- 下：留言输入区 -->
+        <div class="message-form-section">
+            <h2>发送评论（请正确填写邮箱地址，否则将会当成垃圾评论处理）</h2>
+            <el-form :model="form" label-width="0">
+                <el-form-item>
+                    <el-input v-model="form.content" placeholder="评论内容" type="textarea" rows="4" clearable />
                 </el-form-item>
-                <div class="botom_form_input">
-                    <el-form-item >
-                        <el-input v-model="form" placeholder="昵称" clearable />
+                <div class="form-input-row">
+                    <el-form-item>
+                        <el-input v-model="form.nickname" placeholder="昵称" clearable />
                     </el-form-item>
-                    <el-form-item >
-                        <el-input v-model="form" placeholder="邮箱/QQ号" clearable />
+                    <el-form-item>
+                        <el-input v-model="form.email" placeholder="邮箱/QQ号" clearable />
                     </el-form-item>
-                    <el-form-item >
-                        <el-input v-model="form" placeholder="验证码" clearable />
+                    <el-form-item>
+                        <el-input v-model="form.captcha" placeholder="验证码" clearable />
                     </el-form-item>
                 </div>
-                <!-- 按钮 -->
                 <el-form-item>
                     <el-button type="primary" @click="onSubmit">发送</el-button>
                 </el-form-item>
@@ -31,43 +38,128 @@
         </div>
     </div>
 </template>
-<script>
-import { reactive } from 'vue'
 
-// do not use same name with ref
+<script setup>
+import { reactive, ref } from 'vue'
+
+const messages = ref([
+    { id: 1, nickname: 'A', content: '这里是A！', time: '2025-09-26 10:00' },
+    { id: 2, nickname: 'B', content: '这里是B！', time: '2025-09-26 10:05' },
+    { id: 3, nickname: 'C', content: '这里是C！', time: '2025-09-26 10:10' }
+])
+
 const form = reactive({
-    name: '',
-    region: '',
-    type: [],
-    resource: '',
-    desc: '',
+    content: '',
+    nickname: '',
+    email: '',
+    captcha: ''
 })
 
 const onSubmit = () => {
-    console.log('submit!')
+    if (!form.content || !form.nickname) return
+    messages.value.push({
+        id: messages.value.length + 1,
+        nickname: form.nickname,
+        content: form.content,
+        time: new Date().toLocaleString()
+    })
 }
-
 </script>
-<style>
-.botom{
-    padding: 20px;
+
+<style scoped>
+#message_all {
+    width: var(--content-width);
+    margin: var(--content-margin);
 }
 
-#allstyle.botom{
-    margin-top: 10px;
+.message-header {
+    background: rgba(102, 161, 216, 0.9);
+    border-radius: 12px;
+    padding: 20px 0;
+    text-align: center;
+    margin-bottom: 20px;
 }
 
-.botom_form_input{
+.message-list {
+    margin-bottom: 24px;
+    background: #f8fafd;
+    border-radius: 12px;
+    padding: 16px;
+    min-height: 120px;
+}
+
+.message-item {
+    background: #fff;
+    border-radius: 10px;
+    padding: 14px 18px;
+    margin-bottom: 12px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+}
+
+.message-nickname {
+    font-weight: bold;
+    color: #409eff;
+    margin-bottom: 4px;
+}
+
+.message-content {
+    margin-bottom: 4px;
+    color: #333;
+}
+
+.message-time {
+    font-size: 12px;
+    color: #aaa;
+    text-align: right;
+}
+
+.message-empty {
+    color: #bbb;
+    text-align: center;
+    padding: 32px 0;
+}
+
+.message-form-section {
+    background: #fff;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.message-form-section h2 {
+    font-size: 1.1rem;
+    margin-bottom: 18px;
+    color: #333;
+}
+
+.form-input-row {
     display: flex;
+    gap: 16px;
+    margin-bottom: 12px;
 }
-.botom_form_input .el-form-item{
-    width: 30%;
-    display: block;
+
+.form-input-row .el-form-item {
+    flex: 1;
 }
-.botom_form_input .el-form-item:nth-child(2){
-    margin: 0 2.5%;
+
+.el-form-item .el-input__inner,
+.el-form-item .el-textarea__inner {
+    min-height: 45px;
+    font-size: 1rem;
 }
-.botom_form_input .el-form-item .el-input__inner  {
-    height: 45px;
+
+@media (max-width: 768px) {
+    #message_all {
+        padding: 8px 0;
+    }
+
+    .message-form-section {
+        padding: 12px;
+    }
+
+    .form-input-row {
+        flex-direction: column;
+        gap: 8px;
+    }
 }
 </style>