intelligent-inquiry-machine/src/views/libraryIntroduction.vue

<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 { libraryIntro } from '@/api/inquiryMachine'

export default {
  name: 'LibraryIntroduction',
  data() {
    return {
      selectMenuIndex: 0,
      rawHtml: ''
    }
  },
  created() {
    this.getIntroductionInfo()
  },
  methods: {
    selectMenuChange(index) {
      this.selectMenuIndex = index
      this.getIntroductionInfo()
    },
    getIntroductionInfo() {
      let introType
      if (this.selectMenuIndex === 0) {
        introType = 1
      } else {
        introType = 2
      }
      libraryIntro({ introType: introType, libcode: this.libcode }).then(res => {
        console.log(res)
        this.rawHtml = res
      })
    }
  }
}
</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>