Skip to content

P
prd
Commit b46f7cdd authored by caoxu's avatar caoxu
Browse files
Options

Add: 新增MeetPanda FirstPage

parent 6032a9a8
Show whitespace changes
Inline Side-by-side
Showing with 490 additions and 0 deletions
src/router/index.js
View file @ b46f7cdd
......@@ -16,6 +16,21 @@ const router = createRouter({
path: '/museum-night',
name: 'museumNight',
component: () => import('../views/MuseumNightView.vue')
},
{
path: '/city-introduction',
name: 'cityIntroduction',
component: () => import('../views/CityIntroductionView.vue')
},
{
path: '/team-page',
name: 'teamPage',
component: () => import('../views/TeamPageView.vue')
},
{
path: '/meetpanda-firstpage',
name: 'meetpandaFirstPage',
component: () => import('../views/MeetPandaFirstPageView.vue')
}
]
})
......
src/views/MeetPandaFirstPageView.vue 0 → 100644
View file @ b46f7cdd
<template>
<div class="meetpanda-page">
<div class="header">
<button class="back-button" @click="goBack">←</button>
<h1 class="page-title">MeetPanda</h1>
</div>
<div class="main-content">
<div class="search-section">
<div class="search-box">
<input
type="text"
v-model="searchQuery"
class="search-input"
placeholder="搜索用户、动态..."
/>
<button class="search-btn">🔍</button>
</div>
<div class="hot-searches">
<h3 class="hot-title">🔥 热门搜索</h3>
<div class="hot-tags">
<span
v-for="(tag, index) in hotTags"
:key="index"
class="hot-tag"
@click="searchByTag(tag)"
>
{{ tag }}
</span>
</div>
</div>
</div>
<div class="user-dynamics-section">
<h2 class="section-title">用户动态</h2>
<div class="dynamics-list">
<div v-for="dynamic in dynamics" :key="dynamic.id" class="dynamic-card">
<div class="dynamic-header">
<img :src="dynamic.userAvatar" :alt="dynamic.userName" class="user-avatar" />
<div class="user-info">
<h4 class="user-name">{{ dynamic.userName }}</h4>
<span class="user-status" :class="dynamic.userStatus">{{ dynamic.userStatusText }}</span>
</div>
<span class="post-time">{{ dynamic.time }}</span>
</div>
<div class="dynamic-content">
<p class="dynamic-text">{{ dynamic.content }}</p>
<div v-if="dynamic.images && dynamic.images.length > 0" class="dynamic-images">
<img
v-for="(image, index) in dynamic.images"
:key="index"
:src="image"
:alt="`图片 ${index + 1}`"
class="dynamic-image"
/>
</div>
</div>
<div class="dynamic-actions">
<button class="action-btn like-btn" @click="likeDynamic(dynamic)">
<span class="action-icon">❤️</span>
<span class="action-count">{{ dynamic.likes }}</span>
</button>
<button class="action-btn comment-btn" @click="showComments(dynamic)">
<span class="action-icon">💬</span>
<span class="action-count">{{ dynamic.comments }}</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const searchQuery = ref('')
const hotTags = ref([
'洛杉矶旅游',
'美食推荐',
'景点打卡',
'组队活动',
'摄影分享',
'攻略交流'
])
const dynamics = ref([
{
id: 1,
userName: '小明',
userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop',
userStatus: 'online',
userStatusText: '在线',
time: '10分钟前',
content: '今天参观了洛杉矶的格里菲斯天文台，真的太震撼了！强烈推荐大家去看看。',
images: [
'https://images.unsplash.com/photo-14648053576-a1e1e6e4a8b?w=400&h=300&fit=crop',
'https://images.unsplash.com/photo-14653134876-a1e1e6e4a8b?w=400&h=300&fit=crop'
],
likes: 128,
comments: 32
},
{
id: 2,
userName: '小红',
userAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
userStatus: 'online',
userStatusText: '在线',
time: '30分钟前',
content: '在圣莫尼卡海滩看日落，景色太美了！',
images: [
'https://images.unsplash.com/photo-1507525424636-bb4d9b0b7b?w=400&h=300&fit=crop'
],
likes: 89,
comments: 15
},
{
id: 3,
userName: '大伟',
userAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
userStatus: 'offline',
userStatusText: '离线',
time: '1小时前',
content: '探索了好莱坞星光大道，发现了很多明星的手印！',
images: [],
likes: 256,
comments: 48
},
{
id: 4,
userName: '小美',
userAvatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop',
userStatus: 'online',
userStatusText: '在线',
time: '2小时前',
content: '在迪士尼乐园玩了一整天，太开心了！',
images: [
'https://images.unsplash.com/photo-1470770841072-f698b740318?w=400&h=300&fit=crop',
'https://images.unsplash.com/photo-1470770841072-f698b740318?w=400&h=300&fit=crop'
],
likes: 167,
comments: 23
},
{
id: 5,
userName: '阿强',
userAvatar: 'https://images.unsplash.com/photo-1506794778202-c84b822d673?w=100&h=100&fit=crop',
userStatus: 'online',
userStatusText: '在线',
time: '3小时前',
content: '品尝了正宗的墨西哥卷饼，味道超赞！',
images: [],
likes: 345,
comments: 67
}
])
const goBack = () => {
router.back()
}
const searchByTag = (tag) => {
searchQuery.value = tag
console.log('搜索标签：', tag)
}
const likeDynamic = (dynamic) => {
dynamic.likes++
console.log('点赞动态：', dynamic.userName)
}
const showComments = (dynamic) => {
console.log('查看评论：', dynamic.userName)
}
</script>
<style scoped>
.meetpanda-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
background-color: white;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.back-button {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 0;
color: #333;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.page-title {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #333;
flex: 1;
text-align: center;
}
.main-content {
padding: 16px;
}
.search-section {
background-color: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.search-box {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.search-input {
flex: 1;
padding: 12px 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 15px;
color: #333;
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: #42b883;
box-shadow: 0 0 0 3px rgba(66, 184, 131, 0.1);
}
.search-btn {
width: 44px;
height: 44px;
border: none;
background-color: #42b883;
color: white;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.search-btn:hover {
background-color: #35a37d;
}
.hot-searches {
margin-top: 16px;
}
.hot-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 12px 0;
}
.hot-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hot-tag {
padding: 8px 16px;
background-color: #f0f8f4;
color: #42b883;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.hot-tag:hover {
background-color: #42b883;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(66, 184, 131, 0.2);
}
.user-dynamics-section {
background-color: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 2px solid #42b883;
}
.dynamics-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.dynamic-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 16px;
background-color: #fafafa;
transition: all 0.3s ease;
}
.dynamic-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dynamic-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #42b883;
}
.user-info {
flex: 1;
}
.user-name {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 4px 0;
}
.user-status {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.user-status.online {
background-color: #e8f5e9;
color: #4caf50;
}
.user-status.offline {
background-color: #f5f5f5;
color: #9e9e9e;
}
.post-time {
font-size: 13px;
color: #999;
margin-left: auto;
}
.dynamic-content {
margin-bottom: 12px;
}
.dynamic-text {
font-size: 15px;
line-height: 1.6;
color: #666;
margin: 0;
}
.dynamic-images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
margin-top: 12px;
}
.dynamic-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
transition: all 0.3s ease;
}
.dynamic-image:hover {
transform: scale(1.05);
}
.dynamic-actions {
display: flex;
gap: 12px;
padding-top: 12px;
border-top: 1px solid #e0e0e0;
}
.action-btn {
flex: 1;
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
}
.like-btn {
background-color: white;
color: #666;
}
.like-btn:hover {
background-color: #ffebee;
color: #ff6b6b;
}
.comment-btn {
background-color: white;
color: #666;
}
.comment-btn:hover {
background-color: #e8f5e9;
color: #42b883;
}
.action-icon {
font-size: 18px;
}
.action-count {
font-size: 14px;
font-weight: 600;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment