mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-21 14:30:59 +08:00
Merge pull request #56 from nagisa77/codex/convert-postpageview-and-homepageview-data-to-js-arrays
Use arrays for home & post views
This commit is contained in:
Tim
GitHub
@@ -10,295 +10,155 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="topic-container">
|
||||
<div class="topic-container">
|
||||
<div class="topic-item-container">
|
||||
<div class="topic-item selected">最新</div>
|
||||
<div class="topic-item">排行榜</div>
|
||||
<div class="topic-item">热门</div>
|
||||
<div class="topic-item">类别</div>
|
||||
<div
|
||||
v-for="topic in topics"
|
||||
:key="topic"
|
||||
class="topic-item"
|
||||
:class="{ selected: topic === selectedTopic }"
|
||||
>
|
||||
{{ topic }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="article-container">
|
||||
<div class="article-item">
|
||||
<div
|
||||
class="article-item"
|
||||
v-for="article in articles"
|
||||
:key="article.id"
|
||||
>
|
||||
<div class="article-main-container">
|
||||
<router-link class="article-item-title" to="/posts/1">各位佬，科研项目python语言适合什么ai编程？</router-link>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<router-link
|
||||
class="article-item-title"
|
||||
:to="`/posts/${article.id}`"
|
||||
>
|
||||
{{ article.title }}
|
||||
</router-link>
|
||||
<div class="article-item-description">{{ article.description }}</div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
<div class="article-info-item-text">{{ article.category }}</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<div
|
||||
class="article-tag-item"
|
||||
v-for="tag in article.tags"
|
||||
:key="tag"
|
||||
>
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
<div class="article-tag-item-text">{{ tag }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
<div
|
||||
class="article-member-avatar-item"
|
||||
v-for="(avatar, idx) in article.members"
|
||||
:key="idx"
|
||||
>
|
||||
<img
|
||||
class="article-member-avatar-item-img"
|
||||
:src="avatar"
|
||||
alt="avatar"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
{{ article.comments }}
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
{{ article.views }}
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
{{ article.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<div class="article-main-container">
|
||||
<div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
|
||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
||||
<div class="article-info-container">
|
||||
<div class="article-info-item">
|
||||
<i class="fas fa-user"></i>
|
||||
<div class="article-info-item-text">开发调优</div>
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-member-avatars-container">
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
<div class="article-member-avatar-item">
|
||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-comments">
|
||||
139
|
||||
</div>
|
||||
<div class="article-views">
|
||||
2.4k
|
||||
</div>
|
||||
<div class="article-time">
|
||||
23小时前
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'HomePageView'
|
||||
name: 'HomePageView',
|
||||
setup() {
|
||||
const topics = ref(['最新', '排行榜', '热门', '类别'])
|
||||
const selectedTopic = ref('最新')
|
||||
|
||||
const baseAvatar = 'https://picsum.photos/200/200'
|
||||
const articles = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '各位佬，科研项目python语言适合什么ai编程？',
|
||||
description:
|
||||
'是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
|
||||
category: '开发调优',
|
||||
tags: ['AI', 'Python', 'Java'],
|
||||
members: Array(5).fill(baseAvatar),
|
||||
comments: 139,
|
||||
views: '2.4k',
|
||||
time: '23小时前'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '各位佬，科研项目python语言适合什么ai编程？',
|
||||
description:
|
||||
'是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
|
||||
category: '开发调优',
|
||||
tags: ['AI', 'Python', 'Java'],
|
||||
members: Array(5).fill(baseAvatar),
|
||||
comments: 139,
|
||||
views: '2.4k',
|
||||
time: '23小时前'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '各位佬，科研项目python语言适合什么ai编程？',
|
||||
description:
|
||||
'是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
|
||||
category: '开发调优',
|
||||
tags: ['AI', 'Python', 'Java'],
|
||||
members: Array(5).fill(baseAvatar),
|
||||
comments: 139,
|
||||
views: '2.4k',
|
||||
time: '23小时前'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '各位佬，科研项目python语言适合什么ai编程？',
|
||||
description:
|
||||
'是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
|
||||
category: '开发调优',
|
||||
tags: ['AI', 'Python', 'Java'],
|
||||
members: Array(5).fill(baseAvatar),
|
||||
comments: 139,
|
||||
views: '2.4k',
|
||||
time: '23小时前'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '各位佬，科研项目python语言适合什么ai编程？',
|
||||
description:
|
||||
'是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
|
||||
category: '开发调优',
|
||||
tags: ['AI', 'Python', 'Java'],
|
||||
members: Array(5).fill(baseAvatar),
|
||||
comments: 139,
|
||||
views: '2.4k',
|
||||
time: '23小时前'
|
||||
}
|
||||
])
|
||||
|
||||
return { topics, selectedTopic, articles }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -9,17 +9,13 @@
|
||||
</div>
|
||||
|
||||
<div class="article-tags-container">
|
||||
<div class="article-tag-item">
|
||||
<div
|
||||
class="article-tag-item"
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
>
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">AI</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Python</div>
|
||||
</div>
|
||||
<div class="article-tag-item">
|
||||
<i class="fas fa-tag"></i>
|
||||
<div class="article-tag-item-text">Java</div>
|
||||
<div class="article-tag-item-text">{{ tag }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,245 +85,24 @@
|
||||
</div>
|
||||
|
||||
<div class="comments-container">
|
||||
<div class="info-content-container">
|
||||
<div
|
||||
class="info-content-container"
|
||||
v-for="comment in comments"
|
||||
:key="comment.id"
|
||||
>
|
||||
<div class="user-avatar-container">
|
||||
<div class="user-avatar-item">
|
||||
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
<img class="user-avatar-item-img" :src="comment.avatar" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-content-header">
|
||||
<div class="user-name">Nagisa77</div>
|
||||
<div class="post-time">3月10日</div>
|
||||
<div class="user-name">{{ comment.userName }}</div>
|
||||
<div class="post-time">{{ comment.time }}</div>
|
||||
</div>
|
||||
<div class="info-content-text">
|
||||
沙发🛋️🛋️🛋️🛋️
|
||||
</div>
|
||||
|
||||
<div class="article-footer-container">
|
||||
<div class="reactions-container">
|
||||
<div class="reactions-viewer">
|
||||
<div class="reactions-viewer-item-container">
|
||||
<div class="reactions-viewer-item">
|
||||
🤣
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
❤️
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
👏
|
||||
</div>
|
||||
</div>
|
||||
<div class="reactions-count">1882</div>
|
||||
</div>
|
||||
|
||||
<div class="make-reaction-container">
|
||||
<div class="make-reaction-item like-reaction">
|
||||
<i class="far fa-heart"></i>
|
||||
</div>
|
||||
<div class="make-reaction-item copy-link">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content-container">
|
||||
<div class="user-avatar-container">
|
||||
<div class="user-avatar-item">
|
||||
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-content-header">
|
||||
<div class="user-name">Nagisa77</div>
|
||||
<div class="post-time">3月10日</div>
|
||||
</div>
|
||||
<div class="info-content-text">
|
||||
💩💩💩💩💩
|
||||
</div>
|
||||
|
||||
<div class="article-footer-container">
|
||||
<div class="reactions-container">
|
||||
<div class="reactions-viewer">
|
||||
<div class="reactions-viewer-item-container">
|
||||
<div class="reactions-viewer-item">
|
||||
🤣
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
❤️
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
👏
|
||||
</div>
|
||||
</div>
|
||||
<div class="reactions-count">1882</div>
|
||||
</div>
|
||||
|
||||
<div class="make-reaction-container">
|
||||
<div class="make-reaction-item like-reaction">
|
||||
<i class="far fa-heart"></i>
|
||||
</div>
|
||||
<div class="make-reaction-item copy-link">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content-container">
|
||||
<div class="user-avatar-container">
|
||||
<div class="user-avatar-item">
|
||||
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-content-header">
|
||||
<div class="user-name">Nagisa77</div>
|
||||
<div class="post-time">3月10日</div>
|
||||
</div>
|
||||
<div class="info-content-text">
|
||||
是的
|
||||
</div>
|
||||
|
||||
<div class="article-footer-container">
|
||||
<div class="reactions-container">
|
||||
<div class="reactions-viewer">
|
||||
<div class="reactions-viewer-item-container">
|
||||
<div class="reactions-viewer-item">
|
||||
🤣
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
❤️
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
👏
|
||||
</div>
|
||||
</div>
|
||||
<div class="reactions-count">1882</div>
|
||||
</div>
|
||||
|
||||
<div class="make-reaction-container">
|
||||
<div class="make-reaction-item like-reaction">
|
||||
<i class="far fa-heart"></i>
|
||||
</div>
|
||||
<div class="make-reaction-item copy-link">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content-container">
|
||||
<div class="user-avatar-container">
|
||||
<div class="user-avatar-item">
|
||||
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-content-header">
|
||||
<div class="user-name">Nagisa77</div>
|
||||
<div class="post-time">3月10日</div>
|
||||
</div>
|
||||
<div class="info-content-text">
|
||||
持续时间至最后一个不会好好说话的账号持有者被请出社区为止。
|
||||
</div>
|
||||
|
||||
<div class="article-footer-container">
|
||||
<div class="reactions-container">
|
||||
<div class="reactions-viewer">
|
||||
<div class="reactions-viewer-item-container">
|
||||
<div class="reactions-viewer-item">
|
||||
🤣
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
❤️
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
👏
|
||||
</div>
|
||||
</div>
|
||||
<div class="reactions-count">1882</div>
|
||||
</div>
|
||||
|
||||
<div class="make-reaction-container">
|
||||
<div class="make-reaction-item like-reaction">
|
||||
<i class="far fa-heart"></i>
|
||||
</div>
|
||||
<div class="make-reaction-item copy-link">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content-container">
|
||||
<div class="user-avatar-container">
|
||||
<div class="user-avatar-item">
|
||||
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-content-header">
|
||||
<div class="user-name">Nagisa77</div>
|
||||
<div class="post-time">3月10日</div>
|
||||
</div>
|
||||
<div class="info-content-text">
|
||||
赞同楼主
|
||||
</div>
|
||||
|
||||
<div class="article-footer-container">
|
||||
<div class="reactions-container">
|
||||
<div class="reactions-viewer">
|
||||
<div class="reactions-viewer-item-container">
|
||||
<div class="reactions-viewer-item">
|
||||
🤣
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
❤️
|
||||
</div>
|
||||
<div class="reactions-viewer-item">
|
||||
👏
|
||||
</div>
|
||||
</div>
|
||||
<div class="reactions-count">1882</div>
|
||||
</div>
|
||||
|
||||
<div class="make-reaction-container">
|
||||
<div class="make-reaction-item like-reaction">
|
||||
<i class="far fa-heart"></i>
|
||||
</div>
|
||||
<div class="make-reaction-item copy-link">
|
||||
<i class="fas fa-link"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content-container">
|
||||
<div class="user-avatar-container">
|
||||
<div class="user-avatar-item">
|
||||
<img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="info-content-header">
|
||||
<div class="user-name">Nagisa77</div>
|
||||
<div class="post-time">3月10日</div>
|
||||
</div>
|
||||
<div class="info-content-text">
|
||||
这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息
|
||||
{{ comment.text }}
|
||||
</div>
|
||||
|
||||
<div class="article-footer-container">
|
||||
@@ -364,28 +139,58 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { onMounted, ref } from 'vue'
|
||||
// import { useRoute } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'PostPageView',
|
||||
setup() {
|
||||
// const route = useRoute()
|
||||
// const post = ref(null)
|
||||
const tags = ref(['AI', 'Python', 'Java'])
|
||||
const comments = ref([
|
||||
{
|
||||
id: 1,
|
||||
userName: 'Nagisa77',
|
||||
time: '3月10日',
|
||||
avatar: 'https://picsum.photos/200/200',
|
||||
text: '沙发🛋️🛋️🛋️🛋️'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
userName: 'Nagisa77',
|
||||
time: '3月10日',
|
||||
avatar: 'https://picsum.photos/200/200',
|
||||
text: '💩💩💩💩💩'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
userName: 'Nagisa77',
|
||||
time: '3月10日',
|
||||
avatar: 'https://picsum.photos/200/200',
|
||||
text: '是的'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
userName: 'Nagisa77',
|
||||
time: '3月10日',
|
||||
avatar: 'https://picsum.photos/200/200',
|
||||
text: '持续时间至最后一个不会好好说话的账号持有者被请出社区为止。'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
userName: 'Nagisa77',
|
||||
time: '3月10日',
|
||||
avatar: 'https://picsum.photos/200/200',
|
||||
text: '赞同楼主'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
userName: 'Nagisa77',
|
||||
time: '3月10日',
|
||||
avatar: 'https://picsum.photos/200/200',
|
||||
text: '这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息'
|
||||
}
|
||||
])
|
||||
|
||||
// onMounted(async () => {
|
||||
// const id = route.params.id
|
||||
// try {
|
||||
// const res = await fetch(`/api/posts/${id}`)
|
||||
// if (res.ok) {
|
||||
// post.value = await res.json()
|
||||
// }
|
||||
// } catch (err) {
|
||||
// console.error(err)
|
||||
// }
|
||||
// })
|
||||
|
||||
// return { post }
|
||||
return { tags, comments }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user