FE_huoran_client/src/pages/team/index.vue

<template>
  <div class="wrap p-b-30">
    <div class="single-banner single-banner-overview">
      <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="content">
      <ul class="list">
        <template v-for="(item, i) in modules[1].list">
          <li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
            @click="openLink(item)">
            <img :src="item.pic" alt="" class="pic">
            <div class="texts">
              <h6>{{ item.title }}</h6>
              <p class="job">{{ item.subTitle }}</p>
              <div class="text" v-html="item.des"></div>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import WOW from 'wow.js'
import RightColumns from '@/components/rightColumns'
import Util from '@/libs/util'
export default {
  mixins: [mixins],
  data () {
    return {

    }
  },
  components: {
    RightColumns
  },
  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';

.content {
  display: flex;
  width: 1200px;
  justify-content: space-between;

  .left {
    width: calc(100% - 300px);
  }

  .list {
    li {
      display: flex;
      align-items: center;
      padding-bottom: 30px;
      margin-bottom: 30px;
      border-bottom: 1px solid #ddd;

      &:last-child {
        border-bottom: 0;
      }
    }

    .pic {
      width: 224px;
      height: 268px;
      margin-right: 25px;
      object-fit: cover;
    }

    .texts {
      width: calc(100% - 249px);
    }

    h6 {
      font-size: 1.2rem;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #333;
    }

    .job {
      margin: 16px 0;
      font-size: 1rem;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333;
    }

    .text {
      font-size: 1rem;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333;
    }
  }
}

@media (max-width: 1200px) {
  .content {
    width: 95%;
    flex-direction: column;

    .left,
    .right {
      width: 100%;
    }
  }
}

@media (max-width: 640px) {
  .content {
    .list {
      li {
        flex-direction: column;
      }

      .pic {
        margin: 0 0 20px 0;
      }
    }
  }
}
</style>