活动详情

src/assets/styles/index.scss

@@ -181,3 +181,72 @@
   background: #F4F4F4;
   overflow: hidden;
 }
+
+.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;
+    padding: 20px;
+    overflow-y: auto;
+    .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;
+    }
+  }
+}
+.activity-list li {
+  height: 90px;
+  margin: 0 40px;
+  border-bottom: 1px solid #d9d9d9;
+  font-size: 30px;
+  line-height: 90px;
+  padding: 0 20px;
+  span.date {
+    float: right;
+  }
+  .activity-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 282px);
+    display: inline-block;
+  }
+}

src/assets/styles/style.scss

@@ -47,14 +47,14 @@ ul{
 
 /**滚动条的宽度*/
 ::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 10px;
+  height: 10px;
 }
 
 //滚动条的滑块
 ::-webkit-scrollbar-thumb {
-  background-color: #13439E;
-  border-radius: 3px;
+  background-color: #333333;
+  border-radius: 5px;
 }
 
 .icon {

src/router/index.js

@@ -43,6 +43,14 @@ const routes = [
     meta: {
       title: '活动咨询'
     }
+  },
+  {
+    path: '/ActivityDetail',
+    name: 'ActivityDetail',
+    component: () => import('../views/activityDetail.vue'),
+    meta: {
+      title: '活动详情'
+    }
   }
 ]
 

src/views/activityDetail.vue

@@ -0,0 +1,58 @@
+<template>
+  <!-- 活动咨询 -->
+  <div class="content-main introduction-main">
+    <div class="nav-menu">
+      <ul>
+        <li :class="{ 'is-active': selectMenuIndex === 0 }" @click="selectMenuChange(0)">活动资讯</li>
+        <li :class="{ 'is-active': selectMenuIndex === 1 }" @click="selectMenuChange(1)">活动预告</li>
+      </ul>
+    </div>
+    <div class="introduction-info" v-html="rawHtml" />
+  </div>
+</template>
+
+<script>
+import { libraryIntro } from '@/api/inquiryMachine'
+
+export default {
+  name: 'ActivityFeed',
+  data() {
+    return {
+      selectMenuIndex: 0,
+      itemParams: null,
+      rawHtml: ''
+    }
+  },
+  created() {
+    this.itemParams = JSON.parse(localStorage.getItem('activityDetail'))
+    if (JSON.parse(localStorage.getItem('selectIndex')) === 1) {
+      this.selectMenuIndex = 1
+    } else {
+      this.selectMenuIndex = 0
+    }
+    this.getIntroductionInfo()
+  },
+  mounted() {
+  },
+  methods: {
+    selectMenuChange(index) {
+      this.selectMenuIndex = index
+      this.$router.push('/ActivityFeed')
+      localStorage.setItem('selectMenuIndex', JSON.stringify(this.selectMenuIndex))
+    },
+    getIntroductionInfo() {
+      const introType = this.itemParams.overType
+      const libcode = this.itemParams.libcode
+      const overId = this.itemParams.overId
+      libraryIntro({ introType: introType, libcode: libcode, overId: overId }).then(res => {
+        this.rawHtml = res
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>

src/views/activityFeed.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="introduction-info">
       <ul class="activity-list">
-        <li v-for="(item,index) in infoList" :key="index">
+        <li v-for="(item,index) in infoList" :key="index" @click="toDetail(item)">
           <div class="activity-title">{{ item.overTitle?item.overTitle:'' }}</div><span class="date">{{ item.createTime | parseTime }}</span>
         </li>
       </ul>
@@ -29,6 +29,11 @@ export default {
     }
   },
   created() {
+    if (JSON.parse(localStorage.getItem('selectMenuIndex')) === 1) {
+      this.selectMenuIndex = 1
+    } else {
+      this.selectMenuIndex = 0
+    }
     this.getActivityInfo()
   },
   methods: {
@@ -46,6 +51,11 @@ export default {
       activityInquiry({ introType: introType, libcode: this.libcode, pageSize: 99 }).then(data => {
         this.infoList = data[0]
       })
+    },
+    toDetail(item) {
+      this.$router.push('/ActivityDetail')
+      localStorage.setItem('selectIndex', JSON.stringify(this.selectMenuIndex))
+      localStorage.setItem('activityDetail', JSON.stringify(item))
     }
   }
 }
@@ -53,59 +63,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
-.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;
-    overflow-y: auto;
-  }
-}
-.activity-list li {
-  height: 90px;
-  margin: 0 40px;
-  border-bottom: 1px solid #d9d9d9;
-  font-size: 30px;
-  line-height: 90px;
-  padding: 0 20px;
-  span.date {
-    float: right;
-  }
-  .activity-title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: calc(100% - 282px);
-    display: inline-block;
-  }
-}
 </style>

src/views/libraryIntroduction.vue

@@ -88,7 +88,20 @@ export default {
     margin-left: 30px;
     background: #ffffff;
     width: 1510px;
+    overflow: hidden;
     overflow-y: auto;
+    .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>