update
This commit is contained in:
aaron
parent
4a69078af3
commit
f2cc6e0b78
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crypto AI - 加密货币工具与社区平台</title>
|
||||
<title>Crypto AI - 加密货币AI服务平台</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"jsdom": "^26.0.0",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
"prettier": "3.5.3",
|
||||
"terser": "^5.39.0",
|
||||
"typescript": "~5.8.0",
|
||||
"vite": "^6.2.4",
|
||||
"vite-plugin-vue-devtools": "^7.7.2",
|
||||
|
||||
@ -11,7 +11,6 @@ import { RouterLink, RouterView } from 'vue-router'
|
||||
<RouterLink to="/" class="nav-link">首页</RouterLink>
|
||||
<RouterLink to="/tools" class="nav-link">工具集合</RouterLink>
|
||||
<RouterLink to="/ai-agent" class="nav-link">AI Agent</RouterLink>
|
||||
<RouterLink to="/community" class="nav-link">社区</RouterLink>
|
||||
</nav>
|
||||
<div class="user-actions">
|
||||
<button class="btn-connect">连接钱包</button>
|
||||
@ -27,7 +26,7 @@ import { RouterLink, RouterView } from 'vue-router'
|
||||
|
||||
<footer class="app-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Crypto.AI - 加密货币工具与社区平台</p>
|
||||
<p>© 2024 Crypto.AI - 加密货币AI服务平台</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,6 @@ import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
@ -16,7 +15,7 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
Vue's
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
@ -32,8 +31,9 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||
>Vue - Official</a
|
||||
>. If you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
@ -63,24 +63,6 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -19,11 +19,6 @@ const router = createRouter({
|
||||
name: 'ai-agent',
|
||||
component: () => import('../views/AIAgentView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/community',
|
||||
name: 'community',
|
||||
component: () => import('../views/CommunityView.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ const sendMessage = () => {
|
||||
chatHistory.value.push({
|
||||
role: 'assistant',
|
||||
content:
|
||||
'我正在分析这个项目，这可能需要一些时间。基于初步分析，我建议关注以下几个方面：\n\n1. 团队背景和透明度\n2. 代码审计情况\n3. 社区活跃度和增长\n4. 代币分配机制\n5. 市场流动性\n\n您想了解哪方面的详细信息？',
|
||||
'我正在分析这个项目，这可能需要一些时间。基于初步分析，我建议关注以下几个方面：\n\n1. 团队背景和透明度\n2. 代码审计情况\n3. 项目活跃度和发展\n4. 代币分配机制\n5. 市场流动性\n\n您想了解哪方面的详细信息？',
|
||||
})
|
||||
} else {
|
||||
chatHistory.value.push({
|
||||
|
||||
@ -1,716 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface Post {
|
||||
id: number
|
||||
author: {
|
||||
name: string
|
||||
avatar: string
|
||||
verified: boolean
|
||||
}
|
||||
content: string
|
||||
timestamp: string
|
||||
likes: number
|
||||
comments: number
|
||||
reposts: number
|
||||
isLiked: boolean
|
||||
images?: string[]
|
||||
tags?: string[]
|
||||
}
|
||||
|
||||
const newPostContent = ref('')
|
||||
const filter = ref('for-you')
|
||||
|
||||
const posts = ref<Post[]>([
|
||||
{
|
||||
id: 1,
|
||||
author: {
|
||||
name: 'CryptoInsight',
|
||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=CryptoInsight',
|
||||
verified: true,
|
||||
},
|
||||
content:
|
||||
'比特币减半已经完成！这对市场来说是一个重要的里程碑。你们认为这会对价格产生什么影响？ #比特币 #减半 #加密货币',
|
||||
timestamp: '1小时前',
|
||||
likes: 128,
|
||||
comments: 43,
|
||||
reposts: 21,
|
||||
isLiked: false,
|
||||
tags: ['比特币', '减半', '加密货币'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: {
|
||||
name: 'ETH_Developer',
|
||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=ETH_Developer',
|
||||
verified: true,
|
||||
},
|
||||
content: '以太坊过去24小时的Gas费用达到了近期最低点。现在是进行链上交易的好时机！',
|
||||
timestamp: '3小时前',
|
||||
likes: 76,
|
||||
comments: 12,
|
||||
reposts: 8,
|
||||
isLiked: true,
|
||||
tags: ['以太坊', 'Gas费用'],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author: {
|
||||
name: 'DeFi_Master',
|
||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=DeFi_Master',
|
||||
verified: false,
|
||||
},
|
||||
content:
|
||||
'刚刚研究了一个新的DeFi项目，提供了非常具有竞争力的流动性挖矿回报。大家有兴趣了解更多吗？',
|
||||
timestamp: '5小时前',
|
||||
likes: 54,
|
||||
comments: 31,
|
||||
reposts: 4,
|
||||
isLiked: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
author: {
|
||||
name: 'NFT_Collector',
|
||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=NFT_Collector',
|
||||
verified: true,
|
||||
},
|
||||
content:
|
||||
'刚刚收购了一个稀有的蓝筹NFT！这是我收藏的最新成员。艺术和区块链的结合真的很令人兴奋！',
|
||||
timestamp: '6小时前',
|
||||
likes: 92,
|
||||
comments: 14,
|
||||
reposts: 7,
|
||||
isLiked: false,
|
||||
images: ['https://picsum.photos/id/29/600/400'],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
author: {
|
||||
name: 'Crypto_News',
|
||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=Crypto_News',
|
||||
verified: true,
|
||||
},
|
||||
content:
|
||||
'重大新闻：SEC批准了第一个比特币现货ETF！这对加密市场的监管和机构采用是一个重要的进展。 #比特币ETF #SEC #加密监管',
|
||||
timestamp: '12小时前',
|
||||
likes: 215,
|
||||
comments: 87,
|
||||
reposts: 56,
|
||||
isLiked: true,
|
||||
tags: ['比特币ETF', 'SEC', '加密监管'],
|
||||
},
|
||||
])
|
||||
|
||||
const toggleLike = (postId: number) => {
|
||||
const post = posts.value.find((p) => p.id === postId)
|
||||
if (post) {
|
||||
post.isLiked = !post.isLiked
|
||||
post.likes += post.isLiked ? 1 : -1
|
||||
}
|
||||
}
|
||||
|
||||
const createPost = () => {
|
||||
if (!newPostContent.value.trim()) return
|
||||
|
||||
const newPost: Post = {
|
||||
id: posts.value.length + 1,
|
||||
author: {
|
||||
name: '当前用户',
|
||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=CurrentUser',
|
||||
verified: false,
|
||||
},
|
||||
content: newPostContent.value,
|
||||
timestamp: '刚刚',
|
||||
likes: 0,
|
||||
comments: 0,
|
||||
reposts: 0,
|
||||
isLiked: false,
|
||||
}
|
||||
|
||||
posts.value.unshift(newPost)
|
||||
newPostContent.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="community-view">
|
||||
<h1 class="page-title">社区</h1>
|
||||
<p class="page-description">与加密货币爱好者交流，分享见解和最新动态</p>
|
||||
|
||||
<div class="community-layout">
|
||||
<div class="main-content">
|
||||
<div class="feed-tabs">
|
||||
<button
|
||||
class="tab-btn"
|
||||
:class="{ active: filter === 'for-you' }"
|
||||
@click="filter = 'for-you'"
|
||||
>
|
||||
为你推荐
|
||||
</button>
|
||||
<button
|
||||
class="tab-btn"
|
||||
:class="{ active: filter === 'following' }"
|
||||
@click="filter = 'following'"
|
||||
>
|
||||
关注
|
||||
</button>
|
||||
<button
|
||||
class="tab-btn"
|
||||
:class="{ active: filter === 'trending' }"
|
||||
@click="filter = 'trending'"
|
||||
>
|
||||
热门话题
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="post-creator">
|
||||
<div class="post-input-container">
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=CurrentUser"
|
||||
alt="User Avatar"
|
||||
class="user-avatar"
|
||||
/>
|
||||
<textarea
|
||||
v-model="newPostContent"
|
||||
placeholder="分享你的加密见解..."
|
||||
class="post-input"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="post-actions">
|
||||
<div class="post-tools">
|
||||
<button class="tool-btn">📷</button>
|
||||
<button class="tool-btn">🔗</button>
|
||||
<button class="tool-btn">#️⃣</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary post-btn"
|
||||
@click="createPost"
|
||||
:disabled="!newPostContent.trim()"
|
||||
>
|
||||
发布
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="posts-feed">
|
||||
<div v-for="post in posts" :key="post.id" class="post-card">
|
||||
<div class="post-header">
|
||||
<img :src="post.author.avatar" alt="User Avatar" class="post-avatar" />
|
||||
<div class="post-author">
|
||||
<div class="author-name">
|
||||
{{ post.author.name }}
|
||||
<span v-if="post.author.verified" class="verified-badge">✓</span>
|
||||
</div>
|
||||
<span class="post-time">{{ post.timestamp }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content">
|
||||
<p>{{ post.content }}</p>
|
||||
<div v-if="post.images && post.images.length" class="post-images">
|
||||
<img
|
||||
v-for="(img, index) in post.images"
|
||||
:key="index"
|
||||
:src="img"
|
||||
alt="Post image"
|
||||
class="post-image"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="post.tags && post.tags.length" class="post-tags">
|
||||
<span v-for="(tag, index) in post.tags" :key="index" class="post-tag">
|
||||
#{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-footer">
|
||||
<button
|
||||
class="post-action"
|
||||
:class="{ active: post.isLiked }"
|
||||
@click="toggleLike(post.id)"
|
||||
>
|
||||
<span class="action-icon">❤️</span>
|
||||
<span class="action-count">{{ post.likes }}</span>
|
||||
</button>
|
||||
<button class="post-action">
|
||||
<span class="action-icon">💬</span>
|
||||
<span class="action-count">{{ post.comments }}</span>
|
||||
</button>
|
||||
<button class="post-action">
|
||||
<span class="action-icon">🔄</span>
|
||||
<span class="action-count">{{ post.reposts }}</span>
|
||||
</button>
|
||||
<button class="post-action">
|
||||
<span class="action-icon">📤</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-section">
|
||||
<h3 class="sidebar-title">热门话题</h3>
|
||||
<ul class="trending-list">
|
||||
<li class="trending-item">
|
||||
<div class="trending-tag">#比特币减半</div>
|
||||
<div class="trending-stats">12.5K 帖子</div>
|
||||
</li>
|
||||
<li class="trending-item">
|
||||
<div class="trending-tag">#以太坊2.0</div>
|
||||
<div class="trending-stats">8.3K 帖子</div>
|
||||
</li>
|
||||
<li class="trending-item">
|
||||
<div class="trending-tag">#DeFi夏天</div>
|
||||
<div class="trending-stats">6.7K 帖子</div>
|
||||
</li>
|
||||
<li class="trending-item">
|
||||
<div class="trending-tag">#NFT艺术</div>
|
||||
<div class="trending-stats">5.2K 帖子</div>
|
||||
</li>
|
||||
<li class="trending-item">
|
||||
<div class="trending-tag">#Layer2扩容</div>
|
||||
<div class="trending-stats">3.9K 帖子</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<h3 class="sidebar-title">推荐关注</h3>
|
||||
<ul class="suggested-users">
|
||||
<li class="user-item">
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=VitalikB"
|
||||
alt="User Avatar"
|
||||
class="user-avatar-small"
|
||||
/>
|
||||
<div class="user-info">
|
||||
<div class="user-name">
|
||||
Vitalik.eth
|
||||
<span class="verified-badge-small">✓</span>
|
||||
</div>
|
||||
<div class="user-handle">@VitalikButerin</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary btn-small">关注</button>
|
||||
</li>
|
||||
<li class="user-item">
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=SBF"
|
||||
alt="User Avatar"
|
||||
class="user-avatar-small"
|
||||
/>
|
||||
<div class="user-info">
|
||||
<div class="user-name">CZ Binance</div>
|
||||
<div class="user-handle">@cz_binance</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary btn-small">关注</button>
|
||||
</li>
|
||||
<li class="user-item">
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=ElonM"
|
||||
alt="User Avatar"
|
||||
class="user-avatar-small"
|
||||
/>
|
||||
<div class="user-info">
|
||||
<div class="user-name">
|
||||
Elon Musk
|
||||
<span class="verified-badge-small">✓</span>
|
||||
</div>
|
||||
<div class="user-handle">@elonmusk</div>
|
||||
</div>
|
||||
<button class="btn btn-secondary btn-small">关注</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.community-view {
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 350px;
|
||||
gap: 2rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.community-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex-basis: 65%;
|
||||
}
|
||||
|
||||
.feed-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.post-creator {
|
||||
background-color: var(--color-bg-card);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.post-input-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.post-input {
|
||||
flex: 1;
|
||||
background-color: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.8rem;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1rem;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post-tools {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.post-btn {
|
||||
padding: 0.6rem 1.5rem;
|
||||
}
|
||||
|
||||
.posts-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background-color: var(--color-bg-card);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.post-time {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-content p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-images {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
color: var(--color-accent);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post-tag:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.post-action {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.post-action:hover,
|
||||
.post-action.active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Sidebar Styling */
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
position: sticky;
|
||||
top: calc(var(--header-height) + 1rem);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
background-color: var(--color-bg-card);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.2rem;
|
||||
padding-bottom: 0.8rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.trending-list,
|
||||
.suggested-users {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.trending-item {
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.trending-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.trending-tag {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.trending-stats {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.user-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.user-avatar-small {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.verified-badge-small {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.user-handle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.3rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.community-view {
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.community-view {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,42 +5,14 @@
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Crypto.AI <span class="accent">加密货币工具平台</span></h1>
|
||||
<p class="hero-subtitle">一站式加密货币工具集合、AI分析和社区互动平台</p>
|
||||
<div class="hero-actions">
|
||||
<p class="hero-subtitle">一站式加密货币工具集合和AI分析平台</p>
|
||||
<!-- <div class="hero-actions">
|
||||
<button class="btn btn-primary">探索工具</button>
|
||||
<button class="btn btn-secondary">加入社区</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-section">
|
||||
<div class="feature-card card">
|
||||
<div class="feature-icon">🛠️</div>
|
||||
<h3 class="feature-title">工具集合</h3>
|
||||
<p class="feature-desc">批量钱包创建、钱包归集等实用工具，助您高效管理加密资产</p>
|
||||
<button class="btn-action">了解更多</button>
|
||||
</div>
|
||||
|
||||
<div class="feature-card card">
|
||||
<div class="feature-icon">🤖</div>
|
||||
<h3 class="feature-title">AI Agent</h3>
|
||||
<p class="feature-desc">加密项目医生与币种技术分析，让您的投资决策更明智</p>
|
||||
<button class="btn-action">了解更多</button>
|
||||
</div>
|
||||
|
||||
<div class="feature-card card">
|
||||
<div class="feature-icon">👥</div>
|
||||
<h3 class="feature-title">社区互动</h3>
|
||||
<p class="feature-desc">类似微博的信息流，实时了解行业动态，分享您的见解</p>
|
||||
<button class="btn-action">了解更多</button>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats-section">
|
||||
<div class="stats-header">
|
||||
<h2>平台数据</h2>
|
||||
<p>实时数据</p>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card card">
|
||||
<div class="stat-value">10,000+</div>
|
||||
@ -50,10 +22,6 @@
|
||||
<div class="stat-value">5,000+</div>
|
||||
<div class="stat-label">项目已分析</div>
|
||||
</div>
|
||||
<div class="stat-card card">
|
||||
<div class="stat-value">20,000+</div>
|
||||
<div class="stat-label">社区成员</div>
|
||||
</div>
|
||||
<div class="stat-card card">
|
||||
<div class="stat-value">99.9%</div>
|
||||
<div class="stat-label">正常运行时间</div>
|
||||
|
||||
@ -7,14 +7,20 @@ import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
vueDevTools(),
|
||||
],
|
||||
plugins: [vue(), vueJsx(), vueDevTools()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
},
|
||||
},
|
||||
sourcemap: false,
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user