feat(协议): 新增用户协议与隐私政策页面及入口

2026-09-16 02:45:38 +08:00
parent fb92782c92
commit 98c45f2c1e
11 changed files with 827 additions and 21 deletions
@@ -0,0 +1,153 @@
+/** 协议页：杂志内页排版 —— 衬线大标题 + 条目编号 + 竖排编号长文 **/
+.page-flex {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.scroll-body {
+  flex: 1;
+  height: 0;
+}
+
+.ag-title {
+  margin-top: 18rpx;
+}
+
+.ag-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 24rpx;
+  font-size: 22rpx;
+  color: var(--ink-3);
+  letter-spacing: .02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.ag-meta-sep {
+  color: var(--ink-4);
+}
+
+/* 协议互切：下划线式极简分段 */
+.ag-tabs {
+  display: flex;
+  gap: 40rpx;
+  padding: 48rpx var(--pad) 0;
+}
+
+.ag-tab {
+  position: relative;
+  padding-bottom: 16rpx;
+  font-size: 28rpx;
+  color: var(--ink-3);
+  transition: color .2s var(--ease);
+}
+
+.ag-tab.is-on {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.ag-tab.is-on::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3rpx;
+  border-radius: 2rpx;
+  background: var(--ink);
+}
+
+.ag-body {
+  padding: 44rpx var(--pad) 0;
+}
+
+/* 导语 */
+.ag-lead {
+  padding-bottom: 12rpx;
+  border-bottom: 1rpx solid var(--hairline);
+}
+
+/* 正文段落 */
+.ag-p {
+  display: block;
+  font-size: 28rpx;
+  line-height: 1.9;
+  color: var(--ink-2);
+  margin-bottom: 20rpx;
+}
+
+/* 条目 */
+.ag-sec {
+  padding-top: 48rpx;
+}
+
+.ag-hd {
+  display: flex;
+  align-items: baseline;
+  gap: 18rpx;
+  margin-bottom: 24rpx;
+}
+
+.ag-no {
+  font-family: var(--serif);
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--ink-4);
+  min-width: 34rpx;
+}
+
+.ag-hd-t {
+  flex: 1;
+  font-family: var(--serif);
+  font-size: 36rpx;
+  font-weight: 500;
+  letter-spacing: -.005em;
+  line-height: 1.35;
+  color: var(--ink);
+}
+
+/* 条目内小标题（如「1. 微信授权登录信息」） */
+.ag-sub {
+  font-size: 29rpx;
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--ink);
+  margin: 28rpx 0 14rpx;
+}
+
+.ag-sec .ag-sub:first-child {
+  margin-top: 0;
+}
+
+/* 列表项：发丝级圆点 + 悬挂缩进 */
+.ag-li {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+  margin-bottom: 18rpx;
+}
+
+.ag-bullet {
+  width: 8rpx;
+  height: 8rpx;
+  border-radius: 50%;
+  background: var(--ink-4);
+  margin-top: 22rpx;
+  flex-shrink: 0;
+}
+
+.ag-li-t {
+  flex: 1;
+  font-size: 28rpx;
+  line-height: 1.9;
+  color: var(--ink-2);
+}
+
+.ag-foot {
+  padding-top: 64rpx;
+}