切换卡片效果

<template>
  <div class="trader_part">
    <div class="trader_part_left">
      <div class="trader_part_left_title">
        <p class="left_title_one">讓全球頂級交易員</p>
        <p class="left_title_two">為您賺錢</p>
      </div>
      <div class="trader_part_left_title_two">
        <p>跟單產品上線以來，跟單用戶</p>
        <p>90%</p>
        <p>盈利，人均30日ROI達到</p>
        <p>20%+</p>
      </div>
      <div class="trader_part_left_title_three">
        <div class="title_three_blone">
          <div>90%</div>
          <div>用戶盈利佔比</div>
        </div>
        <div class="title_three_blone">
          <div>20%</div>
          <div>30日人均收益率</div>
        </div>
      </div>
      <div class="trader_part_left_title_btn">了解更多</div>
    </div>
    <div class="container">
      <div class="card-box">
        <div class="card" :style="boxStyle(fieldOne)">
          <div class="card_head_logo">
            <img src="../../assets/images/1.svg" alt="" class="my9_img" />
            <div class="card_head_logo_title">熱門交易員</div>
            <img
              src="../../assets/images/1.svg"
              alt=""
              class="my9_img_rotate"
            />
          </div>
          <div class="card_head_box">
            <div class="head_img">
              <div>
                <img
                  src="../../assets/images/backCardImg.png"
                  style="width: 44px;height: 44px;border-radius: 50%;"
                />
              </div>
              <div class="head_img_title">
                <div class="head_img_title_name">Machine</div>
                <div class="head_img_title_two">
                  <img
                    src="../../assets/images/icon1.jpg"
                    alt=""
                    style="width: 16px;height: 16px;"
                  />
                  <div>77/1000</div>
                </div>
              </div>
            </div>
            <div class="head_averter">
              <div class="head_averter_one">
                <div class="head_averter_one_left">100%</div>
                <div class="head_averter_one_right">
                  <div class="one_right_avter">
                    <img
                      src="../../assets/images/head2.png"
                      style=" width: 16px;height: 16px;border-radius: 50%;"
                      alt=""
                    />
                  </div>
                  <div class="one_right_avter">
                    <img
                      src="../../assets/images/head3.png"
                      style=" width: 16px;height: 16px;border-radius: 50%;"
                      alt=""
                    />
                  </div>
                  <div class="one_right_avter">
                    <img
                      src="../../assets/images/head4.png"
                      style=" width: 16px;height: 16px;border-radius: 50%;"
                      alt=""
                    />
                  </div>
                  <div class="one_right_avter">
                    <img
                      src="../../assets/images/head5.png"
                      style=" width: 16px;height: 16px;border-radius: 50%;"
                      alt=""
                    />
                  </div>
                  <div class="one_right_avter">77</div>
                </div>
              </div>
              <div class="head_averter_two">90日收益率</div>
            </div>
            <div id="curve" style="width:100%; height:78px;"></div>
          </div>
        </div>
        <div class="card" :style="boxStyle(fieldTwo)"></div>
        <div class="card" :style="boxStyle(fieldThree)"></div>
      </div>
    </div>
    <div @click="translateCard" class="container_btn">
      <img src="../../assets/images/home_more.png" alt="" class="next_img" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    callShow: {
        item: Boolean,
            default: false
        },
  },
  data() {
    return {
      // 3d
      transformValue1: ["1", "2", "3"],
      currentIndex: 0,
    };
  },
  methods: {
    handleClick() {
      this.$emit("click", this.index);
    },
    // 点击切换
    boxStyle(index) {
      // 假设每个盒子在 Z 轴上的距离是 100px
      const translateZ = index * 1000 + "px";
      const translateX = index * 80 + "px";
      const translateY = index * 10 + "px";
      const indexs = 10 - index;
      const heights = 370 - index * 30 + "px";
      return {
        transform: `translate3d(${translateX}, ${translateY}, ${translateZ})`,
        transition: "transform 0.3s ease-in-out", // 可选的过渡效果
        // 其他可能的样式，如宽度、高度、背景色等...
        width: "332px",
        height: `${heights}`,
        backgroundColor: "rgba(255, 255, 255, " + 1.4 / index + ")", // 不同的透明度以增加层次感
        zIndex: `${indexs}`,
      };
    },
    //点击切换
    translateCard() {
      this.currentIndex++;
    },
  },
  computed: {
    // 3d
    fieldOne() {
      return this.transformValue1[
        this.currentIndex % this.transformValue1.length
      ];
    },
    fieldTwo() {
      // 假设我们想要第二个字段的值总是比当前索引大1（如果超出则回环）
      return this.transformValue1[
        (this.currentIndex + 1) % this.transformValue1.length
      ];
    },
    fieldThree() {
      // 假设我们想要第三个字段的值总是比当前索引大2（如果超出则回环）
      return this.transformValue1[
        (this.currentIndex + 2) % this.transformValue1.length
      ];
    },
  },
  mounted() {
  },
};
</script>

