首页订阅入口

src/components/common/BookListModule.vue

@@ -23,22 +23,28 @@
         </div>
       </div>
       <div class="list">
-        <div
-          v-for="(item,index) in list"
-          :key="index+'todayNew'"
-          :style="{
-              marginLeft:index==0||index%5==0?'0':'50px',
-            }"
-        >
-          <BookCard
-            :item="item"
-            :headerBg="headerBg"
-            :headerBorder="headerBorder"
-            :userBg="userBg"
-            :LoginNavIndex="LoginNavIndex"
-            :previousPage="previousPage"
-          />
+        <template v-if="name==='baozhi'">
+            <a class="img-box">
+                <img src="../../assets/baozhi-ding.png" class="baozhi-ding" />
+            </a>
+        </template>
+        <div class="item-box">
+            <BookCard
+                :item="item"
+                :headerBg="headerBg"
+                :headerBorder="headerBorder"
+                :userBg="userBg"
+                :LoginNavIndex="LoginNavIndex"
+                :previousPage="previousPage"
+                class="item"
+                v-for="(item,index) in list"
+                :key="index+'todayNew'"
+                :style="{
+                    marginLeft:index==0?'0':'24px',
+                }"
+            />
         </div>
+        
       </div>
     </div>
   </div>
@@ -70,6 +76,9 @@ export default {
             kecheng: {
                 name: '课程',
             },
+            jingdu: {
+                name: '精读课堂'
+            }
         }
     }
   },
@@ -180,20 +189,36 @@ export default {
         }
     }
   }
-  .list {
-    margin-top: 24px;
+  .list{
+    display: flex;
+    padding: 24px 0 0 0;
+  }
+  .item-box {
     display: flex;
-    flex-wrap: wrap;
-    > div {
+    flex: 1;
+    overflow: auto;
+    padding-bottom: 40px;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .item {
       width: 200px;
+      flex-shrink: 0;
       border-radius: 8px;
       overflow: hidden;
       background: #ffffff;
-      margin-bottom: 40px;
       &:hover{
         box-shadow:  0px 0px 30px rgba(0,0,0,0.1);
       }
     }
   }
+  .img-box{
+    margin-right: 24px;
+    font-size: 0;
+  }
+  .baozhi-ding{
+    width: 450px;
+    height: 384px;
+  }
 }
 </style>

src/icons/svg/jingdu.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2788_101009)">
+<path d="M8 4C8 5.10457 7.10457 6 6 6C4.89543 6 4 5.10457 4 4C4 2.89543 4.89543 2 6 2C7.10457 2 8 2.89543 8 4ZM5 16V22H3V10C3 8.34315 4.34315 7 6 7C6.82059 7 7.56423 7.32946 8.10585 7.86333L10.4803 10.1057L12.7931 7.79289L14.2073 9.20711L10.5201 12.8943L9 11.4587V22H7V16H5ZM10 5H19V14H10V16H14.3654L17.1889 22H19.3993L16.5758 16H20C20.5523 16 21 15.5523 21 15V4C21 3.44772 20.5523 3 20 3H10V5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_2788_101009">
+<rect width="24" height="24" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/views/bookStore/index.vue

@@ -233,9 +233,6 @@ export default {
         },
         {
             skeleton: true
-        },
-        {
-            skeleton: true
         }
       ], // 录播课列表
       IssueList: [
@@ -253,6 +250,9 @@ export default {
         },
         {
             skeleton: true
+        },
+        {
+            skeleton: true
         }
       ], // 报纸列表
       bannerFlag: true // 是否展示广告
@@ -268,7 +268,7 @@ export default {
     getLBCourseList(){
         let MethodName = "/ShopServer/Client/ShopHomeQuery/QueryLBCourseList";
         let data = {
-            top_n: 5
+            top_n: 6
         }
         getLogin(MethodName, data)
         .then((res) => {
@@ -287,7 +287,7 @@ export default {
     getIssueList(){
         let MethodName = "/ShopServer/Client/ShopHomeQuery/QueryIssueList";
         let data = {
-            top_n: 5
+            top_n: 4
         }
         getLogin(MethodName, data)
         .then((res) => {