health-front/pages_order/home/healthRecordsIntro.vue

<template>
  <view class="view">
    <view class="top">
      <view class="route">
        <image class="img" :src="configList.home_science_3" mode="widthFix"></image>
      </view>
    </view>
    <view class="bottom">

      <swiper 
        class="swiper" 
        :current="current"
        :autoplay="false"
        :display-multiple-items="2.5"
        @change="onChange"
      >
        <swiper-item v-for="(item, sIdx) in list" :key="item.id" style="display: inline-block;">
          <view class="swiper-item">
            <view class="swiper-item-content">
              <view class="card">
                <image class="img" :src="item.image" mode="heightFix"></image>
                <view class="title">{{ item.title }}</view>
              </view>
              <view class="desc ">
                <view>{{ `STEP ${sIdx + 1}` }}</view>
                <view class="text-ellipsis-2">{{ item.text }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item style="display: inline-block;">
          <view class="swiper-item"></view>
        </swiper-item>
        <swiper-item style="display: inline-block;">
          <view class="swiper-item"></view>
        </swiper-item>
      </swiper>

      <view class="flex">
        <view class="indicator flex">
          <view 
            v-for="(item, index) in list" 
            :key="index"
            :class="['indicator-dot', index === current ? 'is-active' : '']"
            @click="current = index"
          ></view>
        </view>  
      </view>
    </view>
  </view>
</template>

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

  export default {
		components: {
      indicator,
    },
		data() {
			return {
        current: 0,
        list: [],
			}
		},
		created() {
			this.getData()
		},
		methods: {
			async getData() {
				try {
					this.list = await this.$fetch('getIntroduce')
				} catch (err) {

				}
			},
      onChange(e) {
        this.current = e.detail.current
      }
		},
  }
</script>

<style scoped lang="scss">
.view {
  width: 100vw;
}
.top {
  width: 100%;
  padding: 80rpx 32rpx 30rpx 32rpx;
  box-sizing: border-box;

  .route {
    width: 100%;
    height: calc((100vw - 32rpx*2) * 314 / 343);
    border-radius: 64rpx;
    background-image: linear-gradient(#F3F3F3, #FAFAFF);
    box-shadow: -5rpx -5rpx 20rpx 0 #FFFFFF,
                10rpx 10rpx 20rpx 0 #AAAACC80,
                4rpx 4rpx 10rpx 0 #AAAACC40,
                -2rpx -2rpx 5rpx 0 #FFFFFF;

    .img {
      width: 100%;
      height: auto;
    }
  }
}
.bottom {
  width: 100%;
}

.swiper {
  width: 100%;
  height: 518rpx;
  padding-left: 22rpx;

  &-item {
    width: 310rpx;
    height: 518rpx;
		padding: 10rpx 30rpx 40rpx 10rpx;
    box-sizing: border-box;
    
    &-content {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      

      .card {
        position: relative;
        width: 270rpx;
        height: 332rpx;
        border-radius: 32rpx;
        overflow: hidden;
        padding: 0;
        background-image: linear-gradient(45deg, #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;
          left: 0;
          bottom: 0;
          width: 100%;
          // height: auto;
          height: 224rpx;
          left: 50%;
          transform: translateX(-50%);
        }

        .title {
          position: absolute;
          top: 24rpx;
          width: 100%;
          text-align: center;
          font-weight: 200;
          font-size: 40rpx;
          line-height: 1.4;
        }
      }

      .desc {
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 1.6;
        color: #252545;
        padding: 32rpx 0 40rpx 0;
      }
    }
  }
}

.indicator {
  display: inline-flex;
  width: auto;
  height: 12rpx;
  border-radius: 6rpx;
  background: #D9D9D9;
  &-dot {
    display: inline-block;
    width: 34rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: transparent;

    &.is-active {
      background-image: linear-gradient(to right, #4B348F, #845CFA);
    }
  }
}
</style>