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

<template>
  <div style="width: 100%; height: 100%">
    <div class="bg_img">
      <!--  -->
      <section>
        <!-- <img src="@/assets/images/index/whyf/left.png" alt=""> -->
        <div class="left"></div>
        <div class="body">
          <div class="header">
            <span></span><span>{{ tabList[active].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>
        <!-- <img src="@/assets/images/index/whyf/right.png" alt=""> -->
      </section>
      <div class="tabs">
        <img src="@/assets/images/index/whyf/tab-left.png" alt="" />
        <section>
          <div
            :class="active == index ? 'active' : 'item'"
            v-for="(item, index) in tabList"
            :key="index"
            @click="handelTab(index)"
          >
            <img :src="item.cover" alt="" />
            <div class="bot">{{ item.name }}</div>
          </div>
        </section>
        <img src="@/assets/images/index/whyf/tab-right.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import { cultureLegacyList } from "@/api/home";
export default {
  data() {
    return {
      tabList: [
        {
          name: "大欧鸟笼制作技艺",
          src: require("@/assets/images/resource/whyf/1.jpg"),
        },
        {
          name: "虎头鞋虎头帽",
          src: require("@/assets/images/resource/whyf/2.jpg"),
        },
        {
          name: "毛子埠升制作技艺",
          src: require("@/assets/images/resource/whyf/5.jpg"),
        },
        {
          name: "大沽河的传说",
          src: require("@/assets/images/resource/whyf/7.jpg"),
          imageList: [
            require("@/assets/images/resource/whyf/7.jpg"),
            require("@/assets/images/resource/whyf/9.jpg"),
            require("@/assets/images/resource/whyf/10.jpg"),
          ],
          content:
            "<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2008年公布为第一批即墨市级非物质文化遗产名录。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《大沾河的传说》，起始于春秋战国时期，距今已有二千余年历史。其流传区域.以即墨市移风店镇为中心，涉及到沿大洁河周边镇以及平度、胶州、莱西等区市。同时，有些故事在东北三省等地区也广为流传。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移风店镇历史您久，文化底蕴丰厚，新石器时代的龙山文化遗址、春秋棠邑古城遗址及即墨县抗日民主政府旧址均位于该镇，是即墨柳腔的发源地之一。该镇民风淳朴，人民群众勤劳朴实，有传统的布艺加工、草编等民间手工技艺，并流传着许多美丽的传说，其主要故事有:“大沽河的传说&quot;(两个版本)、“入洞房的传说&quot;、“老人是宝”、“三湾崖的传说&quot;、“三个日头”、“挂甲树”、“泰山石敢当二则”、“天地传说&quot;“神医乔范”、“油匠口子”、“徐仙姑传说”、“好人好报”、“吕洞宾典故”、“虎头鞋与虎头帽的传说”、&quot;李师傅的传说”、&quot;张柄寺的传说&quot;等。这些故事经当地百姓口口相传，深深地影响了一代又一代的大沽河人。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《大沽河的传说》，具有浓厚的民间文化底蕴，脍炙人口的故事都充分体现了沽河沿岸人民的勒劳朴实、宽厚仁爱的传统道德观念和坚忍不拔的奋斗精神</p><p><br/></p>",
        },
        {
          name: "陈仙姑传说",
          src: require("@/assets/images/resource/whyf/8.jpg"),
        },
        {
          name: "金吉友拳法",
          src: require("@/assets/images/resource/whyf/3.jpg"),
        },
        {
          name: "张院簸箕制作技艺",
          src: require("@/assets/images/resource/whyf/4.jpg"),
        },
        {
          name: "上泊金银器打造工艺",
          src: require("@/assets/images/resource/whyf/6.jpg"),
        },
      ],
      active: 7,
      selfObj: {},
    };
  },
  created() {
    cultureLegacyList().then((res) => {
      this.tabList = res.data.list;
      this.selfObj = {
        content: this.tabList[7].content,
        imageList: this.tabList[7].imageList,
      };
    });
  },
  mounted() {},
  methods: {
    handelTab(index) {
      this.active = index;
      this.selfObj = {
        content: this.tabList[index].content,
        imageList: this.tabList[index].imageList,
      };
    },
  },
  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;
    display: flex;
    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 {
    width: 100%;
    height: 146px;
    margin-top: 43px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
    box-sizing: border-box;
    z-index: 10;

    > img {
      width: 64px;
      height: 64px;
    }

    > section {
      flex: 1;
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      margin: 0;

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

        img {
          min-width: 173px;
          min-height: 106px;
          margin-bottom: 6px;
        }
      }

      .active {
        width: 260px;
        height: 166px;
        position: relative;
        top: -10px;
      }
    }
  }
}
</style>