education-front/pages_order/thesis/thesisCard.vue

<template>
  <view class="flex card" @click="jumpToDetail(data.id)">
    <view class="flex main" style="opacity: 0;">
      <view class="left">
        <thesisInfoView :data="data"></thesisInfoView>
      </view>
      <view class="right">
        <image class="img" :src="data.paperImage" mode="aspectFill"></image>
      </view>
    </view>
    <view class="bg">
      <image class="img" src="@/static/image/card-bg-icon.png" mode="widthFix"></image>
    </view>
    <view class="flex main" style="position: absolute; left: 0; top: 0;">
      <view class="left">
        <thesisInfoView :data="data"></thesisInfoView>
      </view>
      <view class="right">
        <image class="img" :src="data.paperImage" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
  import thesisInfoView from './thesisInfoView.vue';

  export default {
    components: {
      thesisInfoView,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      jumpToDetail(thesisId) {
        this.$emit('jumpToDetail')
      },
    },
  }
</script>

<style scoped lang="scss">

  .card {
    position: relative;
    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.22), #FFFFFF);

    .bg {
      position: absolute;
      bottom: 0;
      left: 4rpx;
      font-size: 0;

      .img {
        width: 206rpx;
        height: auto;
      }
    }

    .main {
      // align-items: flex-start;
      width: 100%;
    }

    .left {
      flex: 1;
      position: relative;
    }

    .right {
      padding: 16rpx 18rpx 14rpx 0;
      box-sizing: border-box;

      .img {
        // $w: 225rpx;
        // width: 225rpx;
        // height: calc(#{$w} * 1184 / 750);
        width: 184rpx;
        height: 290rpx;
      }
    }
  }
</style>