Neo-ZQYY/apps/demo-miniprogram/miniprogram/pages/no-permission/no-permission.wxss

/* pages/no-permission/no-permission.wxss — 原 H5 值 × 0.875 统一缩放 */

.page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
  position: relative;
}

.bg-pattern {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 58rpx, rgba(227,77,89,0.03) 58rpx, rgba(227,77,89,0.03) 62rpx, transparent 62rpx, transparent 120rpx),
    repeating-linear-gradient(90deg, transparent, transparent 58rpx, rgba(227,77,89,0.03) 58rpx, rgba(227,77,89,0.03) 62rpx, transparent 62rpx, transparent 120rpx);
  z-index: 0;
  pointer-events: none;
}

/* 512 × 0.875 = 448 */
.top-gradient {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 448rpx;
  background: linear-gradient(to bottom, rgba(227,77,89,0.10), transparent);
  z-index: 0;
}

/* padding 64 × 0.875 = 56 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 56rpx;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* mb 64 × 0.875 = 56 */
.icon-area {
  position: relative;
  margin-bottom: 56rpx;
}

/* 320 × 0.875 = 280, offset -48 × 0.875 = -42 */
.icon-glow {
  position: absolute;
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  top: -42rpx;
  left: -42rpx;
  background: radial-gradient(circle, rgba(227,77,89,0.18) 0%, rgba(227,77,89,0.06) 50%, transparent 75%);
}

/* 224 × 0.875 = 196, radius 48 × 0.875 = 42 */
.icon-box {
  position: relative;
  width: 196rpx;
  height: 196rpx;
  border-radius: 42rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fb7185, #ef4444);
  box-shadow: 0 14rpx 42rpx rgba(227,77,89,0.3);
}

/* 112 × 0.875 = 98 */
.icon-main-img {
  width: 98rpx;
  height: 98rpx;
}

.icon-dot { position: absolute; border-radius: 50%; }

/* 32 × 0.875 = 28, offset -16 × 0.875 = -14 */
.dot-1 {
  width: 28rpx; height: 28rpx;
  top: -14rpx; right: -14rpx;
  background: #e34d59; opacity: 0.6;
}

/* 24 × 0.875 = 21 → 22, offset -8 × 0.875 = -7 → -8, -24 × 0.875 = -21 → -22 */
.dot-2 {
  width: 22rpx; height: 22rpx;
  bottom: -8rpx; left: -22rpx;
  background: #fda4af; opacity: 0.6;
}

/* mb 64 × 0.875 = 56 */
.title-area {
  text-align: center;
  margin-bottom: 56rpx;
}

/* 48 × 0.875 = 42, mb 24 × 0.875 = 21 → 22 */
.main-title {
  display: block;
  font-size: 42rpx;
  font-weight: 700;
  color: #4b4b4b;
  margin-bottom: 22rpx;
}

/* 28 × 0.875 = 24.5 → 24, max-w 640 × 0.875 = 560 */
.sub-title {
  display: block;
  font-size: 24rpx;
  color: #8b8b8b;
  line-height: 1.625;
  max-width: 490rpx;
  margin: 0 auto;
}

/* max-w 550 × 0.875 ≈ 482, radius 32 × 0.875 = 28, padding 40 × 0.875 = 35 → 36, mb 48 × 0.875 = 42 */
.reason-card {
  width: 100%;
  max-width: 482rpx;
  background: #ffffff;
  border-radius: 28rpx;
  padding: 36rpx;
  margin-bottom: 42rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.06);
}

/* gap/mb 32 × 0.875 = 28 */
.reason-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 28rpx;
  margin-bottom: 28rpx;
}

/* 80 × 0.875 = 70, radius 24 × 0.875 = 21 → 22 */
.reason-icon-box {
  width: 70rpx;
  height: 70rpx;
  min-width: 70rpx;
  background: rgba(227,77,89,0.1);
  border-radius: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reason-header-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 28 × 0.875 = 24, mb 8 × 0.875 = 7 → 8 */
.reason-title {
  font-size: 24rpx;
  font-weight: 500;
  color: #242424;
  margin-bottom: 8rpx;
}

/* gap 8 × 0.875 = 7 → 8 */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

/* 24 × 0.875 = 21 → 22 */
.reason-item {
  font-size: 22rpx;
  color: #a6a6a6;
  line-height: 1.5;
}

/* mt/pt 32 × 0.875 = 28 */
.reason-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28rpx;
  padding-top: 28rpx;
  border-top: 2rpx solid #f3f3f3;
}

.reason-footer-label {
  font-size: 22rpx;
  color: #a6a6a6;
}

.reason-footer-value {
  font-size: 24rpx;
  color: #242424;
  font-weight: 500;
}

/* gap 16 × 0.875 = 14, mb 64 × 0.875 = 56 */
.contact-hint {
  display: flex;
  align-items: center;
  gap: 14rpx;
  margin-bottom: 56rpx;
}

.contact-text {
  font-size: 22rpx;
  color: #a6a6a6;
}

/* px 64 × 0.875 = 56, pb 96 × 0.875 = 84 */
.bottom-area {
  padding: 0 56rpx 84rpx;
  position: relative;
  z-index: 1;
}

/* padding 28 × 0.875 = 24.5 → 24, gap 16 × 0.875 = 14, radius 24 × 0.875 = 21 → 22 */
.switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14rpx;
  width: 100%;
  padding: 24rpx 0;
  background: #ffffff;
  border: 2rpx solid #eeeeee;
  border-radius: 22rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}

.switch-btn-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #5e5e5e;
}