修改部分样式

2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
@@ -2,21 +2,40 @@
 <template>
  <view class="security-page">
    <ModulePageBackground module="profile" />
-    <view class="page-header"><PageHeader title="账号与安全" custom-back @back="backToProfile" /></view>
+    <view class="page-header"
+      ><PageHeader title="账号与安全" custom-back @back="backToProfile"
+    /></view>
    <view class="page-content">
-      <view v-if="loading" class="state-card"><AppLoading text="正在读取账号安全资料" /></view>
+      <view v-if="loading" class="state-card"
+        ><AppLoading text="正在读取账号安全资料"
+      /></view>
      <view v-else-if="loadError" class="state-card">
        <text>账号安全资料暂时无法读取</text><text>{{ loadError }}</text>
        <AppButton block label="重新读取" @click="loadProfile" />
      </view>
      <view v-else class="security-card">
        <text class="security-card__title">当前账号安全概览</text>
-        <view class="security-field"><text>绑定手机号</text><text>{{ maskedPhone }}</text></view>
-        <view class="security-field"><text>账号编号</text><text>{{ profile.userNo || "未提供" }}</text></view>
-        <view class="security-field"><text>账号状态</text><text>{{ profile.status || "未提供" }}</text></view>
-        <text class="security-note">当前仅展示可确认的账户信息，其他安全记录暂不可查看。</text>
+        <view class="security-field"
+          ><text>绑定手机号</text><text>{{ maskedPhone }}</text></view
+        >
+        <view class="security-field"
+          ><text>账号编号</text
+          ><text>{{ profile.userNo || "未提供" }}</text></view
+        >
+        <view class="security-field"
+          ><text>账号状态</text
+          ><text>{{ profile.status || "未提供" }}</text></view
+        >
+        <text class="security-note"
+          >当前仅展示可确认的账户信息，其他安全记录暂不可查看。</text
+        >
        <AppButton block label="修改密码" @click="openPassword" />
-        <AppButton type="secondary" block label="换绑手机号" @click="openPhone" />
+        <AppButton
+          type="secondary"
+          block
+          label="换绑手机号"
+          @click="openPhone"
+        />
      </view>
    </view>
  </view>
@@ -29,7 +48,11 @@ import AppButton from "@/components/AppButton.vue";
 import AppLoading from "@/components/AppLoading.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, returnTo } from "@/utils/navigation.js";

 const profile = reactive({ phone: "", userNo: "", status: "" });
@@ -37,9 +60,11 @@ const loading = ref(false);
 const loadError = ref("");
 const controller = createRequestController();
 let pageActive = true;
-const maskedPhone = computed(() => /^\d{7,}$/.test(profile.phone)
-  ? `${profile.phone.slice(0, 3)}****${profile.phone.slice(-4)}`
-  : "未提供");
+const maskedPhone = computed(() =>
+  /^\d{7,}$/.test(profile.phone)
+    ? `${profile.phone.slice(0, 3)}****${profile.phone.slice(-4)}`
+    : "未提供",
+);

 const loadProfile = async () => {
  if (loading.value) return;
@@ -49,7 +74,8 @@ const loadProfile = async () => {
    const data = await appApi.getProfile({ requestController: controller });
    if (pageActive) Object.assign(profile, data);
  } catch (error) {
-    if (pageActive && !isRequestCancelled(error)) loadError.value = error?.message || "请稍后重试";
+    if (pageActive && !isRequestCancelled(error))
+      loadError.value = error?.message || "请稍后重试";
  } finally {
    if (pageActive) loading.value = false;
  }
@@ -58,18 +84,86 @@ const backToProfile = () => returnTo("M01");
 const openPassword = () => openPage("M04", {}, "M03");
 const openPhone = () => openPage("M05", {}, "M03");
 onShow(loadProfile);
-onUnload(() => { pageActive = false; controller.abort(); });
+onUnload(() => {
+  pageActive = false;
+  controller.abort();
+});
 </script>

 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.security-page { display:flex; min-height:100vh; flex-direction:column; background:$paper; }
-.page-header,.page-content { z-index:1; }.page-content { padding:18rpx 24rpx 72rpx; }
-.state-card,.security-card { box-sizing:border-box; min-height:340rpx; padding:54rpx 42rpx 44rpx; @include adaptive.adaptive-family-content; }
-.state-card { text-align:center; }.state-card text,.security-card text { display:block; }
-.state-card text:first-child,.security-card__title { 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; }
-.security-field { display:flex; min-height:82rpx; align-items:center; justify-content:space-between; gap:20rpx; border-bottom:1rpx solid rgba(181,137,63,.3); }
-.security-field:first-of-type { margin-top:24rpx; }.security-field text:first-child { color:$ink; font-size:24rpx; font-weight:700; }.security-field text:last-child { color:$ink-muted; font-size:22rpx; text-align:right; overflow-wrap:anywhere; }
-.security-note { margin-top:22rpx; color:$ink-muted; font-size:22rpx; line-height:1.6; }.security-card .app-button { margin-top:20rpx; }
+.security-page {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background: $paper;
+}
+.page-header,
+.page-content {
+  z-index: 1;
+}
+.page-content {
+  padding: 18rpx 24rpx 72rpx;
+}
+.state-card,
+.security-card {
+  box-sizing: border-box;
+  min-height: 340rpx;
+  padding: 54rpx 42rpx 44rpx;
+  @include adaptive.adaptive-family-content;
+}
+.state-card {
+  text-align: center;
+}
+.state-card text,
+.security-card text {
+  display: block;
+}
+.state-card text:first-child,
+.security-card__title {
+  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;
+}
+.security-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);
+}
+.security-field:first-of-type {
+  margin-top: 24rpx;
+}
+.security-field text:first-child {
+  color: $ink;
+  font-size: 24rpx;
+  font-weight: 700;
+}
+.security-field text:last-child {
+  color: $ink-muted;
+  font-size: 22rpx;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+.security-note {
+  margin-top: 22rpx;
+  color: $ink-muted;
+  font-size: 22rpx;
+  line-height: 1.6;
+}
+.security-card .app-button {
+  margin-top: 20rpx;
+}
 </style>