图书馆简介数字资源修改

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,45 +44,52 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
-.nav-menu {
-  background: #ffffff;
-  width: 300px;
-  ul {
-    margin-top: 30px;
-    li {
-      height: 90px;
-      font-size: 30px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      line-height: 90px;
-      text-align: center;
-      &.is-active {
-        background: linear-gradient(
-          318deg,
-          #38b8d9 0%,
-          #5394f1 45%,
-          #a0a9ef 100%
-        );
-        color: #ffffff;
+.introduction-main{
+  padding: 30px 40px;
+  .nav-menu {
+    background: #ffffff;
+    width: 300px;
+    ul {
+      margin-top: 30px;
+      li {
+        height: 90px;
+        font-size: 30px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        line-height: 90px;
+        text-align: center;
+        margin-bottom: 20px;
+        &:hover {
+          background: #E4E4E4;
+        }
+        &.is-active {
+          background: linear-gradient(
+            318deg,
+            #38b8d9 0%,
+            #5394f1 45%,
+            #a0a9ef 100%
+          );
+          color: #ffffff;
+        }
       }
     }
   }
-}
-.introduction-info {
-  margin-left: 30px;
-  background: #ffffff;
-  width: 1510px;
-  .info-title {
-    height: 100px;
-    text-align: center;
-    font-size: 38px;
-    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-    font-weight: 400;
-    color: #333333;
-    line-height: 100px;
-  }
-  .info-img {
-    background: url('~@/assets/images/top.png') no-repeat center -5px;
+  .introduction-info {
+    margin-left: 30px;
+    background: #ffffff;
+    width: 1510px;
+    .info-title {
+      height: 100px;
+      text-align: center;
+      font-size: 38px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #333333;
+      line-height: 100px;
+    }
+    .info-img {
+      background: url('~@/assets/images/top.png') no-repeat center -5px;
+    }
   }
 }
 </style>