前端样式修改

• 前端样式修改

  1. Home.vue中的heard样式修改

  • Home.vue中的template代码替换为如下内容：

    <!-- src/views/Home.vue -->
    <template>
        <div class="home-container">
            <!-- 固定头部（新布局） -->
            <div class="header">
                <h2 class="title">微头条首页</h2>
                <div class="welcome">欢迎，{{ userStore.username }}</div>
                <div class="actions">
                    <button class="publish-btn" @click="goToPublish">+ 发布微头条</button>
                    <button class="logout-btn" @click="logout">退出登录</button>
                </div>
            </div>
    
            <!-- 可滚动的内容区域（新闻列表 + 分页） -->
            <div class="scroll-area">
                <div class="content-wrapper">
                    <!-- 新闻列表 -->
                    <div class="news-list">
                        <div v-if="newsList.length === 0" class="empty">
                            暂无新闻，快去发布一条吧
                        </div>
                        <div v-for="item in newsList" :key="item.id" class="news-item">
                            <h3>{{ item.title }}</h3>
                            <div class="time">{{ item.time }}</div>
                            <div class="content">{{ item.content }}</div>
                            <div class="actions">
                                <button @click="homeViewDetail(item.id)">🔍 查看详情</button>
                                <button @click="homeDeleteNews(item.id)">🗑️ 删除</button>
                                <button @click="homeLikeNews(item.id, item.likes)">👍 点赞 {{ item.likes }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <!-- 分页组件 -->
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
                    @current-change="loadNews" layout="prev, pager, next" />
            </div>
        </div>
    </template>
    

  • Home.vue中的style样式代码替换为如下内容：

    <style scoped>
    /* 整体容器 */
    .home-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: #f5f5f5;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    /* ===== 头部新布局 ===== */
    .header {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border-bottom: 1px solid #e8e8e8;
    }
    
    .header .title {
        margin: 0;
        color: #333;
        font-size: 20px;
        font-weight: 600;
    }
    
    /* 欢迎信息 – 居中显示，普通文本 */
    .header .welcome {
        font-size: 16px;
        color: #555;
        /* 使用 flex:1 让它在剩余空间中居中 */
        flex: 1;
        text-align: center;
    }
    
    /* 右侧操作按钮组 */
    .header .actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    /* 统一按钮基础样式 */
    .header .actions button {
        padding: 6px 18px;
        border: none;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.3s, transform 0.1s;
    }
    
    .header .actions button:hover {
        transform: scale(1.02);
    }
    
    /* 发布按钮 – 蓝色 */
    .header .actions .publish-btn {
        background: #1890ff;
        color: white;
    }
    
    .header .actions .publish-btn:hover {
        background: #0c7bdf;
    }
    
    /* 退出按钮 – 红色 */
    .header .actions .logout-btn {
        background: #ff4d4f;
        color: white;
    }
    
    .header .actions .logout-btn:hover {
        background: #ff7875;
    }
    
    /* ===== 滚动区域 ===== */
    .scroll-area {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }
    
    .content-wrapper {
        max-width: 800px;
        margin: 0 auto;
    }
    
    /* ===== 新闻列表 ===== */
    .news-list {
        margin-top: 0;
    }
    
    .news-item {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .news-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .news-item h3 {
        margin: 0 0 8px 0;
        color: #333;
    }
    
    .time {
        font-size: 12px;
        color: #999;
        margin-bottom: 12px;
    }
    
    .content {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    .actions button {
        margin-right: 10px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background 0.2s;
    }
    
    .actions button:first-child {
        color: #1890ff;
    }
    
    .actions button:nth-child(2) {
        color: #ff4d4f;
    }
    
    .actions button:last-child {
        color: #52c41a;
    }
    
    .actions button:hover {
        background: rgba(0, 0, 0, 0.04);
    }
    
    .empty {
        text-align: center;
        color: #999;
        padding: 40px;
    }
    
    /* 分页容器 */
    .pagination-wrapper {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        padding: 16px 0 20px 0;
        background: #f5f5f5;
    }
    </style>
    

  2. 让发布页面的发布微头条标题居中

  • 打开Publish.vue,在style样式标签中添加如下css

    .publish-container h2 {
        margin-bottom: 20px;
        text-align: center;
    }
    

  3. 重写注册页面Register.vue，使其风格与登录页面统一

  整体代码替换为如下：

  <template>
      <div class="register-page">
          <div class="register-card">
              <h2>微头条注册</h2>
  
              <el-form :model="form" :rules="rules" ref="formRef" @keyup.enter="handleRegister">
                  <el-form-item prop="username">
                      <el-input v-model="form.username" placeholder="用户名" clearable />
                  </el-form-item>
                  <el-form-item prop="password">
                      <el-input v-model="form.password" type="password" placeholder="密码" clearable show-password />
                  </el-form-item>
                  <el-form-item prop="confirmPassword">
                      <el-input v-model="form.confirmPassword" type="password" placeholder="确认密码" clearable
                          show-password />
                  </el-form-item>
  
                  <el-form-item>
                      <el-button type="primary" @click="handleRegister" :loading="loading" class="register-btn">
                          注册
                      </el-button>
                  </el-form-item>
              </el-form>
  
              <div class="login-link">
                  <router-link to="/login">已有账号？去登录</router-link>
              </div>
          </div>
      </div>
  </template>
  
  <script setup>
  import { reactive, ref, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { register } from '../api/user'
  import { ElMessage } from 'element-plus'
  
  const form = reactive({
      username: '',
      password: '',
      confirmPassword: ''
  })
  
  const rules = {
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
              validator: (rule, value, callback) => {
                  if (value !== form.password) {
                      callback(new Error('两次输入密码不一致'))
                  } else {
                      callback()
                  }
              },
              trigger: 'blur'
          }
      ]
  }
  
  const router = useRouter()
  const formRef = ref(null)
  const loading = ref(false)
  
  const handleRegister = async () => {
      if (!formRef.value) return
      if (loading.value) return
  
      try {
          await formRef.value.validate()
          loading.value = true
          const res = await register({
              username: form.username,
              password: form.password
          })
          if (res.code === 200) {
              ElMessage.success('注册成功，请登录')
              router.push('/login')
          } else {
              ElMessage.error(res.message || '注册失败')
          }
      } catch (error) {
          if (error?.response?.data?.message) {
              ElMessage.error(error.response.data.message)
          } else if (error !== false) {
              ElMessage.error('请求失败，请检查网络')
          }
      } finally {
          loading.value = false
      }
  }
  
  onMounted(() => {
      document.body.style.overflow = 'hidden'
  })
  
  onUnmounted(() => {
      document.body.style.overflow = ''
  })
  </script>
  
  <style scoped>
  /* ===== 页面背景（与登录一致） ===== */
  .register-page {
      height: 100vh;
      width: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  /* ===== 卡片样式（完全复制登录页 .login-card） ===== */
  .register-card {
      width: 360px;
      /* 与登录卡片宽度一致 */
      background: white;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  .register-card h2 {
      text-align: center;
      margin-bottom: 24px;
      color: #333;
  }
  
  /* ===== 覆盖 Element Plus 输入框样式，使其与原生 input 完全一致 ===== */
  :deep(.el-input__wrapper) {
      padding: 0 12px;
      height: 40px; /* 与登录输入框高度一致（padding 12px + font-size 14px ≈ 40px） */
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: none !important;
      transition: border-color 0.2s;
  }
  
  :deep(.el-input__wrapper:hover) {
      box-shadow: none !important;
  }
  
  :deep(.el-input__wrapper.is-focus) {
      border-color: #667eea;
      box-shadow: none !important;
  }
  
  :deep(.el-input__inner) {
      height: 100%;
      line-height: 40px; /* 垂直居中 */
      font-size: 14px;
  }
  
  /* 表单每个输入框下方间距（与登录一致） */
  :deep(.el-form-item) {
      margin-bottom: 16px;
  }
  
  /* ===== 覆盖 El-Button 样式，使其与登录按钮一致 ===== */
  .register-btn {
      width: 100%;
      padding: 12px !important;
      height: 40px; /* 与输入框高度对齐 */
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      background-color: #667eea !important;
      color: white !important;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .register-btn:hover {
      background-color: #5a67d8 !important;
  }
  
  /* ===== 登录链接样式（与登录页一致） ===== */
  .login-link {
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      color: #666;
  }
  
  .login-link a {
      color: #667eea;
      text-decoration: none;
  }
  
  .login-link a:hover {
      text-decoration: underline;
  }
  </style>