微信小程序页面迁移校验之前 P5任务处理之前
This commit is contained in:
@@ -0,0 +1,241 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user