genealogy-min-program/pages/lineage/lineage.wxss

/* ════════════════════════════════
   全局
════════════════════════════════ */
.page {
  min-height: 100vh;
  background: #0d1b2a;
  padding-bottom: 40rpx;
}

/* ════════════════════════════════
   搜索栏
════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx 16rpx;
  gap: 16rpx;
  background: #0d1b2a;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #1a2e42;
  border-radius: 48rpx;
  padding: 0 24rpx;
  height: 76rpx;
  border: 1rpx solid #2d4a63;
}

.search-icon {
  font-size: 30rpx;
  margin-right: 12rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #e8f0fe;
}

.search-input::placeholder {
  color: #4a6580;
}

.clear-btn {
  font-size: 26rpx;
  color: #4a6580;
  padding: 8rpx;
}

.search-btn {
  background: #c8960c;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 48rpx;
  padding: 0 32rpx;
  height: 76rpx;
  line-height: 76rpx;
  border: none;
  flex-shrink: 0;
}

.search-btn::after {
  border: none;
}

/* ════════════════════════════════
   搜索下拉
════════════════════════════════ */
.search-dropdown {
  margin: 0 24rpx 8rpx;
  background: #1a2e42;
  border-radius: 16rpx;
  border: 1rpx solid #2d4a63;
  overflow: hidden;
  z-index: 99;
  position: relative;
}

.search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #243a50;
}

.search-item:last-child {
  border-bottom: none;
}

.si-name {
  font-size: 30rpx;
  color: #e8f0fe;
  font-weight: 500;
}

.si-gen {
  font-size: 24rpx;
  color: #6b8fa8;
  flex-shrink: 0;
  margin-left: 16rpx;
}

/* ════════════════════════════════
   空状态 / 加载
════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 48rpx;
  gap: 20rpx;
}

.empty-icon {
  font-size: 100rpx;
}

.empty-title {
  font-size: 36rpx;
  color: #e8f0fe;
  font-weight: bold;
}

.empty-desc {
  font-size: 26rpx;
  color: #4a6580;
  text-align: center;
  line-height: 1.6;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx;
  gap: 20rpx;
  color: #6b8fa8;
  font-size: 28rpx;
}

.debug-bar {
  background: #1a3a1a;
  padding: 12rpx 24rpx;
  margin: 0 24rpx 8rpx;
  border-radius: 8rpx;
  border: 1rpx solid #2a5a2a;
}

.debug-text {
  font-size: 22rpx;
  color: #6abf6a;
}

/* ════════════════════════════════
   世系树主体
════════════════════════════════ */
.tree-scroll {
  /* 搜索栏约140rpx + 调试栏约50rpx + 自定义tabBar约130rpx */
  height: calc(100vh - 320rpx);
}

.tree-body {
  padding: 16rpx 0 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 每代行 ── */
.gen-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16rpx;
  box-sizing: border-box;
}

.gen-label {
  padding: 4rpx 0 12rpx 0;
  text-align: center;
}

.gen-label-text {
  font-size: 22rpx;
  color: #4a6580;
  letter-spacing: 1rpx;
}

.gen-label-center .gen-label-text {
  color: #c8960c;
  font-weight: bold;
  font-size: 24rpx;
}

.children-label {
  padding: 4rpx 0 12rpx 0;
  width: 100%;
  text-align: center;
}

.children-label-text {
  font-size: 22rpx;
  color: #4a6580;
  letter-spacing: 1rpx;
}

