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">
						<!-- todo: check img url? -->
            <image class="img" src="@/pages_order/static/temp-1.png" 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="jumpToTest(item.paperId)">
                <image class="btn-icon" src="@/pages_order/static/index/btn-icon.png" mode="widthFix"></image>
                <text>{{ item.btnTxt }}</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,
    },
		data() {
			return {
        current: 0,
        list: [],
			}
		},
		created() {
			this.getData()
		},
		methods: {
			async getData() {
				try {
					let result = await this.$fetch('getPersonalized')
					
					this.list = result.map(item => {
						const { id, title, subTitle, info, btnTxt, paperId } = item

						return {
							id,
							// todo: check img url?
							// url
							arr: [
								{ text: title, class: 'font1' }, 
								{ text: subTitle, class: 'font2' }, 
								{ text: info, class: 'font3' }, 
							],
							btnTxt,
              paperId,
						}
					})
				} catch (err) {

				}
			},
      jumpToTest(paperId) {
        this.$utils.navigateTo(`/pages_order/report/test/intro?id=${paperId}`)
      },
      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>