health-front/pages_order/report/result/tonicCard.vue

<template>
  <view :class="['card', `card-${index % 5}`]">
    <view class="header">
      <view class="index">{{ getNum(index) }}</view>
      <view class="intro">
        <view class="title">{{ data.title }}</view>
        <view class="desc">{{ data.desc }}</view>
      </view>
    </view>
    <view class="main">
      <image class="img" :src="data.url" mode="aspectFit"></image>
      <view class="flex flex-column">
        <view class="use">{{ data.use }}</view>
        <view class="name-zh">{{ data.name }}</view>
        <view class="name-en">{{ data.nameEn }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      index: {
        type: Number,
        default: 0,
      },
      data: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    methods: {
      getNum(index) {
        let num = index + 1
        return num < 10 ? `0${num}` : num
      },
    },
  }
</script>

<style scoped lang="scss">
$header-height: 374rpx;

.card {
  width: 100%;
  height: auto;
  padding-top: calc(#{$header-height} - 8rpx);
}

.header {
  position: absolute;
  top: 0;
  left: -8rpx;
  width: calc(100% + 8rpx * 2);
  height: 374rpx;
  padding: 32rpx;
  box-sizing: border-box;
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;

  .index {
    font-size: 128rpx;
    font-weight: 900;
    line-height: 1.4;
    font-family: HarmonyOS Sans;
    color: transparent;
    background-image: linear-gradient(#FFFFFF, #FFFFFF00);
    background-clip: text;
    display: inline-block;
  }

  .intro {
    position: absolute;
    left: 32rpx;
    bottom: 32rpx;
    width: calc(100% - 32rpx * 2);
    font-family: PingFang SC;
    color: #FFFFFF;

    .title {
      font-weight: 600;
      font-size: 40rpx;
      line-height: 1.4;
    }

    .desc {
      margin-top: 16rpx;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.3;
    }
  }
}

.main {
  .img {
    width: 100%;
    height: 500rpx;
    // margin: 48rpx 0;
  }

  .use{
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 48rpx;
    line-height: 1.4;
    color: #252545;
  }

  .name {
    &-zh {
      margin: 16rpx 0;
      font-size: 64rpx;
      font-weight: 900;
      line-height: 1.4;
      font-family: HarmonyOS Sans;
      color: transparent;
      background-clip: text;
      display: inline-block;
    }
    
    &-en {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      line-height: 1.4;
      color: #989898;
    }
  }
}

.card {
  &-0 {
    $color: linear-gradient(to right, #667EE2, #77BDDF);

    .header,
    .name-zh {
      background-image: $color;
    }
  }
}
.card {
  &-1 {
    $color: linear-gradient(to right, #BB7721, #EBBF5B);

    .header,
    .name-zh {
      background-image: $color;
    }
  }
}
.card {
  &-2 {
    $color: linear-gradient(to right, #72281E, #AA4E3F);

    .header,
    .name-zh {
      background-image: $color;
    }
  }
}
.card {
  &-3 {
    $color: linear-gradient(to right, #493489, #8360F6);

    .header,
    .name-zh {
      background-image: $color;
    }
  }
}
.card {
  &-4 {
    $color: linear-gradient(to right, #699656, #B7D39C);

    .header,
    .name-zh {
      background-image: $color;
    }
  }
}
</style>