jackyu66gitandCursor
19d3cd5945
绑定 ESS 双轨治理，拆分超大 H5 页与 Go 引擎，抽出 membership 服务， 并将 star/fortune 重命名为 outlook（JSON 双写兼容）；同时修复 /psy API 代理与首页 + 菜单层级。 Co-authored-by: Cursor <cursoragent@cursor.com>
110 lines
2.6 KiB
Vue
110 lines
2.6 KiB
Vue
<template>
|
||
<section class="section promo-sec">
|
||
<div class="promo-pair">
|
||
<router-link to="/explore" class="promo p-plaza">
|
||
<div class="p-copy">
|
||
<div class="p-title">探索广场</div>
|
||
<div class="p-sub">测评 · 工具 · 自我理解</div>
|
||
</div>
|
||
<span class="p-deco" aria-hidden="true" />
|
||
<span class="p-chip">热</span>
|
||
</router-link>
|
||
<router-link to="/membership" class="promo p-vip">
|
||
<div class="p-copy">
|
||
<div class="p-title">成长会员</div>
|
||
<div class="p-sub">深度报告与全年陪伴</div>
|
||
</div>
|
||
<span class="p-deco" aria-hidden="true" />
|
||
<span class="p-chip soft">新</span>
|
||
</router-link>
|
||
</div>
|
||
<p class="ai-note">部分内容由 AI 生成，仅供参考</p>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.section {
|
||
padding: 0 var(--spacing-md);
|
||
margin-top: 18px;
|
||
}
|
||
.promo-pair {
|
||
display: grid;
|
||
grid-template-columns: 1.12fr 0.88fr;
|
||
gap: 10px;
|
||
}
|
||
.promo {
|
||
position: relative;
|
||
border-radius: var(--radius-lg);
|
||
padding: 16px 14px;
|
||
min-height: 96px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
transition: transform var(--duration-fast) ease;
|
||
}
|
||
.promo:active {
|
||
transform: scale(0.98);
|
||
}
|
||
.p-copy {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.promo .p-title {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
}
|
||
.promo .p-sub {
|
||
font-size: 11px;
|
||
color: rgba(0, 0, 0, 0.42);
|
||
margin-top: 5px;
|
||
line-height: 1.35;
|
||
}
|
||
.p-deco {
|
||
position: absolute;
|
||
right: -12px;
|
||
bottom: -18px;
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 50%;
|
||
opacity: 0.55;
|
||
pointer-events: none;
|
||
}
|
||
.p-plaza {
|
||
background: linear-gradient(145deg, #ffe9e2 0%, #ffd4c8 55%, #ffc8ba 100%);
|
||
box-shadow: 0 4px 14px rgba(229, 77, 66, 0.1);
|
||
}
|
||
.p-plaza .p-deco {
|
||
background: radial-gradient(circle at 35% 35%, #fff 0%, #ffb0a0 55%, transparent 70%);
|
||
}
|
||
.p-vip {
|
||
background: linear-gradient(145deg, #fff4e0 0%, #ffe8b8 55%, #ffd98a 100%);
|
||
box-shadow: 0 4px 14px rgba(200, 146, 58, 0.12);
|
||
}
|
||
.p-vip .p-deco {
|
||
background: radial-gradient(circle at 35% 35%, #fff 0%, #f0c86a 55%, transparent 70%);
|
||
}
|
||
.p-chip {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
z-index: 1;
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, #ff7a6e, var(--color-primary));
|
||
padding: 2px 6px;
|
||
border-radius: 6px;
|
||
}
|
||
.p-chip.soft {
|
||
background: linear-gradient(135deg, #6eb6ff, #4a90e2);
|
||
}
|
||
.ai-note {
|
||
margin-top: 10px;
|
||
font-size: 10px;
|
||
color: #ccc;
|
||
text-align: center;
|
||
}
|
||
</style>
|