feat: 我的、设置、打印指南页面开发完成
This commit is contained in:
R524809
@@ -1,45 +1,105 @@
|
||||
.guide-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
padding-bottom: 48rpx;
|
||||
@import '../../style/theme.less';
|
||||
|
||||
page {
|
||||
min-height: 100%;
|
||||
background: @bg-header;
|
||||
}
|
||||
|
||||
.guide-page {
|
||||
min-height: 100vh;
|
||||
background: @bg-header;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.guide-page__body {
|
||||
padding: @section-gap-xs @page-padding-x;
|
||||
padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hero 主卡（参考 profile-hero） */
|
||||
.guide-page__hero {
|
||||
background: linear-gradient(180deg, #f7ee47 0%, #e6d520 100%);
|
||||
padding: 60rpx 40rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx @page-padding-inner-x 56rpx;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-shadow: @shadow;
|
||||
overflow: hidden;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.guide-page__hero-tint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 192rpx;
|
||||
background: @brand;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.guide-page__hero-icon-wrap {
|
||||
position: relative;
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
border-radius: 50%;
|
||||
background: @brand;
|
||||
border: 8rpx solid @bg-white;
|
||||
box-shadow: @shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.guide-page__hero-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 72rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.guide-page__hero-title {
|
||||
margin-top: 32rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.guide-page__hero-sub {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: @text-secondary;
|
||||
text-align: center;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* 步骤时间线卡片 */
|
||||
.guide-page__steps {
|
||||
position: relative;
|
||||
padding: 40rpx 32rpx 24rpx 32rpx;
|
||||
margin: 0 24rpx;
|
||||
margin-top: -24rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
||||
padding: 56rpx 40rpx 16rpx;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-shadow: @shadow;
|
||||
margin-bottom: @section-gap-xs;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.guide-page__timeline-line {
|
||||
position: absolute;
|
||||
left: 62rpx;
|
||||
top: 100rpx;
|
||||
bottom: 100rpx;
|
||||
left: 70rpx;
|
||||
top: 110rpx;
|
||||
bottom: 110rpx;
|
||||
width: 4rpx;
|
||||
background: #eee;
|
||||
background: @bg-gray;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -48,62 +108,66 @@
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 48rpx;
|
||||
margin-bottom: 56rpx;
|
||||
}
|
||||
|
||||
.guide-page__step--last {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.guide-page__step-num-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 64rpx;
|
||||
margin-right: 24rpx;
|
||||
margin-right: 32rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.guide-page__step-num {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
background: #f7ee47;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
background: @brand;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: @text-selected-btn;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.guide-page__step-body {
|
||||
flex: 1;
|
||||
padding-top: 4rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.guide-page__step-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.guide-page__step-desc {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: @text-secondary;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 通用 Tip（弱提示） */
|
||||
.guide-page__tip {
|
||||
background: #fff8e1;
|
||||
border-radius: 16rpx;
|
||||
background: @bg-header;
|
||||
border-radius: @radius;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
font-size: 24rpx;
|
||||
color: @text-secondary;
|
||||
line-height: 1.55;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
}
|
||||
|
||||
.guide-page__tip-line {
|
||||
@@ -115,36 +179,114 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.guide-page__faq-title {
|
||||
font-size: 32rpx;
|
||||
/* 相册权限提示卡 */
|
||||
.guide-page__perm {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 28rpx;
|
||||
border-radius: @radius;
|
||||
background: fade(@brand, 18%);
|
||||
border: 1rpx solid fade(@brand, 36%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.guide-page__perm--granted {
|
||||
background: fade(@brand, 12%);
|
||||
border-color: fade(@brand, 28%);
|
||||
}
|
||||
|
||||
.guide-page__perm--denied {
|
||||
background: fade(@brand, 22%);
|
||||
border-color: fade(@brand, 50%);
|
||||
}
|
||||
|
||||
.guide-page__perm-icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: @bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.guide-page__perm-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.guide-page__perm-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
padding: 40rpx 32rpx 16rpx;
|
||||
color: @text-title;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.guide-page__perm-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: @text-secondary;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.guide-page__perm-btn {
|
||||
align-self: flex-start;
|
||||
margin-top: 20rpx;
|
||||
padding: 14rpx 32rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: @shadow;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* FAQ */
|
||||
.guide-page__faq-title {
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
padding: 16rpx 8rpx 24rpx;
|
||||
}
|
||||
|
||||
.guide-page__faq {
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.guide-page__faq-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
background: @bg-white;
|
||||
border-radius: @radius-lg;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
padding: 32rpx 36rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.guide-page__faq-item--last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.guide-page__faq-q {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
color: @text-title;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.guide-page__faq-a {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.55;
|
||||
}
|
||||
color: @text-secondary;
|
||||
line-height: 1.6;
|
||||
}
|
||||
Reference in New Issue
Block a user