sxc-frontend/miniprogram/components/SsGridEntrance.vue

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  subject: {
    type: String,
    default: ''
  },
  image: {
    type: String,
    default: ''
  },
  subClass: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])
const click = () => {
	emit('click')
}

</script>

<template>
  <view class="entrance hover-scale" :class="subClass" @tap="click">
    <view class="entrance-content">
      <view class="title">{{ title }}</view>
      <view class="subject">{{ subject }}</view>
    </view>
    <image class="entrance-image" fit="contain" :src="image" />
  </view>
</template>

<style scoped lang="scss">
.entrance {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, #FFFFFF, #E5F7FF);
  box-shadow: 0 0.25rem 1.25rem 0 rgba(52, 149, 239, 0.4);

  .entrance-content {
    position: relative;
    z-index: 10;

    .title {
      font-size: 0.88rem;
      font-weight: bold;
      color: #101333;
      line-height: 0.88rem;
      margin-bottom: 0.5rem;
    }

    .subject {
      font-size: 0.8rem;
      color: #7E8AA2;
    }
  }

  .entrance-image {
    position: absolute;
    bottom: 0;
    right: 2.13rem;
    width: 6rem;
    height: 4.7rem;
  }

  &.yellow {
    background: linear-gradient(180deg, #FFFFFF, #FFF1F0);
  }
}

@media screen and (max-width: 750px) {
  .entrance {
    padding: 1rem 0.75rem;
    border-radius: 0.75rem;

    .entrance-image {
      width: 4.13rem;
      height: 3.63rem;
      right: 0;
    }
  }
}
</style>