education-front/components/serve/serveModuleView.vue

<template>
  <view :style="style" @click="onClick">
    <view class="module">
      <image class="module-bg" src="@/static/image/bg-serve.png" mode="widthFix"></image>
      <image class="module-bg absolute" src="@/static/image/bg-serve-1.png" mode="widthFix"></image>
      <image class="module-bg absolute" src="@/static/image/bg-serve-2.png" mode="widthFix"></image>
      <view class="flex module-fg">
        <view class="flex module-info">
          <view class="title">{{ data.title }}</view>
          <image class="icon" src="@/static/image/serve-icon.png" mode="widthFix"></image>
        </view>
        <button class="flex btn">
          <view>更多</view>
          <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
        </button>
      </view>
    </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">

  .module {
    font-size: 0;
    width: 100%;
    height: auto;
    position: relative;
    &-bg {
      width: 100%;
      height: auto;
    }

    &-fg {
      position: absolute;
      top: 0;
      left: 0;
      justify-content: space-between;
      width: 100%;
      padding: 30rpx 30rpx 0 22rpx;
      box-sizing: border-box;
    }

    &-info {
      column-gap: 16rpx;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        line-height: 1;
        font-family: PingFang SC;
        color: transparent;
        background-image: linear-gradient(to right, #6851A7, #AA87F0);
        background-clip: text;
        display: inline-block;
      }

      .icon {
        width: 30rpx;
        height: auto;
      }
    }

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

  .absolute {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>