health-front/components/home/productSwiper.vue

<template>
  <view>
    <swiper 
      class="swiper" 
      :current="current"
      :autoplay="true"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id">
        <view class="swiper-item">
          <view class="swiper-item-content">
          
            <image class="bg" :src="item.url" mode="aspectFill"></image>

            <view class="content">

              <view class="flex flex-column">
                <view 
                  v-for="(line, lIdx) in item.arr" 
                  :key="lIdx"
                  :class="line.class"
                >
                  {{ line.text }}
                </view>
              </view>

              <view class="btns">
                <button class="btn btn-left flex" @click="$utils.navigateTo(item.btns[0].path)">
                  {{ item.btns[0].text }}
                </button>
                <button class="btn btn-right flex" @click="$utils.navigateTo(item.btns[1].path)">
                  {{ item.btns[1].text }}
                </button>
              </view>
            </view>

          </view>
        </view>
      </swiper-item>
    </swiper>

    <indicator :current="current" :length="list.length" @click="current = $event"></indicator>
  </view>
</template>

<script>
	import indicator from '@/components/home/indicator.vue'

	export default {
		components: {
      indicator,
    },
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
		data() {
			return {
        current: 0,
			}
		},
		onLoad() {
		},
		methods: {
      onChange(e) {
        this.current = e.detail.current
      }
		},
  }
</script>

<style scoped lang="scss">

.swiper {
  width: 100vw;
  height: calc(100vw * 578 / 375);

  &-item {
    width: 100%;
    height: 100%;
		padding: 10rpx 32rpx 40rpx 32rpx;
    box-sizing: border-box;
    
    &-content {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 64rpx;
      box-shadow: -5rpx -5rpx 10rpx 0 #FFFFFF,
                  10rpx 10rpx 20rpx 0 #AAAACC80,
                  4rpx 4rpx 10rpx 0 #AAAACC40,
                  -2rpx -2rpx 5rpx 0 #FFFFFF;
    }

    .bg {
      width: 100%;
      height: 100%;
      border-radius: 64rpx;
    }

    .content {
      position: absolute;
      bottom: 0;

      width: 100%;
      height: 592rpx;
      padding: 170rpx 60rpx 80rpx 60rpx;
      box-sizing: border-box;
      background-image: linear-gradient(#FFFFFF00, #FFFFFF);
      border-radius: 64rpx;
    }
    
    .font1 {
      font-size: 48rpx;
      font-weight: 600;
      line-height: 1.4;
      font-family: PingFang SC;
      color: #252545;
    }
    .font2 {
      font-size: 48rpx;
      font-weight: 600;
      line-height: 1.4;
      font-family: PingFang SC;
      color: transparent;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      background-clip: text;
      display: inline-block;
    }
    .font3 {
      font-size: 32rpx;
      font-weight: 400;
      line-height: 1.4;
      font-family: PingFang SC;
      color: #252545;
    }

    .btns {
      margin-top: 72rpx;
      display: flex;
      justify-content: space-between;

      .btn {
        width: 264rpx;
        box-sizing: border-box;
        font-size: 30rpx;
        font-family: PingFang SC;
        line-height: 1.4;
        border-radius: 45rpx;

        &-left {
          padding: 23rpx 0;
          font-weight: 400;
          color: #252545;
          border: 1rpx solid #252545;
        }

        &-right {
          padding: 24rpx 0;
          font-weight: 600;
          color: #FFFFFF;
          background-image: linear-gradient(to right, #4B348F, #845CFA);
        }

      }
    }
  }
}

</style>