huaanglimeng/pages/index/index.wxss

/* 让整个页面背景变黑，制造神秘感 */
page {
  background-color: #1a1a2e; /*以此颜色为底 */
  min-height: 100%; /* 使用 min-height 允许滚动 */
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 去掉 justify-content: center，防止内容过多时顶部被裁切 */
  min-height: 100%;
  padding: 15px; /* 减小内边距 */
  padding-bottom: 40px; /* 底部预留空间，防止按钮太靠底 */
  box-sizing: border-box;
}

/* 标题区域 */
.title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px; /* 减小间距 */
  margin-top: 10px;
}

.app-title {
  font-size: 24px; /* 减小字号 */
  color: #e94560; 
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 5px; 
}

.app-subtitle {
  display: block;
  font-size: 16px; /* 减小字号 */
  color: #fff; 
  margin-bottom: 5px;
  font-weight: bold;
}

/* 引导区域 */
.intro {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deck-container {
  position: relative;
  width: 160px;
  margin-bottom: 30px;
}

.card-deck {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.tap-hint {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  color: #e94560;
  font-size: 12px;
  opacity: 0.8;
  letter-spacing: 1px;
}

.guide-text {
  margin-top: 20px;
  height: 40px;
}

.instruction {
  display: block;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 300;
}

/* 卡牌展示出的框框 */
.card-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #16213e;
  padding: 15px; /* 减小内边距 */
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(233, 69, 96, 0.3); 
  margin-bottom: 20px; /* 减小间距 */
}

/* --- 翻牌动画核心样式 --- */

/* 1. 场景容器：提供 3D 景深 */
.flip-scene {
  width: 200px; 
  height: 333px; 
  perspective: 1000px;
  margin-bottom: 20px;
  position: relative;
}

/* 2. 翻转实体：包含正反两面，执行旋转 */
.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.5s ease-in-out; 
  transform-style: preserve-3d;
}

/* 翻转状态 */
.flip-card.flipped {
  transform: rotateY(180deg);
}

/* 3. 正反面公共样式 */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden; 
}

/* 背面 */
.face-back {
  background-color: #16213e;
  transform: rotateY(0deg);
  z-index: 2;
}

/* 正面 */
.face-front {
  background-color: #16213e;
  transform: rotateY(180deg);
}

/* 图片填满容器 */
.card-image {
  width: 100%;
  height: 100%; 
  display: block; 
}

/* 提示点击的文字 */
.hint-text {
  position: absolute;
  bottom: 20px;
  color: #fff;
  font-size: 14px;
  background-color: rgba(0,0,0,0.5);
  padding: 5px 10px;
  border-radius: 15px;
  z-index: 3;
}

/* --- 文字信息层级样式 --- */
.card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}

.info-header {
  margin-bottom: 15px;
  display: flex;
  align-items: baseline;
}

.card-name {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.card-pos {
  color: #e94560;
  font-size: 14px;
  margin-left: 8px;
}

.keyword-area {
  margin-bottom: 20px;
}

.keyword-tag {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid rgba(233, 69, 96, 0.3);
}

.core-meaning {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
  line-height: 1.6;
  padding: 0 20px;
}

.detail-explanation {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 100%;
}

.explanation-text {
  color: #aaa;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}


/* 按钮美化 */
.draw-btn {
  margin-top: 40px;
  width: 80% !important;
  background-color: #e94560 !important;
  border-radius: 25px !important;
  font-weight: bold !important;
  box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
  font-size: 16px !important;
  padding: 8px 0 !important;
}



/* 逆位时的图片样式 */
.card-image.reversed {
  transform: rotate(180deg);
  transition: transform 0.5s; 
}

/* AI 加载状态 */
.loading-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  font-size: 12px;
  padding: 10px 0;
}

@keyframes flash {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.loading-dot {
  font-size: 24px;
  color: #e94560;
  margin-bottom: 5px;
  animation: flash 1.5s infinite;
}