FE_IASF_client/src/pages/governance/index.vue

<template>
  <div class="wrap">
    <div class="single-banner">
      <img class="banner-img"
           :src="modules[0].form.pic"
           alt="" />
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
      </div>
    </div>

    <div class="block history gray"
         style="padding-bottom: 70px">
      <div class="inner">
        <div class="texts wow fadeInDown"
             data-wow-delay="0.5s">
          <div class="left">
            <h2 v-html="modules[1].form.title"></h2>
            <div class="text"
                 v-html="modules[1].form.des"></div>
          </div>
          <img class="bg"
               width="562"
               height="467"
               :src="modules[1].form.pic"
               alt="">
        </div>
      </div>
    </div>

    <div class="cards">
      <ul>
        <template v-for="(item, i) in modules[2].list">
          <li v-if="item.isEnable"
              :key="i"
              :class="{active: curYear == i}"
              @click="depClick(i)">{{ item.title }}</li>
        </template>
      </ul>
    </div>

    <div class="block committee gray"
         style="padding-top: 80px">
      <div v-if="modules[2].list[curYear].list[0]"
           class="inner">
        <div class="left">
          <h2>{{ modules[2].list[curYear].list[0].title }}</h2>
          <div class="text"
               v-html="modules[2].list[curYear].list[0].des"></div>
        </div>
        <img class="pic"
             :src="modules[2].list[curYear].list[0].pic"
             alt="">
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/mixins/page";
import WOW from "wow.js";
import Util from '@/libs/util'
export default {
  mixins: [mixins],
  data () {
    return {
      curYear: 0,
    };
  },
  mounted () {
    new WOW().init();
  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(this.id)).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(
            this.preview
              ? data
              : data[data.length - 1][
              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
              ]
          );
          this.modules = json;
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
        }
      })
        .catch((err) => { });
    },
    // 部门点击回调
    depClick (i) {
      this.curYear = i
    }
  },
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.history {
    h2 {
        padding-bottom: 15px;
        font-size: 1.2rem;
        color: #333;
        &:after {
            content: '';
            display: block;
            width: 65px;
            height: 3px;
            margin-top: 20px;
            background: #0280f1;
        }
    }
    .texts {
        display: flex;
        justify-content: space-between;
        padding: 82px 0 50px 30px;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 100px 0px 0px 0px;
        transition: 0.3s;
        &:hover {
            transform: scale(1.05);
        }
    }
    .left {
        width: 600px;
        padding-right: 20px;
    }
    .text {
        margin: 20px 0;
        font-size: 1.2rem;
        color: #181818;
        line-height: 31px;
        @include mul-ellipsis(10);
    }
    .bg {
        margin: -122px 0 0 0;
        object-fit: cover;
    }
}
.cards {
    padding-top: 50px;
    ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 1200px;
        margin: 0 auto;
    }
    li {
        width: 368px;
        margin: 0 30px 50px 0;
        line-height: 84px;
        font-size: 1.2rem;
        color: #333;
        text-align: center;
        @include ellipsis();
        background: url(https://new.iasf.ac.cn/images/governance/3.png) 0 0 / cover no-repeat;
        cursor: pointer;
        &:nth-child(2) {
            background-image: url(https://new.iasf.ac.cn/images/governance/4.png);
        }
        &:nth-child(3) {
            background-image: url(https://new.iasf.ac.cn/images/governance/5.png);
        }
        &:nth-child(4) {
            background-image: url(https://new.iasf.ac.cn/images/governance/4.png);
        }
        &:nth-child(5) {
            background-image: url(https://new.iasf.ac.cn/images/governance/7.png);
        }
        &:nth-child(6) {
            background-image: url(https://new.iasf.ac.cn/images/governance/6.png);
        }
        &:nth-child(8) {
            background-image: url(https://new.iasf.ac.cn/images/governance/6.png);
        }
        &:nth-child(3n) {
            margin-right: 0;
        }
        &:hover,
        &.active {
            color: #fff;
            background: #0d84f2;
        }
    }
}
.committee {
    .inner {
        display: flex;
        align-items: center;
    }
    .left {
        width: 50%;
        margin-right: 2%;
    }
    h2 {
        margin-bottom: 20px;
        font-size: 1.2rem;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #333;
    }
    .text {
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 1.5;
        color: #333;
    }
    .pic {
        width: 48%;
        height: 300px;
        object-fit: cover;
    }
}

@media (max-width: 1200px) {
    .history {
        .texts {
            flex-direction: column;
        }
        .left {
            width: 90%;
        }
        .bg {
            width: 100%;
            margin-top: 2rem;
        }
    }
    .cards {
        ul {
            width: 98%;
        }
        li {
            width: 100%;
            margin: 0 0 20px 0;
        }
    }
}
@media (max-width: 640px) {
    .committee {
        .inner {
            flex-direction: column;
        }
        .left {
            width: 100%;
        }
        .pic {
            width: 100%;
            margin-top: 2rem;
        }
    }
}
</style>