health-front/pages_order/home/recommendSwiper.vue

<template>
  <view>
    <swiper 
      class="swiper" 
      :current="current"
      :autoplay="true"
      :display-multiple-items="1.5"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id" style="display: inline-block;">
        <view class="swiper-item">
          <view class="swiper-item-content">
            <image class="img" :src="item.url" mode="widthFix"></image>
            
            <view class="content">
              <view>
                <view 
                  v-for="(line, lIdx) in item.arr" 
                  :key="lIdx"
                  :class="line.class"
                >
                  {{ line.text }}
                </view>
              </view>

              <button class="btn flex" @click="$utils.navigateTo(item.btns[0].path)">
                <image class="btn-icon" src="@/pages_order/static/index/btn-icon.png" mode="widthFix"></image>
                <text>{{ item.btn.text }}</text>
              </button>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item style="display: inline-block;">
        <view class="swiper-item"></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: 320rpx;
  padding-left: 22rpx;

  &-item {
    width: 512rpx;
    height: 320rpx;
		padding: 24rpx 30rpx 40rpx 10rpx;
    box-sizing: border-box;
    
    &-content {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 12rpx;
      box-sizing: border-box;
      border-radius: 32rpx;
      background-image: linear-gradient(#FAFAFF, #F3F3F3);
      box-shadow: -5rpx -5rpx 10rpx 0 #FFFFFF,
                  10rpx 10rpx 20rpx 0 #AAAACC80,
                  4rpx 4rpx 10rpx 0 #AAAACC40,
                  -2rpx -2rpx 5rpx 0 #FFFFFF;

      .img {
        position: absolute;
        right: 24rpx;
        bottom: 24rpx;

        width: 200rpx;
        height: auto;
      }

      .content {
        position: absolute;
        left: 0;
        top: 0;

        width: 100%;
        height: 100%;
        padding: 24rpx;
        box-sizing: border-box;

        .font1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 1.4;
          font-family: PingFang SC;
          color: #252545;
        }
        .font2 {
          font-size: 26rpx;
          font-weight: 400;
          line-height: 1.4;
          font-family: PingFang SC;
          color: #989898;
        }
        .font3 {
          font-size: 24rpx;
          font-weight: 400;
          line-height: 1.4;
          font-family: PingFang SC;
          color: #252545;
        }

        .btn {
          margin-top: 32rpx;
          display: inline-flex;
          padding: 14rpx 24rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 1.4;
          color: #252545;
          border: 1rpx solid #252545;
          border-radius: 28rpx;

          &-icon {
            width: 28rpx;
            height: 28rpx;
            margin-right: 8rpx;
          }
        }
      }
    }

  }
}

</style>