richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 支持馆主个人信息编辑

Browse Source
This commit is contained in:
richarjiang
2026-10-25 15:21:27 +08:00
parent 819367178a
commit 4ca32c22f9
19 changed files with 556 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/app/src/components/OwnerIntroduction.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<view class="owner-content">
<view v-if="introduction" class="owner-panel owner-panel--intro">
<text class="eyebrow">ABOUT ME</text>
<text class="panel-title">个人介绍</text>
<view class="intro-rule" />
<text class="introduction">{{ introduction }}</text>
</view>
<view v-if="certifications.length" class="owner-panel owner-panel--credentials">
<view class="credentials-head">
<view>
<text class="eyebrow">CREDENTIALS</text>
<text class="panel-title">专业认证</text>
</view>
<text class="credential-count">{{ certifications.length }} 项</text>
</view>
<view v-for="(item, index) in certifications" :key="index" class="credential-row">
<text class="credential-number">{{ String(index + 1).padStart(2, '0') }}</text>
<text class="credential-text">{{ item }}</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
defineProps<{ introduction: string; certifications: readonly string[] }>()
</script>
<style lang="scss" scoped>
.owner-panel { margin-bottom: 20rpx; padding: 34rpx 30rpx; border: 1rpx solid #e7e2d8; border-radius: 24rpx; background: #fffdf9; animation: owner-reveal 480ms ease-out both; }
.owner-panel--credentials { animation-delay: 90ms; }
.eyebrow { display: block; margin-bottom: 12rpx; color: #92957f; font-size: 18rpx; letter-spacing: 4rpx; }
.panel-title { display: block; font-family: 'Songti SC', 'STSong', serif; font-size: 34rpx; font-weight: 500; color: #434c3d; }
.intro-rule { width: 40rpx; height: 3rpx; margin: 24rpx 0; background: #9da88d; }
.introduction { display: block; color: #655f53; font-size: 27rpx; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.credentials-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14rpx; }
.credential-count { padding: 8rpx 16rpx; border-radius: 999rpx; color: #78856a; background: #f0f2e9; font-size: 21rpx; }
.credential-row { display: flex; align-items: flex-start; gap: 22rpx; padding: 24rpx 0; border-bottom: 1rpx solid #efebe3; }
.credential-row:last-child { padding-bottom: 0; border-bottom: 0; }
.credential-number { flex-shrink: 0; padding-top: 4rpx; font-family: Georgia, serif; font-size: 26rpx; color: #9aa58d; }
.credential-text { flex: 1; min-width: 0; font-size: 26rpx; line-height: 1.8; color: #625e51; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
@keyframes owner-reveal { from { opacity: 0; transform: translateY(14rpx); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .owner-panel { animation: none; } }
</style>