图书馆简介数字资源修改

src/assets/styles/index.scss

@@ -411,7 +411,5 @@
   display: flex;
   justify-content: space-between;
   height: 880px;
-  margin: 30px 0;
-  padding: 0 40px;
   background: #F4F4F4;
 }

src/views/digitalResource.vue

@@ -2,8 +2,8 @@
   <!-- 数字资源 -->
   <div class="content-main">
     <!-- <div class="common-title">新书推荐</div> -->
-    <div ref="newbook" class="big-module module-content">
-      <div v-for="(item,index) in rankingList" :key="index" class="main-item">
+    <div class="img-module">
+      <div v-for="(item,index) in rankingList" :key="index" :class="{'item-big': index % 4 === 0 || index % 4 === 3, 'item-small': index % 4 === 1 || index % 4 === 2, 'main-item': true}">
         <img :src="item.bgImg">
         <div class="title">
           {{ item.title }}
@@ -43,7 +43,7 @@ export default {
     }
   },
   created() {
-    this.rankingList = data.srcList
+    this.rankingList = data.srcList1
   },
   mounted() {
   },
@@ -55,5 +55,50 @@ export default {
 </script>
 
   <style lang="scss">
-  @import "~@/assets/styles/index.scss";
-  </style>
+@import "~@/assets/styles/index.scss";
+.img-module {
+  padding: 40px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  align-content: space-between;
+  .main-item {
+    // height: 387px;
+    // margin-bottom: 40px;
+    // padding: 0 40px;
+    // overflow: hidden;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 31px 31px 31px 31px;
+    }
+    .title {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-family: "HuXiaoBoNanShenTi";
+      font-size: 80px;
+      color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+  .item-big {
+    width: 1000px;
+    height: 390px;
+  }
+  .item-small {
+    width: 800px;
+    height: 310px;
+  }
+}
+</style>

src/views/digitalResourceJson.json

@@ -107,6 +107,24 @@
       "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a16da710000"
     }
   ],
+  "srcList1":[
+    {
+      "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"
+    }
+  ],
   "authors":[
     {
       "name":"钱钟书",

src/views/libraryIntroduction.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 图书馆简介 -->
-  <div class="content-main">
+  <div class="content-main introduction-main">
     <div class="nav-menu">
       <ul>
         <li :class="{ 'is-active': selectMenuIndex === 0 }" @click="selectMenuChange(0)">关于图书馆</li>
@@ -44,7 +44,9 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
-.nav-menu {
+.introduction-main{
+  padding: 30px 40px;
+  .nav-menu {
     background: #ffffff;
     width: 300px;
     ul {
@@ -56,6 +58,10 @@ export default {
         font-weight: 400;
         line-height: 90px;
         text-align: center;
+        margin-bottom: 20px;
+        &:hover {
+          background: #E4E4E4;
+        }
         &.is-active {
           background: linear-gradient(
             318deg,
@@ -67,8 +73,8 @@ export default {
         }
       }
     }
-}
-.introduction-info {
+  }
+  .introduction-info {
     margin-left: 30px;
     background: #ffffff;
     width: 1510px;
@@ -84,5 +90,6 @@ export default {
     .info-img {
       background: url('~@/assets/images/top.png') no-repeat center -5px;
     }
+  }
 }
 </style>