312 lines
7.4 KiB
CSS
312 lines
7.4 KiB
CSS
/* 推广中心：加入说明、奖励统计、推广链接及数据列表。 */
|
|
/* 导入方：app/pages/recommend/index.vue。 */
|
|
.recommend-page[data-v-78278278] {
|
|
--recommend-gap: 14px;
|
|
--recommend-section-gap: 21px;
|
|
--recommend-summary-gap: 28px;
|
|
gap: var(--recommend-gap);
|
|
}
|
|
.panel[data-v-78278278],
|
|
.reward-summary[data-v-78278278] {
|
|
min-width: 0;
|
|
padding: var(--recommend-gap);
|
|
background: var(--p-content-background);
|
|
border: 1px solid var(--p-content-border-color);
|
|
border-radius: 7px;
|
|
box-shadow: 0 1px 2px #00000014;
|
|
}
|
|
.error-panel[data-v-78278278],
|
|
.join-intro[data-v-78278278],
|
|
.link-block[data-v-78278278] {
|
|
gap: var(--recommend-gap);
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
.error-panel[data-v-78278278],
|
|
.join-intro[data-v-78278278] {
|
|
align-items: flex-start;
|
|
}
|
|
.join-card[data-v-78278278],
|
|
.recommend-section[data-v-78278278] {
|
|
gap: var(--recommend-section-gap);
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
.join-intro h3[data-v-78278278] {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
.join-desc[data-v-78278278] {
|
|
max-width: 65em;
|
|
color: var(--p-text-muted-color);
|
|
margin: 0;
|
|
line-height: 1.8;
|
|
}
|
|
.join-desc b[data-v-78278278] {
|
|
color: var(--p-text-color);
|
|
font-weight: 500;
|
|
}
|
|
.join-steps[data-v-78278278] {
|
|
gap: var(--recommend-section-gap);
|
|
padding: var(--recommend-section-gap) 0 0;
|
|
border-top: 1px solid var(--p-content-border-color);
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
margin: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
}
|
|
.join-steps li[data-v-78278278] {
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
display: flex;
|
|
}
|
|
.step-number[data-v-78278278] {
|
|
color: var(--p-text-muted-color);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.join-steps h4[data-v-78278278] {
|
|
margin: 0 0 7px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
.join-steps p[data-v-78278278] {
|
|
color: var(--p-text-muted-color);
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
}
|
|
.reward-summary[data-v-78278278] {
|
|
min-height: 105px;
|
|
}
|
|
.reward-balance[data-v-78278278],
|
|
.reward-summary[data-v-78278278] {
|
|
align-items: center;
|
|
gap: var(--recommend-summary-gap);
|
|
display: flex;
|
|
}
|
|
.reward-balance[data-v-78278278] {
|
|
flex: 1.35;
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
}
|
|
.link-row > .p-button[data-v-78278278],
|
|
.reward-balance > .p-button[data-v-78278278] {
|
|
flex-shrink: 0;
|
|
}
|
|
.reward-metrics[data-v-78278278] {
|
|
gap: var(--recommend-summary-gap);
|
|
min-width: 0;
|
|
padding-left: var(--recommend-summary-gap);
|
|
border-left: 1px solid var(--p-content-border-color);
|
|
flex: 3;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
grid-auto-flow: column;
|
|
display: grid;
|
|
}
|
|
.reward-metric[data-v-78278278] {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
display: flex;
|
|
}
|
|
.stat-label[data-v-78278278] {
|
|
color: var(--p-text-muted-color);
|
|
font-size: 1rem;
|
|
}
|
|
/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
|
|
.stat-num[data-v-78278278] {
|
|
font-variant-numeric: tabular-nums;
|
|
overflow-wrap: anywhere;
|
|
font-size: 1.75rem;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
}
|
|
.stat-num small[data-v-78278278] {
|
|
margin-right: 2px;
|
|
font-size: 1.5rem;
|
|
}
|
|
.recommend-section[data-v-78278278],
|
|
.recommend-tabs[data-v-78278278] {
|
|
min-width: 0;
|
|
}
|
|
.recommend-tabs[data-v-78278278] .p-tabpanels {
|
|
padding: var(--recommend-gap) 0 0;
|
|
background: 0 0;
|
|
}
|
|
.recommend-tabs[data-v-78278278] .p-tablist-tab-list {
|
|
background: 0 0;
|
|
border: 0;
|
|
}
|
|
.recommend-tabs[data-v-78278278] .p-tab {
|
|
padding: var(--recommend-gap);
|
|
}
|
|
.recommend-tabs[data-v-78278278] .p-tablist-active-bar {
|
|
display: none;
|
|
}
|
|
.link-heading[data-v-78278278] {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
.link-row[data-v-78278278] {
|
|
align-items: center;
|
|
gap: 7px;
|
|
max-width: 840px;
|
|
display: flex;
|
|
}
|
|
.link-text[data-v-78278278] {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
|
|
.link-tip[data-v-78278278] {
|
|
color: var(--p-text-muted-color);
|
|
overflow-wrap: anywhere;
|
|
max-width: 65em;
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
}
|
|
/* 自定义推广链接管理区域；链接生成和访问校验不是CSS职责。 */
|
|
.custom-link-block[data-v-78278278] {
|
|
gap: var(--recommend-gap);
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
.custom-link-form[data-v-78278278] {
|
|
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
|
|
gap: 8px;
|
|
max-width: 840px;
|
|
display: grid;
|
|
}
|
|
.custom-link-list[data-v-78278278] {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
display: flex;
|
|
}
|
|
.custom-link-row[data-v-78278278] {
|
|
border-top: 1px solid var(--p-content-border-color);
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
display: flex;
|
|
}
|
|
.custom-link-value[data-v-78278278] {
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
display: flex;
|
|
}
|
|
.custom-link-value strong[data-v-78278278] {
|
|
overflow-wrap: anywhere;
|
|
flex: 0 0 150px;
|
|
font-size: 0.875rem;
|
|
}
|
|
.custom-link-value .p-inputtext[data-v-78278278] {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.custom-link-actions[data-v-78278278] {
|
|
flex-shrink: 0;
|
|
gap: 2px;
|
|
display: flex;
|
|
}
|
|
.link-loading[data-v-78278278] {
|
|
color: var(--p-text-muted-color);
|
|
padding: var(--recommend-gap) 0;
|
|
font-size: 1rem;
|
|
}
|
|
.recommend-data-section[data-v-78278278] {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
display: flex;
|
|
}
|
|
.section-header[data-v-78278278] {
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
display: flex;
|
|
}
|
|
.section-heading[data-v-78278278] {
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
display: flex;
|
|
}
|
|
.link-title[data-v-78278278] {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
.section-heading > span[data-v-78278278] {
|
|
color: var(--p-text-muted-color);
|
|
font-size: 0.9375rem;
|
|
}
|
|
.list-toolbar[data-v-78278278] {
|
|
justify-content: flex-start;
|
|
}
|
|
.list-foot[data-v-78278278] {
|
|
justify-content: center;
|
|
}
|
|
/* 视口条件 (width<=1100px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
|
@media (width<=1100px) {
|
|
.reward-summary[data-v-78278278] {
|
|
align-items: stretch;
|
|
gap: var(--recommend-section-gap);
|
|
flex-direction: column;
|
|
}
|
|
.reward-balance[data-v-78278278] {
|
|
justify-content: flex-start;
|
|
}
|
|
.reward-metrics[data-v-78278278] {
|
|
padding: var(--recommend-section-gap) 0 0;
|
|
border-left: 0;
|
|
border-top: 1px solid var(--p-content-border-color);
|
|
}
|
|
}
|
|
/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
|
@media (width<=640px) {
|
|
.join-steps[data-v-78278278] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.reward-metrics[data-v-78278278] {
|
|
gap: var(--recommend-section-gap);
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-auto-flow: row;
|
|
}
|
|
.stat-num[data-v-78278278] {
|
|
font-size: 1.625rem;
|
|
}
|
|
.stat-num small[data-v-78278278] {
|
|
font-size: 1.25rem;
|
|
}
|
|
.link-row[data-v-78278278],
|
|
.list-toolbar-right[data-v-78278278] {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.link-row > .p-button[data-v-78278278] {
|
|
align-self: flex-start;
|
|
}
|
|
.custom-link-form[data-v-78278278] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.custom-link-row[data-v-78278278],
|
|
.custom-link-value[data-v-78278278] {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.custom-link-value strong[data-v-78278278] {
|
|
flex-basis: auto;
|
|
}
|
|
.custom-link-actions[data-v-78278278] {
|
|
justify-content: flex-start;
|
|
}
|
|
.list-toolbar-right[data-v-78278278] > * {
|
|
flex-basis: auto;
|
|
width: 100%;
|
|
}
|
|
}
|