1603 lines
45 KiB
Plaintext
1603 lines
45 KiB
Plaintext
page {
|
||
background-color: #0f0f1b;
|
||
color: #e0e0e0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||
}
|
||
|
||
.container {
|
||
min-height: 100vh;
|
||
background-color: #0f0f1b;
|
||
padding: 40rpx 30rpx 100rpx;
|
||
box-sizing: border-box;
|
||
color: #e0e0e0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
/* 自定义返回按钮样式 */
|
||
.nav-back {
|
||
position: absolute;
|
||
top: 40rpx;
|
||
left: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 100;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 8rpx;
|
||
color: #c9a0dc;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 26rpx;
|
||
color: #c9a0dc;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 标题通用样式 */
|
||
.title-area {
|
||
text-align: center;
|
||
margin-top: 40rpx;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.app-title {
|
||
font-size: 44rpx;
|
||
font-weight: 600;
|
||
color: #c9a0dc;
|
||
letter-spacing: 4rpx;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.instruction {
|
||
font-size: 26rpx;
|
||
color: #8a8a9d;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
/* 1. 牌阵选择 - 卡片式V2 */
|
||
|
||
/* 顶部标题区域 */
|
||
.spread-header {
|
||
text-align: center;
|
||
padding: 60rpx 0 40rpx;
|
||
}
|
||
|
||
.spread-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
color: #c9a0dc;
|
||
font-weight: 500;
|
||
margin-bottom: 12rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.spread-subtitle {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: rgba(201, 160, 220, 0.7);
|
||
letter-spacing: 2rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* 标签筛选条 */
|
||
.tags-area {
|
||
padding: 0 30rpx 30rpx;
|
||
}
|
||
|
||
.tags-scroll {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tag-item {
|
||
display: inline-block;
|
||
padding: 12rpx 28rpx;
|
||
margin-right: 16rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(201, 160, 220, 0.3);
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
color: rgba(201, 160, 220, 0.8);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tag-item.active {
|
||
background: rgba(201, 160, 220, 0.2);
|
||
border-color: rgba(201, 160, 220, 0.6);
|
||
color: #ffffff;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 两列卡片网格 */
|
||
.spread-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20rpx;
|
||
padding: 0 30rpx 40rpx;
|
||
}
|
||
|
||
.spread-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(201, 160, 220, 0.3);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 24rpx;
|
||
position: relative;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||
transition: all 0.3s ease;
|
||
min-height: 240rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.spread-card:active {
|
||
transform: translateY(-4rpx);
|
||
box-shadow: 0 8rpx 30rpx rgba(201, 160, 220, 0.3);
|
||
border-color: rgba(201, 160, 220, 0.5);
|
||
}
|
||
|
||
.card-badge {
|
||
position: absolute;
|
||
top: 12rpx;
|
||
right: 12rpx;
|
||
background: rgba(201, 160, 220, 0.3);
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 20rpx;
|
||
color: #c9a0dc;
|
||
}
|
||
|
||
.card-name {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
margin-bottom: 12rpx;
|
||
padding-right: 60rpx;
|
||
}
|
||
|
||
.card-desc {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
line-height: 1.5;
|
||
margin-bottom: 20rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 20rpx;
|
||
color: rgba(201, 160, 220, 0.7);
|
||
padding-top: 16rpx;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.card-count {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.card-cost {
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 2. 洗牌仪式感 */
|
||
.ritual-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.shuffling-container {
|
||
position: relative;
|
||
width: 200rpx;
|
||
height: 300rpx;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
.shuffling-card {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.5);
|
||
animation: shuffle 1s infinite alternate ease-in-out;
|
||
}
|
||
|
||
@keyframes shuffle {
|
||
from { transform: translateX(-40rpx) rotate(-5deg); }
|
||
to { transform: translateX(40rpx) rotate(5deg); }
|
||
}
|
||
|
||
.ritual-hint {
|
||
font-size: 28rpx;
|
||
color: #c9a0dc;
|
||
opacity: 0.8;
|
||
animation: breathe 2s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes breathe {
|
||
0%, 100% { opacity: 0.4; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
/* 3. 抽牌区域 (槽位 + 扇形) */
|
||
.drawing-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 40rpx;
|
||
}
|
||
|
||
.slots-container {
|
||
display: flex;
|
||
flex-wrap: wrap; /* 允许换行 */
|
||
justify-content: center;
|
||
gap: 20rpx; /* 保持20rpx间距，与计算一致 */
|
||
min-height: 240rpx; /* 改为最小高度 */
|
||
max-height: 480rpx; /* 最多两排的高度 */
|
||
margin-bottom: 60rpx;
|
||
width: 100%;
|
||
padding: 0 30rpx; /* 增加左右padding确保居中 */
|
||
}
|
||
|
||
.slot-item {
|
||
width: 100rpx; /* 与WXS计算的宽度一致 */
|
||
height: 160rpx; /* 与WXS计算的高度一致 */
|
||
position: relative;
|
||
flex-shrink: 0; /* 防止收缩 */
|
||
}
|
||
|
||
.slot-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 2rpx dashed rgba(201, 160, 220, 0.3);
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.slot-num {
|
||
font-size: 40rpx;
|
||
color: rgba(201, 160, 220, 0.2);
|
||
font-family: serif;
|
||
}
|
||
|
||
.slot-card-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
animation: flyInSlot 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||
}
|
||
|
||
.slot-card-back {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.6);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
@keyframes flyInSlot {
|
||
from {
|
||
transform: translateY(400rpx) scale(0.8) rotate(10deg);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0) scale(1) rotate(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.fan-deck {
|
||
position: relative;
|
||
height: 380rpx;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
perspective: 1000px;
|
||
overflow: visible; /* 允许卡牌飞出容器 */
|
||
}
|
||
|
||
.fan-card {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
width: 150rpx;
|
||
height: 260rpx;
|
||
margin-left: -75rpx;
|
||
transform-origin: bottom center;
|
||
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
||
z-index: 10;
|
||
}
|
||
|
||
.card-back-sm {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.5);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.fan-card.is-selected {
|
||
z-index: 100;
|
||
pointer-events: auto; /* 允许点击已抽出的牌返回 */
|
||
}
|
||
|
||
.draw-count {
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
color: #c9a0dc;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.confirm-draw-btn {
|
||
margin: 40rpx auto;
|
||
background: #c9a0dc;
|
||
color: #1a1a2e;
|
||
border-radius: 40rpx;
|
||
font-weight: 600;
|
||
width: 300rpx;
|
||
}
|
||
|
||
/* 4. 翻牌结果展示 */
|
||
.result-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 30rpx 20rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.spread-display {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
padding: 20rpx 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 牌阵专属布局 - 传统排列方式 */
|
||
|
||
/* 1张牌 - 居中 */
|
||
.spread-display.one_card_guidance {
|
||
max-width: 130rpx;
|
||
}
|
||
|
||
/* 3张牌 - 横排 */
|
||
.spread-display.three_time_flow,
|
||
.spread-display.three_problem_solution,
|
||
.spread-display.love_spark {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
/* 4张牌 - 2x2网格 */
|
||
.spread-display.two_choice_decision,
|
||
.spread-display.relationship_healing {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
/* 5张牌 - 十字形 (现状分析) */
|
||
.spread-display.five_situation_analysis {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.five_situation_analysis .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.five_situation_analysis .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.five_situation_analysis .card-slot:nth-child(3) { grid-area: 3 / 2; }
|
||
.spread-display.five_situation_analysis .card-slot:nth-child(4) { grid-area: 2 / 1; }
|
||
.spread-display.five_situation_analysis .card-slot:nth-child(5) { grid-area: 2 / 3; }
|
||
|
||
/* 5张牌 - 关系洞察 */
|
||
.spread-display.relationship_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.relationship_spread .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.relationship_spread .card-slot:nth-child(2) { grid-area: 2 / 3; }
|
||
.spread-display.relationship_spread .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
.spread-display.relationship_spread .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
.spread-display.relationship_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
|
||
/* 5张牌 - 缘分探索 */
|
||
.spread-display.destiny_connection {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.destiny_connection .card-slot:nth-child(1) { grid-area: 1 / 2; }
|
||
.spread-display.destiny_connection .card-slot:nth-child(2) { grid-area: 2 / 2; }
|
||
.spread-display.destiny_connection .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.destiny_connection .card-slot:nth-child(4) { grid-area: 2 / 3; }
|
||
.spread-display.destiny_connection .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
|
||
/* 5张牌 - 职场突破 */
|
||
.spread-display.career_breakthrough {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.career_breakthrough .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.career_breakthrough .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.career_breakthrough .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.career_breakthrough .card-slot:nth-child(4) { grid-area: 3 / 2; }
|
||
.spread-display.career_breakthrough .card-slot:nth-child(5) { grid-area: 2 / 1; }
|
||
|
||
/* 5张牌 - 横排 */
|
||
.spread-display.timeline_spread,
|
||
.spread-display.diamond_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 110rpx);
|
||
gap: 12rpx;
|
||
max-width: 600rpx;
|
||
}
|
||
|
||
/* 6张牌 - 2x3网格 */
|
||
.spread-display.career_planning,
|
||
.spread-display.wealth_analysis {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
/* 7张牌 - 马蹄铁形 */
|
||
.spread-display.horseshoe_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(1) { grid-area: 4 / 1; }
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(2) { grid-area: 3 / 1; }
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(5) { grid-area: 2 / 3; }
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(6) { grid-area: 3 / 3; }
|
||
.spread-display.horseshoe_spread .card-slot:nth-child(7) { grid-area: 4 / 3; }
|
||
|
||
/* 7张牌 - 灵性指引 */
|
||
.spread-display.spiritual_guidance {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
/* 10张牌 - 凯尔特十字 */
|
||
.spread-display.celtic_cross {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 104rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 8rpx;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.spread-display.celtic_cross .card-slot { width: 104rpx; }
|
||
.spread-display.celtic_cross .flip-scene { width: 104rpx; height: 174rpx; }
|
||
|
||
.spread-display.celtic_cross .card-slot:nth-child(1) { grid-area: 2 / 3; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(2) { grid-area: 2 / 3; transform: rotate(90deg); z-index: 1; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(3) { grid-area: 3 / 3; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(4) { grid-area: 2 / 2; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(5) { grid-area: 1 / 3; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(6) { grid-area: 2 / 4; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(7) { grid-area: 1 / 5; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(8) { grid-area: 2 / 5; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(9) { grid-area: 3 / 5; }
|
||
.spread-display.celtic_cross .card-slot:nth-child(10) { grid-area: 4 / 5; }
|
||
|
||
/* 10张牌 - 生命之树 */
|
||
.spread-display.tree_of_life {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 104rpx);
|
||
grid-template-rows: repeat(5, auto);
|
||
gap: 10rpx;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.spread-display.tree_of_life .card-slot { width: 104rpx; }
|
||
.spread-display.tree_of_life .flip-scene { width: 104rpx; height: 174rpx; }
|
||
|
||
.spread-display.tree_of_life .card-slot:nth-child(1) { grid-area: 1 / 2; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(4) { grid-area: 3 / 1; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(5) { grid-area: 3 / 3; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(6) { grid-area: 3 / 2; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(7) { grid-area: 4 / 1; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(8) { grid-area: 4 / 3; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(9) { grid-area: 4 / 2; }
|
||
.spread-display.tree_of_life .card-slot:nth-child(10) { grid-area: 5 / 2; }
|
||
|
||
/* 新增爱情牌阵布局 */
|
||
|
||
/* 恋人金字塔 - 4张牌 */
|
||
.spread-display.lover_pyramid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.lover_pyramid .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.lover_pyramid .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.lover_pyramid .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.lover_pyramid .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
|
||
/* 新爱牌阵 - 3张牌对角线 */
|
||
.spread-display.new_love {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.new_love .card-slot:nth-child(1) { grid-area: 1 / 1; }
|
||
.spread-display.new_love .card-slot:nth-child(2) { grid-area: 2 / 2; }
|
||
.spread-display.new_love .card-slot:nth-child(3) { grid-area: 3 / 3; }
|
||
|
||
/* 人际关系牌阵 - 3张牌倒三角 */
|
||
.spread-display.relationship_basic {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
.spread-display.relationship_basic .card-slot:nth-child(1) { grid-area: 1 / 1; }
|
||
.spread-display.relationship_basic .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.relationship_basic .card-slot:nth-child(3) { grid-area: 2 / 1 / 2 / 3; justify-self: center; }
|
||
|
||
/* 爱情树牌阵 - 5张牌树形 */
|
||
.spread-display.love_tree_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.love_tree_spread .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.love_tree_spread .card-slot:nth-child(2) { grid-area: 1 / 1; }
|
||
.spread-display.love_tree_spread .card-slot:nth-child(3) { grid-area: 1 / 2; }
|
||
.spread-display.love_tree_spread .card-slot:nth-child(4) { grid-area: 1 / 3; }
|
||
.spread-display.love_tree_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
|
||
/* 爱情大十字 - 5张牌十字形 */
|
||
.spread-display.love_cross_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.love_cross_spread .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.love_cross_spread .card-slot:nth-child(2) { grid-area: 2 / 3; }
|
||
.spread-display.love_cross_spread .card-slot:nth-child(3) { grid-area: 1 / 2; }
|
||
.spread-display.love_cross_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
|
||
.spread-display.love_cross_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
|
||
/* 真命天子牌阵 - 5张牌菱形 */
|
||
.spread-display.mr_right {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.mr_right .card-slot:nth-child(1) { grid-area: 3 / 1; }
|
||
.spread-display.mr_right .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.mr_right .card-slot:nth-child(3) { grid-area: 1 / 2; }
|
||
.spread-display.mr_right .card-slot:nth-child(4) { grid-area: 2 / 3; }
|
||
.spread-display.mr_right .card-slot:nth-child(5) { grid-area: 3 / 3; }
|
||
|
||
/* 寻找对象牌阵 - 5张牌X形 */
|
||
.spread-display.search_lover {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.search_lover .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.search_lover .card-slot:nth-child(2) { grid-area: 1 / 1; }
|
||
.spread-display.search_lover .card-slot:nth-child(3) { grid-area: 1 / 3; }
|
||
.spread-display.search_lover .card-slot:nth-child(4) { grid-area: 3 / 1; }
|
||
.spread-display.search_lover .card-slot:nth-child(5) { grid-area: 3 / 3; }
|
||
|
||
/* 灵感对应牌阵 - 6张牌2x3网格 */
|
||
.spread-display.inspiration_correspondence {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
/* 吉普赛牌阵 - 5张牌十字形 */
|
||
.spread-display.gypsy_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.gypsy_spread .card-slot:nth-child(1) { grid-area: 1 / 2; }
|
||
.spread-display.gypsy_spread .card-slot:nth-child(2) { grid-area: 3 / 2; }
|
||
.spread-display.gypsy_spread .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.gypsy_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
|
||
.spread-display.gypsy_spread .card-slot:nth-child(5) { grid-area: 2 / 3; }
|
||
|
||
/* 维纳斯牌阵 - 8张牌复杂菱形 */
|
||
.spread-display.venus_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.venus_spread .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.venus_spread .card-slot:nth-child(2) { grid-area: 2 / 3; }
|
||
.spread-display.venus_spread .card-slot:nth-child(3) { grid-area: 1 / 2; }
|
||
.spread-display.venus_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
|
||
.spread-display.venus_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
.spread-display.venus_spread .card-slot:nth-child(6) { grid-area: 4 / 2; }
|
||
.spread-display.venus_spread .card-slot:nth-child(7) { grid-area: 3 / 1; }
|
||
.spread-display.venus_spread .card-slot:nth-child(8) { grid-area: 3 / 3; }
|
||
|
||
/* 恋人之树牌阵 - 7张牌树形对称 */
|
||
.spread-display.lover_tree {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.lover_tree .card-slot:nth-child(1) { grid-area: 1 / 1; }
|
||
.spread-display.lover_tree .card-slot:nth-child(2) { grid-area: 1 / 3; }
|
||
.spread-display.lover_tree .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.lover_tree .card-slot:nth-child(4) { grid-area: 2 / 3; }
|
||
.spread-display.lover_tree .card-slot:nth-child(5) { grid-area: 3 / 1; }
|
||
.spread-display.lover_tree .card-slot:nth-child(6) { grid-area: 3 / 3; }
|
||
.spread-display.lover_tree .card-slot:nth-child(7) { grid-area: 4 / 2; }
|
||
|
||
/* 婚姻牌阵 - 7张牌六芒星形 */
|
||
.spread-display.marriage_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.marriage_spread .card-slot:nth-child(1) { grid-area: 4 / 2; }
|
||
.spread-display.marriage_spread .card-slot:nth-child(2) { grid-area: 3 / 1; }
|
||
.spread-display.marriage_spread .card-slot:nth-child(3) { grid-area: 3 / 3; }
|
||
.spread-display.marriage_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
|
||
.spread-display.marriage_spread .card-slot:nth-child(5) { grid-area: 1 / 1; }
|
||
.spread-display.marriage_spread .card-slot:nth-child(6) { grid-area: 1 / 3; }
|
||
.spread-display.marriage_spread .card-slot:nth-child(7) { grid-area: 1 / 2; }
|
||
|
||
/* 新增事业牌阵布局 */
|
||
|
||
/* 金三角牌阵 - 3张牌金字塔形 */
|
||
.spread-display.golden_triangle {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
.spread-display.golden_triangle .card-slot:nth-child(1) { grid-area: 1 / 1 / 1 / 3; justify-self: center; }
|
||
.spread-display.golden_triangle .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.golden_triangle .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
|
||
/* 成功之星牌阵 - 3张牌三角形 */
|
||
.spread-display.success_star {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
.spread-display.success_star .card-slot:nth-child(1) { grid-area: 1 / 1; }
|
||
.spread-display.success_star .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.success_star .card-slot:nth-child(3) { grid-area: 1 / 2 / 3 / 3; align-self: center; }
|
||
|
||
/* 事业金字塔 - 4张牌金字塔形 */
|
||
.spread-display.career_pyramid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.career_pyramid .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.career_pyramid .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.career_pyramid .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.career_pyramid .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
|
||
/* 财富之树牌阵 - 5张牌十字树形 */
|
||
.spread-display.wealth_tree {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.wealth_tree .card-slot:nth-child(1) { grid-area: 3 / 2; }
|
||
.spread-display.wealth_tree .card-slot:nth-child(2) { grid-area: 2 / 2; }
|
||
.spread-display.wealth_tree .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.wealth_tree .card-slot:nth-child(4) { grid-area: 2 / 1; }
|
||
.spread-display.wealth_tree .card-slot:nth-child(5) { grid-area: 1 / 2; }
|
||
|
||
/* X时机牌阵 - 5张牌X形 */
|
||
.spread-display.x_opportunity {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.x_opportunity .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.x_opportunity .card-slot:nth-child(2) { grid-area: 1 / 1; }
|
||
.spread-display.x_opportunity .card-slot:nth-child(3) { grid-area: 1 / 3; }
|
||
.spread-display.x_opportunity .card-slot:nth-child(4) { grid-area: 3 / 1; }
|
||
.spread-display.x_opportunity .card-slot:nth-child(5) { grid-area: 3 / 3; }
|
||
|
||
/* 面试求职牌阵 - 5张牌十字形 */
|
||
.spread-display.job_interview {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.job_interview .card-slot:nth-child(1) { grid-area: 3 / 2; }
|
||
.spread-display.job_interview .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.job_interview .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.job_interview .card-slot:nth-child(4) { grid-area: 2 / 2; }
|
||
.spread-display.job_interview .card-slot:nth-child(5) { grid-area: 1 / 2; }
|
||
|
||
/* 工作问题牌阵 - 6张牌六边形 */
|
||
.spread-display.work_problems {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.work_problems .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.work_problems .card-slot:nth-child(2) { grid-area: 1 / 1; }
|
||
.spread-display.work_problems .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.work_problems .card-slot:nth-child(4) { grid-area: 2 / 3; }
|
||
.spread-display.work_problems .card-slot:nth-child(5) { grid-area: 1 / 3; }
|
||
.spread-display.work_problems .card-slot:nth-child(6) { grid-area: 3 / 2; }
|
||
|
||
/* 财富波浪牌阵 - 6张牌波浪形 */
|
||
.spread-display.turbulent_finances {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.turbulent_finances .card-slot:nth-child(1) { grid-area: 3 / 1; }
|
||
.spread-display.turbulent_finances .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.turbulent_finances .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
.spread-display.turbulent_finances .card-slot:nth-child(4) { grid-area: 2 / 3; }
|
||
.spread-display.turbulent_finances .card-slot:nth-child(5) { grid-area: 3 / 3; }
|
||
.spread-display.turbulent_finances .card-slot:nth-child(6) { grid-area: 1 / 2; }
|
||
|
||
/* 期望的工作 - 6张牌对称形 */
|
||
.spread-display.desired_job {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.desired_job .card-slot:nth-child(1) { grid-area: 1 / 2; }
|
||
.spread-display.desired_job .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.desired_job .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.desired_job .card-slot:nth-child(4) { grid-area: 3 / 1; }
|
||
.spread-display.desired_job .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
.spread-display.desired_job .card-slot:nth-child(6) { grid-area: 3 / 3; }
|
||
|
||
/* 新增决策牌阵布局 */
|
||
|
||
/* 二个选择牌阵 - 3张牌倒三角 */
|
||
.spread-display.two_options {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
.spread-display.two_options .card-slot:nth-child(1) { grid-area: 1 / 1; }
|
||
.spread-display.two_options .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.two_options .card-slot:nth-child(3) { grid-area: 2 / 1 / 2 / 3; justify-self: center; }
|
||
|
||
/* 三个选择牌阵 - 3张牌正三角 */
|
||
.spread-display.three_options {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
.spread-display.three_options .card-slot:nth-child(1) { grid-area: 1 / 1 / 1 / 3; justify-self: center; }
|
||
.spread-display.three_options .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.three_options .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
|
||
/* 每日树牌阵 - 4张牌十字形 */
|
||
.spread-display.daily_tree {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.daily_tree .card-slot:nth-child(1) { grid-area: 3 / 2; }
|
||
.spread-display.daily_tree .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.daily_tree .card-slot:nth-child(3) { grid-area: 1 / 2; }
|
||
.spread-display.daily_tree .card-slot:nth-child(4) { grid-area: 2 / 3; }
|
||
|
||
/* 二选一牌阵 - 5张牌菱形 */
|
||
.spread-display.weigh_two {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.weigh_two .card-slot:nth-child(1) { grid-area: 3 / 2; }
|
||
.spread-display.weigh_two .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.weigh_two .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.weigh_two .card-slot:nth-child(4) { grid-area: 1 / 1; }
|
||
.spread-display.weigh_two .card-slot:nth-child(5) { grid-area: 1 / 3; }
|
||
|
||
/* 比较选择牌阵 - 6张牌3+3排列 */
|
||
.spread-display.comparing_choices {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
/* 三选一牌阵 - 7张牌复杂对称形 */
|
||
.spread-display.weigh_three {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.weigh_three .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.weigh_three .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.weigh_three .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
.spread-display.weigh_three .card-slot:nth-child(4) { grid-area: 3 / 2; }
|
||
.spread-display.weigh_three .card-slot:nth-child(5) { grid-area: 1 / 3; }
|
||
.spread-display.weigh_three .card-slot:nth-child(6) { grid-area: 2 / 3; }
|
||
.spread-display.weigh_three .card-slot:nth-child(7) { grid-area: 3 / 3; }
|
||
|
||
/* 新增深度探索牌阵布局 */
|
||
|
||
/* 身心灵牌阵 - 4张牌倒T形 */
|
||
.spread-display.mind_body_spirit {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.mind_body_spirit .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.mind_body_spirit .card-slot:nth-child(2) { grid-area: 2 / 2; }
|
||
.spread-display.mind_body_spirit .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.mind_body_spirit .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
|
||
/* 四元素牌阵 - 4张牌2x2方形 */
|
||
.spread-display.four_elements {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 110rpx);
|
||
grid-template-rows: repeat(2, auto);
|
||
gap: 15rpx;
|
||
max-width: 245rpx;
|
||
}
|
||
|
||
.spread-display.four_elements .card-slot:nth-child(1) { grid-area: 1 / 1; }
|
||
.spread-display.four_elements .card-slot:nth-child(2) { grid-area: 2 / 1; }
|
||
.spread-display.four_elements .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
.spread-display.four_elements .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
|
||
/* 自我探索牌阵 - 4张牌箭头三角形 */
|
||
.spread-display.self_discovery {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.self_discovery .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.self_discovery .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.self_discovery .card-slot:nth-child(3) { grid-area: 3 / 1; }
|
||
.spread-display.self_discovery .card-slot:nth-child(4) { grid-area: 3 / 3; }
|
||
|
||
/* 认识你自己 - 5张牌十字形 */
|
||
.spread-display.know_yourself {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 15rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.know_yourself .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.know_yourself .card-slot:nth-child(2) { grid-area: 1 / 2; }
|
||
.spread-display.know_yourself .card-slot:nth-child(3) { grid-area: 2 / 3; }
|
||
.spread-display.know_yourself .card-slot:nth-child(4) { grid-area: 3 / 2; }
|
||
.spread-display.know_yourself .card-slot:nth-child(5) { grid-area: 2 / 1; }
|
||
|
||
/* 你的突破牌阵 - 5张牌五角形 */
|
||
.spread-display.your_breakthrough {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.your_breakthrough .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.your_breakthrough .card-slot:nth-child(2) { grid-area: 2 / 3; }
|
||
.spread-display.your_breakthrough .card-slot:nth-child(3) { grid-area: 1 / 2; }
|
||
.spread-display.your_breakthrough .card-slot:nth-child(4) { grid-area: 3 / 1; }
|
||
.spread-display.your_breakthrough .card-slot:nth-child(5) { grid-area: 3 / 3; }
|
||
|
||
/* 元素十字牌阵 - 6张牌十字形 */
|
||
.spread-display.elemental_cross {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 12rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.elemental_cross .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.elemental_cross .card-slot:nth-child(2) { grid-area: 2 / 3; }
|
||
.spread-display.elemental_cross .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.elemental_cross .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
.spread-display.elemental_cross .card-slot:nth-child(5) { grid-area: 3 / 2; }
|
||
.spread-display.elemental_cross .card-slot:nth-child(6) { grid-area: 4 / 2; }
|
||
|
||
/* 车轮牌阵 - 7张牌圆形轮状 */
|
||
.spread-display.wheel_spread {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 10rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.wheel_spread .card-slot:nth-child(1) { grid-area: 2 / 2; }
|
||
.spread-display.wheel_spread .card-slot:nth-child(2) { grid-area: 1 / 1; }
|
||
.spread-display.wheel_spread .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.wheel_spread .card-slot:nth-child(4) { grid-area: 3 / 1; }
|
||
.spread-display.wheel_spread .card-slot:nth-child(5) { grid-area: 1 / 3; }
|
||
.spread-display.wheel_spread .card-slot:nth-child(6) { grid-area: 2 / 3; }
|
||
.spread-display.wheel_spread .card-slot:nth-child(7) { grid-area: 3 / 3; }
|
||
|
||
/* 七行星牌阵 - 7张牌星形排列 */
|
||
.spread-display.seven_planets {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(4, auto);
|
||
gap: 10rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.seven_planets .card-slot:nth-child(1) { grid-area: 4 / 1; }
|
||
.spread-display.seven_planets .card-slot:nth-child(2) { grid-area: 3 / 1; }
|
||
.spread-display.seven_planets .card-slot:nth-child(3) { grid-area: 2 / 1; }
|
||
.spread-display.seven_planets .card-slot:nth-child(4) { grid-area: 1 / 2; }
|
||
.spread-display.seven_planets .card-slot:nth-child(5) { grid-area: 2 / 3; }
|
||
.spread-display.seven_planets .card-slot:nth-child(6) { grid-area: 3 / 3; }
|
||
.spread-display.seven_planets .card-slot:nth-child(7) { grid-area: 4 / 3; }
|
||
|
||
/* 梦镜牌阵 - 7张牌金字塔形 */
|
||
.spread-display.dream_mirror {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 110rpx);
|
||
grid-template-rows: repeat(3, auto);
|
||
gap: 10rpx;
|
||
max-width: 375rpx;
|
||
}
|
||
|
||
.spread-display.dream_mirror .card-slot:nth-child(1) { grid-area: 2 / 1; }
|
||
.spread-display.dream_mirror .card-slot:nth-child(2) { grid-area: 3 / 1; }
|
||
.spread-display.dream_mirror .card-slot:nth-child(3) { grid-area: 2 / 2; }
|
||
.spread-display.dream_mirror .card-slot:nth-child(4) { grid-area: 3 / 2; }
|
||
.spread-display.dream_mirror .card-slot:nth-child(5) { grid-area: 2 / 3; }
|
||
.spread-display.dream_mirror .card-slot:nth-child(6) { grid-area: 3 / 3; }
|
||
.spread-display.dream_mirror .card-slot:nth-child(7) { grid-area: 1 / 2; }
|
||
|
||
|
||
|
||
|
||
|
||
.card-slot {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 124rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.pos-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
min-height: 60rpx;
|
||
margin-bottom: 8rpx;
|
||
width: 140%; /* Allow spilling over slightly */
|
||
margin-left: -20%; /* Center the spill */
|
||
}
|
||
|
||
.pos-text-main {
|
||
font-size: 24rpx;
|
||
color: #8a8a9d;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
white-space: nowrap; /* Force single line if possible, or allow wrap controlling height */
|
||
}
|
||
|
||
.pos-seq {
|
||
font-size: 20rpx;
|
||
color: rgba(138, 138, 157, 0.6);
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.flip-scene {
|
||
width: 124rpx;
|
||
height: 208rpx;
|
||
perspective: 1000rpx;
|
||
}
|
||
|
||
.flip-card {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform 0.6s;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.flip-card.flipped {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.card-face {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
backface-visibility: hidden;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.face-back { background: #2a2a3e; }
|
||
.face-front { background: #1a1a2e; transform: rotateY(180deg); }
|
||
|
||
.card-image { width: 100%; height: 100%; }
|
||
.card-image.reversed { transform: rotate(180deg); }
|
||
|
||
.card-name-sm {
|
||
margin-top: 12rpx;
|
||
font-size: 22rpx;
|
||
color: #c9a0dc;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 5. 深度解读区域 */
|
||
.interpretation-area {
|
||
margin-top: 20rpx;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 24rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.theme-box {
|
||
text-align: center;
|
||
margin-bottom: 60rpx;
|
||
background: rgba(201, 160, 220, 0.08);
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.label {
|
||
display: block;
|
||
font-size: 20rpx;
|
||
color: #c9a0dc;
|
||
text-transform: uppercase;
|
||
letter-spacing: 4rpx;
|
||
margin-bottom: 16rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.theme-box .content {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30rpx;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.info-item .content {
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
color: #b0b0cf;
|
||
}
|
||
|
||
.pos-meanings {
|
||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||
padding-top: 40rpx;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.pos-meaning-item {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.pos-title {
|
||
font-size: 24rpx;
|
||
color: #c9a0dc;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pos-text {
|
||
font-size: 26rpx;
|
||
color: #b0b0cf;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.advice-box {
|
||
background: linear-gradient(135deg, rgba(201, 160, 220, 0.1), rgba(201, 160, 220, 0.03));
|
||
padding: 40rpx;
|
||
border-radius: 20rpx;
|
||
border-left: 4rpx solid #c9a0dc;
|
||
}
|
||
|
||
.advice-box .content {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.reset-btn {
|
||
margin-top: 80rpx;
|
||
background: transparent;
|
||
color: #c9a0dc;
|
||
border: 1px solid rgba(201, 160, 220, 0.4);
|
||
font-size: 24rpx;
|
||
border-radius: 40rpx;
|
||
width: 240rpx;
|
||
}
|
||
|
||
/* AI Loading */
|
||
.loading-ai {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
color: #c9a0dc;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.loading-dot {
|
||
font-size: 60rpx;
|
||
margin-bottom: 30rpx;
|
||
animation: flash 1.5s infinite;
|
||
}
|
||
|
||
@keyframes flash {
|
||
0%, 100% { opacity: 0.3; transform: scale(0.9); }
|
||
50% { opacity: 1; transform: scale(1.1); }
|
||
}
|
||
|
||
/* 整体趋势故事框 */
|
||
.story-box {
|
||
background: linear-gradient(135deg, rgba(201, 160, 220, 0.1), rgba(138, 138, 157, 0.05));
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 30rpx;
|
||
border-left: 4rpx solid #c9a0dc;
|
||
}
|
||
|
||
.story-box .label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #c9a0dc;
|
||
margin-bottom: 15rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.story-box .content {
|
||
font-size: 28rpx;
|
||
color: #e0e0e0;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* 提问区域 - 沉浸式仪式感版本 */
|
||
.asking-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 80rpx 40rpx 60rpx;
|
||
background: linear-gradient(180deg, #0f0f1b 0%, #1a1a2e 50%, #16213e 100%);
|
||
position: relative;
|
||
}
|
||
|
||
/* 顶部引导语 */
|
||
.asking-title {
|
||
font-size: 24rpx;
|
||
color: rgba(201, 160, 220, 0.6);
|
||
letter-spacing: 4rpx;
|
||
text-align: center;
|
||
margin-bottom: 60rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* 中央塔罗卡片式输入区 */
|
||
.input-card {
|
||
width: 100%;
|
||
background: rgba(201, 160, 220, 0.08);
|
||
backdrop-filter: blur(10px);
|
||
border: 2px solid rgba(201, 160, 220, 0.3);
|
||
border-radius: 40rpx;
|
||
padding: 40rpx;
|
||
margin-bottom: 50rpx;
|
||
position: relative;
|
||
box-shadow: 0 0 40rpx rgba(201, 160, 220, 0.2);
|
||
transition: all 0.4s ease;
|
||
}
|
||
|
||
.input-card:focus-within {
|
||
border-color: rgba(201, 160, 220, 0.6);
|
||
box-shadow: 0 0 60rpx rgba(201, 160, 220, 0.4);
|
||
background: rgba(201, 160, 220, 0.12);
|
||
}
|
||
|
||
.question-input {
|
||
width: 100%;
|
||
height: 280rpx;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 1.6;
|
||
background: transparent;
|
||
}
|
||
|
||
.placeholder-style {
|
||
color: rgba(255, 255, 255, 0.25);
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.char-count {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
right: 40rpx;
|
||
font-size: 20rpx;
|
||
color: rgba(138, 138, 157, 0.5);
|
||
}
|
||
|
||
/* 质量评分指示器 - 精简版 */
|
||
.quality-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 24rpx;
|
||
padding: 12rpx 20rpx;
|
||
background: rgba(139, 233, 253, 0.08);
|
||
border-radius: 20rpx;
|
||
border: 1px solid rgba(139, 233, 253, 0.2);
|
||
}
|
||
|
||
.quality-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.quality-text {
|
||
font-size: 24rpx;
|
||
color: #8be9fd;
|
||
font-weight: 400;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 温和分割线 */
|
||
.divider {
|
||
width: 200rpx;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(201, 160, 220, 0.3), transparent);
|
||
margin: 30rpx 0 40rpx;
|
||
}
|
||
|
||
/* 塔罗低语区域 */
|
||
.whispers-area {
|
||
width: 100%;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.whispers-title {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: rgba(201, 160, 220, 0.7);
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
letter-spacing: 3rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.whispers-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 塔罗低语卡片 */
|
||
.whisper-card {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(201, 160, 220, 0.3);
|
||
border-radius: 20rpx;
|
||
padding: 28rpx 32rpx;
|
||
margin-right: 20rpx;
|
||
min-width: 260rpx;
|
||
max-width: 340rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.whisper-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: radial-gradient(circle at center, rgba(201, 160, 220, 0.1), transparent);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.whisper-card:active {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.whisper-card.selected {
|
||
background: rgba(201, 160, 220, 0.15);
|
||
border-color: rgba(201, 160, 220, 0.6);
|
||
box-shadow: 0 0 30rpx rgba(201, 160, 220, 0.4);
|
||
}
|
||
|
||
.whisper-card.selected::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.whisper-text {
|
||
font-size: 28rpx;
|
||
color: #e0e0e0;
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
word-wrap: break-word;
|
||
white-space: normal;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.whisper-card.selected .whisper-text {
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 开启塔罗指引按钮 */
|
||
.start-btn {
|
||
background: linear-gradient(135deg, #c9a0dc 0%, #8b7ba8 100%);
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
padding: 28rpx 120rpx;
|
||
border-radius: 50rpx;
|
||
box-shadow: 0 8rpx 30rpx rgba(201, 160, 220, 0.4);
|
||
transition: all 0.2s ease;
|
||
border: none;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.start-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.start-btn:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 4rpx 20rpx rgba(201, 160, 220, 0.3);
|
||
}
|
||
|
||
/* =========================================
|
||
流式 AI 解读输出样式
|
||
========================================= */
|
||
.stream-result {
|
||
padding: 30rpx 20rpx;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.stream-text {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #e8e0f0;
|
||
line-height: 1.8;
|
||
white-space: pre-wrap; /* 保留换行 */
|
||
word-break: break-all;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10rpx); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* 翻牌提示 */
|
||
.flip-hint {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
margin-top: 32rpx;
|
||
animation: hintPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.flip-hint-text {
|
||
font-size: 26rpx;
|
||
color: #c9a0dc;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.flip-hint-icon {
|
||
font-size: 20rpx;
|
||
color: #c9a0dc;
|
||
}
|
||
|
||
@keyframes hintPulse {
|
||
0%, 100% { opacity: 0.5; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
/* AI 警示语精简版 */
|
||
.ai-warning {
|
||
margin-top: 40rpx;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: rgba(201, 160, 220, 0.4);
|
||
letter-spacing: 1rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding: 0 40rpx;
|
||
}
|
||
/* 5. 分享引导模块 */
|
||
.share-guidance {
|
||
width: 100%;
|
||
max-width: 600rpx;
|
||
background: linear-gradient(135deg, rgba(201, 160, 220, 0.1) 0%, rgba(201, 160, 220, 0.05) 100%);
|
||
border: 1px solid rgba(201, 160, 220, 0.3);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin: 40rpx 0;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.guidance-text {
|
||
font-size: 28rpx;
|
||
color: #c9a0dc;
|
||
margin-bottom: 24rpx;
|
||
font-style: italic;
|
||
letter-spacing: 2rpx;
|
||
text-shadow: 0 0 10rpx rgba(201, 160, 220, 0.3);
|
||
}
|
||
|
||
.share-btn {
|
||
background: linear-gradient(90deg, #ffd700, #daa520);
|
||
color: #1a1a2e;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
border-radius: 40rpx;
|
||
padding: 0 40rpx;
|
||
line-height: 80rpx;
|
||
border: none;
|
||
box-shadow: 0 4rpx 16rpx rgba(218, 165, 32, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.share-btn:active {
|
||
transform: scale(0.96);
|
||
box-shadow: 0 2rpx 8rpx rgba(218, 165, 32, 0.3);
|
||
}
|
||
/ * @ i m p o r t ' . . / . . / s t y l e s / d i s c l a i m e r . w x s s ' ; * /
|
||
|
||
|