feat: 完成70%全局样式与可读性优化

This commit is contained in:
rain
2026-07-31 11:27:15 +08:00
parent 96524e4d6c
commit 555aa00043
116 changed files with 1928 additions and 1169 deletions
+31 -32
View File
@@ -428,14 +428,18 @@ const applyToJoin = () => {
if (!publicCanApply.value) return false;
return openPage(
"G08",
{ genealogyId: genealogyId.value, source: "search" },
{
genealogyId: genealogyId.value,
genealogyName: genealogy.name,
source: "search",
},
"G05",
);
};
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.overview-page {
display: flex;
min-height: 100vh;
@@ -446,7 +450,7 @@ const applyToJoin = () => {
z-index: 3;
}
.overview-surface {
@include adaptive.adaptive-g05-overview-surface;
@include adaptive-g05-overview-surface;
z-index: 2;
width: 100%;
min-height: min(483px, calc(100vw * 1.3422));
@@ -509,28 +513,23 @@ const applyToJoin = () => {
.overview-hero__kicker {
display: block;
color: #dec483;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
line-height: 1.5;
}
.overview-hero__title {
display: block;
margin-bottom: 6rpx;
font-family: "STKaiti", "KaiTi", serif;
font-size: 42rpx;
font-size: clamp(22px, 42rpx, 28px);
font-weight: 700;
letter-spacing: 2rpx;
}
.overview-hero__motto {
display: block;
height: 66rpx;
margin-top: 22rpx;
color: #e9dcc1;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.55;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.overview-hero__stats {
display: flex;
@@ -538,7 +537,7 @@ const applyToJoin = () => {
gap: 8rpx 0;
margin-top: 18rpx;
color: #dbc990;
font-size: 19rpx;
font-size: clamp(13px, 19rpx, 16px);
line-height: 1.4;
}
.overview-hero__stats text {
@@ -571,7 +570,7 @@ const applyToJoin = () => {
border-top: 1rpx solid rgba(152, 119, 72, 0.28);
box-sizing: border-box;
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.5;
}
.overview-action--tree {
@@ -618,11 +617,11 @@ const applyToJoin = () => {
margin-bottom: 5rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
font-weight: 700;
}
.overview-action--tree .overview-action__title {
font-size: 40rpx;
font-size: clamp(20px, 40rpx, 26px);
}
.overview-summary {
grid-template-columns: minmax(0, 1fr);
@@ -637,7 +636,7 @@ const applyToJoin = () => {
padding: 20rpx 0;
border-top: 1rpx solid rgba(152, 119, 72, 0.28);
color: $ink-muted;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
line-height: 1.5;
}
.overview-family text {
@@ -647,7 +646,7 @@ const applyToJoin = () => {
margin-bottom: 3rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 27rpx;
font-size: clamp(16px, 27rpx, 20px);
font-weight: 700;
}
.overview-note {
@@ -657,18 +656,18 @@ const applyToJoin = () => {
padding: 18rpx 0 0;
border-top: 1rpx solid rgba(152, 119, 72, 0.28);
color: $ink-muted;
font-size: 19rpx;
font-size: clamp(13px, 19rpx, 16px);
line-height: 1.55;
}
.overview-note__title {
margin-bottom: 5rpx;
color: $brand-red;
font-family: "STKaiti", "KaiTi", serif;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.overview-state {
@include adaptive.adaptive-genealogy-state-panel;
@include adaptive-genealogy-state-panel;
display: flex;
width: 100%;
min-height: 0;
@@ -699,14 +698,14 @@ const applyToJoin = () => {
margin-top: 28rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 42rpx;
font-size: clamp(22px, 42rpx, 28px);
font-weight: 700;
}
.overview-state-panel__copy {
max-width: 520rpx;
margin-top: 18rpx;
color: $ink-muted;
font-size: 27rpx;
font-size: clamp(16px, 27rpx, 20px);
line-height: 1.7;
}
.overview-state-panel__action {
@@ -722,7 +721,7 @@ const applyToJoin = () => {
.overview-state-panel__action text {
z-index: 1;
color: #fff9ed;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
}
.overview-public {
@@ -740,14 +739,14 @@ const applyToJoin = () => {
.overview-public__eyebrow {
display: block;
color: #dec483;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
letter-spacing: 3rpx;
}
.overview-public__title {
display: block;
margin-top: 10rpx;
font-family: "STKaiti", "KaiTi", serif;
font-size: 43rpx;
font-size: clamp(22px, 43rpx, 28px);
font-weight: 700;
letter-spacing: 4rpx;
}
@@ -755,7 +754,7 @@ const applyToJoin = () => {
display: block;
margin-top: 7rpx;
color: #e9dcc1;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.overview-public__details {
display: grid;
@@ -785,13 +784,13 @@ const applyToJoin = () => {
}
.overview-public__details text:first-child {
color: $brand-red;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
}
.overview-public__details text:last-child {
margin-top: 6rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 27rpx;
font-size: clamp(16px, 27rpx, 20px);
}
.overview-public__trust {
display: grid;
@@ -799,15 +798,15 @@ const applyToJoin = () => {
gap: 10rpx 24rpx;
margin: 28rpx 9% 0;
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.45;
}
.overview-public__notice {
display: flex;
margin: 54rpx 9% 0;
color: $ink-muted;
font-size: 19rpx;
line-height: 26rpx;
font-size: clamp(13px, 19rpx, 16px);
line-height: max(1.35em, clamp(16px, 26rpx, 20px));
}
.overview-public__notice text:first-child {
flex: 0 0 auto;
@@ -827,7 +826,7 @@ const applyToJoin = () => {
.overview-public__action text {
z-index: 1;
color: #fff9ed;
font-size: 27rpx;
font-size: clamp(16px, 27rpx, 20px);
font-weight: 700;
letter-spacing: 3rpx;
}