《课次36：前端样式修改》学习笔记

一、任务清单

1. 修改 Home.vue 样式：调整首页头部和新闻卡片的样式。
2. 发布页面标题居中：让 Publish.vue 的标题居中显示。
3. 重写注册页面：使 Register.vue 的风格与登录页面统一。

二、操作步骤

步骤1：修改 Home.vue 中的 header 样式

替换 Home.vue 中的 template 代码为以下结构：

<!-- 微头条首页 -->
<!-- 欢迎，{{ userStore.username }} -->
<!-- + 发布微头条 退出登录 -->
<!-- 暂无新闻，快去发布一条吧 -->
<!-- {{ item.title }} -->
<!-- {{ item.time }} -->
<!-- {{ item.content }} -->
<!-- 查看详情 删除 点赞 {{ item.likes }} -->

同时将 Home.vue 中的 style 样式代码替换为教程提供的样式内容。

步骤2：让发布页面的标题居中

打开 Publish.vue，在 style 样式标签中添加如下 CSS：

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

步骤3：重写注册页面 Register.vue

将 Register.vue 的整体代码替换为以下结构：

<!-- 微头条注册 -->
<!-- 注册 -->
<!-- 已有账号？去登录 -->

三、笔记总结

步骤	核心内容
Home.vue	替换 template 和 style 代码，优化首页头部和新闻卡片样式
Publish.vue	添加 CSS 使 .publish-container h2 标题居中
Register.vue	整体代码替换，使注册页面风格与登录页面统一

本课次主要进行前端样式优化，让页面布局更美观、风格更统一，不涉及后端逻辑修改。