/* ── 卡片行（主节点 + 兄弟） ── */
.row-cards {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  overflow-x: auto;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.center-row {
  align-items: stretch;
}

/* ── 通用卡片 ── */
.card {
  border-radius: 16rpx;
  padding: 16rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  flex-shrink: 0;
  width: 200rpx;
  min-width: 200rpx;
  max-width: 200rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.card-name-wrap {
  display: flex;
  align-items: baseline;
  gap: 6rpx;
  flex-wrap: nowrap;
  overflow: hidden;
}

.card-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.card-name-sm {
  font-size: 28rpx;
}

.card-simplified {
  font-size: 20rpx;
  color: rgba(255,255,255,0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.card-gen {
  font-size: 20rpx;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 祖先卡 ── */
.ancestor-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #2a5298 100%);
  box-shadow: 0 4rpx 16rpx rgba(42, 82, 152, 0.4);
  border: 1rpx solid #2d5ea8;
}

/* ── 祖先行横向滚动（主卡 + 兄弟同行，scroll-into-view 使祖先居中） ── */
.gen-peer-scroll {
  width: 100%;
  white-space: nowrap;
}

.gen-peer-list {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  /* 两端留出约半屏宽度，让 scroll-into-view 能把目标卡片滚到屏幕中央 */
  padding: 0 275rpx;
}

/* ── 兄弟卡（旧 sibling-scroll 保留兼容） ── */
.sibling-scroll {
  flex: 1;
  white-space: nowrap;
}

.sibling-list {
  display: flex;
  gap: 12rpx;
  padding-right: 8rpx;
}

/* ── 统一排行徽标 ── */
.order-badge {
  background: rgba(255,255,255,0.18);
  border-radius: 8rpx;
  padding: 3rpx 12rpx;
  align-self: flex-start;
  margin-bottom: 6rpx;
}

.order-badge-text {
  font-size: 20rpx;
  color: rgba(255,255,255,0.92);
  font-weight: bold;
}

/* ── 查询人物同辈横排（含center居中） ── */
.peer-scroll {
  width: 100%;
  white-space: nowrap;
}

.peer-list {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 0 275rpx;
}

.peer-order-badge {
  background: rgba(255,255,255,0.15);
  border-radius: 8rpx;
  padding: 4rpx 12rpx;
  align-self: flex-start;
  margin-bottom: 6rpx;
}

.order-badge-center {
  background: rgba(255,255,255,0.25);
}

.peer-order-text {
  font-size: 20rpx;
  color: rgba(255,255,255,0.9);
  font-weight: bold;
}

.center-badge {
  font-size: 20rpx;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.2);
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  margin-top: 8rpx;
  align-self: center;
}

.sibling-card {
  background: #1a3a5c;
  border: 1rpx solid #2d5280;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}

.sibling-card .card-name {
  color: #a8c8f0;
}

.sibling-card .card-gen {
  color: #4a6a8a;
}

/* ── 查询人物卡（比普通卡略宽突出显示） ── */
.center-card {
  background: linear-gradient(135deg, #b07d10 0%, #d4a017 100%);
  width: 220rpx;
  min-width: 220rpx;
  max-width: 220rpx;
  box-shadow: 0 4rpx 24rpx rgba(212, 160, 23, 0.5);
  border: 2rpx solid #e0b030;
}

.center-name {
  font-size: 32rpx;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.center-simplified {
  font-size: 20rpx;
  color: rgba(255,255,255,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.center-gen {
  font-size: 20rpx;
  color: rgba(255,255,255,0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 子女区域 ── */
.children-section {
  width: 100%;
  padding: 0 16rpx;
  box-sizing: border-box;
}

.children-scroll {
  white-space: nowrap;
  width: 100%;
}

.children-list {
  display: flex;
  gap: 16rpx;
  padding: 0 275rpx 8rpx;
}

.child-card {
  background: linear-gradient(135deg, #1a3a2a 0%, #1e5c35 100%);
  border: 1rpx solid #2a7a45;
  box-shadow: 0 2rpx 10rpx rgba(30, 92, 53, 0.4);
}

.child-order-badge {
  background: rgba(255,255,255,0.15);
  border-radius: 8rpx;
  padding: 4rpx 12rpx;
  align-self: flex-start;
  margin-bottom: 4rpx;
}

.child-order-text {
  font-size: 20rpx;
  color: rgba(255,255,255,0.9);
  font-weight: bold;
}

.has-children-dot {
  font-size: 18rpx;
  color: rgba(255,255,255,0.4);
  align-self: center;
  margin-top: 4rpx;
}

/* ── 连接线（始终对齐屏幕中心） ── */
.connector {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 48rpx;
  align-items: center;
}

.connector-line {
  width: 3rpx;
  height: 48rpx;
  background: linear-gradient(to bottom, #2a5298, #4a6580);
  border-radius: 2rpx;
}

/* ════════════════════════════════
   详情弹窗
════════════════════════════════ */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-end;
  z-index: 200;
}

.modal-box {
  width: 100%;
  background: #1a2e42;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx 32rpx 48rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.modal-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #e8f0fe;
}

.modal-close {
  font-size: 28rpx;
  color: #4a6580;
  padding: 8rpx 16rpx;
}

.modal-body {
  margin-bottom: 32rpx;
}

.detail-row {
  display: flex;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #243a50;
}

.detail-row:last-child {
  border-bottom: none;
}

.dl {
  font-size: 26rpx;
  color: #4a6580;
  width: 140rpx;
  flex-shrink: 0;
}

.dv {
  font-size: 26rpx;
  color: #c8daf0;
  flex: 1;
}

.modal-footer {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
}

.modal-btn::after {
  border: none;
}

.btn-switch {
  background: linear-gradient(135deg, #b07d10, #d4a017);
  color: #fff;
}

.btn-close {
  background: #243a50;
  color: #a8c8f0;
}