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

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/profile/m01-profile-home.vue
+168 -33
View File
@@ -4,7 +4,9 @@
<ModulePageBackground module="profile" />
<view class="page-header"><PageHeader root title="我的" /></view>
<view class="page-content">
<view v-if="loading" class="state-card"><text>正在读取个人资料…</text></view>
<view v-if="loading" class="state-card"
><text>正在读取个人资料…</text></view
>
<view v-else-if="loadError" class="state-card">
<text>个人资料暂时无法读取</text>
<text>{{ loadError }}</text>
@@ -12,19 +14,33 @@
</view>
<template v-else>
<view class="profile-summary">
<view class="profile-summary__avatar"><image src="/static/assets/foundation/transparent/auth-login-outline.png" mode="aspectFit" /></view>
<view class="profile-summary__avatar"
><image
src="/static/assets/foundation/transparent/auth-login-outline.png"
mode="aspectFit"
/></view>
<view class="profile-summary__identity">
<text>{{ profile.nickName || "未设置昵称" }}</text>
<text>{{ profile.realName || "未设置真实姓名" }}</text>
<text>{{ profile.phone || "未提供手机号" }}</text>
</view>
<AppButton class="profile-summary__edit" label="编辑资料" @click="openEdit" />
<AppButton
class="profile-summary__edit"
label="编辑资料"
@click="openEdit"
/>
</view>
<view class="profile-fields">
<view class="profile-field"><text>性别</text><text>{{ sexText }}</text></view>
<view class="profile-field"><text>生日</text><text>{{ birthdayText }}</text></view>
<view class="profile-field"><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view>
<view class="profile-field"
><text>性别</text><text>{{ sexText }}</text></view
>
<view class="profile-field"
><text>生日</text><text>{{ birthdayText }}</text></view
>
<view class="profile-field"
><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view
>
</view>
<view class="profile-menu">
@@ -49,10 +65,22 @@ import AppButton from "@/components/AppButton.vue";
import AppTabbar from "@/components/AppTabbar.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
import {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import { openPage } from "@/utils/navigation.js";
const profile = reactive({ avatar: null, nickName: "", realName: "", phone: "", sex: "", birthday: "", email: "" });
const profile = reactive({
avatar: null,
nickName: "",
realName: "",
phone: "",
sex: "",
birthday: "",
email: "",
});
const loading = ref(false);
const loadError = ref("");
const requestController = createRequestController();
@@ -60,7 +88,11 @@ let pageActive = true;
const sexText = computed(() => (profile.sex ? "待确认" : "未设置"));
const birthdayText = computed(() => /^\d{4}-\d{2}-\d{2}/.test(profile.birthday) ? profile.birthday.slice(0, 10) : "未设置");
const birthdayText = computed(() =>
/^\d{4}-\d{2}-\d{2}/.test(profile.birthday)
? profile.birthday.slice(0, 10)
: "未设置",
);
const loadProfile = async () => {
if (loading.value) return;
@@ -91,28 +123,131 @@ onUnload(() => {
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.profile-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.page-header, .page-content { z-index: 1; }
.page-content { flex: 1; padding: 18rpx 24rpx 190rpx; }
.state-card, .profile-summary, .profile-fields { @include adaptive.adaptive-family-content; }
.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
.state-card text { display: block; }
.state-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
.state-card .app-button { margin-top: 28rpx; }
.profile-summary { display: grid; grid-template-columns: 96rpx minmax(0, 1fr); align-items: center; gap: 18rpx; padding: 30rpx; }
.profile-summary__avatar { display: flex; width: 96rpx; height: 96rpx; align-items: center; justify-content: center; border: 1rpx solid rgba(159, 23, 15, .32); border-radius: 50%; background: rgba(159, 23, 15, .06); }
.profile-summary__avatar image { width: 64rpx; height: 64rpx; opacity: .8; }
.profile-summary__identity { min-width: 0; }
.profile-summary__identity text { display: block; overflow-wrap: anywhere; }
.profile-summary__identity text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 32rpx; font-weight: 700; }
.profile-summary__identity text:nth-child(2), .profile-summary__identity text:last-child { margin-top: 5rpx; color: $ink-muted; font-size: 21rpx; }
.profile-summary__edit { grid-column: 1 / -1; margin-top: 6rpx; }
.profile-fields { display: flex; flex-direction: column; margin-top: 18rpx; padding: 8rpx 30rpx; }
.profile-field { display: flex; min-height: 82rpx; align-items: center; justify-content: space-between; gap: 20rpx; border-bottom: 1rpx solid rgba(181, 137, 63, .3); }
.profile-field:last-child { border-bottom: 0; }
.profile-field text:first-child { flex: 0 0 auto; color: $ink; font-size: 24rpx; font-weight: 700; }
.profile-field text:last-child { min-width: 0; color: $ink-muted; font-size: 22rpx; overflow-wrap: anywhere; text-align: right; }
.profile-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14rpx; margin-top: 24rpx; }
.profile-menu .app-button { margin: 0; }
.profile-page {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $paper;
}
.page-header,
.page-content {
z-index: 1;
}
.page-content {
flex: 1;
padding: 18rpx 24rpx 190rpx;
}
.state-card,
.profile-summary,
.profile-fields {
@include adaptive.adaptive-family-content;
}
.state-card {
box-sizing: border-box;
min-height: 340rpx;
padding: 78rpx 52rpx 50rpx;
text-align: center;
}
.state-card text {
display: block;
}
.state-card text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-weight: 700;
}
.state-card text:nth-child(2) {
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.65;
}
.state-card .app-button {
margin-top: 28rpx;
}
.profile-summary {
display: grid;
grid-template-columns: 96rpx minmax(0, 1fr);
align-items: center;
gap: 18rpx;
padding: 30rpx;
}
.profile-summary__avatar {
display: flex;
width: 96rpx;
height: 96rpx;
align-items: center;
justify-content: center;
border: 1rpx solid rgba(159, 23, 15, 0.32);
border-radius: 50%;
background: rgba(159, 23, 15, 0.06);
}
.profile-summary__avatar image {
width: 64rpx;
height: 64rpx;
opacity: 0.8;
}
.profile-summary__identity {
min-width: 0;
}
.profile-summary__identity text {
display: block;
overflow-wrap: anywhere;
}
.profile-summary__identity text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 32rpx;
font-weight: 700;
}
.profile-summary__identity text:nth-child(2),
.profile-summary__identity text:last-child {
margin-top: 5rpx;
color: $ink-muted;
font-size: 21rpx;
}
.profile-summary__edit {
grid-column: 1 / -1;
margin-top: 6rpx;
}
.profile-fields {
display: flex;
flex-direction: column;
margin-top: 18rpx;
padding: 8rpx 30rpx;
}
.profile-field {
display: flex;
min-height: 82rpx;
align-items: center;
justify-content: space-between;
gap: 20rpx;
border-bottom: 1rpx solid rgba(181, 137, 63, 0.3);
}
.profile-field:last-child {
border-bottom: 0;
}
.profile-field text:first-child {
flex: 0 0 auto;
color: $ink;
font-size: 24rpx;
font-weight: 700;
}
.profile-field text:last-child {
min-width: 0;
color: $ink-muted;
font-size: 22rpx;
overflow-wrap: anywhere;
text-align: right;
}
.profile-menu {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14rpx;
margin-top: 24rpx;
}
.profile-menu .app-button {
margin: 0;
}
</style>