210 lines
3.6 KiB
SCSS
210 lines
3.6 KiB
SCSS
.page {
|
||
min-height: 100vh;
|
||
background: $color-bg;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.stateWrap {
|
||
margin-top: 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.body {
|
||
padding: 24px;
|
||
}
|
||
|
||
// 添加关爱对象虚线卡:与列表页底部加号卡同款式
|
||
.addCared {
|
||
margin-top: 0;
|
||
padding: 48px 32px;
|
||
background: $color-bg-white;
|
||
border: 1px dashed $color-primary-light-border;
|
||
border-radius: $radius-lg;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
// 达上限态:灰化降级,明确"不可点"
|
||
.addCaredDisabled {
|
||
border-color: $color-border;
|
||
}
|
||
|
||
.addCaredIcon {
|
||
width: 96px;
|
||
height: 96px;
|
||
border-radius: $radius-circle;
|
||
background: $color-primary-grad;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.addCaredIconDisabled {
|
||
background: $color-bg-disabled;
|
||
}
|
||
|
||
.addCaredIconText {
|
||
font-size: 48px;
|
||
font-weight: 300;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.addCaredIconTextDisabled {
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
.addCaredText {
|
||
font-size: 26px;
|
||
color: $color-text-secondary;
|
||
}
|
||
|
||
.addCaredTextDisabled {
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
.addCaredPressed {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.section {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
// 邀请行:open-type=share 的原生 Button 铺满整行(整行可点拉起转发面板),样式与 ListRow 一致
|
||
.shareRow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
min-height: 104px;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
background: $color-bg-white;
|
||
border: none;
|
||
border-bottom: 1px solid $color-border;
|
||
border-radius: 0;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
text-align: left;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.shareRowPressed {
|
||
background: $color-bg-press;
|
||
}
|
||
|
||
.shareLabel {
|
||
font-size: 30px;
|
||
color: $color-text;
|
||
}
|
||
|
||
.shareArrow {
|
||
font-size: 36px;
|
||
color: $color-text-placeholder;
|
||
}
|
||
|
||
.sectionTitle {
|
||
display: block;
|
||
font-size: 26px;
|
||
color: $color-text-secondary;
|
||
margin: 8px 8px 16px;
|
||
}
|
||
|
||
.sectionEmpty {
|
||
display: block;
|
||
padding: 32px 8px;
|
||
font-size: 26px;
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
// 家庭成员行「群主」徽章:浅绿底胶囊,右贴箭头
|
||
// margin-left:auto 在 flex 行里把它推到最右;Text 需 inline-block 撑高背景
|
||
.valueTag {
|
||
display: inline-block;
|
||
line-height: 1.4;
|
||
padding: 6px 20px;
|
||
background: $color-primary-light-bg;
|
||
border-radius: $radius-pill;
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
color: $color-primary-deep;
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 转让群主选人弹层(Modal 内容)
|
||
.transferTitle {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 36px;
|
||
font-weight: 600;
|
||
color: $color-text;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.transferList {
|
||
margin-bottom: 16px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.transferEmpty {
|
||
display: block;
|
||
padding: 48px 16px;
|
||
text-align: center;
|
||
font-size: 26px;
|
||
color: $color-text-tertiary;
|
||
}
|
||
|
||
.transferItem {
|
||
padding: 20px 24px;
|
||
background: $color-bg-gray;
|
||
border-radius: $radius-md;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.transferItemPressed {
|
||
background: $color-bg-press;
|
||
}
|
||
|
||
.transferItemName {
|
||
display: block;
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
color: $color-text;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.transferItemMeta {
|
||
display: block;
|
||
font-size: 22px;
|
||
color: $color-text-secondary;
|
||
}
|
||
|
||
.transferCancel {
|
||
height: 88px;
|
||
border-radius: $radius-pill;
|
||
background: $color-bg-gray;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.transferCancelPressed {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.transferCancelText {
|
||
font-size: 30px;
|
||
color: $color-text-secondary;
|
||
}
|