|
|
|
@ -0,0 +1,404 @@ |
|
|
|
<template> |
|
|
|
<div class="container"> |
|
|
|
<!-- 顶部介绍部分 --> |
|
|
|
<div class="header"> |
|
|
|
<div class="header-top"> |
|
|
|
<div class="logo"> |
|
|
|
<img src="../pic/logo.jpg" alt="Logo" /> |
|
|
|
</div> |
|
|
|
<button class="more-button" @click="showMore">查看更多</button> |
|
|
|
</div> |
|
|
|
<div class="header-content"> |
|
|
|
<p> |
|
|
|
博股国际投资论坛(Bogul International Investment Forum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高端投资人士提供深度学习，解读国际经济形势，并研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波段进行盈利。 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 专题部分 --> |
|
|
|
<div class="topic"> |
|
|
|
<div class="topic-header"> |
|
|
|
<h2 class="topic-title">专题</h2> |
|
|
|
<button class="more-button" @click="showMoreTopics">查看更多</button> |
|
|
|
</div> |
|
|
|
<h3 class="topic-subtitle" style="text-align: left;">前言股市投资分享之左侧交易</h3> |
|
|
|
|
|
|
|
<!-- 视频列表 --> |
|
|
|
<div class="video-list"> |
|
|
|
<div class="video-card" v-for="(video, index) in videos" :key="index"> |
|
|
|
<div class="video-thumbnail" @click="incrementViews(index)"> |
|
|
|
<img :src="video.thumbnail" alt="Video Thumbnail" /> |
|
|
|
<div class="play-button"> |
|
|
|
<span class="play-icon">▶</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="video-info"> |
|
|
|
<div class="video-title"> |
|
|
|
<span class="gold-icon">🏆</span> |
|
|
|
{{ video.title }} |
|
|
|
</div> |
|
|
|
<div class="video-meta"> |
|
|
|
<span class="author">博股俱乐部</span> |
|
|
|
<div class="video-stats"> |
|
|
|
<div class="stat-item"> |
|
|
|
<img src="../pic/link.jpg" alt="HomilyLink" class="homily-icon" /> |
|
|
|
<span class="homily-text">HomilyLink</span> |
|
|
|
</div> |
|
|
|
<div class="stat-item"> |
|
|
|
<span class="date">{{ video.date }}</span> |
|
|
|
</div> |
|
|
|
<div class="stat-item"> |
|
|
|
<img src="../pic/bofang.png" alt="Views" class="views-icon" /> |
|
|
|
<span class="views">{{ video.views }}</span> |
|
|
|
</div> |
|
|
|
<div class="stat-item"> |
|
|
|
<img src="../pic/bofang.png" alt="Comments" class="comments-icon" @click.stop="toggleComments(index)" /> |
|
|
|
<span class="comments">{{ video.comments }}</span> |
|
|
|
</div> |
|
|
|
<div class="stat-item"> |
|
|
|
<img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" /> |
|
|
|
<span class="likes">{{ video.likes }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 弹出框 --> |
|
|
|
<div v-if="showModal" class="modal"> |
|
|
|
<div class="modal-content"> |
|
|
|
<span class="close-button" @click="closeModal">×</span> |
|
|
|
<h3>{{ modalTitle }}</h3> |
|
|
|
<p>{{ modalContent }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, onMounted } from 'vue'; |
|
|
|
|
|
|
|
const videos = ref([ |
|
|
|
{ |
|
|
|
thumbnail: 'src/pic/1.jpg', |
|
|
|
title: '第一节《影形结构同现》', |
|
|
|
date: '05-26 11:42', |
|
|
|
views: 643, |
|
|
|
comments: 5, |
|
|
|
likes: 3, |
|
|
|
isLiked: false, |
|
|
|
isCommented: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
thumbnail: 'src/pic/2.jpg', |
|
|
|
title: '第二节《强势结构形态》', |
|
|
|
date: '01-11 09:55', |
|
|
|
views: 498, |
|
|
|
comments: 10, |
|
|
|
likes: 12, |
|
|
|
isLiked: false, |
|
|
|
isCommented: false |
|
|
|
}, |
|
|
|
]); |
|
|
|
|
|
|
|
// 弹出框相关 |
|
|
|
const showModal = ref(false); |
|
|
|
const modalTitle = ref(''); |
|
|
|
const modalContent = ref(''); |
|
|
|
|
|
|
|
// 增加播放量 |
|
|
|
const incrementViews = (index) => { |
|
|
|
videos.value[index].views += 1; |
|
|
|
saveToLocalStorage(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 切换评论状态 |
|
|
|
const toggleComments = (index) => { |
|
|
|
if (videos.value[index].isCommented) { |
|
|
|
videos.value[index].comments -= 1; |
|
|
|
videos.value[index].isCommented = false; |
|
|
|
} else { |
|
|
|
videos.value[index].comments += 1; |
|
|
|
videos.value[index].isCommented = true; |
|
|
|
} |
|
|
|
saveToLocalStorage(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 切换点赞状态 |
|
|
|
const toggleLikes = (index) => { |
|
|
|
if (videos.value[index].isLiked) { |
|
|
|
videos.value[index].likes -= 1; |
|
|
|
videos.value[index].isLiked = false; |
|
|
|
} else { |
|
|
|
videos.value[index].likes += 1; |
|
|
|
videos.value[index].isLiked = true; |
|
|
|
} |
|
|
|
saveToLocalStorage(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 查看更多的动态效果 |
|
|
|
const showMore = () => { |
|
|
|
modalTitle.value = '查看更多内容'; |
|
|
|
modalContent.value = '正在加载更多内容...'; |
|
|
|
showModal.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
// 查看更多专题的动态效果 |
|
|
|
const showMoreTopics = () => { |
|
|
|
modalTitle.value = '查看更多专题'; |
|
|
|
modalContent.value = '正在加载更多专题...'; |
|
|
|
showModal.value = true; |
|
|
|
}; |
|
|
|
|
|
|
|
// 关闭弹出框 |
|
|
|
const closeModal = () => { |
|
|
|
showModal.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
// 保存到本地存储 |
|
|
|
const saveToLocalStorage = () => { |
|
|
|
localStorage.setItem('videos', JSON.stringify(videos.value)); |
|
|
|
}; |
|
|
|
|
|
|
|
// 从本地存储加载 |
|
|
|
const loadFromLocalStorage = () => { |
|
|
|
const savedVideos = localStorage.getItem('videos'); |
|
|
|
if (savedVideos) { |
|
|
|
videos.value = JSON.parse(savedVideos); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 清除本地存储（调试用） |
|
|
|
localStorage.removeItem('videos'); |
|
|
|
// 初始化加载 |
|
|
|
onMounted(() => { |
|
|
|
loadFromLocalStorage(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
|
|
.header-content p { |
|
|
|
font-size: 20px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.container { |
|
|
|
max-width: 1600px; |
|
|
|
margin: 0 auto; |
|
|
|
padding: 20px; |
|
|
|
font-family: 'Arial', sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
/* 顶部介绍部分样式 */ |
|
|
|
.header { |
|
|
|
background-color: #f9c784; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
margin-bottom: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.header-top { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.logo { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.logo img { |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.header-content { |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1.6; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.more-button { |
|
|
|
background-color: rgba(249, 199, 132, 0.7); |
|
|
|
border: none; |
|
|
|
padding: 8px 15px; |
|
|
|
border-radius: 5px; |
|
|
|
cursor: pointer; |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
transition: background-color 0.3s; |
|
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.more-button:hover { |
|
|
|
background-color: rgba(249, 199, 132, 1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 专题部分样式 */ |
|
|
|
.topic { |
|
|
|
background: linear-gradient(to right, #fff, #fff9e6); |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
margin-bottom: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.topic-header { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.topic-title { |
|
|
|
font-size: 24px; |
|
|
|
color: #0066cc; |
|
|
|
} |
|
|
|
|
|
|
|
.topic-subtitle { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: normal; |
|
|
|
margin-bottom: 20px; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
/* 视频列表样式 */ |
|
|
|
.video-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.video-card { |
|
|
|
display: flex; |
|
|
|
background-color: white; |
|
|
|
border-radius: 5px; |
|
|
|
overflow: hidden; |
|
|
|
cursor: pointer; |
|
|
|
transition: transform 0.3s ease; |
|
|
|
width: 100%; |
|
|
|
padding: 5px; |
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.video-card:hover { |
|
|
|
transform: translateY(-5px); |
|
|
|
} |
|
|
|
|
|
|
|
.video-thumbnail { |
|
|
|
position: relative; |
|
|
|
width: 240px; |
|
|
|
height: 120px; |
|
|
|
} |
|
|
|
|
|
|
|
.video-thumbnail img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
|
|
|
|
.play-button { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
color: white; |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.video-info { |
|
|
|
flex: 1; |
|
|
|
padding: 15px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.video-title { |
|
|
|
font-size: 18px; |
|
|
|
margin-bottom: 10px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.gold-icon { |
|
|
|
color: #ffc107; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.video-meta { |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.author { |
|
|
|
color: #ff6b6b; |
|
|
|
margin-bottom: 5px; |
|
|
|
margin-right: 90%; |
|
|
|
} |
|
|
|
|
|
|
|
.video-stats { |
|
|
|
display: flex; |
|
|
|
gap: 15px; |
|
|
|
margin-top: 10px; |
|
|
|
font-size: 12px; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.homily-icon, .date-icon, .views-icon, .comments-icon, .likes-icon { |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.stat-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-right: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.homily-text { |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 弹出框样式 */ |
|
|
|
.modal { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-content { |
|
|
|
background-color: white; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
max-width: 500px; |
|
|
|
width: 80%; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.close-button { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
right: 10px; |
|
|
|
font-size: 24px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
</style> |
宋杰
1 month ago
