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">
      <div class="inner">
        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
          <div class="left">
            <h2>{{ modules[1].form.title }}</h2>
            <div class="text" v-html="modules[1].form.des"></div>
          </div>
          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
        </div>
      </div>
    </div>

    <div class="cards">
      <ul>
        <li v-for="(item, i) in modules[2].list" :key="i">{{ item.title }}</li>
      </ul>
    </div>

    <div class="block committee gray">
      <div class="inner">
        <div class="left">
          <h2>{{ modules[3].form.title }}</h2>
          <div class="text" v-html="modules[3].form.des"></div>
        </div>
        <img class="pic" :src="modules[3].form.pic" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/mixins/page";
import WOW from "wow.js";
export default {
  mixins: [mixins],
  data() {
    return {
      
    };
  },
  mounted() {
    new WOW().init();
  },
  methods: {
    // 获取文章详情
    getInfo() {
      // 预览/详情
      this.$post(
        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${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) => {});
    },
  },
};
</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: .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;
  }
}
.cards {
  padding: 60px 0;
  ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
  }
  li {
    width: 260px;
    margin: 0 30px 50px 0;
    line-height: 84px;
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    @include ellipsis();
    background: url(http://10.10.11.7/images/governance/3.png) 0 0/cover no-repeat;
    cursor: pointer;
    &:nth-child(2) {
      background-image: url(http://10.10.11.7/images/governance/4.png);
    }
    &:nth-child(3) {
      background-image: url(http://10.10.11.7/images/governance/5.png);
    }
    &:nth-child(4) {
      background-image: url(http://10.10.11.7/images/governance/4.png);
    }
    &:nth-child(5) {
      background-image: url(http://10.10.11.7/images/governance/7.png);
    }
    &:nth-child(6) {
      background-image: url(http://10.10.11.7/images/governance/6.png);
    }
    &:nth-child(8) {
      background-image: url(http://10.10.11.7/images/governance/6.png);
    }
    &:hover {
      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;
  }
}
@media (max-width: 1200px) {
  .history {
    .texts {
      flex-direction: column;
    }
    .left {
      width: 90%;
    }
    .bg {
      width: 100%;
      margin-top: 2rem;
    }
  }
  .cards {
    ul {
      width: 100%;
    }
    li {
      width: 30%;
    }
  }
}
@media (max-width: 640px) {
  .committee {
    .inner {
      flex-direction: column;
    }
    .left {
      width: 100%;
    }
    .pic {
      width: 100%;
      margin-top: 2rem;
    }
  }
}
</style>