jackyu66gitandCursor
d33c8fdfe9
对齐 outlook/分享 type=star/报告页运势面板与测试；流程上关闭 Ops-B/C 两张 ECR。真支付仍后置。 Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
2.9 KiB
Vue
85 lines
2.9 KiB
Vue
<template>
|
||
<article class="share-card" :data-type="type">
|
||
<BrandLogo size="card" />
|
||
<p class="tag">认识自己 · 理解他人</p>
|
||
<h2 v-if="title">{{ title }}</h2>
|
||
<p v-if="line" class="line">{{ line }}</p>
|
||
<ul v-if="rows.length" class="rows">
|
||
<li v-for="(r, i) in rows" :key="i">{{ r }}</li>
|
||
</ul>
|
||
<div v-if="keywords.length" class="tags">
|
||
<span v-for="k in keywords" :key="k">{{ k }}</span>
|
||
</div>
|
||
<p class="cta-label">{{ ctaLabel }}</p>
|
||
<p class="disc">自我探索参考，非医疗或占卜预测</p>
|
||
</article>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import BrandLogo from './BrandLogo.vue'
|
||
|
||
withDefaults(
|
||
defineProps<{
|
||
type?: 'portrait' | 'star' | 'relation'
|
||
title?: string
|
||
line?: string
|
||
rows?: string[]
|
||
keywords?: string[]
|
||
ctaLabel?: string
|
||
}>(),
|
||
{
|
||
type: 'portrait',
|
||
title: '',
|
||
line: '',
|
||
rows: () => [],
|
||
keywords: () => [],
|
||
ctaLabel: '查看完整成长报告',
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.share-card{
|
||
position:relative;overflow:hidden;border-radius:20px;padding:22px 20px 18px;
|
||
background:
|
||
radial-gradient(120% 80% at 100% 0%, rgba(229,77,66,.18), transparent 55%),
|
||
linear-gradient(165deg, #fff8f6 0%, #ffe8e4 48%, #fff 100%);
|
||
color:#3a3030;box-shadow:0 10px 28px rgba(229,77,66,.12);
|
||
}
|
||
.tag{font-size:12px;color:#a08080;margin:8px 0 14px}
|
||
h2{font-size:17px;font-weight:600;margin:0 0 8px;line-height:1.4}
|
||
.line{font-size:14px;line-height:1.65;color:#555;margin:0 0 10px}
|
||
.rows{margin:0 0 12px;padding:0;list-style:none}
|
||
.rows li{font-size:14px;line-height:1.7;padding:4px 0;border-bottom:1px dashed rgba(229,77,66,.15)}
|
||
.rows li:last-child{border-bottom:none}
|
||
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
|
||
.tags span{
|
||
background:rgba(229,77,66,.1);color:var(--yxg-pri,#E54D42);
|
||
padding:4px 10px;border-radius:999px;font-size:12px;
|
||
}
|
||
.cta-label{
|
||
display:inline-block;margin-top:4px;padding:8px 14px;border-radius:20px;
|
||
background:linear-gradient(135deg,#ff7a6e,var(--yxg-pri,#E54D42));
|
||
color:#fff;font-size:13px;font-weight:600;
|
||
}
|
||
.disc{margin-top:12px;font-size:10px;color:#bbb;line-height:1.4}
|
||
.share-card[data-type="relation"]{
|
||
background:
|
||
radial-gradient(120% 80% at 0% 0%, rgba(200,146,58,.2), transparent 55%),
|
||
linear-gradient(165deg, #fffaf0 0%, #fff3d6 50%, #fff 100%);
|
||
}
|
||
.share-card[data-type="relation"] .tags span{background:#fff3d6;color:#c8923a}
|
||
.share-card[data-type="relation"] .cta-label{
|
||
background:linear-gradient(135deg,#e0b35a,#c8923a);
|
||
}
|
||
.share-card[data-type="star"]{
|
||
background:
|
||
radial-gradient(120% 80% at 100% 0%, rgba(100,120,200,.18), transparent 55%),
|
||
linear-gradient(165deg, #f6f8ff 0%, #e8ecff 48%, #fff 100%);
|
||
}
|
||
.share-card[data-type="star"] .tags span{background:rgba(100,120,200,.12);color:#4a5a9a}
|
||
.share-card[data-type="star"] .cta-label{
|
||
background:linear-gradient(135deg,#7a8ad4,#4a5a9a);
|
||
}
|
||
</style>
|