166 lines
3.5 KiB
Plaintext
166 lines
3.5 KiB
Plaintext
/* components/spread-container/spread-container.wxss */
|
||
|
||
/* 通用容器 */
|
||
.spread-wrapper {
|
||
width: 100%;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* =========================================
|
||
卡牌单元 (Card Item)
|
||
========================================= */
|
||
.card-slot {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
/* 默认尺寸，grid 布局使用 */
|
||
width: 124rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
/* 翻牌场景 */
|
||
.flip-scene {
|
||
width: 100%;
|
||
/* 保持 160:260 比例 -> 1:1.625 */
|
||
/* 或 124:200 -> 1:1.61 */
|
||
aspect-ratio: 2/3;
|
||
perspective: 1000rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.flip-card {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.6s;
|
||
}
|
||
|
||
.flip-card.flipped {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.card-face {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
backface-visibility: hidden;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.face-front {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.card-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.card-image.reversed {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 文字信息 */
|
||
.pos-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.pos-name {
|
||
font-size: 22rpx;
|
||
color: #ddd;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
|
||
.pos-seq {
|
||
font-size: 18rpx;
|
||
color: #aaa;
|
||
}
|
||
|
||
.card-name-sm {
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
margin-top: 8rpx;
|
||
text-align: center;
|
||
max-width: 120%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* =========================================
|
||
布局 1: Grid (网格)
|
||
========================================= */
|
||
.layout-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 30rpx;
|
||
padding: 40rpx 0;
|
||
}
|
||
|
||
/* =========================================
|
||
布局系统 2: Celtic Cross (从零重构 - 绝对锁定)
|
||
========================================= */
|
||
|
||
/* 1. 全屏垂直水平居中包装器 (仅 celtic 模式) */
|
||
.spread-wrapper.celtic-mode {
|
||
width: 100%;
|
||
/* 高度设为 100vh 可能会导致不可滚动，这里视情况调整 */
|
||
/* 用户虽然要求 100vh，但在小程序组件中可能会溢出，建议 min-height */
|
||
min-height: 80vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 2. 核心容器 (600x900rpx) */
|
||
.spread-container {
|
||
position: relative;
|
||
width: 600rpx;
|
||
height: 900rpx;
|
||
/* 调试辅助: border: 1px dashed rgba(255,255,255,0.2); */
|
||
}
|
||
|
||
/* 3. 卡牌通用样式 (绝对定位 + 居中) */
|
||
.stage-card {
|
||
position: absolute;
|
||
transform: translate(-50%, -50%); /* 核心锚点居中 */
|
||
z-index: 10;
|
||
width: 140rpx; /* 适配 600rpx 容器的推荐尺寸 */
|
||
display: flex;
|
||
flex-direction: column; /* 确保文字在下方 */
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 复写卡牌槽样式以匹配新容器 */
|
||
.spread-container .card-slot {
|
||
width: 100%; /* 跟随 stage-card */
|
||
margin: 0;
|
||
}
|
||
|
||
.spread-container .flip-scene {
|
||
width: 100%;
|
||
height: 210rpx; /* 强制高度 (140 * 1.5) */
|
||
background: rgba(255, 255, 255, 0.1); /* 调试背景，确保占位可见 */
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.spread-container .card-face {
|
||
background: #1a1a2e; /* 默认深色背景，防图挂 */
|
||
border: 1px solid rgba(255,255,255,0.2); /* 边框 */
|
||
}
|