feat: 优化管理后台页面UI、修复TS编译错误、新增人生事件模块
- 优化 AI 配置列表页面：重构统计卡片、搜索表单、表格列展示 - 修复 3 处 TypeScript TS6133 编译错误，恢复构建 - 新增管理员修改密码和重置密码功能 - 优化小程序多个页面样式和交互 - 人生事件模块完善 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -5,92 +5,133 @@
|
||||
|
||||
<view class="topbar">
|
||||
<text class="back" @click="goBack">‹</text>
|
||||
<text class="title">{{ isEdit ? '编辑资料' : '初始化档案' }} ✦</text>
|
||||
<text class="title">编辑资料 <text class="gold">✦</text></text>
|
||||
<text class="save" @click="saveProfile">保存</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="scroll" scroll-y :show-scrollbar="false">
|
||||
<view class="hero-card kos-card">
|
||||
<view class="avatar">{{ avatarText }}</view>
|
||||
<view class="hero-card glass-card">
|
||||
<view class="avatar-wrap">
|
||||
<image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
|
||||
<view class="avatar-edit" @click="chooseAvatar">
|
||||
<view class="pen-icon"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hero-info">
|
||||
<text class="hero-name">{{ form.nickname || 'Zoey' }} ✦</text>
|
||||
<view class="hero-name-row">
|
||||
<text class="hero-name">{{ form.nickname || 'Zoey' }}</text>
|
||||
<text class="gold hero-star">✦</text>
|
||||
</view>
|
||||
<text class="hero-sub">正在成为更清晰的自己</text>
|
||||
<text class="quote">生活是自己的，选择也是。</text>
|
||||
<view class="hero-line"></view>
|
||||
<text class="hero-quote">生活是自己的，选择也是。”</text>
|
||||
</view>
|
||||
<view class="hero-planet">
|
||||
<view class="planet-core"></view>
|
||||
<view class="planet-ring"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel kos-card">
|
||||
<view class="panel-title">基础信息</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">昵称</text>
|
||||
<input class="line-input" v-model="form.nickname" placeholder="输入你的昵称" placeholder-class="placeholder" />
|
||||
<view class="panel glass-card">
|
||||
<view class="section-head">
|
||||
<view class="section-icon basic-icon"></view>
|
||||
<text class="section-title">基础信息</text>
|
||||
</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">性别</text>
|
||||
<view class="profile-row">
|
||||
<text class="row-label">昵称</text>
|
||||
<input class="row-input" v-model="form.nickname" placeholder="输入昵称" placeholder-class="placeholder" />
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
<view class="profile-row">
|
||||
<text class="row-label">性别</text>
|
||||
<view class="gender-row">
|
||||
<text v-for="item in genderOptions" :key="item" class="choice" :class="{ active: form.gender === item }" @click="form.gender = item">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">生日</text>
|
||||
<picker mode="date" :value="birthday" @change="onBirthday">
|
||||
<view class="line-value">{{ birthday || '选择生日' }} ›</view>
|
||||
<view class="profile-row">
|
||||
<text class="row-label">生日</text>
|
||||
<picker class="row-picker" mode="date" :value="birthday" @change="onBirthday">
|
||||
<view class="row-value">{{ birthdayDisplay }}</view>
|
||||
</picker>
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">所在城市</text>
|
||||
<input class="line-input" v-model="form.city" placeholder="填写城市" placeholder-class="placeholder" />
|
||||
<view class="profile-row">
|
||||
<text class="row-label">所在城市</text>
|
||||
<input class="row-input" v-model="form.city" placeholder="填写城市" placeholder-class="placeholder" />
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="dual-panel kos-card">
|
||||
<view class="select-block">
|
||||
<view class="block-title">星座</view>
|
||||
<view class="zodiac-grid">
|
||||
<view
|
||||
v-for="item in zodiacOptions"
|
||||
:key="item.name"
|
||||
class="zodiac-item"
|
||||
:class="{ active: form.zodiac === item.name }"
|
||||
@click="form.zodiac = item.name"
|
||||
>
|
||||
<text class="zodiac-symbol">{{ item.symbol }}</text>
|
||||
<text>{{ item.name }}</text>
|
||||
<view class="astro-panel">
|
||||
<view class="astro-col">
|
||||
<view class="astro-title-row">
|
||||
<view class="zodiac-head-icon">♋</view>
|
||||
<text class="astro-title">星座</text>
|
||||
<text class="astro-current">{{ form.zodiac || '巨蟹座' }}</text>
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
<text class="select-title">选择星座</text>
|
||||
<view class="zodiac-grid">
|
||||
<view
|
||||
v-for="item in zodiacOptions"
|
||||
:key="item.name"
|
||||
class="zodiac-item"
|
||||
:class="{ active: form.zodiac === item.name }"
|
||||
@click="form.zodiac = item.name"
|
||||
>
|
||||
<view class="zodiac-bubble">{{ item.symbol }}</view>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="astro-col mbti-col">
|
||||
<view class="astro-title-row">
|
||||
<view class="mbti-head-icon"></view>
|
||||
<text class="astro-title">MBTI</text>
|
||||
<text class="astro-current">{{ form.mbti || 'ENTJ' }}</text>
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
<text class="select-title">选择MBTI</text>
|
||||
<view class="mbti-grid">
|
||||
<text
|
||||
v-for="item in mbtiOptions"
|
||||
:key="item"
|
||||
class="mbti-chip"
|
||||
:class="{ active: form.mbti === item }"
|
||||
@click="form.mbti = item"
|
||||
>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-block mbti-block">
|
||||
<view class="block-title">MBTI</view>
|
||||
<view class="mbti-grid">
|
||||
<text
|
||||
v-for="item in mbtiOptions"
|
||||
:key="item"
|
||||
class="mbti-chip"
|
||||
:class="{ active: form.mbti === item }"
|
||||
@click="form.mbti = item"
|
||||
>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel glass-card">
|
||||
<view class="section-head">
|
||||
<view class="section-icon job-title-icon"></view>
|
||||
<text class="section-title">职业信息</text>
|
||||
</view>
|
||||
<view class="profile-row">
|
||||
<text class="row-label">职业</text>
|
||||
<input class="row-input" v-model="form.profession" placeholder="产品经理" placeholder-class="placeholder" />
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
<view class="profile-row">
|
||||
<text class="row-label">行业</text>
|
||||
<input class="row-input" v-model="form.industry" placeholder="互联网" placeholder-class="placeholder" />
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
<view class="profile-row">
|
||||
<text class="row-label">公司（可选）</text>
|
||||
<input class="row-input muted" v-model="form.company" placeholder="填写公司名称" placeholder-class="placeholder" />
|
||||
<text class="chevron">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel kos-card">
|
||||
<view class="panel-title">职业信息</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">职业</text>
|
||||
<input class="line-input" v-model="form.profession" placeholder="产品经理" placeholder-class="placeholder" />
|
||||
<view class="panel glass-card">
|
||||
<view class="section-head">
|
||||
<view class="section-icon smile-title-icon"></view>
|
||||
<text class="section-title">性格标签</text>
|
||||
<text class="section-hint">（最多选择5个）</text>
|
||||
</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">行业</text>
|
||||
<input class="line-input" v-model="form.industry" placeholder="互联网" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="line-field">
|
||||
<text class="field-label">公司（可选）</text>
|
||||
<input class="line-input" v-model="form.company" placeholder="填写公司名称" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel kos-card">
|
||||
<view class="panel-title">性格标签（最多选择5个）</view>
|
||||
<view class="tag-grid">
|
||||
<text
|
||||
v-for="tag in personalityTags"
|
||||
@@ -103,10 +144,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel kos-card">
|
||||
<view class="panel-head">
|
||||
<text class="panel-title">兴趣爱好（最多选择5个）</text>
|
||||
<text class="custom">＋ 自定义兴趣</text>
|
||||
<view class="panel glass-card">
|
||||
<view class="section-head with-action">
|
||||
<view class="section-title-wrap">
|
||||
<view class="section-icon heart-title-icon"></view>
|
||||
<text class="section-title">兴趣爱好</text>
|
||||
<text class="section-hint">（最多选择5个）</text>
|
||||
</view>
|
||||
<text class="custom" @click="addCustomHobby">＋ 自定义兴趣</text>
|
||||
</view>
|
||||
<view class="tag-grid">
|
||||
<text
|
||||
@@ -119,18 +164,21 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel kos-card">
|
||||
<view class="panel-title">个人简介</view>
|
||||
<textarea class="bio" v-model="form.future.ideal" maxlength="200" placeholder="热爱阅读和旅行，喜欢用文字和镜头记录生活。相信真诚和努力能让世界变得更美好。" placeholder-class="placeholder" />
|
||||
<view class="panel glass-card bio-panel">
|
||||
<view class="section-head">
|
||||
<view class="section-icon bio-title-icon"></view>
|
||||
<text class="section-title">个人简介</text>
|
||||
</view>
|
||||
<textarea
|
||||
class="bio"
|
||||
v-model="form.future.ideal"
|
||||
maxlength="200"
|
||||
:placeholder="bioPlaceholder"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<text class="bio-count">{{ (form.future.ideal || '').length }}/200</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-bar">
|
||||
<button class="submit kos-primary" :loading="saving" :disabled="saving || !form.nickname.trim()" @click="saveProfile">
|
||||
{{ saving ? '正在保存' : '保存生命档案' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -143,12 +191,23 @@ const statusBarHeight = ref(20)
|
||||
const isEdit = ref(false)
|
||||
const saving = ref(false)
|
||||
const birthday = ref('')
|
||||
const avatarLocal = ref('')
|
||||
const bioPlaceholder = '热爱阅读和旅行，喜欢用文字和镜头记录生活。\n相信真诚和努力能让世界变得更美好。'
|
||||
|
||||
const genderOptions = ['女', '男', '不透露']
|
||||
const zodiacOptions = [
|
||||
{ name: '白羊座', symbol: '♈' }, { name: '金牛座', symbol: '♉' }, { name: '双子座', symbol: '♊' }, { name: '巨蟹座', symbol: '♋' },
|
||||
{ name: '狮子座', symbol: '♌' }, { name: '处女座', symbol: '♍' }, { name: '天秤座', symbol: '♎' }, { name: '天蝎座', symbol: '♏' },
|
||||
{ name: '射手座', symbol: '♐' }, { name: '摩羯座', symbol: '♑' }, { name: '水瓶座', symbol: '♒' }, { name: '双鱼座', symbol: '♓' }
|
||||
{ name: '白羊座', symbol: '♈' },
|
||||
{ name: '金牛座', symbol: '♉' },
|
||||
{ name: '双子座', symbol: '♊' },
|
||||
{ name: '巨蟹座', symbol: '♋' },
|
||||
{ name: '狮子座', symbol: '♌' },
|
||||
{ name: '处女座', symbol: '♍' },
|
||||
{ name: '天秤座', symbol: '♎' },
|
||||
{ name: '天蝎座', symbol: '♏' },
|
||||
{ name: '射手座', symbol: '♐' },
|
||||
{ name: '摩羯座', symbol: '♑' },
|
||||
{ name: '水瓶座', symbol: '♒' },
|
||||
{ name: '双鱼座', symbol: '♓' }
|
||||
]
|
||||
const mbtiOptions = ['INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP']
|
||||
const personalityTags = ['理性', '感性', '乐观', '独立', '有创造力', '坚韧', '细腻', '好奇', '内敛', '冒险', '自由']
|
||||
@@ -171,27 +230,37 @@ const form = reactive({
|
||||
future: { vision: '', ideal: '' }
|
||||
})
|
||||
|
||||
const avatarText = computed(() => (form.nickname || 'Z').slice(0, 1))
|
||||
const avatarUrl = computed(() => {
|
||||
if (avatarLocal.value) return avatarLocal.value
|
||||
const nickname = form.nickname || 'Zoey'
|
||||
return `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(nickname)}&backgroundColor=b982ff`
|
||||
})
|
||||
|
||||
const birthdayDisplay = computed(() => {
|
||||
if (!birthday.value) return '1998年06月18日'
|
||||
const [year, month, day] = birthday.value.split('-')
|
||||
return `${year}年${month}月${day}日`
|
||||
})
|
||||
|
||||
const syncFromStore = () => {
|
||||
const source = store.userProfile || store.registrationData || {}
|
||||
Object.assign(form, {
|
||||
nickname: source.nickname || '',
|
||||
gender: source.gender || '',
|
||||
zodiac: source.zodiac || '',
|
||||
mbti: source.mbti || '',
|
||||
profession: source.profession || '',
|
||||
city: source.city || '',
|
||||
industry: source.industry || '',
|
||||
gender: source.gender || '女',
|
||||
zodiac: source.zodiac || '巨蟹座',
|
||||
mbti: source.mbti || 'ENTJ',
|
||||
profession: source.profession || '产品经理',
|
||||
city: source.city || '上海市',
|
||||
industry: source.industry || '互联网',
|
||||
company: source.company || '',
|
||||
personalityTags: Array.isArray(source.personalityTags) ? [...source.personalityTags] : [],
|
||||
hobbies: Array.isArray(source.hobbies) ? [...source.hobbies] : [],
|
||||
personalityTags: Array.isArray(source.personalityTags) && source.personalityTags.length ? [...source.personalityTags] : ['理性', '乐观', '独立', '有创造力', '坚韧'],
|
||||
hobbies: Array.isArray(source.hobbies) && source.hobbies.length ? [...source.hobbies] : ['阅读', '旅行', '音乐'],
|
||||
childhood: { date: source.childhood?.date || '', text: source.childhood?.text || '' },
|
||||
joy: { date: source.joy?.date || '', text: source.joy?.text || '' },
|
||||
low: { date: source.low?.date || '', text: source.low?.text || '' },
|
||||
future: { vision: source.future?.vision || '', ideal: source.future?.ideal || '' }
|
||||
future: { vision: source.future?.vision || '', ideal: source.future?.ideal || '热爱阅读和旅行，喜欢用文字和镜头记录生活。\n相信真诚和努力能让世界变得更美好。' }
|
||||
})
|
||||
birthday.value = source.birthday || ''
|
||||
birthday.value = source.birthday || '1998-06-18'
|
||||
}
|
||||
|
||||
const onBirthday = (event) => {
|
||||
@@ -211,6 +280,32 @@ const toggleList = (list, tag, max) => {
|
||||
list.push(tag)
|
||||
}
|
||||
|
||||
const chooseAvatar = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
avatarLocal.value = res.tempFilePaths?.[0] || ''
|
||||
uni.showToast({ title: '头像已更新到本地预览', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addCustomHobby = () => {
|
||||
uni.showModal({
|
||||
title: '自定义兴趣',
|
||||
editable: true,
|
||||
placeholderText: '输入兴趣名称',
|
||||
success: (res) => {
|
||||
const value = String(res.content || '').trim()
|
||||
if (!res.confirm || !value) return
|
||||
if (!hobbyOptions.includes(value)) hobbyOptions.push(value)
|
||||
toggleList(form.hobbies, value, 5)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const saveProfile = async () => {
|
||||
if (!form.nickname.trim() || saving.value) return
|
||||
saving.value = true
|
||||
@@ -259,48 +354,52 @@ onMounted(() => {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 86% 10%, rgba(124, 58, 237, 0.3), transparent 30%),
|
||||
radial-gradient(circle at 10% 32%, rgba(48, 112, 255, 0.16), transparent 28%),
|
||||
linear-gradient(180deg, #07091d 0%, #07031a 52%, #04020e 100%);
|
||||
radial-gradient(circle at 84% 3%, rgba(87, 122, 255, 0.12), transparent 28%),
|
||||
radial-gradient(circle at 14% 26%, rgba(130, 71, 255, 0.16), transparent 30%),
|
||||
linear-gradient(180deg, #05081b 0%, #07031a 52%, #03020d 100%);
|
||||
}
|
||||
|
||||
.status-space,
|
||||
.topbar,
|
||||
.scroll,
|
||||
.bottom-bar {
|
||||
.scroll {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status-space,
|
||||
.topbar,
|
||||
.bottom-bar {
|
||||
.topbar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 92rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 80rpx 1fr 80rpx;
|
||||
grid-template-columns: 90rpx 1fr 90rpx;
|
||||
align-items: center;
|
||||
padding: 0 28rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
font-size: 66rpx;
|
||||
color: #fff;
|
||||
font-size: 68rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.save,
|
||||
.custom {
|
||||
color: #c06dff;
|
||||
font-size: 27rpx;
|
||||
.gold {
|
||||
color: #ffd58c;
|
||||
text-shadow: 0 0 20rpx rgba(255, 202, 125, 0.45);
|
||||
}
|
||||
|
||||
.save {
|
||||
color: #b94cff;
|
||||
font-size: 28rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -312,177 +411,443 @@ onMounted(() => {
|
||||
padding: 0 28rpx 28rpx;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.panel,
|
||||
.dual-panel {
|
||||
border-radius: 28rpx;
|
||||
margin-bottom: 22rpx;
|
||||
padding: 28rpx;
|
||||
.glass-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(124, 75, 255, 0.34);
|
||||
background:
|
||||
radial-gradient(circle at 92% 12%, rgba(104, 66, 255, 0.14), transparent 34%),
|
||||
rgba(10, 13, 43, 0.74);
|
||||
box-shadow: inset 0 0 34rpx rgba(123, 60, 255, 0.08), 0 14rpx 48rpx rgba(0, 0, 0, 0.22);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
min-height: 190rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 22rpx;
|
||||
padding: 22rpx 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28rpx;
|
||||
min-height: 150rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 132rpx;
|
||||
height: 132rpx;
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
width: 136rpx;
|
||||
height: 136rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 5rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 58rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #b245ff, #2a7dff);
|
||||
box-shadow: 0 0 38rpx rgba(168, 85, 255, 0.52);
|
||||
background: linear-gradient(135deg, #fff, #9b54ff 46%, #4a67ff);
|
||||
box-shadow: 0 0 34rpx rgba(162, 91, 255, 0.52);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #27124a;
|
||||
}
|
||||
|
||||
.avatar-edit {
|
||||
position: absolute;
|
||||
right: -4rpx;
|
||||
bottom: -2rpx;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #8f4dff, #582cff);
|
||||
box-shadow: 0 0 18rpx rgba(158, 91, 255, 0.62);
|
||||
}
|
||||
|
||||
.pen-icon {
|
||||
width: 17rpx;
|
||||
height: 6rpx;
|
||||
margin: 18rpx auto;
|
||||
border-radius: 999rpx;
|
||||
background: #fff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.hero-info {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-name,
|
||||
.hero-sub,
|
||||
.quote,
|
||||
.panel-title,
|
||||
.block-title {
|
||||
display: block;
|
||||
.hero-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
color: #fff;
|
||||
font-size: 42rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-star {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 8rpx;
|
||||
color: rgba(239, 232, 255, 0.78);
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: rgba(239, 232, 255, 0.84);
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.quote {
|
||||
.hero-line {
|
||||
width: 280rpx;
|
||||
height: 1rpx;
|
||||
margin-top: 14rpx;
|
||||
color: #c06dff;
|
||||
font-size: 24rpx;
|
||||
background: rgba(180, 139, 255, 0.22);
|
||||
}
|
||||
|
||||
.panel-title,
|
||||
.block-title {
|
||||
margin-bottom: 20rpx;
|
||||
color: #eadcff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 900;
|
||||
.hero-quote {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
color: #b94cff;
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
.hero-planet {
|
||||
position: absolute;
|
||||
right: 34rpx;
|
||||
top: 28rpx;
|
||||
width: 210rpx;
|
||||
height: 150rpx;
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
.planet-core {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 24rpx;
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 34% 26%, #7d63ff, #4b1da8 62%, #19083b);
|
||||
box-shadow: 0 0 48rpx rgba(141, 78, 255, 0.58);
|
||||
}
|
||||
|
||||
.planet-ring {
|
||||
position: absolute;
|
||||
right: 4rpx;
|
||||
top: 58rpx;
|
||||
width: 158rpx;
|
||||
height: 34rpx;
|
||||
border: 5rpx solid rgba(161, 92, 255, 0.55);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 18rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.section-head,
|
||||
.section-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
min-height: 44rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.section-head.with-action {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.line-field {
|
||||
min-height: 76rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 150rpx 1fr;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid rgba(180, 139, 255, 0.14);
|
||||
}
|
||||
|
||||
.field-label {
|
||||
color: rgba(221, 207, 246, 0.72);
|
||||
.section-title {
|
||||
color: rgba(239, 232, 255, 0.9);
|
||||
font-size: 25rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.line-input,
|
||||
.line-value {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
.section-hint {
|
||||
color: rgba(222, 211, 240, 0.54);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
position: relative;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
color: #a855ff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-icon::before {
|
||||
content: '♜';
|
||||
color: currentColor;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.job-title-icon {
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.job-title-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: -8rpx;
|
||||
width: 10rpx;
|
||||
height: 7rpx;
|
||||
border: 3rpx solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-radius: 6rpx 6rpx 0 0;
|
||||
}
|
||||
|
||||
.smile-title-icon {
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid currentColor;
|
||||
}
|
||||
|
||||
.smile-title-icon::before,
|
||||
.smile-title-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
width: 4rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.smile-title-icon::before { left: 7rpx; }
|
||||
.smile-title-icon::after { right: 7rpx; }
|
||||
|
||||
.heart-title-icon::before {
|
||||
content: '♡';
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bio-title-icon {
|
||||
border: 3rpx solid currentColor;
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bio-title-icon::before,
|
||||
.bio-title-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6rpx;
|
||||
right: 6rpx;
|
||||
height: 3rpx;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.bio-title-icon::before { top: 8rpx; }
|
||||
.bio-title-icon::after { top: 15rpx; }
|
||||
|
||||
.profile-row {
|
||||
min-height: 64rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 154rpx 1fr 24rpx;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid rgba(180, 139, 255, 0.16);
|
||||
}
|
||||
|
||||
.section-head + .profile-row {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
color: rgba(205, 191, 238, 0.82);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.row-input,
|
||||
.row-value {
|
||||
min-width: 0;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row-picker {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgba(217, 205, 238, 0.42);
|
||||
}
|
||||
|
||||
.chevron {
|
||||
color: rgba(218, 204, 243, 0.7);
|
||||
font-size: 44rpx;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gender-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.choice,
|
||||
.mbti-chip,
|
||||
.tag-choice {
|
||||
height: 52rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(224, 214, 243, 0.72);
|
||||
border: 1rpx solid rgba(151, 111, 255, 0.28);
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
font-size: 23rpx;
|
||||
border: 1rpx solid rgba(151, 111, 255, 0.42);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
font-size: 22rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.choice.active,
|
||||
.mbti-chip.active,
|
||||
.tag-choice.active {
|
||||
color: #fff;
|
||||
border-color: rgba(202, 97, 255, 0.9);
|
||||
background: rgba(149, 55, 255, 0.38);
|
||||
box-shadow: 0 0 24rpx rgba(168, 67, 255, 0.38);
|
||||
border-color: rgba(206, 82, 255, 0.95);
|
||||
background: linear-gradient(180deg, rgba(169, 61, 255, 0.62), rgba(107, 41, 206, 0.5));
|
||||
box-shadow: 0 0 18rpx rgba(168, 67, 255, 0.52), inset 0 1rpx 0 rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.dual-panel {
|
||||
.astro-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
border-top: 1rpx solid rgba(180, 139, 255, 0.16);
|
||||
}
|
||||
|
||||
.mbti-block {
|
||||
border-left: 1rpx solid rgba(180, 139, 255, 0.14);
|
||||
padding-left: 24rpx;
|
||||
.astro-col {
|
||||
min-width: 0;
|
||||
padding: 18rpx 18rpx 0 0;
|
||||
}
|
||||
|
||||
.mbti-col {
|
||||
border-left: 1rpx solid rgba(180, 139, 255, 0.18);
|
||||
padding-left: 18rpx;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.astro-title-row {
|
||||
display: grid;
|
||||
grid-template-columns: 34rpx 74rpx 1fr 18rpx;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.zodiac-head-icon,
|
||||
.mbti-head-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
color: #a855ff;
|
||||
}
|
||||
|
||||
.zodiac-head-icon {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mbti-head-icon {
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 4rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.astro-title {
|
||||
color: rgba(222, 211, 240, 0.76);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.astro-current {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 23rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.select-title {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
color: rgba(222, 211, 240, 0.72);
|
||||
font-size: 21rpx;
|
||||
}
|
||||
|
||||
.zodiac-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12rpx;
|
||||
gap: 14rpx 8rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.zodiac-item {
|
||||
min-height: 88rpx;
|
||||
border-radius: 18rpx;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: rgba(226, 217, 246, 0.84);
|
||||
font-size: 19rpx;
|
||||
}
|
||||
|
||||
.zodiac-bubble {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(224, 214, 243, 0.76);
|
||||
}
|
||||
|
||||
.zodiac-item.active {
|
||||
color: #fff;
|
||||
background: rgba(149, 55, 255, 0.26);
|
||||
box-shadow: inset 0 0 18rpx rgba(168, 67, 255, 0.28);
|
||||
}
|
||||
|
||||
.zodiac-symbol {
|
||||
color: #a855ff;
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
background: rgba(124, 58, 237, 0.28);
|
||||
border: 1rpx solid rgba(173, 84, 255, 0.36);
|
||||
}
|
||||
|
||||
.zodiac-item.active .zodiac-bubble {
|
||||
color: #fff;
|
||||
border-color: rgba(215, 128, 255, 0.95);
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.8), rgba(98, 47, 190, 0.66));
|
||||
box-shadow: 0 0 22rpx rgba(190, 92, 255, 0.72);
|
||||
}
|
||||
|
||||
.mbti-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.mbti-chip {
|
||||
height: 42rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.tag-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14rpx;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 14rpx 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.tag-choice {
|
||||
height: 40rpx;
|
||||
font-size: 21rpx;
|
||||
}
|
||||
|
||||
.tag-choice.dashed {
|
||||
@@ -490,41 +855,38 @@ onMounted(() => {
|
||||
color: #c06dff;
|
||||
}
|
||||
|
||||
.custom {
|
||||
color: #c06dff;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.bio-panel {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bio {
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
height: 116rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx;
|
||||
border-radius: 22rpx;
|
||||
border: 1rpx solid rgba(151, 111, 255, 0.24);
|
||||
background: rgba(12, 15, 46, 0.72);
|
||||
margin-top: 16rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
border-radius: 18rpx;
|
||||
border: 1rpx solid rgba(151, 111, 255, 0.22);
|
||||
background: rgba(10, 12, 40, 0.66);
|
||||
color: #fff;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.55;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bio-count {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 8rpx;
|
||||
text-align: right;
|
||||
color: rgba(224, 214, 243, 0.56);
|
||||
font-size: 22rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
height: 116rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 14rpx 28rpx 22rpx;
|
||||
background: rgba(5, 6, 21, 0.72);
|
||||
backdrop-filter: blur(24rpx);
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 999rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 900;
|
||||
.placeholder {
|
||||
color: rgba(214, 204, 235, 0.42);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user