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/tree/t03-member-profile.vue
+40 -39
View File
@@ -38,9 +38,9 @@
class="member-detail"
>
<view class="member-heading">
<view class="member-heading__seal"
><text>{{ member.name.slice(0, 1) }}</text></view
>
<view class="member-heading__seal">
<AppAvatar :sex="member.sex" />
</view>
<view>
<text>{{ member.name }}</text>
<text
@@ -103,9 +103,9 @@
class="member-restricted"
>
<view class="member-heading">
<view class="member-heading__seal"
><text>{{ member.name.slice(0, 1) }}</text></view
>
<view class="member-heading__seal">
<AppAvatar :sex="member.sex" />
</view>
<view>
<text>{{ member.name }}</text>
<text>第 {{ member.generation }} 世 · {{ member.relation }}</text>
@@ -132,6 +132,7 @@
<script setup>
import { computed, reactive, ref } from "vue";
import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppAvatar from "@/components/AppAvatar.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
@@ -415,7 +416,7 @@ const toTree = requestBack;
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.member-page {
display: flex;
@@ -431,7 +432,7 @@ const toTree = requestBack;
z-index: 2;
}
.member-context {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
width: calc(100% - 32rpx);
margin: 18rpx auto 0;
padding: 16rpx 24rpx;
@@ -439,16 +440,16 @@ const toTree = requestBack;
.member-context text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-context text:first-child {
color: $ink;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
font-weight: 700;
}
.member-panel {
@include adaptive.adaptive-tree-panel;
@include adaptive-tree-panel;
width: calc(100% - 32rpx);
margin: 16rpx auto 0;
padding: 9% 8%;
@@ -468,30 +469,30 @@ const toTree = requestBack;
flex: 0 0 74rpx;
align-items: center;
justify-content: center;
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png")
center / contain no-repeat;
}
.member-heading__seal text {
color: #fff7e7;
font-size: 28rpx;
box-sizing: border-box;
border: 2rpx solid #c39851;
border-radius: 50%;
background: #fff8e8;
box-shadow: 0 3rpx 7rpx rgba(100, 65, 29, 0.14);
overflow: hidden;
}
.member-heading > view:last-child text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-heading > view:last-child text:last-child {
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.member-heading > view:last-child text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
font-weight: 700;
}
.member-status-entry {
@include adaptive.adaptive-genealogy-list-card;
@include adaptive-genealogy-list-card;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
@@ -501,7 +502,7 @@ const toTree = requestBack;
}
.member-status-entry text {
color: $ink-muted;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: 1.4;
}
.member-status-entry text:first-child,
@@ -513,11 +514,11 @@ const toTree = requestBack;
display: block;
margin-top: 24rpx;
color: $brand-red;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-info-row {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 64rpx;
@@ -528,7 +529,7 @@ const toTree = requestBack;
}
.member-info-row text {
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-info-row text:last-child {
@@ -537,7 +538,7 @@ const toTree = requestBack;
}
.member-relatives {
margin-top: 8rpx;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.member-relatives > view {
display: flex;
@@ -545,7 +546,7 @@ const toTree = requestBack;
gap: 20rpx;
padding: 12rpx 18rpx;
color: $ink;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.member-relatives > view text:last-child {
color: $brand-red;
@@ -553,7 +554,7 @@ const toTree = requestBack;
.member-relatives > text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.5;
}
.member-record-actions {
@@ -563,7 +564,7 @@ const toTree = requestBack;
margin-top: 20rpx;
}
.member-record-actions > view {
@include adaptive.adaptive-scroll-button(secondary);
@include adaptive-scroll-button(secondary);
display: flex;
min-height: 72rpx;
align-items: center;
@@ -573,12 +574,12 @@ const toTree = requestBack;
}
.member-record-actions text {
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
font-weight: 700;
line-height: 1.35;
}
.member-profile-action {
@include adaptive.adaptive-scroll-button(primary);
@include adaptive-scroll-button(primary);
display: flex;
min-height: 76rpx;
align-items: center;
@@ -587,7 +588,7 @@ const toTree = requestBack;
}
.member-profile-action text {
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-restricted {
@@ -596,7 +597,7 @@ const toTree = requestBack;
.member-restricted > text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.6;
text-align: center;
}
@@ -604,14 +605,14 @@ const toTree = requestBack;
margin-top: 28rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
}
.member-restricted > text + text {
margin-top: 12rpx;
}
.member-restricted-action {
@include adaptive.adaptive-scroll-button(secondary);
@include adaptive-scroll-button(secondary);
display: flex;
min-height: 76rpx;
align-items: center;
@@ -620,7 +621,7 @@ const toTree = requestBack;
}
.member-restricted-action text {
color: $brand-red;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-error {
@@ -630,16 +631,16 @@ const toTree = requestBack;
.member-error > text {
display: block;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.55;
}
.member-error > text:nth-child(2) {
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.member-error > text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
}
@media (min-width: 400px) {