|
|
@@ -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>
|
