活动咨询

src/router/index.js

@@ -35,6 +35,14 @@ const routes = [
     meta: {
       title: '图书管简介'
     }
+  },
+  {
+    path: '/ActivityFeed',
+    name: 'ActivityFeed',
+    component: () => import('../views/activityFeed.vue'),
+    meta: {
+      title: '活动咨询'
+    }
   }
 ]
 

src/views/activityFeed.vue

@@ -0,0 +1,95 @@
+<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 class="info-title">东西湖区图书馆服务简介</div>
+      <div class="info-img">
+        <img class="book-img" :src="item.img">
+      </div>
+      <div class="info-content">1978年区政府立项筹建新馆，投资38万元。1990年元月，位于吴家山吴祁街19号的新馆大楼建成开放，面积1,800平方米，职工7人，年拨经费30,000元，藏书36,000万册，年订购报刊200余种。2000年图书馆扩建，馆舍面积增至2,075平方米，事业经费25万元，职工10人，藏书13万册，报刊305种。已形成以收藏当代作家的著作、手稿、传略、照片等文献资料为主的特色馆藏。1993年秋，该馆在湖北省、武汉市作家协会的支持下，联合创办国内第一所当代作家文献收藏中心。1994年夏，开设当代作家代表作签</div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import data from './libraryIntroductionData'
+
+export default {
+  name: 'LibraryIntroduction',
+  data() {
+    return {
+      rankingList: [],
+      selectMenuIndex: 0,
+      rawHtml: ''
+    }
+  },
+  created() {
+    this.rawHtml = data.html
+  },
+  mounted() {
+  },
+  methods: {
+    selectMenuChange(index) {
+      this.selectMenuIndex = index
+    }
+  }
+}
+</script>
+
+<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;
+    .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>