347 lines
7.4 KiB
Plaintext
347 lines
7.4 KiB
Plaintext
/* pages/settings/settings.wxss */
|
|
@import '../../styles/common.wxss';
|
|
page { background: linear-gradient(180deg, #F4E2E3 0%, #FAF5EE 55%, #FAF5EE 100%); height: 100vh; overflow: hidden; }
|
|
.container { padding-top: 16rpx; padding-bottom: 300rpx; }
|
|
scroll-view.page-bg { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
|
|
|
|
|
|
|
|
/* 全屏编辑页样式 */
|
|
.edit-page {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.bg-full {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
z-index: 0;
|
|
}
|
|
.bg-placeholder {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
z-index: 0;
|
|
background: linear-gradient(135deg, #F4E2E3 0%, #FFF0F5 50%, #F8E1FF 100%);
|
|
}
|
|
.edit-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 100rpx 0 0 32rpx;
|
|
background: transparent;
|
|
height: 180rpx;
|
|
}
|
|
.back-btn-wrap {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.75);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.back-btn-wrap.transparent {
|
|
background: transparent;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
box-shadow: none;
|
|
}
|
|
.back-nav-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
opacity: 0.7;
|
|
}
|
|
.edit-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
.edit-body {
|
|
flex: 1;
|
|
padding: 0 48rpx 120rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.back-btn {
|
|
width: 56rpx; height: 56rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
|
|
}
|
|
.back-icon {
|
|
width: 32rpx; height: 32rpx;
|
|
}
|
|
|
|
/* 背景编辑页卡片 - 固定在底部导航栏上方 */
|
|
.bg-edit-footer {
|
|
position: fixed;
|
|
bottom: 360rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
padding: 0 32rpx;
|
|
}
|
|
.bg-edit-card {
|
|
width: 100%;
|
|
background: transparent;
|
|
border-radius: 32rpx;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 恢复默认背景按钮 */
|
|
.btn-restore {
|
|
background: transparent;
|
|
color: #FF6B81;
|
|
border: 4rpx solid #FF6B81;
|
|
margin-top: 16rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.btn-restore:active {
|
|
background: rgba(255,107,129,0.08);
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
/* ===== 消息通知弹窗样式 ===== */
|
|
.subscribe-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 48rpx 0;
|
|
}
|
|
.loading-spinner {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border: 4rpx solid #F4E2E3;
|
|
border-top-color: #B74768;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.loading-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.subscribe-section {
|
|
margin: 24rpx 0 8rpx;
|
|
}
|
|
.subscribe-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #FAFAFA;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 20rpx;
|
|
transition: all 0.3s ease;
|
|
border: 2rpx solid transparent;
|
|
}
|
|
.subscribe-card.active {
|
|
background: #FFF5F7;
|
|
border-color: #FFD6E0;
|
|
}
|
|
.subscribe-card-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
flex: 1;
|
|
margin-right: 16rpx;
|
|
}
|
|
.subscribe-icon-wrap {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: background 0.3s ease;
|
|
}
|
|
.subscribe-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
.subscribe-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.subscribe-name {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
display: block;
|
|
}
|
|
.subscribe-desc {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-top: 4rpx;
|
|
display: block;
|
|
}
|
|
|
|
.subscribe-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
padding: 16rpx 20rpx;
|
|
border-radius: 16rpx;
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
.subscribe-tip.on {
|
|
background: #E8F5E9;
|
|
color: #2E7D32;
|
|
}
|
|
.subscribe-tip.off {
|
|
background: #FFF8E1;
|
|
color: #F57F17;
|
|
}
|
|
.tip-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
.tip-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.subscribe-note {
|
|
background: #F8F8F8;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.note-title {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: #666;
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.note-item {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
display: block;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* 背景编辑页按钮 - 水平排列，统一大小 */
|
|
.bg-btn-row {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
.bg-btn-row .btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
padding: 0;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
margin: 0;
|
|
}
|
|
.bg-btn-row .btn:active {
|
|
transform: scale(0.94);
|
|
}
|
|
/* 三个按钮统一为半透明白色毛玻璃风格 */
|
|
.bg-btn-row .btn-select,
|
|
.bg-btn-row .btn-save,
|
|
.bg-btn-row .btn-restore {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
color: #FF6B81;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 2rpx solid rgba(255, 107, 129, 0.25);
|
|
box-shadow: none;
|
|
}
|
|
.bg-btn-row .btn-select:active,
|
|
.bg-btn-row .btn-save:active,
|
|
.bg-btn-row .btn-restore:active {
|
|
background: rgba(255, 107, 129, 0.15);
|
|
transform: scale(0.94);
|
|
}
|
|
.bg-edit-card .btn-restore:active {
|
|
background: rgba(255, 107, 129, 0.12);
|
|
}
|
|
|
|
/* ===== 关于我们 ===== */
|
|
.about-section {
|
|
margin: 28rpx 0 8rpx;
|
|
}
|
|
.about-intro {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.7;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
.about-block {
|
|
background: #FFF9F4;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 28rpx;
|
|
margin-top: 24rpx;
|
|
border: 2rpx solid rgba(255, 107, 157, 0.12);
|
|
}
|
|
.about-block-title {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #B74768;
|
|
display: block;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.about-item {
|
|
font-size: 24rpx;
|
|
color: #555;
|
|
display: block;
|
|
line-height: 1.9;
|
|
}
|
|
.about-foot {
|
|
margin-top: 28rpx;
|
|
text-align: center;
|
|
}
|
|
.about-version {
|
|
font-size: 22rpx;
|
|
color: #bbb;
|
|
}
|
|
|
|
@import '../../styles/design.wxss';
|
|
|
|
@import '../../styles/journal.wxss';
|
|
|
|
/* 弹窗位于页面滚动容器外，盖住底部导航。 */
|
|
.modal-overlay { z-index:1200; }
|
|
.info-dialog { display:flex; flex-direction:column; height:76vh; padding:0; overflow:hidden; max-width:650rpx; }
|
|
.info-header { flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding:36rpx 32rpx 24rpx; border-bottom:1rpx solid #E9DDD0; }
|
|
.info-mark { width:48rpx; height:48rpx; margin-bottom:16rpx; }
|
|
.info-title { font-size:34rpx; font-weight:600; color:#352E2A; }
|
|
.info-caption { font-size:24rpx; color:#85776D; margin-top:10rpx; }
|
|
.info-body { flex:1; height:0; min-height:0; }
|
|
.info-content { padding:28rpx 32rpx; }
|
|
.about-intro { color:#85776D; text-align:left; line-height:1.75; }
|
|
.about-block { background:#FAF5EE; border:1rpx solid #E9DDD0; border-radius:16rpx; padding:24rpx; }
|
|
.about-block-title { color:#352E2A; font-weight:600; }
|
|
.about-item { color:#65594F; line-height:1.8; margin-top:8rpx; }
|
|
.info-signature { display:block; margin-top:28rpx; text-align:center; color:#A39386; }
|
|
.info-footer { flex-shrink:0; padding:20rpx 32rpx; border-top:1rpx solid #E9DDD0; }
|
|
.info-dismiss { margin:0; width:100%; padding:0; line-height:76rpx; border-radius:16rpx; background:#B74768; color:#FFFDF8; font-size:28rpx; }
|
|
.info-dismiss::after { border:0; }
|