This commit is contained in:
aaron 2025-05-24 12:30:36 +08:00
parent 7e82735f82
commit 961b9dd63e
5 changed files with 235 additions and 1 deletions

View File

@ -5,7 +5,7 @@ services:
build:
context: .
dockerfile: Dockerfile
image: tradus-web:1.3.13
image: tradus-web:1.3.14
container_name: tradus-web
ports:
- '6000:80'

View File

@ -341,6 +341,20 @@ onUnmounted(() => {
</svg>
<span class="agent-name">分析历史</span>
</RouterLink>
<RouterLink to="/contact" class="agent-item" @click="showMobileMenu = false">
<svg
class="agent-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
></path>
</svg>
<span class="agent-name">联系我们</span>
</RouterLink>
</div>
<!-- 桌面端用户信息 -->

BIN
src/assets/wechat_qr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

View File

@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import DownloadView from '../views/DownloadView.vue'
import StockAnalysisView from '../views/StockAnalysisView.vue'
import ContactView from '../views/ContactView.vue'
import { useUserStore } from '../stores/user'
const router = createRouter({
@ -53,6 +54,14 @@ const router = createRouter({
title: '分析历史记录',
},
},
{
path: '/contact',
name: 'contact',
component: ContactView,
meta: {
title: '联系我们',
},
},
],
})

211
src/views/ContactView.vue Normal file
View File

@ -0,0 +1,211 @@
<script setup lang="ts">
//
</script>
<template>
<div class="contact-view">
<div class="content-container">
<div class="header-section">
<h1 class="title">联系我们</h1>
<p class="description">
我们是一支专注于加密货币和股票市场分析的专业团队致力于通过人工智能技术为投资者提供最前沿的分析工具
无论您是寻求技术合作商业合作还是投资机会我们都非常欢迎与您联系交流
</p>
</div>
<div class="contact-content">
<div class="contact-card">
<h2 class="card-title">微信联系</h2>
<div class="qr-container">
<img src="@/assets/wechat_qr.png" alt="微信二维码" class="qr-image" />
<p class="scan-hint">扫描二维码添加微信</p>
</div>
</div>
<div class="contact-card">
<h2 class="card-title">电子邮件</h2>
<div class="email-container">
<svg viewBox="0 0 24 24" width="32" height="32" class="email-icon">
<path
fill="currentColor"
d="M20,4H4A2,2,0,0,0,2,6V18a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V6A2,2,0,0,0,20,4Zm0,4-8,5L4,8V6l8,5,8-5Z"
/>
</svg>
<a href="mailto:aaron.l.zhou@gmail.com" class="email-link">aaron.l.zhou@gmail.com</a>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.contact-view {
min-height: 100vh;
background-color: var(--color-bg-primary);
padding: 1rem;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content-container {
max-width: 900px;
margin: 0 auto;
width: 100%;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.header-section {
text-align: center;
margin-bottom: 3rem;
}
.title {
font-size: 2rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.description {
font-size: 1rem;
line-height: 1.8;
color: var(--color-text-secondary);
max-width: 700px;
margin: 0 auto 1.5rem;
}
.contact-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-card {
padding: 2rem;
background-color: var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 1.5rem;
text-align: center;
position: relative;
}
.card-title::after {
content: '';
position: absolute;
bottom: -0.5rem;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: var(--color-accent);
border-radius: 2px;
}
.qr-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.qr-image {
width: 220px;
height: 220px;
object-fit: contain;
border-radius: 10px;
border: 1px solid var(--color-border);
padding: 0.5rem;
background-color: white;
}
.scan-hint {
font-size: 0.9rem;
color: var(--color-text-secondary);
}
.email-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.email-icon {
color: var(--color-accent);
}
.email-link {
font-size: 1.2rem;
color: var(--color-accent);
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
background-color: rgba(var(--color-accent-rgb), 0.1);
transition: all 0.3s ease;
}
.email-link:hover {
background-color: rgba(var(--color-accent-rgb), 0.2);
}
/* 响应式样式 */
@media (max-width: 768px) {
.content-container {
padding: 4.5rem 1rem;
}
.title {
font-size: 1.75rem;
}
.contact-card {
padding: 1.5rem;
}
.qr-image {
width: 180px;
height: 180px;
}
}
@media (max-width: 480px) {
.title {
font-size: 1.5rem;
}
.contact-card {
padding: 1.2rem;
}
.qr-image {
width: 160px;
height: 160px;
}
.email-link {
font-size: 1rem;
}
}
</style>