feat: 完成70%全局样式与可读性优化
This commit is contained in:
rain
@@ -8,7 +8,14 @@
|
||||
}"
|
||||
>
|
||||
<view v-if="compactHeader" class="profile-compact-header" aria-hidden="true">
|
||||
<text>我的</text>
|
||||
<view class="profile-compact-header__brand-lockup">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>代代相传</text>
|
||||
</view>
|
||||
<text class="profile-compact-header__title">我的</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="profile-state-card">
|
||||
@@ -30,6 +37,14 @@
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view class="profile-hero__content">
|
||||
<view class="profile-hero__brand-lockup">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/brand-seal.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<text>代代相传</text>
|
||||
</view>
|
||||
<view class="profile-hero__label">
|
||||
<text>我的</text>
|
||||
<view
|
||||
@@ -46,12 +61,9 @@
|
||||
</view>
|
||||
|
||||
<view class="profile-hero__identity">
|
||||
<image
|
||||
class="profile-hero__emblem"
|
||||
src="/static/assets/modules/profile/transparent/m01-profile-tree-medallion.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view class="profile-hero__emblem">
|
||||
<AppAvatar :sex="profile.sex" />
|
||||
</view>
|
||||
<view class="profile-hero__copy">
|
||||
<text>{{ profile.nickName || "未设置昵称" }}</text>
|
||||
<text>{{ profile.realName || "未设置真实姓名" }}</text>
|
||||
@@ -73,7 +85,7 @@
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view><text>性别</text><text>{{ sexText }}</text></view>
|
||||
<view><text>性别</text><text class="app-single-line">{{ sexText }}</text></view>
|
||||
</view>
|
||||
<view class="profile-metadata__item">
|
||||
<image
|
||||
@@ -82,7 +94,7 @@
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view><text>生日</text><text>{{ birthdayText }}</text></view>
|
||||
<view><text>生日</text><text class="app-single-line">{{ birthdayText }}</text></view>
|
||||
</view>
|
||||
<view class="profile-metadata__item profile-metadata__item--email">
|
||||
<image
|
||||
@@ -91,7 +103,7 @@
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view>
|
||||
<view><text>邮箱</text><text class="app-long-value">{{ profile.email || "未设置" }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -145,6 +157,7 @@
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { onPageScroll, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import AppAvatar from "@/components/AppAvatar.vue";
|
||||
import AppButton from "@/components/AppButton.vue";
|
||||
import AppTabbar from "@/components/AppTabbar.vue";
|
||||
import {
|
||||
@@ -217,7 +230,10 @@ const serviceGroups = [
|
||||
},
|
||||
];
|
||||
|
||||
const sexText = computed(() => (profile.sex ? "待确认" : "未设置"));
|
||||
const sexText = computed(() => {
|
||||
const labels = { 0: "男", 1: "女", 2: "未知" };
|
||||
return labels[String(profile.sex)] || "未设置";
|
||||
});
|
||||
const birthdayText = computed(() =>
|
||||
/^\d{4}-\d{2}-\d{2}/.test(profile.birthday)
|
||||
? profile.birthday.slice(0, 10)
|
||||
@@ -257,9 +273,10 @@ onUnload(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
@import "../../styles/adaptive-frame-profiles.scss";
|
||||
|
||||
.profile-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 166rpx;
|
||||
@@ -274,22 +291,53 @@ onUnload(() => {
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 30;
|
||||
height: 88rpx;
|
||||
height: calc(104rpx + var(--status-bar-height, 0px));
|
||||
box-sizing: border-box;
|
||||
padding: 38rpx 48rpx 0;
|
||||
padding: calc(var(--status-bar-height, 0px) + 46rpx) 48rpx 0;
|
||||
background: linear-gradient(90deg, #6a1d17, #4e120f);
|
||||
box-shadow: 0 2rpx 12rpx rgba(58, 16, 12, 0.22);
|
||||
color: #f2d9a8;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-compact-header__brand-lockup {
|
||||
position: absolute;
|
||||
top: calc(var(--status-bar-height, 0px) + 8rpx);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7rpx;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-compact-header__brand-lockup image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.profile-compact-header__brand-lockup text {
|
||||
color: #f2d9a8;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: clamp(11px, 19rpx, 14px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-compact-header__title {
|
||||
display: block;
|
||||
color: #f2d9a8;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: clamp(16px, 28rpx, 20px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-state-card {
|
||||
@include adaptive.adaptive-profile-summary;
|
||||
@include adaptive-profile-summary;
|
||||
margin: 48rpx 30rpx;
|
||||
padding: 64rpx 44rpx;
|
||||
color: #382c25;
|
||||
@@ -298,18 +346,18 @@ onUnload(() => {
|
||||
|
||||
.profile-state-card text {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-size: clamp(16px, 26rpx, 20px);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.profile-state-card text + text {
|
||||
margin-top: 12rpx;
|
||||
color: #806e5d;
|
||||
font-size: 22rpx;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
|
||||
.profile-state-card .app-button {
|
||||
@include adaptive.adaptive-scroll-button(primary);
|
||||
@include adaptive-scroll-button(primary);
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
@@ -331,6 +379,7 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.profile-hero__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
@@ -338,6 +387,31 @@ onUnload(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__brand-lockup {
|
||||
position: absolute;
|
||||
top: calc(var(--status-bar-height, 0px) + 4rpx);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7rpx;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-hero__brand-lockup image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.profile-hero__brand-lockup text {
|
||||
color: #f2d9a8;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: clamp(11px, 19rpx, 14px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-hero__label {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -345,7 +419,7 @@ onUnload(() => {
|
||||
justify-content: space-between;
|
||||
color: #f0d6a4;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 54rpx;
|
||||
font-size: clamp(27px, 54rpx, 34px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 5rpx;
|
||||
line-height: 1;
|
||||
@@ -372,19 +446,27 @@ onUnload(() => {
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-top: 43rpx;
|
||||
margin-left: -30rpx;
|
||||
margin-left: -22rpx;
|
||||
column-gap: 20rpx;
|
||||
}
|
||||
|
||||
.profile-hero__emblem {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
display: block;
|
||||
width: 196rpx;
|
||||
height: 196rpx;
|
||||
flex: 0 0 auto;
|
||||
box-sizing: border-box;
|
||||
border: 4rpx solid #d8ad5d;
|
||||
border-radius: 50%;
|
||||
background: #fff7e6;
|
||||
box-shadow: 0 8rpx 18rpx rgba(44, 15, 12, 0.32);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-hero__copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
margin: 46rpx 0 0 -5rpx;
|
||||
margin: 40rpx 0 0;
|
||||
}
|
||||
|
||||
.profile-hero__copy text {
|
||||
@@ -395,24 +477,26 @@ onUnload(() => {
|
||||
.profile-hero__copy text:first-child {
|
||||
color: #fff2da;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 32rpx;
|
||||
font-size: clamp(17px, 32rpx, 22px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.profile-hero__copy text:nth-child(2) {
|
||||
margin-top: 14rpx;
|
||||
color: #ecd2a4;
|
||||
font-size: 27rpx;
|
||||
font-size: clamp(16px, 27rpx, 20px);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.profile-hero__copy text:last-child {
|
||||
margin-top: 18rpx;
|
||||
color: #e8bd78;
|
||||
font-size: 28rpx;
|
||||
font-size: clamp(16px, 28rpx, 20px);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
@@ -429,7 +513,7 @@ onUnload(() => {
|
||||
background: transparent url("/static/assets/modules/profile/transparent/m01-profile-edit-button-v2.png") center / 100% 100% no-repeat;
|
||||
box-shadow: none;
|
||||
color: #fff6e5;
|
||||
font-size: 22rpx;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
@@ -439,11 +523,11 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.profile-metadata {
|
||||
display: flex;
|
||||
min-height: 146rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
z-index: 1;
|
||||
margin: -36rpx 34rpx 0;
|
||||
padding: 5rpx 0;
|
||||
padding: 10rpx 12rpx 12rpx;
|
||||
border: 1rpx solid rgba(117, 83, 52, 0.09);
|
||||
border-radius: 18rpx;
|
||||
background: rgba(239, 234, 224, 0.92);
|
||||
@@ -452,31 +536,30 @@ onUnload(() => {
|
||||
.profile-metadata__item {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
border-right: 1rpx solid rgba(117, 83, 52, 0.16);
|
||||
}
|
||||
|
||||
.profile-metadata__item:last-child {
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
padding: 14rpx 12rpx;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.profile-metadata__item:first-child {
|
||||
border-right: 1rpx solid rgba(117, 83, 52, 0.16);
|
||||
}
|
||||
|
||||
.profile-metadata__item--email {
|
||||
flex: 2.3;
|
||||
grid-column: 1 / -1;
|
||||
border-top: 1rpx solid rgba(117, 83, 52, 0.16);
|
||||
}
|
||||
|
||||
.profile-metadata__icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
flex: 0 0 auto;
|
||||
filter: sepia(0.7) saturate(0.8) hue-rotate(330deg) brightness(0.82);
|
||||
transform: scale(2.1);
|
||||
}
|
||||
|
||||
.profile-metadata__item view {
|
||||
min-width: 0;
|
||||
transform: translateY(14rpx);
|
||||
}
|
||||
|
||||
.profile-metadata__item text {
|
||||
@@ -485,20 +568,20 @@ onUnload(() => {
|
||||
|
||||
.profile-metadata__item text:first-child {
|
||||
color: #857263;
|
||||
font-size: 20rpx;
|
||||
font-size: clamp(13px, 20rpx, 16px);
|
||||
}
|
||||
|
||||
.profile-metadata__item text:last-child {
|
||||
margin-top: 0;
|
||||
margin-top: 4rpx;
|
||||
color: #382c25;
|
||||
font-size: 24rpx;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.profile-metadata__item--email text:last-child {
|
||||
font-size: 13rpx;
|
||||
white-space: nowrap;
|
||||
font-size: clamp(13px, 20rpx, 16px);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.profile-services {
|
||||
@@ -514,7 +597,7 @@ onUnload(() => {
|
||||
align-items: center;
|
||||
color: #382c25;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 34rpx;
|
||||
font-size: clamp(19px, 34rpx, 24px);
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
@@ -587,7 +670,7 @@ onUnload(() => {
|
||||
}
|
||||
|
||||
.profile-service-row text {
|
||||
font-size: 32rpx;
|
||||
font-size: clamp(17px, 32rpx, 22px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user