juzi/taobao/pages/history/history.acss

/* ═════ 历史报告 —— 逐条对照 H5:
   style.css  .card(L355-358) .toast(L588-599) .policy-header .history-clear
   ui-20261009.css L8(#s-history 字体栈) L33-44(.history-content/.history-count/.identity-note/
                .history-item/.history-detail/.history-retry) L99-106(.font-credit/.account-status)
   ui-20261009.css L47(.report-title 全局:font-size 23px / padding 0 / margin-bottom)
   ui-20261009.css L92(.report-title font-weight 600)
   换算:calc(N * var(--u)) → 2N rpx;字号/行高/圆角固定 px 原样保留。 ═════ */

page { background: #EFEFEF; }

/* H5 .screen#s-history */
.history {
  position: relative;
  min-height: 100vh;
  background: #efefef;
}

/* H5 #s-history 的 background-image center/cover + background-attachment:fixed
   → 等价实现:fixed 定位、铺满视口的 image */
.history-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* H5 .history-content(ui-20261009 L34) */
.history-content {
  position: relative;
  z-index: 1;
  padding: 56rpx 34rpx 72rpx;          /* calc(28*u) calc(17*u) calc(36*u) */
  padding-top: max(56rpx, env(safe-area-inset-top));
  box-sizing: border-box;
}

/* H5 .report-title(style.css L350-354 + ui-20261009 L47/L92) */
.report-title {
  font-size: 23px;
  font-weight: 600;
  color: #282828;
  text-align: center;
  letter-spacing: 1rpx;                /* calc(.5 * var(--u)) */
  padding: 0;
  margin-bottom: 46rpx;                /* calc(23 * var(--u)) */
}

/* H5 .card(style.css L355-358 + ui-20261009 L48:圆角 calc(7*u)) */
.history .card {
  background: #fff;
  border-radius: 14rpx;
  margin-bottom: 24rpx;                /* calc(12 * var(--u)) */
  box-sizing: border-box;
}

/* H5 .account-status / .account-status-history(ui-20261009 L100/L106) */
.account-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  box-sizing: border-box;
}
.account-status-history {
  width: 100%;
  background: #fff;
  margin-bottom: 14px;
  text-align: left;
}
.account-label { display: flex; align-items: center; }
.account-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #b7bac0;
  flex-shrink: 0;
}
.account-status-on .account-dot { background: #34ca7b; }
.account-text { white-space: nowrap; }
/* H5 .account-logout(ui-20261012 L4) */
.account-logout {
  font-size: 11px;
  opacity: .8;
  white-space: nowrap;
}

/* H5 .history-count(ui-20261009 L35-38)
   H5 里 .history-count 没设 font-size,行盒取浏览器默认 16px;app.acss 把 page 设成
   14px,所以这里显式补回 16px,内联的「测试数量」才会落在同一基线上。 */
.history .history-count {
  text-align: center;
  padding: 32rpx 24rpx 42rpx;          /* calc(16*u) calc(12*u) calc(21*u) */
  font-size: 16px;
}
/* H5 .history-count > span 是内联元素(内含 display:block 的 ::after 分隔线) */
.history-count-label {
  display: inline;
  color: #888;
  font-size: 12px;
}
/* H5 .history-count > span::after */
.history-count-label::after {
  content: '';
  display: block;
  width: 90rpx;                        /* calc(45 * var(--u)) */
  margin: 24rpx auto;                  /* calc(12 * var(--u)) auto */
  border-bottom: 1px solid #eee;
}
.history-count-value { font-size: 12px; }

/* H5 .identity-note(ui-20261009 L39) */
.identity-note {
  color: #888;
  font-size: 10px;
  line-height: 1.6;
  margin: 24rpx 8rpx 40rpx;            /* calc(12*u) calc(4*u) calc(20*u) */
}

/* H5 .history-empty(style.css L637) */
.history-empty {
  text-align: center;
  color: #868686;
  font-size: 12.5px;
  padding: 60px 0;
}
/* H5 的加载中/失败文案是直接写进 #history-list 的纯文本(继承 16px、左对齐、无内边距) */
.history-list-note {
  font-size: 16px;
  color: #282828;
}

/* H5 .history-item(ui-20261009 L40-42) */
.history .history-item {
  padding: 26rpx 38rpx 20rpx;          /* calc(13*u) calc(19*u) calc(10*u) */
  overflow: hidden;
  margin-top: 12rpx;                   /* calc(6 * var(--u)) */
}
.history-item-line {
  font-size: 12px;
  padding-bottom: 14rpx;               /* calc(7 * var(--u)) */
  border-bottom: 1px solid #eee;
}
.history-item-label {
  color: #888;
  margin-right: 16rpx;                 /* calc(8 * var(--u)) */
}

/* H5 .history-detail(ui-20261009 L43) */
.history .history-detail {
  display: block;
  margin: 14rpx 0 0 auto;              /* calc(7 * var(--u)) 0 0 auto */
  background: #F5F078;
  border-radius: 10rpx;                /* calc(5 * var(--u)) */
  width: 160rpx;                       /* calc(80 * var(--u)) */
  height: 46rpx;                       /* 覆盖小程序 button 默认高度，与 H5 23 设计像素一致 */
  min-height: 46rpx;                   /* calc(23 * var(--u)) */
  font-size: 12px;
  color: #282828;
  line-height: 46rpx;
  text-align: center;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
.history .history-detail::after { border: none; }

/* H5 .history-retry(ui-20261009 L44) */
.history .history-retry {
  display: block;
  width: fit-content;      /* H5 是 block + width:auto 的按钮 → 收缩到文字宽再 margin:auto 居中 */
  margin: 20px auto;
  text-align: center;
  color: #707070;
  text-decoration: underline;
  font-size: 12px;
  background: none;
  border: none;
  padding: 0;
  line-height: normal;
  box-sizing: border-box;
}
.history .history-retry::after { border: none; }

/* ─── H5 .toast ─── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%) translateY(8px);
  max-width: 86%;
  background: rgba(20, 20, 20, .85);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 9px 18px;
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 99;
  box-sizing: border-box;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.session-guard { position: relative; z-index: 10; padding: 120rpx 40rpx; text-align: center; font-size: 13px; line-height: 1.8; color: #707070; }
.session-guard .btn-primary { margin: 32rpx auto 0; }