mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-03-04 19:10:47 +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>
|
||||||
|
|
||||||
|
|
||||||
<div class="topic-container">
|
<div class="topic-container">
|
||||||
<div class="topic-item-container">
|
<div class="topic-item-container">
|
||||||
<div class="topic-item selected">最新</div>
|
<div
|
||||||
<div class="topic-item">排行榜</div>
|
v-for="topic in topics"
|
||||||
<div class="topic-item">热门</div>
|
:key="topic"
|
||||||
<div class="topic-item">类别</div>
|
class="topic-item"
|
||||||
|
:class="{ selected: topic === selectedTopic }"
|
||||||
|
>
|
||||||
|
{{ topic }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="article-container">
|
<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">
|
<div class="article-main-container">
|
||||||
<router-link class="article-item-title" to="/posts/1">各位佬，科研项目python语言适合什么ai编程？</router-link>
|
<router-link
|
||||||
<div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
|
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-container">
|
||||||
<div class="article-info-item">
|
<div class="article-info-item">
|
||||||
<i class="fas fa-user"></i>
|
<i class="fas fa-user"></i>
|
||||||
<div class="article-info-item-text">开发调优</div>
|
<div class="article-info-item-text">{{ article.category }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-tags-container">
|
<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>
|
<i class="fas fa-tag"></i>
|
||||||
<div class="article-tag-item-text">AI</div>
|
<div class="article-tag-item-text">{{ tag }}</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-member-avatars-container">
|
<div class="article-member-avatars-container">
|
||||||
<div class="article-member-avatar-item">
|
<div
|
||||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
class="article-member-avatar-item"
|
||||||
</div>
|
v-for="(avatar, idx) in article.members"
|
||||||
<div class="article-member-avatar-item">
|
:key="idx"
|
||||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
>
|
||||||
</div>
|
<img
|
||||||
<div class="article-member-avatar-item">
|
class="article-member-avatar-item-img"
|
||||||
<img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
|
:src="avatar"
|
||||||
</div>
|
alt="avatar"
|
||||||
<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>
|
</div>
|
||||||
<div class="article-comments">
|
<div class="article-comments">
|
||||||
139
|
{{ article.comments }}
|
||||||
</div>
|
</div>
|
||||||
<div class="article-views">
|
<div class="article-views">
|
||||||
2.4k
|
{{ article.views }}
|
||||||
</div>
|
</div>
|
||||||
<div class="article-time">
|
<div class="article-time">
|
||||||
23小时前
|
{{ article.time }}
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -9,17 +9,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-tags-container">
|
<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>
|
<i class="fas fa-tag"></i>
|
||||||
<div class="article-tag-item-text">AI</div>
|
<div class="article-tag-item-text">{{ tag }}</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>
|
</div>
|
||||||
@@ -89,245 +85,24 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="comments-container">
|
<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-container">
|
||||||
<div class="user-avatar-item">
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="info-content">
|
<div class="info-content">
|
||||||
<div class="info-content-header">
|
<div class="info-content-header">
|
||||||
<div class="user-name">Nagisa77</div>
|
<div class="user-name">{{ comment.userName }}</div>
|
||||||
<div class="post-time">3月10日</div>
|
<div class="post-time">{{ comment.time }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-content-text">
|
<div class="info-content-text">
|
||||||
沙发🛋️🛋️🛋️🛋️
|
{{ comment.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">
|
|
||||||
这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-footer-container">
|
<div class="article-footer-container">
|
||||||
@@ -364,28 +139,58 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import { onMounted, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
// import { useRoute } from 'vue-router'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PostPageView',
|
name: 'PostPageView',
|
||||||
setup() {
|
setup() {
|
||||||
// const route = useRoute()
|
const tags = ref(['AI', 'Python', 'Java'])
|
||||||
// const post = ref(null)
|
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 () => {
|
return { tags, comments }
|
||||||
// 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 }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user