yifeng_integration/src/views/next/screen-content-map/cpt/whyf.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="bg_img">
      <div class="tabs-left">
        <div class="tabs">
          <div>
            <img @click="onLast" src="@/assets/images/index/whyf/tab-top.png" alt="" />
          </div>
          <section>
            <el-carousel ref="paomadeng" direction="vertical" :autoplay="false" height="740px">
              <el-carousel-item
                v-for="(item, index) in tabList"
                :key="'item' + index"
              >
                <div class="card-item-whyf">
                  <div
                    :class="
                      active[0] == index && active[1] == index1
                        ? 'active'
                        : 'item'
                    "
                    v-for="(item1, index1) in item"
                    :key="index1"
                    @click="handelTab(index, index1)"
                  >
                    <img :src="item1.cover" alt="" />
                    <div class="bot">{{ item1.name }}</div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </section>
          <div>
            <img @click="onNext" src="@/assets/images/index/whyf/tab-bottom.png" alt="" />
          </div>
        </div>
      </div>
      <div>
        <section style="display: flex; left: 120px">
          <div class="left"></div>
          <div class="body">
            <div class="header">
              <span></span><span>{{ tabList[active[0]][active[1]].name }}</span
              ><span></span>
            </div>
            <div class="content">
              <div class="synopsis" v-html="selfObj.content"></div>
              <div class="imgs">
                <img
                  :src="item"
                  alt=""
                  v-for="item in selfObj.imageList"
                  :key="item"
                />
              </div>
            </div>
          </div>
          <div class="right"></div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import { cultureLegacyList } from '@/api/home'
export default {
  data () {
    return {
      tabList: [[]],
      active: [0, 0],
      selfObj: {}
    }
  },
  created () {
    // cultureLegacyList().then((res) => {
    //   this.tabList = res.data.list
    //   this.selfObj = {
    //     content: this.tabList[7].content,
    //     imageList: this.tabList[7].imageList
    //   }
    // })
    cultureLegacyList().then((res) => {
      let num = 0
      let index = 0
      res.data.list.forEach((item) => {
        if (num < 5) {
          num = num + 1
        } else {
          num = 1
          index = index + 1
          this.tabList.push([])
        }
        this.tabList[index][num - 1] = item
      })
      console.log('tabList:', this.tabList)
      this.selfObj = {
        content: this.tabList[0][0].content,
        imageList: this.tabList[0][0].imageList || []
      }
    })
  },
  mounted () {},
  methods: {
    handelTab (index, index1) {
      this.active = [index, index1]
      this.selfObj = {
        content: this.tabList[index][index1].content,
        imageList: this.tabList[index][index1].imageList
      }
    },
    onLast () {
      this.$refs.paomadeng.prev()
    },
    onNext () {
      this.$refs.paomadeng.next()
    }
  },
  components: {},
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.bg_img {
  background: url("~@/assets/images/index/whyf/bg.jpg");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  @include flex(column);
  justify-content: center;
  align-items: center;
  position: relative;

  section {
    width: 1488px;
    height: 630px;
    // margin-top: 106px;
    position: relative;
    justify-content: center;

    > .left,
    .right {
      width: 174px;
      height: 650px;
      position: relative;
      z-index: 10;

      &::after {
        content: "";
        width: 36px;
        height: 36px;
        background: url("~@/assets/images/index/whyf/arrows.png");
        background-size: 100% 100%;
        position: absolute;
        bottom: 50%;
      }
    }

    .left {
      left: 20px;
      background: url("~@/assets/images/index/whyf/left.png");
      background-size: 100% 100%;

      &::after {
        left: 23%;
        transform: translate(0, 15px) rotate(177deg);
      }
    }

    > .right {
      right: 20px;
      background: url("~@/assets/images/index/whyf/right.png");
      background-size: 100% 100%;

      &::after {
        right: 23%;
        transform: translate(0, 15px) rotate(2deg);
      }
    }

    .body {
      width: 1180px;
      height: 630px;
      background: url("~@/assets/images/index/whyf/content_bg.png");
      background-size: 100% 100%;
      overflow: hidden;

      .header {
        height: 110px;
        display: flex;
        justify-content: center;
        align-items: center;

        :nth-child(1) {
          flex: 1;
          height: 10px;
          background: linear-gradient(to right, #1a5fc0, #9ac9ea);
          background-position: -24px 0;

          position: relative;

          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 10px;
            height: 10px;
            background: #ffd4a2;
          }
        }

        :nth-child(2) {
          width: fit-content;
          color: #f2f8fc;
          font-size: 30px;
          font-family: zaozigongfang;
          text-align: center;
          margin: 0 20px;
        }

        :nth-child(3) {
          height: 10px;
          flex: 1;
          background: linear-gradient(to left, #1a5fc0, #9ac9ea);
          position: relative;
          background-position: 24px 0;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 10px;
            height: 10px;
            background: #ffd4a2;
          }
        }
      }

      .content {
        flex: 1;
        padding: 0 80px;
        height: 500px;
        overflow: hidden;
        overflow-y: scroll;
        box-sizing: border-box;
        color: #fff;
        line-height: 1.8;
        &::-webkit-scrollbar {
          width: 3px;
        }

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: rgba(12, 129, 254, 0.24);
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: linear-gradient(270deg, #0063fe, #0095ff);
        }
      }

      &::after {
        content: "";
        width: 20px;
        height: 20px;
        background: url("~@/assets/images/index/whyf/arrows.png");
        background-size: 100% 100%;
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: rotate(268deg);
      }
    }
  }

  .tabs-left {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 20;
    .tabs {
      width: 192px;
      height: 100%;
      // margin-top: 43px;
      // display: flex;
      // justify-content: space-between;
      align-items: center;
      padding: 0 25px;
      // box-sizing: border-box;
      z-index: 20;

      > div {
        width: 192px;
        height: 64px;
        padding-left: 66px;
        > img {
          width: 64px;
          height: 64px;
        }
      }

      > section {
        // flex: 1;
        // display: flex;
        height: 740px;
        width: 262px;
        // align-items: center;
        // justify-content: center;
        // margin: 0;

        .item,
        .active {
          width: 220px;
          height: 136px;
          cursor: pointer;
          @include flex(column);
          color: #bdceea;
          align-items: center;
          background: rgba(9, 41, 106, 0.66);
          margin-bottom: 8px;
          padding: 8px 10px;
          box-sizing: border-box;
          border: 1px solid #9fccff;

          img {
            min-width: 204px;
            min-height: 100px;
            // margin-bottom: 6px;
          }
        }

        .active {
          width: 260px;
          height: 160px;
          // position: relative;
          // top: -10px;
        }
      }
    }
  }
}
::v-deep .el-carousel__indicators{
  display: none;
}
</style>