前端样式修改

前端样式修改

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>