feat: 拆分服务介绍卡片组件

apps/bigmember_pc/src/views/article-content/components/RecommendServesCard.vue

@@ -0,0 +1,137 @@
+<script setup>
+const props = defineProps({
+  headerTitle: {
+    type: String,
+    default: ''
+  },
+  headerMore: {
+    type: String,
+    default: ''
+  },
+  clickMore: {
+    type: Function,
+    default: () => {}
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  content: {
+    type: String,
+    default: ''
+  },
+  buttons: {
+    type: Array,
+    default: () => {
+      return [
+        {
+          label: '立即查看',
+          class: 'less',
+          action: () => {
+            console.log('立即查看')
+          }
+        }
+      ]
+    }
+  }
+})
+</script>
+<template>
+  <div
+    class="recommend-serve-card has-header flex flex-(col items-center justify-between)"
+  >
+    <div
+      class="recommend-serve-header w-full flex flex-(row items-center justify-between)"
+    >
+      <span>{{ headerTitle }}</span>
+      <span class="action-text flex flex-(row items-center)" @click="clickMore"
+        >{{ headerMore }} <i class="iconfont icon-more"></i
+      ></span>
+    </div>
+    <div
+      class="recommend-serve-content flex flex-(1 col items-center justify-between)"
+    >
+      <div>
+        <span class="title-text">{{ title }}</span>
+        <div class="text-center">
+          {{ content }}
+        </div>
+      </div>
+      <div class="action-btns flex flex-(row items-center)">
+        <el-button
+          v-for="(button, index) in buttons"
+          :key="index"
+          :type="button.type"
+          @click="button.action"
+          >{{ button.label }}</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.recommend-serve-card {
+  &:nth-of-type(odd) {
+    margin-left: 0;
+  }
+  &:nth-of-type(even) {
+    margin-right: 0;
+  }
+  margin: 16px 8px 0 8px;
+  width: 442px;
+  min-height: 178px;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: linear-gradient(180deg, #fff 0%, #f3f7f9 100%);
+  box-shadow: 0px 4px 8px 0px rgba(129, 134, 136, 0.06);
+  &.has-header {
+    min-height: 231px;
+  }
+
+  .recommend-serve-header {
+    padding: 8px 16px;
+    background: linear-gradient(270deg, #f1d090 0%, #fae7ca 100%);
+    color: #1d1d1d;
+    font-size: 14px;
+    line-height: 22px;
+    .action-text {
+      color: #b1700e;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    & + .recommend-serve-content {
+      padding-top: 16px;
+    }
+  }
+  .recommend-serve-content {
+    color: #686868;
+    text-align: center;
+    font-size: 14px;
+    line-height: 22px;
+    padding: 24px 42px;
+    .title-text {
+      display: inline-block;
+      color: #1d1d1d;
+      font-size: 16px;
+      line-height: 24px;
+      margin-bottom: 10px;
+    }
+  }
+
+  .action-btns {
+    .el-button {
+      min-width: 132px;
+      height: 36px;
+      padding: 6px 16px;
+      font-size: 16px;
+      line-height: 22px;
+      & + .el-button {
+        margin-left: 32px;
+      }
+    }
+  }
+}
+</style>