修改未完成
This commit is contained in:
rain
+503
-151
@@ -1,70 +1,152 @@
|
||||
<!-- 页面编号：M-01；用途：个人中心，显示已核实的当前用户资料。 -->
|
||||
<!-- 页面编号：M-01；用途：个人中心，显示当前用户资料与服务入口。 -->
|
||||
<template>
|
||||
<view class="profile-page">
|
||||
<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-else-if="loadError" class="state-card">
|
||||
<text>个人资料暂时无法读取</text>
|
||||
<text>{{ loadError }}</text>
|
||||
<AppButton block label="重新读取" @click="loadProfile" />
|
||||
</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__identity">
|
||||
<text>{{ profile.nickName || "未设置昵称" }}</text>
|
||||
<text>{{ profile.realName || "未设置真实姓名" }}</text>
|
||||
<text>{{ profile.phone || "未提供手机号" }}</text>
|
||||
</view>
|
||||
<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>
|
||||
|
||||
<view class="profile-menu">
|
||||
<AppButton block label="账号与安全" @click="open('M03')" />
|
||||
<AppButton block label="消息中心" @click="open('N01')" />
|
||||
<AppButton block label="帮助中心" @click="open('M06')" />
|
||||
<AppButton block label="意见反馈" @click="open('M07')" />
|
||||
<AppButton block label="应用推广" @click="open('M08')" />
|
||||
<AppButton block label="VIP 服务" @click="open('M09')" />
|
||||
<AppButton block label="关于与设置" @click="open('M10')" />
|
||||
</view>
|
||||
</template>
|
||||
<view
|
||||
class="profile-page"
|
||||
:class="{
|
||||
'profile-state--ready': !loading && !loadError,
|
||||
'profile-state--error': Boolean(loadError),
|
||||
}"
|
||||
>
|
||||
<view v-if="compactHeader" class="profile-compact-header" aria-hidden="true">
|
||||
<text>我的</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="profile-state-card">
|
||||
<text>正在读取个人资料…</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError" class="profile-state-card">
|
||||
<text>个人资料暂时无法读取</text>
|
||||
<text>{{ loadError }}</text>
|
||||
<AppButton block label="重新读取" @click="loadProfile" />
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<view class="profile-hero">
|
||||
<image
|
||||
class="profile-hero__art"
|
||||
src="/static/assets/modules/profile/opaque/m01-profile-archive-hero-v2.png"
|
||||
mode="scaleToFill"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view class="profile-hero__content">
|
||||
<view class="profile-hero__label">
|
||||
<text>我的</text>
|
||||
<view
|
||||
class="profile-hero__setting"
|
||||
role="button"
|
||||
aria-label="关于与设置"
|
||||
@click="openSettings"
|
||||
><image
|
||||
class="profile-hero__setting-icon"
|
||||
src="/static/assets/modules/profile/transparent/m01-icon-settings.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/></view>
|
||||
</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__copy">
|
||||
<text>{{ profile.nickName || "未设置昵称" }}</text>
|
||||
<text>{{ profile.realName || "未设置真实姓名" }}</text>
|
||||
<text>{{ profile.phone || "未提供手机号" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
class="profile-hero__edit"
|
||||
@click="openEdit"
|
||||
>编辑资料</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-metadata" aria-label="个人资料摘要">
|
||||
<view class="profile-metadata__item">
|
||||
<image
|
||||
class="profile-metadata__icon"
|
||||
src="/static/assets/modules/profile/transparent/m01-icon-person.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view><text>性别</text><text>{{ sexText }}</text></view>
|
||||
</view>
|
||||
<view class="profile-metadata__item">
|
||||
<image
|
||||
class="profile-metadata__icon"
|
||||
src="/static/assets/modules/profile/transparent/m01-icon-calendar.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view><text>生日</text><text>{{ birthdayText }}</text></view>
|
||||
</view>
|
||||
<view class="profile-metadata__item profile-metadata__item--email">
|
||||
<image
|
||||
class="profile-metadata__icon"
|
||||
src="/static/assets/modules/profile/transparent/m01-icon-envelope.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view><text>邮箱</text><text>{{ profile.email || "未设置" }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-services">
|
||||
<view
|
||||
v-for="group in serviceGroups"
|
||||
:key="group.title"
|
||||
class="profile-service-group"
|
||||
>
|
||||
<view class="profile-section-title">
|
||||
<view class="profile-section-title__mark" aria-hidden="true"></view>
|
||||
<text>{{ group.title }}</text>
|
||||
</view>
|
||||
<view class="profile-service-list">
|
||||
<view
|
||||
v-for="item in group.items"
|
||||
:key="item.routeKey"
|
||||
class="profile-service-row"
|
||||
role="button"
|
||||
:aria-label="item.label"
|
||||
@click="openService(item)"
|
||||
>
|
||||
<view class="profile-service-row__leading">
|
||||
<image
|
||||
:class="[
|
||||
'profile-service-row__icon',
|
||||
`profile-service-row__icon--${item.routeKey.toLowerCase()}`,
|
||||
]"
|
||||
:src="item.icon"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<text>{{ item.label }}</text>
|
||||
</view>
|
||||
<image
|
||||
class="profile-service-row__chevron"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<AppTabbar active="profile" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import { onPageScroll, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
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,
|
||||
@@ -83,11 +165,59 @@ const profile = reactive({
|
||||
});
|
||||
const loading = ref(false);
|
||||
const loadError = ref("");
|
||||
const compactHeader = ref(false);
|
||||
const requestController = createRequestController();
|
||||
let pageActive = true;
|
||||
|
||||
const sexText = computed(() => (profile.sex ? "待确认" : "未设置"));
|
||||
const serviceGroups = [
|
||||
{
|
||||
title: "账户与服务",
|
||||
items: [
|
||||
{
|
||||
routeKey: "M03",
|
||||
label: "账号与安全",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-security.png",
|
||||
},
|
||||
{
|
||||
routeKey: "N01",
|
||||
label: "消息中心",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-message.png",
|
||||
},
|
||||
{
|
||||
routeKey: "M09",
|
||||
label: "VIP 服务",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-vip.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "支持与其他",
|
||||
items: [
|
||||
{
|
||||
routeKey: "M06",
|
||||
label: "帮助中心",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-help.png",
|
||||
},
|
||||
{
|
||||
routeKey: "M07",
|
||||
label: "意见反馈",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-feedback.png",
|
||||
},
|
||||
{
|
||||
routeKey: "M08",
|
||||
label: "应用推广",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-promotion.png",
|
||||
},
|
||||
{
|
||||
routeKey: "M10",
|
||||
label: "关于与设置",
|
||||
icon: "/static/assets/modules/profile/transparent/m01-icon-settings.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const sexText = computed(() => (profile.sex ? "待确认" : "未设置"));
|
||||
const birthdayText = computed(() =>
|
||||
/^\d{4}-\d{2}-\d{2}/.test(profile.birthday)
|
||||
? profile.birthday.slice(0, 10)
|
||||
@@ -111,143 +241,365 @@ const loadProfile = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const open = (route) => openPage(route, {}, "M01");
|
||||
const openEdit = () => open("M02");
|
||||
const openService = (item) => openPage(item.routeKey, {}, "M01");
|
||||
const openEdit = () => openPage("M02", {}, "M01");
|
||||
const openSettings = () => openPage("M10", {}, "M01");
|
||||
|
||||
onShow(loadProfile);
|
||||
onPageScroll(({ scrollTop = 0 }) => {
|
||||
compactHeader.value = scrollTop > 44;
|
||||
});
|
||||
onUnload(() => {
|
||||
pageActive = false;
|
||||
compactHeader.value = false;
|
||||
requestController.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||||
|
||||
.profile-page {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
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 {
|
||||
padding-bottom: 166rpx;
|
||||
box-sizing: border-box;
|
||||
min-height: 340rpx;
|
||||
padding: 78rpx 52rpx 50rpx;
|
||||
overflow-x: hidden;
|
||||
background: #f3eee5 url("/static/assets/modules/profile/opaque/m01-profile-paper-mountains-v1.png") center 360rpx / 100% auto no-repeat;
|
||||
}
|
||||
|
||||
.profile-compact-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 30;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 38rpx 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-state-card {
|
||||
@include adaptive.adaptive-profile-summary;
|
||||
margin: 48rpx 30rpx;
|
||||
padding: 64rpx 44rpx;
|
||||
color: #382c25;
|
||||
text-align: center;
|
||||
}
|
||||
.state-card text {
|
||||
|
||||
.profile-state-card text {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.state-card text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 35rpx;
|
||||
font-weight: 700;
|
||||
|
||||
.profile-state-card text + text {
|
||||
margin-top: 12rpx;
|
||||
color: #806e5d;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.state-card text:nth-child(2) {
|
||||
margin-top: 18rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.state-card .app-button {
|
||||
|
||||
.profile-state-card .app-button {
|
||||
@include adaptive.adaptive-scroll-button(primary);
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
.profile-summary {
|
||||
|
||||
.profile-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 96rpx minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
height: 503rpx;
|
||||
}
|
||||
.profile-summary__avatar {
|
||||
|
||||
.profile-hero__art,
|
||||
.profile-hero__content {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
.profile-hero__art {
|
||||
width: 100%;
|
||||
height: 480rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-hero__content {
|
||||
display: flex;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
padding: 100rpx 56rpx 50rpx 54rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__label {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #f0d6a4;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
font-size: 54rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 5rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-hero__setting {
|
||||
display: flex;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
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-hero__setting-icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
filter: grayscale(1) sepia(0.9) saturate(1.6) hue-rotate(348deg) brightness(1.35);
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.profile-summary__identity {
|
||||
|
||||
.profile-hero__identity {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-top: 43rpx;
|
||||
margin-left: -30rpx;
|
||||
}
|
||||
.profile-summary__identity text {
|
||||
|
||||
.profile-hero__emblem {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.profile-hero__copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
margin: 46rpx 0 0 -5rpx;
|
||||
}
|
||||
|
||||
.profile-hero__copy text {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.profile-summary__identity text:first-child {
|
||||
color: $ink;
|
||||
font-family: STKaiti, KaiTi, serif;
|
||||
|
||||
.profile-hero__copy text:first-child {
|
||||
color: #fff2da;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.profile-summary__identity text:nth-child(2),
|
||||
.profile-summary__identity text:last-child {
|
||||
margin-top: 5rpx;
|
||||
color: $ink-muted;
|
||||
font-size: 21rpx;
|
||||
|
||||
.profile-hero__copy text:nth-child(2) {
|
||||
margin-top: 14rpx;
|
||||
color: #ecd2a4;
|
||||
font-size: 27rpx;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.profile-summary__edit {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.profile-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.profile-hero__copy text:last-child {
|
||||
margin-top: 18rpx;
|
||||
padding: 8rpx 30rpx;
|
||||
color: #e8bd78;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.profile-field {
|
||||
|
||||
.profile-hero__edit {
|
||||
position: absolute;
|
||||
top: 337rpx;
|
||||
right: 61rpx;
|
||||
width: 154rpx;
|
||||
min-height: 52rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
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-weight: 700;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.profile-hero__edit::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.profile-metadata {
|
||||
display: flex;
|
||||
min-height: 82rpx;
|
||||
min-height: 146rpx;
|
||||
z-index: 1;
|
||||
margin: -36rpx 34rpx 0;
|
||||
padding: 5rpx 0;
|
||||
border: 1rpx solid rgba(117, 83, 52, 0.09);
|
||||
border-radius: 18rpx;
|
||||
background: rgba(239, 234, 224, 0.92);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.profile-metadata__item--email {
|
||||
flex: 2.3;
|
||||
}
|
||||
|
||||
.profile-metadata__icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
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 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.profile-metadata__item text:first-child {
|
||||
color: #857263;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.profile-metadata__item text:last-child {
|
||||
margin-top: 0;
|
||||
color: #382c25;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.25;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.profile-metadata__item--email text:last-child {
|
||||
font-size: 13rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-services {
|
||||
margin: 49rpx 58rpx 0 48rpx;
|
||||
}
|
||||
|
||||
.profile-service-group + .profile-service-group {
|
||||
margin-top: 51rpx;
|
||||
}
|
||||
|
||||
.profile-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #382c25;
|
||||
font-family: STSong, SimSun, serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.profile-section-title__mark {
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #8d2722;
|
||||
pointer-events: none;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.profile-service-list {
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.profile-service-row {
|
||||
display: flex;
|
||||
min-height: 96rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
border-bottom: 1rpx solid rgba(181, 137, 63, 0.3);
|
||||
gap: 24rpx;
|
||||
border-bottom: 1rpx solid rgba(112, 85, 61, 0.2);
|
||||
color: #45362d;
|
||||
}
|
||||
.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 {
|
||||
|
||||
.profile-service-row__leading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
color: $ink-muted;
|
||||
font-size: 22rpx;
|
||||
overflow-wrap: anywhere;
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
padding-left: 7rpx;
|
||||
}
|
||||
.profile-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.profile-service-row__icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
flex: 0 0 auto;
|
||||
transform: translate(7rpx, 0) scale(1.8);
|
||||
}
|
||||
.profile-menu .app-button {
|
||||
margin: 0;
|
||||
|
||||
.profile-service-row__icon--m03 {
|
||||
transform: translate(9rpx, -9rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row__icon--n01 {
|
||||
transform: translate(10rpx, -10rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row__icon--m09 {
|
||||
transform: translate(-5rpx, 5rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row__icon--m06 {
|
||||
transform: translate(-3rpx, 7rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row__icon--m07 {
|
||||
transform: translate(4rpx, 8rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row__icon--m08 {
|
||||
transform: translate(11rpx, 7rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row__icon--m10 {
|
||||
transform: translate(9rpx, 7rpx) scale(1.8);
|
||||
}
|
||||
|
||||
.profile-service-row text {
|
||||
font-size: 32rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.profile-service-row__chevron {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
flex: 0 0 auto;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.profile-service-row:active {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user