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

<template>
  <div class="benefits-wrapper">
    <div class="carousel">
      <EffectFade :list="benefits?.fileList ?? []">
        <template v-slot="{ item }">
          <div class="banner-wrapper">
            <img class="banner" :src="config.sourceUrl + item" alt="" />
          </div>
        </template>
      </EffectFade>
    </div>
    <div class="right">
      <h1 class="title">{{ switchLanguage(benefits, 'title') }}</h1>
      <ScrollView class="intro-scroll" scrollbar>
        <p class="intro">{{ switchLanguage(benefits, 'content') }}</p>
      </ScrollView>
      <div class="right-bottom">
        <div class="group">
          <ThumbQRCode v-for="item of qr" :url="config.sourceUrl + item.fileUrl" :title="switchLanguage(item, 'name')" :key="item.name" />
        </div>
        <div class="bottom-right" @click="showLoginDialog = true">
          <img src="../../assets/images/member/phone-login.png" alt="" class="phone-icon" />
          <div class="line"></div>
          <div class="text-box">
            <p class="enter">点此进入</p>
            <p class="text">手机号注册</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Teleport to="body">
    <Transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
      <LoginByPhone @close="showLoginDialog = false" v-if="showLoginDialog" />
    </Transition>
  </Teleport>

  <LoginError @close="showLoginError = false" v-if="showLoginError" />
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import EffectFade from '@/components/EffectFade/EffectFade.vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import ThumbQRCode from '@/base/ThumbQRCode/ThumbQRCode.vue'
const LoginByPhone = defineAsyncComponent(() => import('@/components/LoginByPhone/LoginByPhone.vue'))
const LoginError = defineAsyncComponent(() => import('@/components/LoginError/LoginError.vue'))

const props = defineProps({
  benefits: Object
})

const store = useStore()
const { config } = storeToRefs(store)
const qr = computed(() => props.benefits.qrFileList ?? [])

const showLoginDialog = ref(false)

const showLoginError = ref(false)
</script>

<style lang="scss" scoped>
.benefits-wrapper {
  width: 870px;
  left: 72px;
  top: 344px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 1px 0px 0px #ffffff;
  border-radius: 12px;
  margin-left: 170px;
  margin-top: 58px;
  padding-bottom: 56px;

  :deep(.swiper-pagination-bullet) {
    width: 16px !important;
    height: 3px !important;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px !important;
    opacity: inherit !important;
    &.swiper-pagination-bullet-active {
      background: #f1b33e;
      border-radius: 3px !important;
    }
  }
  .carousel {
    flex-shrink: 0;
    width: 870px;
    height: 490px;
    margin-right: 56px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
  }
  .banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.right-bottom {
  display: flex;
  justify-content: space-between;
  padding-right: 56px;
  margin-left: 56px;
}
.bottom-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 328px;
  height: 146px;
  background: #ffffff;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.03), inset 0px -4px 0px rgba(177, 189, 220, 0.1);
  border-radius: 8px;
  .phone-icon {
    width: 48px;
    height: 48px;
  }
  .line {
    width: 1px;
    height: 38px;
    left: 134px;
    top: 54px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 26px;
  }
  .enter {
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.4);
    padding-bottom: 4px;
    font-family: 'font_bold';
  }
  .text {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    font-family: 'font_bold';
    color: rgba(0, 0, 0, 0.6);
  }
}

.title {
  padding-top: 48px;
  font-weight: 700;
  font-family: 'font_bold';
  font-size: 24px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.8);
  padding-bottom: 32px;
  margin-left: 56px;
}

.intro-scroll {
  position: relative;
  height: 156px;
  overflow: hidden;
  margin-left: 56px;
  margin-right: 34px;
  padding-right: 16px;
  margin-bottom: 67px;
  .intro {
    font-weight: 400;
    font-size: 14px;
    line-height: 200%;
    text-align: justify;
    color: rgba(0, 0, 0, 0.6);
  }
}
</style>