rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
pages/genealogy/g01-my-genealogies.vue
+73 -56
View File
@@ -68,7 +68,7 @@
</view>
<view class="current-info-divider"></view>
<view class="current-meta">
<view class="current-meta-item">
<view class="current-meta-item current-meta-item--location">
<image
class="current-meta-icon"
src="/static/assets/foundation/transparent/meta-location.png"
@@ -78,7 +78,7 @@
currentGenealogy.location
}}</text>
</view>
<view class="current-meta-item">
<view class="current-meta-item current-meta-item--members">
<image
class="current-meta-icon"
src="/static/assets/foundation/transparent/meta-member.png"
@@ -88,7 +88,7 @@
>{{ currentGenealogy.memberCount }} 位成员</text
>
</view>
<view class="current-meta-item">
<view class="current-meta-item current-meta-item--role">
<image
class="current-meta-icon"
src="/static/assets/foundation/transparent/meta-admin.png"
@@ -710,7 +710,7 @@ const openShortcut = (key) => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.genealogy-index {
display: flex;
@@ -754,9 +754,9 @@ const openShortcut = (key) => {
}
.current-slip {
@include adaptive.adaptive-genealogy-current-slip;
@include adaptive-genealogy-current-slip;
display: block;
min-height: 268rpx;
min-height: 300rpx;
padding: 30rpx 34rpx 28rpx;
}
@@ -775,7 +775,7 @@ const openShortcut = (key) => {
.current-seal-title {
color: #fff7e7;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
letter-spacing: 2rpx;
writing-mode: vertical-rl;
@@ -790,59 +790,76 @@ const openShortcut = (key) => {
flex: 1;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 38rpx;
font-size: clamp(18px, 34rpx, 24px);
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.current-switch-copy {
flex: 0 0 auto;
margin-left: auto;
margin-left: 16rpx;
padding: 4rpx 12rpx;
border: 1rpx solid rgba(159, 23, 15, 0.34);
border-radius: 999rpx;
color: $brand-red;
font-size: 28rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.current-info-divider {
width: 100%;
height: 1rpx;
margin: 14rpx 0 16rpx;
margin: 18rpx 0 16rpx;
background: rgba(181, 138, 75, 0.48);
}
.current-meta {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 28rpx;
row-gap: 10rpx;
margin-top: 0;
color: #62584c;
font-size: 27rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 500;
line-height: 1.4;
}
.current-meta-item {
display: flex;
min-width: 0;
align-items: center;
margin: 0;
flex-wrap: wrap;
.current-meta-item-text {
min-width: 0;
overflow-wrap: anywhere;
}
}
.current-meta-item--location {
grid-column: 1 / -1;
}
.current-meta-item--role {
justify-self: end;
}
.current-meta-icon {
width: 36rpx;
height: 36rpx;
width: 34rpx;
height: 34rpx;
flex: 0 0 auto;
margin-right: 8rpx;
opacity: 1;
}
.shortcut-grid {
display: flex;
min-height: 194rpx;
min-height: 168rpx;
align-items: center;
margin-top: 24rpx;
margin-top: 18rpx;
padding: 8rpx 0;
}
@@ -854,15 +871,15 @@ const openShortcut = (key) => {
align-items: center;
}
.shortcut-icon {
width: 82rpx;
height: 82rpx;
width: 76rpx;
height: 76rpx;
}
.shortcut-label {
width: 100%;
margin-top: 12rpx;
margin-top: 10rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 29rpx;
font-size: clamp(16px, 27rpx, 19px);
font-weight: 700;
text-align: center;
overflow-wrap: anywhere;
@@ -890,7 +907,7 @@ const openShortcut = (key) => {
margin-bottom: 8rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
}
@@ -907,7 +924,7 @@ const openShortcut = (key) => {
}
.application-record {
@include adaptive.adaptive-genealogy-list-card;
@include adaptive-genealogy-list-card;
display: flex;
min-height: 138rpx;
align-items: center;
@@ -928,7 +945,7 @@ const openShortcut = (key) => {
.application-record__name {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
overflow-wrap: anywhere;
}
@@ -936,7 +953,7 @@ const openShortcut = (key) => {
flex: 0 0 auto;
margin-left: 16rpx;
color: #7f4f16;
font-size: 27rpx;
font-size: clamp(16px, 27rpx, 20px);
font-weight: 600;
}
.application-record__status--rejected {
@@ -949,7 +966,7 @@ const openShortcut = (key) => {
display: block;
margin-top: 10rpx;
color: #62584c;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
font-weight: 500;
line-height: 1.4;
}
@@ -965,7 +982,7 @@ const openShortcut = (key) => {
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
}
.create-action {
@@ -976,7 +993,7 @@ const openShortcut = (key) => {
background: rgba(255, 249, 238, 0.66);
color: $brand-red;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
letter-spacing: 3rpx;
}
@@ -1019,18 +1036,18 @@ const openShortcut = (key) => {
margin-top: 24rpx;
color: $ink;
font-family: serif;
font-size: 38rpx;
font-size: clamp(20px, 38rpx, 26px);
font-weight: 700;
}
.state-copy {
margin-top: 14rpx;
color: $ink-muted;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
line-height: 1.7;
}
.state-panel--error {
@include adaptive.adaptive-genealogy-state-panel;
@include adaptive-genealogy-state-panel;
min-height: 1120rpx;
padding: 0;
}
@@ -1060,7 +1077,7 @@ const openShortcut = (key) => {
margin-top: 30rpx;
color: #392719;
font-family: "STKaiti", "KaiTi", serif;
font-size: 42rpx;
font-size: clamp(22px, 42rpx, 28px);
font-weight: 700;
letter-spacing: 2rpx;
}
@@ -1070,7 +1087,7 @@ const openShortcut = (key) => {
min-height: 72rpx;
margin-top: 16rpx;
color: #786654;
font-size: 27rpx;
font-size: clamp(16px, 27rpx, 20px);
line-height: 1.65;
}
@@ -1092,7 +1109,7 @@ const openShortcut = (key) => {
}
.empty-panel {
@include adaptive.adaptive-genealogy-state-panel;
@include adaptive-genealogy-state-panel;
min-height: 1120rpx;
}
@@ -1120,7 +1137,7 @@ const openShortcut = (key) => {
.empty-seal__text {
color: #fff7e7;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
letter-spacing: 2rpx;
writing-mode: vertical-rl;
@@ -1131,7 +1148,7 @@ const openShortcut = (key) => {
margin-top: 30rpx;
color: #392719;
font-family: "STKaiti", "KaiTi", serif;
font-size: 48rpx;
font-size: clamp(24px, 48rpx, 30px);
font-weight: 700;
letter-spacing: 2rpx;
}
@@ -1141,7 +1158,7 @@ const openShortcut = (key) => {
min-height: 84rpx;
margin-top: 18rpx;
color: #786654;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
line-height: 1.65;
}
@@ -1177,7 +1194,7 @@ const openShortcut = (key) => {
.empty-invite-action__copy {
color: #7b4e24;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
letter-spacing: 3rpx;
}
@@ -1194,13 +1211,13 @@ const openShortcut = (key) => {
}
.empty-create-action__copy {
font-family: "STKaiti", "KaiTi", serif;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
}
.empty-create-note {
display: block;
color: $ink-muted;
font-size: 26rpx;
line-height: 38rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: max(1.35em, clamp(20px, 38rpx, 26px));
}
.state-retry {
@@ -1216,7 +1233,7 @@ const openShortcut = (key) => {
.state-retry__copy {
color: #fff9ec;
font-family: "STKaiti", "KaiTi", serif;
font-size: 29rpx;
font-size: clamp(16px, 29rpx, 20px);
}
.add-dialog-layer {
@@ -1230,7 +1247,7 @@ const openShortcut = (key) => {
background: rgba(34, 20, 12, 0.68);
}
.add-dialog {
@include adaptive.adaptive-g01-add-sheet;
@include adaptive-g01-add-sheet;
width: 100%;
min-height: 780rpx;
max-height: calc(100vh - 80rpx);
@@ -1301,7 +1318,7 @@ const openShortcut = (key) => {
background: rgba(34, 20, 12, 0.58);
}
.genealogy-switcher {
@include adaptive.adaptive-g01-switcher;
@include adaptive-g01-switcher;
width: 670rpx;
max-width: 100%;
min-height: 600rpx;
@@ -1346,14 +1363,14 @@ const openShortcut = (key) => {
.dialog-title {
color: $brand-red;
font-family: "STKaiti", "KaiTi", serif;
font-size: 42rpx;
font-size: clamp(22px, 42rpx, 28px);
font-weight: 700;
letter-spacing: 4rpx;
}
.dialog-copy {
margin-top: 12rpx;
color: $ink-muted;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
line-height: 1.5;
}
.switcher-item {
@@ -1381,17 +1398,17 @@ const openShortcut = (key) => {
.switcher-item__name {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
}
.switcher-item__meta {
margin-top: 6rpx;
color: #62584c;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.switcher-item__state {
color: $brand-red;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 600;
}
.switcher-item--active {
@@ -1412,10 +1429,10 @@ const openShortcut = (key) => {
padding-left: 20rpx;
}
.current-name {
font-size: 40rpx;
font-size: clamp(20px, 40rpx, 26px);
}
.shortcut-label {
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.current-meta-icon {
width: 32rpx;