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/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/HomeView.vue

@@ -5,7 +5,7 @@
         <div class="section-title">推荐</div>
         <el-row :gutter="20" class="recommend-videos" style="margin-right: -25px;">
           <el-col :span="24" v-for="video in video" :key="video.id">
-            <el-card class="video-card" @click="incrementViews(scope.row.id)">
+            <el-card class="video-card">
               <div class="video-content">
                 <img :src="video.cover" alt="视频缩略图" class="video-thumbnail" />
                 <div class="video-info">
@@ -15,18 +15,12 @@
                     <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.videoDuration }}</el-button>
-                      <!-- <div type="text" style="color: black;" >{{ video.videoDuration }}</div> -->
-
-                      <el-icon>
-                        <ChatDotSquare />
-                      </el-icon>
-                      <el-button type="text">{{ video.likeCount }}</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.commentCount }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.commentCount }}</el-button>
                     </div>
                   </div>
                 </div>
@@ -49,8 +43,8 @@
                       <el-icon class="my-icon">
                         <View />
                       </el-icon>
-                      <el-button type="text">{{ video.viewCount }}</el-button>
-                      <el-button type="text">{{ video.publishTime }}</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>
@@ -287,7 +281,7 @@ span {
 
 .video-title1 {
   font-size: 20px;
-  font-weight: bold;
+  font-weight: 600;
   margin-bottom: 10px;
   text-align: left;
   line-height: normal;
@@ -295,7 +289,7 @@ span {
 
 .video-title2 {
   font-size: 18px;
-  font-weight: 540;
+  font-weight: 600;
   margin-bottom: 10px;
   text-align: left;
   line-height: normal;
@@ -309,13 +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: 40px;
+  padding-top: 20px;
 
 }