web/apps/mobile/src/views/article/ui/ServiceIntroCard.vue

<template>
  <section class="service-intro-card bg-white">
    <header
      v-if="showHeader"
      class="service-intro-header bg-white flex flex-(items-center justify-between)"
    >
      <h5 class="service-intro-title">
        <slot name="title">{{ title }}</slot>
      </h5>
      <div class="service-intro-header-actions">
        <slot name="header-actions">
          <span class="header-action-item">
            <span class="header-action-item-text">查看服务介绍</span>
            <van-icon name="arrow" />
          </span>
        </slot>
      </div>
    </header>
    <main
      class="service-intro-main flex flex-(col items-center justify-center)"
    >
      <slot name="default">
        <p class="service-name-text">{{ serviceNameText }}</p>
        <p class="service-desc-text">{{ serviceDescText }}</p>
        <div class="action-group">
          <van-button
            class="action-button plain"
            type="primary"
            plain
            @click="leftButtonClick"
            v-if="plainButtonShow"
          >
            {{ plainButtonText }}
          </van-button>
          <van-button
            class="action-button"
            type="primary"
            @click="rightButtonClick"
            v-if="confirmButtonShow"
          >
            {{ confirmButtonText }}
          </van-button>
        </div>
      </slot>
    </main>
  </section>
</template>
<script>
import { Icon, Button } from 'vant'
export default {
  name: 'ServiceIntroCard',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    serviceNameText: {
      type: String,
      default: '权限名称'
    },
    serviceDescText: {
      type: String,
      default: '权限介绍'
    },
    plainButtonShow: {
      type: Boolean,
      default: false
    },
    plainButtonText: {
      type: String,
      default: '了解详情'
    },
    confirmButtonShow: {
      type: Boolean,
      default: true
    },
    confirmButtonText: {
      type: String,
      default: '免费体验'
    }
  },
  created() {},
  methods: {
    leftButtonClick() {
      this.$emit('leftButtonClick')
    },
    rightButtonClick() {
      this.$emit('rightButtonClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.service-intro-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 2px 8px 0px rgba(54, 147, 179, 0.05);
}
.service-intro-header {
  padding: 8px 16px;
  min-height: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(270deg, #f1d090 0%, #fae7ca 100%);
}
.service-intro-main {
  padding: 8px 24px 16px;
  background: linear-gradient(180deg, #fff 0%, #f4f4f4 100%);
}
.service-intro-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
}
.service-name-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}
.service-desc-text {
  margin: 8px 0;
  color: #5f5e64;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.action-group {
  .action-button {
    height: 32px;
    font-size: 16px;
    &:not(:first-of-type) {
      margin-left: 24px;
    }
  }
}
</style>