client_iot-daoshi-template-v/src/components/Busniness/Busniness.vue

<template>
  <ScrollView class="business-scroll">
    <div class="business-content">
      <div class="three-wrapper" :class="{ active: cardIdx === index }" v-for="(item, index) of 10" :key="item">
        <div class="front">
          <div class="title">
            <p class="title-left">巴黎贝甜</p>
            <p class="title-right">¥<i>30</i></p>
          </div>
          <p class="sub-title">30元代金券，满129可用</p>
          <ScrollView class="intro-scroll" scrollbar>
            <p class="intro">
              欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿。销售业绩评效均名列前茅，整体业绩不断上扬！在女装市场享有一定的知名度和美誉度。欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中
            </p>
          </ScrollView>
          <p class="time first">领取时间：2021-01-01</p>
          <p class="time">使用时间：2021-01-01至2021-12-30</p>
          <div class="btn" @click="handleCard(item, index)">立即领取</div>
        </div>
        <div class="back">
          <div class="code">
            <img src="" alt="" class="code-img" />
            <div class="text">微信扫一扫</div>
          </div>
          <div class="btn" @click="cardIdx = -1">返回</div>
        </div>
      </div>
    </div>
  </ScrollView>
</template>

<script setup>
import { ref } from 'vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'

const cardIdx = ref(-1)
function handleCard(item, index) {
  cardIdx.value = index
}
</script>

<style lang="scss" scoped>
.business-scroll {
  position: relative;
  margin-left: 170px;
  overflow: hidden;
  margin-top: 58px;
  height: 1560px;
  .business-content {
    display: grid;
    grid-template-columns: repeat(2, 420px);
    gap: 56px 30px;
  }

  .three-wrapper {
    display: inline-block;
    width: 420px;
    height: 528px;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(800px);
    transition: all 0.5s;
    transform-origin: center;
    margin-right: 25px;

    &.active {
      transform: rotateY(-180deg);
    }
  }
  .front,
  .back {
    width: 420px;
    height: 528px;
    backface-visibility: hidden;
    background: url('../../assets/images/member/line.png') no-repeat center 445px rgba(255, 255, 255, 0.8);
    background-size: 497px 1px;
    overflow: hidden;
    border-radius: 12px;
    .btn {
      height: 83px;
      line-height: 83px;
      font-weight: 700;
      font-size: 20px;
      font-family: 'font_bold';
      text-align: center;
      color: rgba(0, 0, 0, 0.6);
    }
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      background: #f7f7f9;
      bottom: 75px;
      border-radius: 50%;
    }
    &::before {
      left: -9px;
    }
    &::after {
      right: -9px;
    }
  }
  .front {
    position: relative;
    .title {
      display: flex;
      justify-content: space-between;
      color: #f1b33e;
      align-items: baseline;
      padding: 32px 56px 25px 56px;

      .title-left {
        font-weight: 700;
        font-size: 20px;
        font-family: 'font_bold';
      }
      .title-right {
        font-size: 24px;
        font-weight: 700;
        font-family: 'font_bold';
        i {
          font-size: 48px;
          font-weight: 700;
          padding-left: 6px;
        }
      }
    }
    .sub-title {
      font-weight: 700;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.8);
      margin-bottom: 40px;
      font-family: 'font_bold';
      margin-left: 56px;
    }
    .intro-scroll {
      height: 152px;
      overflow: hidden;
      position: relative;
      margin-bottom: 45px;
      margin-right: 34px;
      padding-right: 16px;
      margin-left: 56px;

      .intro {
        font-size: 14px;
        line-height: 200%;
        text-align: justify;
        color: rgba(0, 0, 0, 0.6);
        white-space: normal;
      }
      :deep(.bscroll-vertical-scrollbar) {
        width: 6px !important;
        background: rgba(0, 0, 0, 0.02) !important;
        border-radius: 6px !important;
        opacity: 1 !important;
        .bscroll-indicator {
          width: 6px !important;
          background: rgba(0, 0, 0, 0.1) !important;
          border-radius: 6px !important;
          border: none !important;
        }
      }
    }
    .time {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.4);
      margin-left: 56px;
      margin-bottom: 41px;

      &.first {
        margin-bottom: 9px;
      }
    }
  }

  .back {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotateY(-180deg);
    .code {
      height: 445px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .code-img {
        width: 150px;
        height: 150px;
      }
      .text {
        font-weight: 700;
        font-size: 20px;
        font-family: 'font_bold';
        color: rgba(0, 0, 0, 0.8);
        padding-top: 47px;
      }
    }
  }
}
</style>