课次36:前端样式修改
- Home.vue中的heard样式修改
Home.vue中的template代码替换为如下内容:
微头条首页
欢迎,{{ userStore.username }}
暂无新闻,快去发布一条吧
{{ item.title }}
{{ item.time }}
{{ item.content }}
<button @click="homeViewDetail(item.id)">🔍 查看详情
<button @click="homeDeleteNews(item.id)">🗑️ 删除
<button @click="homeLikeNews(item.id, item.likes)">👍 点赞 {{ item.likes }}
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
@current-change="loadNews" layout="prev, pager, next" />
Home.vue中的style样式代码替换为如下内容:
- 让发布页面的发布微头条标题居中
打开Publish.vue,在style样式标签中添加如下css
.publish-container h2 {
margin-bottom: 20px;
text-align: center;
}
3. 重写注册页面Register.vue,使其风格与登录页面统一
整体代码替换为如下:
微头条注册
<el-form :model="form" :rules="rules" ref="formRef" @keyup.enter="handleRegister">
<el-button type="primary" @click="handleRegister" :loading="loading" class="register-btn">
注册
课次36:前端样式修改
1. Home.vue中的heard样式修改
2. 让发布页面的发布微头条标题居中
3. 重写注册页面Register.vue,使其风格与登录页面统一
EOF
浙公网安备 33010602011771号