Compare commits
2 Commits
42d0eec2c0
...
c6b69d0b61
| Author | SHA1 | Date |
|---|---|---|
 MINAMI
|
c6b69d0b61 | 3 months ago |
 hxt1218
|
5015b11ccf | 3 months ago |
@ -0,0 +1,235 @@
|
|||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<h1>知乎个人主页</h1>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card shadow="hover" class="user-card">
|
||||||
|
<el-image :src="user.avatar" class="avatar"></el-image>
|
||||||
|
<div class="card-content">
|
||||||
|
<h2>{{ user.name }}</h2>
|
||||||
|
<p>{{ user.bio }}</p>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-tabs v-model="tab" stretch class="tabs">
|
||||||
|
<el-tab-pane label="发布的文章" name="posts">
|
||||||
|
<el-list class="list" :data="user.posts" type="list">
|
||||||
|
<el-list-item v-for="post in user.posts" :key="post.id">
|
||||||
|
<el-row :gutter="10" align="middle">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-image :src="post.cover" class="post-cover"></el-image>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="18">
|
||||||
|
<el-link :href="`/post/${post.id}`" target="_blank" class="post-title">{{ post.title }}</el-link>
|
||||||
|
<p class="post-summary">{{ post.summary }}</p>
|
||||||
|
<div class="post-stats">
|
||||||
|
<span><i class="el-icon-thumb"></i> {{ post.likes }} 点赞</span>
|
||||||
|
<span><i class="el-icon-chat-dot-round"></i> {{ post.comments }} 评论</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-list-item>
|
||||||
|
</el-list>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="收藏的文章" name="collections">
|
||||||
|
<el-list class="list" :data="user.collections" type="list">
|
||||||
|
<el-list-item v-for="collection in user.collections" :key="collection.id">
|
||||||
|
<el-row :gutter="10" align="middle">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-image :src="collection.cover" class="post-cover"></el-image>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="18">
|
||||||
|
<el-link :href="`/post/${collection.id}`" target="_blank" class="post-title">{{ collection.title }}</el-link>
|
||||||
|
<p class="post-summary">{{ collection.summary }}</p>
|
||||||
|
<div class="post-stats">
|
||||||
|
<span><i class="el-icon-thumb"></i> {{ collection.likes }} 点赞</span>
|
||||||
|
<span><i class="el-icon-chat-dot-round"></i> {{ collection.comments }} 评论</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-list-item>
|
||||||
|
</el-list>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="关注和粉丝" name="followers">
|
||||||
|
<el-list class="list" :data="user.followers" type="list">
|
||||||
|
<el-list-item v-for="follower in user.followers" :key="follower.id">
|
||||||
|
<el-row :gutter="10" align="middle">
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-avatar :src="follower.avatar" class="follower-avatar"></el-avatar>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-link :href="`/user/${follower.id}`" target="_blank" class="follower-name">{{ follower.name }}</el-link>
|
||||||
|
<p class="follower-level">等级: {{ follower.level }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-button type="danger" size="small" @click="unfollow(follower.id)">取关</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-list-item>
|
||||||
|
</el-list>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const tab = ref('posts')
|
||||||
|
const user = ref({
|
||||||
|
avatar: 'https://via.placeholder.com/150',
|
||||||
|
name: '张三',
|
||||||
|
bio: '这是一个个人简介，介绍我的兴趣爱好、职业背景等。',
|
||||||
|
posts: [
|
||||||
|
{ id: 1, title: '第一篇文章标题', summary: '这是第一篇文章的摘要', likes: 100, comments: 50, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 2, title: '第二篇文章标题', summary: '这是第二篇文章的摘要', likes: 200, comments: 75, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 3, title: '第三篇文章标题', summary: '这是第三篇文章的摘要', likes: 150, comments: 60, cover: 'https://via.placeholder.com/200x150' }
|
||||||
|
],
|
||||||
|
collections: [
|
||||||
|
{ id: 1, title: '收藏的第一篇文章', summary: '这是收藏的第一篇文章的摘要', likes: 80, comments: 30, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 2, title: '收藏的第二篇文章', summary: '这是收藏的第二篇文章的摘要', likes: 120, comments: 45, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 3, title: '收藏的第三篇文章', summary: '这是收藏的第三篇文章的摘要', likes: 90, comments: 35, cover: 'https://via.placeholder.com/200x150' }
|
||||||
|
],
|
||||||
|
followers: [
|
||||||
|
{ id: 1, name: '李四', avatar: 'https://via.placeholder.com/50', level: 1 },
|
||||||
|
{ id: 2, name: '王五', avatar: 'https://via.placeholder.com/50', level: 2 },
|
||||||
|
{ id: 3, name: '赵六', avatar: 'https://via.placeholder.com/50', level: 3 }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 模拟异步数据获取
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
user.value = {
|
||||||
|
avatar: 'https://via.placeholder.com/150',
|
||||||
|
name: '张三',
|
||||||
|
bio: '这是一个个人简介，介绍我的兴趣爱好、职业背景等。',
|
||||||
|
posts: [
|
||||||
|
{ id: 1, title: '第一篇文章标题', summary: '这是第一篇文章的摘要', likes: 100, comments: 50, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 2, title: '第二篇文章标题', summary: '这是第二篇文章的摘要', likes: 200, comments: 75, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 3, title: '第三篇文章标题', summary: '这是第三篇文章的摘要', likes: 150, comments: 60, cover: 'https://via.placeholder.com/200x150' }
|
||||||
|
],
|
||||||
|
collections: [
|
||||||
|
{ id: 1, title: '收藏的第一篇文章', summary: '这是收藏的第一篇文章的摘要', likes: 80, comments: 30, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 2, title: '收藏的第二篇文章', summary: '这是收藏的第二篇文章的摘要', likes: 120, comments: 45, cover: 'https://via.placeholder.com/200x150' },
|
||||||
|
{ id: 3, title: '收藏的第三篇文章', summary: '这是收藏的第三篇文章的摘要', likes: 90, comments: 35, cover: 'https://via.placeholder.com/200x150' }
|
||||||
|
],
|
||||||
|
followers: [
|
||||||
|
{ id: 1, name: '李四', avatar: 'https://via.placeholder.com/50', level: 1 },
|
||||||
|
{ id: 2, name: '王五', avatar: 'https://via.placeholder.com/50', level: 2 },
|
||||||
|
{ id: 3, name: '赵六', avatar: 'https://via.placeholder.com/50', level: 3 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 取关功能
|
||||||
|
const unfollow = (followerId) => {
|
||||||
|
user.value.followers = user.value.followers.filter(follower => follower.id !== followerId)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.user-card {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-list-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-cover {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #409eff;
|
||||||
|
text-decoration: none;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-stats {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-stats span {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follower-avatar {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follower-name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #409eff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follower-name:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follower-level {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue