数字资源

src/assets/fonts/fonts.css

@@ -11,3 +11,10 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: "HuXiaoBoNanShenTi";
+  src: url('HuXiaoBoNanShenTi.otf');
+  font-weight: normal;
+  font-style: normal;
+}

src/assets/styles/index.scss

@@ -364,4 +364,8 @@
   }
 }
 
-// 新书推荐页面
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}

src/router/index.js

@@ -43,6 +43,14 @@ const routes = [
     meta: {
       title: '作者推荐'
     }
+  },
+  {
+    path: '/DigitalResource',
+    name: 'DigitalResource',
+    component: () => import('@/views/digitalResource.vue'),
+    meta: {
+      title: '数字资源'
+    }
   }
 
 ]

src/views/bookRackList.vue

@@ -35,7 +35,7 @@
           <li class="list-item">书</li>
           <li class="list-item">书</li>
           <li class="list-item">书</li>
-          <!-- 15 -->
+          <!-- 15本 -->
           <!-- <li class="list-item">书</li>
           <li class="list-item">书</li>
           <li class="list-item">书</li> -->

src/views/data1.json

@@ -73,6 +73,47 @@
       "author": "高小定3",
       "ranking": 3,
       "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    }
+  ],
+  "srcList":[
+    {
+      "title":"武汉云阅读",
+      "bgImg":"https://qiniu.aiyxlib.com/bg.png"
+    },
+    {
+      "title":"武汉云阅读",
+      "bgImg":"https://qiniu.aiyxlib.com/bg.png"
+    },
+    {
+      "title":"武汉云阅读",
+      "bgImg":"https://qiniu.aiyxlib.com/bg.png"
+    },
+    {
+      "title":"武汉云阅读",
+      "bgImg":"https://qiniu.aiyxlib.com/bg.png"
+    },
+    {
+      "title":"武汉云阅读",
+      "bgImg":"https://qiniu.aiyxlib.com/bg.png"
+    },
+    {
+      "title":"武汉云阅读",
+      "bgImg":"https://qiniu.aiyxlib.com/bg.png"
     }
+
   ]
 }

src/views/digitalResource.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="bookshelf">
+    <HeaderTop />
+    <!-- <div class="top-bg" /> -->
+    <div class="bookshelf-header" style="height:120px">
+      <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link>
+      <h2>数字资源</h2>
+    </div>
+    <div class="main">
+      <div v-for="item in srcList" :key="item" class="book-rack">
+        <img :src="item.bgImg">
+        <div class="title">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import HeaderTop from '@/views/module/headerTop.vue'
+import data1 from './data1.json'
+export default {
+  name: 'DigitalResource',
+  components: {
+    HeaderTop
+  },
+  data() {
+    return {
+      srcList: []
+    }
+  },
+  created() {
+    this.srcList = data1.srcList
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.main{
+  height: 100%;
+  overflow: hidden;
+  overflow-y:auto ;
+}
+.main{
+  padding-top: 40px;
+  .book-rack{
+    height: 387px;
+    margin-bottom: 40px;
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+    img{
+      width: 100%;
+      // height: 100%;
+    }
+    .title{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      font-family: "HuXiaoBoNanShenTi";
+      font-size: 80px;
+      color: #333;
+    }
+  }
+}
+</style>

src/views/hotBook.vue

@@ -9,9 +9,6 @@
       <h2>热门图书</h2>
     </div>
     <BookList :bookdata="bookData" />
-    <!-- <div class="book-main">
-
-    </div> -->
   </div>
 </template>
 

src/views/index.vue

@@ -25,7 +25,7 @@
         <img src="~@/assets/images/home/nav3.png">
         <p>作者推荐</p>
       </li>
-      <li>
+      <li @click="toDigital">
         <img src="~@/assets/images/home/nav4.png">
         <p>数字资源</p>
       </li>
@@ -100,6 +100,9 @@ export default {
     },
     toAuthor() {
       this.$router.push('/authorRecommend')
+    },
+    toDigital() {
+      this.$router.push('/DigitalResource')
     }
   }
 }

src/views/module/bookList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="hotbook-box">
     <div class="most-book">
       <div class="most-book-img">
         <img :src="bookdata[0].img">
@@ -44,6 +44,11 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
+.hotbook-box{
+  overflow: hidden;
+  overflow-y: auto;
+  height: 100%;
+}
 .book-rack{
   margin: 160px 40px 28px 40px;
   padding: 38px 40px 40px 400px;
@@ -83,13 +88,17 @@ export default {
   margin: 0 40px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  // justify-content: space-between;
   li{
     margin-bottom: 20px;
+    margin-left: 48px;
     img{
       width: 300px;
       height: 360px;
     }
   }
+  & li:nth-child(3n+1){
+    margin-left: 0;
+  }
 }
 </style>

src/views/newBook.vue

@@ -8,10 +8,7 @@
       </router-link>
       <h2>新书推荐</h2>
     </div>
-    <div class="book-main">
     <BookList :bookdata="bookData" />
-      <!--  -->
-    </div>
   </div>
 </template>