<style scoped lang="less">
.trader_part {
  height: 540px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .trader_part_left {
    height: 540px;
    .trader_part_left_title {
      display: flex;
      align-items: center;
      // white-space: normal;
      // word-break: break-all;
      // overflow: hidden;
      .left_title_one {
        font-size: 30px;
        font-weight: 700;
      }
      .left_title_two {
        font-size: 30px;
        font-weight: 700;
        color: #0dbe53;
      }
    }
    .trader_part_left_title_two {
      margin-top: 8px;
      display: flex;
      align-items: center;
      p:nth-child(1) {
        color: #6f6f6f;
        font-size: 14px;
      }
      p:nth-child(2) {
        color: #0dbe53;
        font-size: 14px;
      }
      p:nth-child(3) {
        color: #6f6f6f;
        font-size: 14px;
      }
      p:nth-child(4) {
        color: #0dbe53;
        font-size: 14px;
      }
    }
    .trader_part_left_title_three {
      margin: 24px 0 32px;
      display: flex;
      align-items: center;
      .title_three_blone {
        height: 60px;
        margin-right: 32px;
        div:nth-child(1) {
          font-size: 24px;
          color: #1c1c1c;
          font-weight: 700;
        }
      }
    }
    .trader_part_left_title_btn {
      width: 168px;
      height: 48px;
      border-radius: 24px;
      background-color: #0dbe53;
      color: #fff;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
    }
  }
  .container {
    width: 500px;
    height: 450px;
    margin-top: -60px;
    position: relative;
    display: flex;
    justify-content: center;
  }

  .card-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .card {
    position: absolute;
    left: 0;
    top: 0;
    width: 286px;
    height: 350px;
    background-color: yellow;
    box-shadow: 0 0 30px 0 rgba(172, 172, 172, 0.4);
    border-radius: 5px;
    .card_head_logo {
      display: flex;
      justify-content: center;
      margin-top: -7px;
      .my9_img {
        height: 24px;
      }
      .my9_img_rotate {
        height: 24px;
        transform: rotateY(180deg);
      }
      .card_head_logo_title {
        width: 84px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background-color: #00c070;
        color: #fff;
        font-size: 12px;
      }
    }
    .card_head_box {
      padding: 24px;
      box-sizing: border-box;
      .head_img {
        display: flex;
        align-items: center;
        .head_img_title {
          margin-left: 20px;
          .head_img_title_name {
            font-size: 18px;
            color: #1c1c1c;
          }
          .head_img_title_two {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #6f6f6f;
          }
        }
      }
      .head_averter {
        margin-top: 20px;
        .head_averter_one {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .head_averter_one_left {
            font-size: 20px;
          }
          .green {
            color: #0dbe53;
          }
          .red {
            color: #fa4a3e;
          }
          .head_averter_one_right {
            width: 60px;
            display: flex;
            .one_right_avter {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background-color: #f5f5f5;
              color: #1c1c1c;
              font-size: 12px;
              text-align: center;
              line-height: 16px;
              margin-left: -4px;
            }
          }
        }
        .head_averter_two {
          margin-top: 4px;
          font-size: 12px;
          color: #6f6f6f;
        }
      }
    }
  }
}
.container_btn {
  cursor: pointer;
  .next_img {
    width: 20px;
    height: 20px;
    margin-left: -50px;
  }
}
</style>