feat: 完成70%全局样式与可读性优化
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user