education-front/components/serve/serveModuleView.vue

<template>
  <view class="module" @click="onClick">
    <image class="module-bg" :src="data.image" mode="scaleToFill"></image>
    <view class="flex module-fg">
      <button class="flex btn">
        <view>更多</view>
        <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    style: {
      type: String,
      default: ''
    },
  },
  computed: {
    isFold: {
      set(val) {
        this.$emit('input', val)
      },
      get() {
        return this.value
      }
    }
  },
  methods: {
    onClick() {
      const isFold = !this.isFold
      this.isFold = isFold
      this.$emit('change', isFold)
    },
  },
}
</script>

<style scoped lang="scss">

  $w: calc(100vw - 38rpx*2);

  .module {
    font-size: 0;
    width: $w;
    height: auto;
    position: relative;
    font-size: 0;
    border-radius: 25rpx;
    overflow: hidden;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

    &-bg {
      width: $w;
      height: calc(#{$w} * 179 / 714);
    }

    &-fg {
      position: absolute;
      top: 0;
      left: 0;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      padding: 0 22rpx;
      box-sizing: border-box;
    }

    .btn {
      column-gap: 10rpx;
      font-size: 22rpx;
      color: #808080;
    }
  }

</style>