Merge branch 'dev' of http://39.101.133.168:8807/majun/practice_Vue into dev

src/api/bookApi.js

@@ -0,0 +1,7 @@
+import service from "./indexApi";
+const bookApi = {
+  getBookList() {
+    return service.post("/api/ebooks/getEbookList");
+  },
+}
+export default bookApi;

src/api/homeApi.js

@@ -1,8 +1,8 @@
 import service from "./indexApi";
 const homeApi = {
-  selectHome(){
+  selectHome(queryType){
     //查询首页的数据
-    return service.post('/api/show/getShowList');
+    return service.post('/api/show/getShowList', {queryType: queryType});
   }
 
 }

src/api/indexApi.js

@@ -6,4 +6,4 @@ const service = axios.create({
   responseType: "json",
 });
 
-export default service;
+export default service;

src/api/pindaoApi.js

@@ -0,0 +1,10 @@
+import service from "./indexApi";
+const pindaoApi = {
+  selectPindao(queryType){
+    //查询首页的数据
+    return service.post('/api/show/getShowList', {queryType: queryType});
+  }
+
+}
+
+export default pindaoApi;

src/components/TheFrame.vue

@@ -1,6 +1,8 @@
 <template>
   <el-container class="full-height">
-    <el-header class="header">Header</el-header>
+    <el-header class="header">
+      <div class="header-logo">弘历欢迎您！</div>
+    </el-header>
     <el-container>
       <el-aside class="aside">
         <div class="aside-content">
@@ -23,6 +25,10 @@ import { ElContainer, ElHeader, ElAside, ElMain } from 'element-plus';
 </script>
 
 <style scoped>
+
+.header-logo{
+  font-size: 24px;
+}
 .full-height {
   height: 100%;
 }

src/views/BookView.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="book-list">
-    <div v-for="book in books" :key="book.title" class="book-item">
-      <img :src="book.cover" :alt="book.title">
-      <div class="book-info">
+    <div v-for="book in books" :key="book.id" class="book-item">
+      <img :src="book.cover">
+      <!-- <img :src="book.cover" :alt="book.title"> -->
+      <div class="book-info" >
         <h3>{{ book.title }}</h3>
         <p>{{ book.description }}</p>
-        <p>阅读次数：{{ book.reads }}次</p>
+        <p>阅读次数：{{ book.viewCount }}次</p>
       </div>
       <button @click="handleReadBook(book.title)">立即阅读</button>
     </div>
@@ -57,34 +58,45 @@ export default {
 };
 </script> -->
 <script setup>
+import bookApi from '@/api/bookApi';
 import { ref } from 'vue';
 
-const books = ref([
-  {
-    title: "发财线秘籍",
-    description: "发财线经济（阅读时间截止为2024年6月30日）",
-    reads: 2490,
-    cover: "src/assets/发财线.png"
-  },
-  {
-    title: "解套宝典",
-    description: "解套宝典（阅读截止时间为2024年12月31日）",
-    reads: 1057,
-    cover: "src/assets/解套.png"
-  },
-  {
-    title: "十年200倍——上册",
-    description: "十年200倍——上册（阅读截止时间为2024年12月31日）",
-    reads: 1073,
-    cover: "src/assets/十年上.png"
-  },
-  {
-    title: "十年200倍——下册",
-    description: "十年200倍——下册（阅读截止时间为2024年12月31日）",
-    reads: 1018,
-    cover: "src/assets/十年下.png"
-  }
-]);
+const books = ref([]);
+//向后端发送请求
+function getBooks() {
+  bookApi.getBookList().then(resp => {
+    books.value = resp.data.list;
+    console.log(books.value);
+  } );
+}
+getBooks();
+
+// const books = ref([
+//   {
+//     title: "发财线秘籍",
+//     description: "发财线经济（阅读时间截止为2024年6月30日）",
+//     reads: 2490,
+//     cover: "src/assets/发财线.png"
+//   },
+//   {
+//     title: "解套宝典",
+//     description: "解套宝典（阅读截止时间为2024年12月31日）",
+//     reads: 1057,
+//     cover: "src/assets/解套.png"
+//   },
+//   {
+//     title: "十年200倍——上册",
+//     description: "十年200倍——上册（阅读截止时间为2024年12月31日）",
+//     reads: 1073,
+//     cover: "src/assets/十年上.png"
+//   },
+//   {
+//     title: "十年200倍——下册",
+//     description: "十年200倍——下册（阅读截止时间为2024年12月31日）",
+//     reads: 1018,
+//     cover: "src/assets/十年下.png"
+//   }
+// ]);
 
 const handleReadBook = (title) => {
   alert(`您点击了《${title}》`);
@@ -92,6 +104,10 @@ const handleReadBook = (title) => {
 </script>
 
 <style>
+
+.book-item:hover{
+  transform: scale(1.01);
+}
 body {
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
@@ -102,7 +118,6 @@ body {
 .book-list {
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
 .book-item {

src/views/ChannelView.vue

@@ -3,10 +3,10 @@
 
     <el-header class="channel-header">
       <div class="header-left">
-        <img :src="channelLogo" class="adaptive-avatar" />
+        <img src="../assets/2.png" class="adaptive-avatar" />
         <div class="channel-info">
-          <h1>{{ channelName }}</h1>
-          <p>{{ subscribers }}已订阅</p>
+          <h1>{{ items.publisherName }}</h1>
+          <p>{{ dingyue }}已订阅</p>
         </div>
       </div>
       <el-button class="subscribe-button" :class="{ disabled: isSubscribed }" @click="toggleSubscribe">
@@ -14,20 +14,18 @@
       </el-button>
     </el-header>
 
-
-
     <!-- 频道内容容器 -->
     <el-main class="channel-content">
-      <div v-for="item in contentItems" :key="item.title" class="content-card">
+      <div v-for="item in items" :key="item.title" class="content-card">
         <div class="content-item">
           <img :src="item.cover" class="content-cover" @click="showLoading(item.link)" />
           <div class="content-details">
             <h2>{{ item.title }}</h2>
             <div class="content-meta">
-              <img :src="channelLogo" class="adaptive-avatar2" />
-              <span class="channel-name">{{ channelName }}</span>
-              <span class="content-comments">{{ item.comments }}评论</span>
-              <span class="content-date">{{ item.date }}</span>
+              <img :src="item.publisherAvatar" class="adaptive-avatar2" />
+              <span class="channel-name">{{ item.publisherName }}</span>
+              <span class="content-comments">{{ item.commentCount }}评论</span>
+              <span class="content-date">{{ item.publishTime }}</span>
             </div>
           </div>
         </div>
@@ -37,54 +35,28 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-// import { ElContainer, ElHeader, ElMain, ElButton} from 'element-plus';
-
-
-const channelLogo = 'src/assets/channel-avatar.png';
-const channelName = ref('量价时空四维预测术');
-const subscribers = ref(5341);
-const isSubscribed = ref(false);
-const contentItems = ref([
-  {
-    title: '2/7~7/17 精彩直播课程安排，弘粉同城会全面启程！',
-    cover: 'src/assets/cover1.png',
-    link: '#',
-    comments: 0,
-    date: '07-01 17:27'
-  },
-  {
-    title: '大国博弈下的深度交易策略',
-    cover: 'src/assets/cover2.png',
-    link: '#',
-    comments: 1,
-    date: '05-28 15:35'
-  },
-  {
-    title: '弘历软件云版重磅迎来升级三部曲',
-    cover: 'src/assets/cover3.png',
-    link: '#',
-    comments: 28,
-    date: '05-28 09:58'
-  },
-  {
-    title: '给弘历老师的一封信',
-    cover: 'src/assets/cover4.png',
-    link: '#',
-    comments: 0,
-    date: '05-26 18:18'
-  }
-]);
 
-const toggleSubscribe = () => {
-  isSubscribed.value = !isSubscribed.value;
-};
+import pindaoApi from '@/api/pindaoApi';
+import { ref, onMounted } from 'vue';
+
+// 定义响应式变量
+const items = ref([]);
+
+const dingyue = ref("500人");
+//获取频道列表
+function getpindao(queryType) {
+  pindaoApi.selectPindao(queryType).then((resp) => {
+    if (resp.data) {
+      items.value = resp.data.list;
+      console.log(items.value);
+    } else {
+      console.log('获取频道列表失败');
+    }
+  });
+}
+
+getpindao(4);
 
-const showLoading = () => {
-  alert('正在跳转到相对应内容...');
-  // 这里可以添加跳转逻辑，例如：
-  // window.location.href = link;
-};
 </script>
 
 

src/views/ClubView.vue

@@ -35,14 +35,14 @@
           <div class="video-info">
             <div class="video-title">
               <span class="gold-icon">🏆</span>
-              {{ video.title }}
+              {{ videos.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>
+                  <img src="../pic/link.jpg" alt="HomilyLink666" class="homily-icon" />
+                  <span class="homily-text">{{ videos.publisherName }}</span>
                 </div>
                 <div class="stat-item">
                   <span class="date">{{ videos.publishTime }}</span>
@@ -57,7 +57,7 @@
                 </div>
                 <div class="stat-item">
                   <img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" />
-                  <span class="likes">{{ videos.likeCount}}</span>
+                  <span class="likes">{{ videos.likeCount }}</span>
                 </div>
               </div>
             </div>
@@ -77,158 +77,83 @@
   </div>
 </template>
 
-
-
-
 <script setup>
-
-// import { ref, onMounted } from 'vue';
-// import axios from 'axios';
-
-// // 定义接口地址常量
-// const API_URL = 'http://192.168.8.235:8000/api/show/getShowList';
-
-// // 定义接口调用函数
-// const fetchShowList = async () => {
-//   try {
-//     // 发送 POST 请求
-//     const response = await axios.post(API_URL);
-//     // 处理响应数据
-//     console.log('接口返回数据:', response.data);
-
-//     // 这里可以根据返回的数据更新页面状态
-//   } catch (error) {
-//     // 处理错误
-//     console.error('接口请求出错:', error);
-//   }
-// };
-
-// 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 逻辑
-// onMounted(() => {
-//   fetchShowList();
-//   loadFromLocalStorage();
-// });
-
-
 import boguApi from '@/api/boguApi';
-import { ref } from 'vue';
-const videos = ref([]);
+import { ref, onMounted } from 'vue';
 
-
-function formatTime(queryType) {
-  boguApi.selectBogu(queryType).then(resp => {
-    if(resp.data){
+// 定义响应式变量
+const videos = ref([]);
+const showModal = ref(false);
+const modalTitle = ref('');
+const modalContent = ref('');
+
+// 获取视频列表
+function getbohuhuiyuan(queryType) {
+  boguApi.selectBogu(queryType).then((resp) => {
+    if (resp.data) {
       videos.value = resp.data.list;
       console.log(videos.value);
+    } else {
+      console.log('获取视频列表失败');
     }
-  }).catch(error => {
-    // 处理请求错误
-    console.error('获取视频列表失败:', error);
   });
 }
 
-formatTime();
+getbohuhuiyuan(3);
+
+// 增加播放量
+const incrementViews = (index) => {
+  videos.value[index].viewCount += 1;
+  saveToLocalStorage();
+};
+
+// 切换评论状态
+const toggleComments = (index) => {
+  if (videos.value[index].isCommented) {
+    videos.value[index].commentCount -= 1;
+    videos.value[index].isCommented = false;
+  } else {
+    videos.value[index].commentCount += 1;
+    videos.value[index].isCommented = true;
+  }
+  saveToLocalStorage();
+};
+
+// 切换点赞状态
+const toggleLikes = (index) => {
+  if (videos.value[index].isLiked) {
+    videos.value[index].likeCount -= 1;
+    videos.value[index].isLiked = false;
+  } else {
+    videos.value[index].likeCount += 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;
+};
 
 </script>
 
-
-
-
 <style scoped>
-
+/* 样式部分保持不变 */
 .header-content p {
   font-size: 20px;
   text-align: left;
@@ -318,7 +243,7 @@ formatTime();
 .video-list {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
 }
 
 .video-card {
@@ -449,4 +374,4 @@ formatTime();
   font-size: 24px;
   cursor: pointer;
 }
-</style>    
+</style>

src/views/HomeView.vue

@@ -4,27 +4,23 @@
       <el-col :span="17" :xs="24">
         <div class="section-title">推荐</div>
         <el-row :gutter="20" class="recommend-videos" style="margin-right: -25px;">
-          <el-col :span="24" v-for="video in recommendedVideos" :key="video.id">
+          <el-col :span="24" v-for="video in video" :key="video.id">
             <el-card class="video-card">
               <div class="video-content">
-                <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
+                <img :src="video.cover" alt="视频缩略图" class="video-thumbnail" />
                 <div class="video-info">
                   <div class="video-title1">{{ video.title }}</div>
-                  <div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.author == '博股俱乐部'" /><img v-else /></div>
+                  <div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.clubId == '1'" /><img v-else /></div>
                   <div class="video-meta1">
-                    <img class="icon" src="../pic/link.jpg" />
-                    <span> {{ video.author }} {{ video.time }}</span>
+                    <img class="icon" :src="video.publisherAvatar" />
+                    <span> {{ video.publisherName }} {{ video.publishTime }}</span>
                     <div class="video-stats">
-                      <el-icon>
-                        <View />
-                      </el-icon>
-                      <el-button type="text">{{ video.views }}</el-button>
-                      <el-icon>
-                        <ChatDotSquare />
-                      </el-icon>
-                      <el-button type="text">{{ video.likes }}</el-button>
+                      <el-icon><View /></el-icon>
+                      <el-button type="text" style="color: black;">{{ video.videoDuration }}</el-button>
+                      <el-icon><ChatDotSquare /></el-icon>
+                      <el-button type="text" style="color: black;">{{ video.likeCount }}</el-button>
                       <img src="../pic/like.png" class="like">
-                      <el-button type="text">{{ video.comments }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.commentCount }}</el-button>
                     </div>
                   </div>
                 </div>
@@ -39,16 +35,16 @@
           <el-col :span="24" v-for="video in featuredVideos" :key="video.id">
             <el-card class="video-card">
               <div class="video-content">
-                <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
+                <img :src="video.cover" alt="视频缩略图" class="video-thumbnail" />
                 <div class="video-info">
                   <div class="video-title2">{{ video.title }}</div>
                   <div class="video-meta2">
                     <div class="video-stats">
-                      <el-icon>
+                      <el-icon class="my-icon">
                         <View />
                       </el-icon>
-                      <el-button type="text">{{ video.views }}</el-button>
-                      <el-button type="text">{{ video.time }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.viewCount }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.publishTime }}</el-button>
                       <!-- <el-button type="text">{{ video.comments }}</el-button> -->
                     </div>
                   </div>
@@ -63,134 +59,172 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import 'element-plus/dist/index.css';
-// import homeApi from '@/api/homeApi';
-
-//初始化所有的推荐视频
-// const video = ref([]);
-
-//定义方法，获取推荐视频
-// function getAllRecommendedVideos(queryType) {
-//   homeApi.selectHome()
-//    .then(resp =>{
-//     video.value = resp.data.QueryRecommend;
-//    });
-// }
-
-//页面加载时调用
-// getAllRecommendedVideos(1);
-
-
-const recommendedVideos = ref([
-  {
-    id: 1,
-    thumbnail: 'src/pic/money.png',
-    title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)',
-    author: '小金',
-    time: '23小时前',
-    views: 15,
-    likes: 0,
-    comments: 1,
-  },
-  {
-    id: 2,
-    thumbnail: 'src/pic/touzi.png',
-    title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)',
-    author: 'STW',
-    time: '07-16 17:47',
-    views: 5,
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: 3,
-    thumbnail: 'src/pic/qiangshi.png',
-    title: '第二节《强势结构形态》',
-    author: '博股俱乐部',
-    time: '01-24 09:55',
-    views: 498,
-    likes: 0,
-    comments: 12,
-  },
-  {
-    id: 4,
-    thumbnail: 'src/pic/jihuigu.png',
-    title: '价值投资之机会谷一Josie老师(11.7.24)',
-    author: 'STW',
-    time: '07-16 17:37',
-    views: 6,
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: 5,
-    thumbnail: 'src/pic/A.png',
-    title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告',
-    author: '宋建军',
-    time: '07-16 16:22',
-    views: 3,
-    likes: 0,
-    comments: 0,
-  },
-]);
+import homeApi from '@/api/homeApi';
+import { ref } from 'vue';
+
+
+
+
+// 初始化所有的推荐视频
+const video = ref([]);
+
+// 定义方法，获取推荐视频
+function getAllRecommendedVideos(queryType) {
+  homeApi.selectHome(queryType)
+   .then(resp =>{
+    if(resp.data){
+      video.value = resp.data.list;
+      console.log(video.value);
+    }else{
+      console.log('获取推荐视频失败');
+    }
+   });
+}
+
+
+
+
+//精选视频
+const featuredVideos = ref([]);
+
+// 定义方法，获取精选视频
+function getAllFeaturedVideos(queryType) {
+  homeApi.selectHome(queryType)
+   .then(resp =>{
+    if(resp.data){
+      featuredVideos.value = resp.data.list;
+      console.log(featuredVideos.value);
+    }else{
+      console.log('获取精选视频失败');
+    }
+   });
+}
+
+// 页面加载时调用
+getAllRecommendedVideos(1);
+getAllFeaturedVideos(2);
+
+
+
+
+
+// const recommendedVideos = ref([
+//   {
+//     id: 1,
+//     thumbnail: 'src/pic/money.png',
+//     title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)',
+//     author: '小金',
+//     time: '23小时前',
+//     views: 15,
+//     likes: 0,
+//     comments: 1,
+//   },
+//   {
+//     id: 2,
+//     thumbnail: 'src/pic/touzi.png',
+//     title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)',
+//     author: 'STW',
+//     time: '07-16 17:47',
+//     views: 5,
+//     likes: 0,
+//     comments: 0,
+//   },
+//   {
+//     id: 3,
+//     thumbnail: 'src/pic/qiangshi.png',
+//     title: '第二节《强势结构形态》',
+//     author: '博股俱乐部',
+//     time: '01-24 09:55',
+//     views: 498,
+//     likes: 0,
+//     comments: 12,
+//   },
+//   {
+//     id: 4,
+//     thumbnail: 'src/pic/jihuigu.png',
+//     title: '价值投资之机会谷一Josie老师(11.7.24)',
+//     author: 'STW',
+//     time: '07-16 17:37',
+//     views: 6,
+//     likes: 0,
+//     comments: 0,
+//   },
+//   {
+//     id: 5,
+//     thumbnail: 'src/pic/A.png',
+//     title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告',
+//     author: '宋建军',
+//     time: '07-16 16:22',
+//     views: 3,
+//     likes: 0,
+//     comments: 0,
+//   },
+// ]);
 
 // 精选视频
-const featuredVideos = ref([
-  {
-    id: 1,
-    thumbnail: 'src/pic/wengehua.png',
-    title: '温哥华弘粉之约-北美同城会陪你共话投资',
-    author: 'CANADA',
-    time: '07-08 19:47',
-    views: 523,
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: 2,
-    thumbnail: 'src/pic/shengkuang.png',
-    title: '盛况！香港弘粉同城会圆满成功！',
-    author: '精彩回顾',
-    time: '07-08 19:47',
-    views: 307,
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: 3,
-    thumbnail: 'src/pic/jinrongzhan.png',
-    title: '金融战事再升级-欧盟对中国电动车征税的真相',
-    author: '精彩回顾',
-    time: '06-27 17:30',
-    views: 144,
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: 4,
-    thumbnail: 'src/pic/youxueban.png',
-    title: '弘粉游学班：赏美景、品美食、学投资！',
-    author: '精彩回顾',
-    time: '06-29 19:11',
-    views: 658,
-    likes: 0,
-    comments: 0,
-  },
-  {
-    id: 5,
-    thumbnail: 'src/pic/meiyuanbaquan.png',
-    title: '美元霸权地位动摇！"石油美元"时代...',
-    author: '精彩回顾',
-    time: '06-18 14:00',
-    views: 538,
-    likes: 0,
-    comments: 0,
-  },
-]);
+// const featuredVideos = ref([
+//   {
+//     id: 1,
+//     thumbnail: 'src/pic/wengehua.png',
+//     title: '温哥华弘粉之约-北美同城会陪你共话投资',
+//     author: 'CANADA',
+//     time: '07-08 19:47',
+//     views: 523,
+//     likes: 0,
+//     comments: 0,
+//   },
+//   {
+//     id: 2,
+//     thumbnail: 'src/pic/shengkuang.png',
+//     title: '盛况！香港弘粉同城会圆满成功！',
+//     author: '精彩回顾',
+//     time: '07-08 19:47',
+//     views: 307,
+//     likes: 0,
+//     comments: 0,
+//   },
+//   {
+//     id: 3,
+//     thumbnail: 'src/pic/jinrongzhan.png',
+//     title: '金融战事再升级-欧盟对中国电动车征税的真相',
+//     author: '精彩回顾',
+//     time: '06-27 17:30',
+//     views: 144,
+//     likes: 0,
+//     comments: 0,
+//   },
+//   {
+//     id: 4,
+//     thumbnail: 'src/pic/youxueban.png',
+//     title: '弘粉游学班：赏美景、品美食、学投资！',
+//     author: '精彩回顾',
+//     time: '06-29 19:11',
+//     views: 658,
+//     likes: 0,
+//     comments: 0,
+//   },
+//   {
+//     id: 5,
+//     thumbnail: 'src/pic/meiyuanbaquan.png',
+//     title: '美元霸权地位动摇！"石油美元"时代...',
+//     author: '精彩回顾',
+//     time: '06-18 14:00',
+//     views: 538,
+//     likes: 0,
+//     comments: 0,
+//   },
+// ]);
 </script>
 
 <style scoped>
+.video-card:hover{
+transform: scale(1.01);
+}
+
+.my-icon{
+  right: 3px;
+}
 .like {
   height: 14px;
   width: 14px;
@@ -247,7 +281,7 @@ span {
 
 .video-title1 {
   font-size: 20px;
-  font-weight: bold;
+  font-weight: 600;
   margin-bottom: 10px;
   text-align: left;
   line-height: normal;
@@ -255,7 +289,7 @@ span {
 
 .video-title2 {
   font-size: 18px;
-  font-weight: 540;
+  font-weight: 600;
   margin-bottom: 10px;
   text-align: left;
   line-height: normal;
@@ -269,12 +303,22 @@ span {
   /* padding-top: 20px; */
 
 }
+.video-meta1 span{
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+  /* padding-top: 20px; */
+  font-weight: 600;
+
+}
 
 .video-meta2 {
   display: flex;
   align-items: center;
   font-size: 14px;
   color: #666;
+  padding-top: 20px;
 
 }