FE_IASF_client/src/pages/publication/index.vue

<template>
  <div class="wrap">
    <div class="banner">
      <img width="100%" height="280" :src="info.columnBanner" alt="" />
      <div class="texts">
        <p class="text">{{ info.columnName }}</p>
      </div>
    </div>

    <ul class="tabs wow fadeInLeft">
      <template v-for="(item, i) in tabs">
        <li :class="{active: item.listStyleId == active}" :key="i" @click="tabChange(item, i)">{{ item.columnName | i18nName($i18n) }}</li>
      </template>
    </ul>

    <div class="tab-content">
      <!-- 根据栏目的listStyleId判断是哪个列表样式，这个出版物页面只显示下面三个列表样式 -->
      <!-- 论文 -->
      <Thesis v-if="active === 46" :id.sync="curId" />
      <!-- 专利 -->
      <Patent v-if="active === 44" :id.sync="curId" />
      <!-- 专著 -->
      <Monograph v-if="active === 45" :id.sync="curId" />
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/article'
import Thesis from './thesis'
import Patent from './patent'
import Monograph from './monograph'
export default {
  mixins: [mixins],
  data() {
    return {
      info: {},
      active: 0,
      curId: '',
      tabs: []
    }
  },
  components: {
    Thesis,
    Patent,
    Monograph
  },
  mounted() {
    this.getInfo()
    this.getColumn()
  },
  methods: {
    // 获取栏目详情
    getInfo() {
      this.id &&
        this.$post(`${this.api.findColumn}?id=${this.id}`)
          .then(({ data }) => {
            if (!data.columnBanner) data.columnBanner = require('@/assets/images/publication-bg.png');
            this.info = data
          })
          .catch((res) => { })
    },
    // 获取子级栏目
    getColumn() {
      this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
        if (data.length) {
          this.tabs = data
          this.active = data[0].listStyleId
          this.curId = data[0].id
        }
      }).catch(err => {})
    },
    // tab回调
    tabChange(item) {
      this.active = item.listStyleId
      this.curId = item.id
    },
  },
  filters: {
    i18nName(name,type) {
      console.log(type)
      switch (name) {
        case '专利':
          return type.t('column.patent')
        case '专著':
          return type.t('column.monograph')
        case '论文':
         return type.t('column.paper')
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: #f9f9f9;
}
.banner {
  position: relative;
  height: 280px;
  color: #fff;
  .texts {
    position: absolute;
    top: 123px;
    left: 243px;
  }

  .text {
    font-size: 3.42rem;
    font-weight: 600;
    @include ellipsis;
  }

  .sub {
    margin-top: 10px;
    font-size: 2rem;
  }
}
.tabs {
  display: flex;
  justify-content: center;
  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
  li {
    padding: 25px 19px;
    margin: 0 70px;
    font-size: 1.1rem;
    color: #333;
    white-space: nowrap;
    border-bottom: 4px solid transparent;
    text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
    cursor: pointer;
    &.active {
      color: #1583FF;
      border-bottom-color: #1583FF;
    }
  }
}
.tab-content {
  width: 1000px;
  padding: 20px 0;
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .banner {
    .texts {
      .text {
        font-size: 1.5rem;
      }
    }
  }
  .tabs  {
    // flex-direction: column;
    width: 100%;
    overflow-x: scroll;
    li {
      padding: 1.25rem 0;
      margin: 0 1.25rem;
    }
  }
  .tab-content{
    width: 90%;
    margin: 0 auto;
  }
}
@media (max-width: 320px) {
  .banner {
    .texts {
      left: 6rem;
      top: 6rem;
    }
  }
}
</style>