You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
7.0 KiB
347 lines
7.0 KiB
<template>
|
|
<view class="archive-page">
|
|
<view class="glow glow-a"></view>
|
|
<view class="glow glow-b"></view>
|
|
<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
|
|
<view class="back" @tap="back">‹</view>
|
|
<view class="title">我的夜间档案</view>
|
|
<view class="safe-dot">Safe</view>
|
|
</view>
|
|
|
|
<view class="profile-card">
|
|
<view class="avatar-orb">夜</view>
|
|
<view class="profile-title">半匿名漂流者</view>
|
|
<view class="profile-desc">不经营人设，不展示粉丝。这里只记录你更喜欢怎样被陪伴。</view>
|
|
<view class="profile-stats">
|
|
<view>
|
|
<text class="stat-num">3</text>
|
|
<text class="stat-label">今日机会</text>
|
|
</view>
|
|
<view>
|
|
<text class="stat-num">长期</text>
|
|
<text class="stat-label">聊天保留</text>
|
|
</view>
|
|
<view>
|
|
<text class="stat-num">0</text>
|
|
<text class="stat-label">公开资料</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<view class="section-title">此刻偏好</view>
|
|
<view class="preference-grid">
|
|
<view class="preference-card" v-for="item in preferences" :key="item.title">
|
|
<view class="preference-title">{{ item.title }}</view>
|
|
<view class="preference-desc">{{ item.desc }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<view class="section-title">安全设置</view>
|
|
<view class="setting-row" v-for="item in settings" :key="item.title" @tap="handleSetting(item)">
|
|
<view>
|
|
<view class="setting-title">{{ item.title }}</view>
|
|
<view class="setting-desc">{{ item.desc }}</view>
|
|
</view>
|
|
<view class="setting-arrow">›</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="principle-card">
|
|
<view class="principle-title">产品原则</view>
|
|
<view class="principle-line" v-for="item in principles" :key="item">{{ item }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: {
|
|
top: 24
|
|
},
|
|
preferences: [{
|
|
title: '更常选择 i',
|
|
desc: '安静、慢回复、允许沉默。'
|
|
}, {
|
|
title: '夜间更活跃',
|
|
desc: '22:00 后更需要轻陪伴。'
|
|
}, {
|
|
title: '聊天可回访',
|
|
desc: '匹配成功后保留聊天入口和历史消息。'
|
|
}, {
|
|
title: '不开放主页',
|
|
desc: '没有访客、关注、粉丝和点赞。'
|
|
}],
|
|
settings: [{
|
|
title: '举报记录',
|
|
desc: '查看你提交过的安全反馈。'
|
|
}, {
|
|
title: '黑名单',
|
|
desc: '被拉黑对象不会再随机出现。'
|
|
}, {
|
|
title: '隐私说明',
|
|
desc: '半匿名资料和聊天保留规则。'
|
|
}],
|
|
principles: [
|
|
'不做好友列表，做轻关系保护。',
|
|
'不做动态广场，做当下状态入口。',
|
|
'不做颜值筛选，做半匿名陪伴。',
|
|
'不做无限刷匹配，已匹配的人可以继续聊。'
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (uni.getMenuButtonBoundingClientRect) {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
}
|
|
},
|
|
methods: {
|
|
handleSetting(item) {
|
|
uni.showToast({
|
|
title: item.title,
|
|
icon: 'none'
|
|
})
|
|
},
|
|
back() {
|
|
uni.redirectTo({ url: '/package1/ieBrowser/index' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #f7f9ff;
|
|
}
|
|
|
|
.archive-page {
|
|
min-height: 100vh;
|
|
padding: 0 28rpx 56rpx;
|
|
box-sizing: border-box;
|
|
color: #161b2e;
|
|
background:
|
|
radial-gradient(circle at 82% 12%, rgba(169, 255, 231, 0.38), rgba(169, 255, 231, 0) 300rpx),
|
|
radial-gradient(circle at 18% 40%, rgba(255, 214, 165, 0.32), rgba(255, 214, 165, 0) 320rpx),
|
|
linear-gradient(180deg, #fbfdff 0%, #eef4ff 62%, #fff4e8 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glow {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(10rpx);
|
|
}
|
|
|
|
.glow-a {
|
|
left: -130rpx;
|
|
top: 260rpx;
|
|
width: 340rpx;
|
|
height: 340rpx;
|
|
background: rgba(119, 99, 255, 0.22);
|
|
}
|
|
|
|
.glow-b {
|
|
right: -120rpx;
|
|
bottom: 180rpx;
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
background: rgba(255, 184, 209, 0.24);
|
|
}
|
|
|
|
.nav {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 92rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.back {
|
|
width: 58rpx;
|
|
color: rgba(22, 27, 46, 0.62);
|
|
font-size: 56rpx;
|
|
line-height: 56rpx;
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
font-size: 34rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.safe-dot {
|
|
height: 54rpx;
|
|
line-height: 54rpx;
|
|
padding: 0 22rpx;
|
|
border-radius: 999rpx;
|
|
color: #09101f;
|
|
background: #a9ffe7;
|
|
font-size: 22rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.profile-card,
|
|
.section-card,
|
|
.principle-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.78);
|
|
background: rgba(255, 255, 255, 0.62);
|
|
backdrop-filter: blur(24rpx);
|
|
box-shadow: 0 20rpx 64rpx rgba(96, 112, 160, 0.12);
|
|
}
|
|
|
|
.profile-card {
|
|
padding: 38rpx;
|
|
border-radius: 46rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-orb {
|
|
width: 132rpx;
|
|
height: 132rpx;
|
|
margin: 0 auto;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 132rpx;
|
|
color: #09101f;
|
|
background: linear-gradient(145deg, #effffb, #a9ffe7);
|
|
font-size: 42rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.profile-title {
|
|
margin-top: 24rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.profile-desc {
|
|
width: 520rpx;
|
|
margin: 14rpx auto 0;
|
|
color: rgba(22, 27, 46, 0.54);
|
|
font-size: 24rpx;
|
|
line-height: 38rpx;
|
|
}
|
|
|
|
.profile-stats {
|
|
display: flex;
|
|
margin-top: 34rpx;
|
|
padding-top: 28rpx;
|
|
border-top: 1rpx solid rgba(22, 27, 46, 0.08);
|
|
}
|
|
|
|
.profile-stats view {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-num,
|
|
.stat-label {
|
|
display: block;
|
|
}
|
|
|
|
.stat-num {
|
|
font-size: 34rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.stat-label {
|
|
margin-top: 8rpx;
|
|
color: rgba(22, 27, 46, 0.42);
|
|
font-size: 21rpx;
|
|
}
|
|
|
|
.section-card,
|
|
.principle-card {
|
|
margin-top: 26rpx;
|
|
padding: 30rpx;
|
|
border-radius: 36rpx;
|
|
}
|
|
|
|
.section-title,
|
|
.principle-title {
|
|
margin-bottom: 22rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.preference-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.preference-card {
|
|
width: calc(50% - 9rpx);
|
|
padding: 24rpx;
|
|
border-radius: 28rpx;
|
|
background: rgba(255, 255, 255, 0.56);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.preference-title {
|
|
color: #6c69d8;
|
|
font-size: 25rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.preference-desc {
|
|
margin-top: 12rpx;
|
|
color: rgba(22, 27, 46, 0.52);
|
|
font-size: 22rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.setting-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
border-top: 1rpx solid rgba(22, 27, 46, 0.08);
|
|
}
|
|
|
|
.setting-row:first-of-type {
|
|
border-top: 0;
|
|
}
|
|
|
|
.setting-title {
|
|
font-size: 27rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.setting-desc {
|
|
margin-top: 8rpx;
|
|
color: rgba(22, 27, 46, 0.48);
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.setting-arrow {
|
|
color: rgba(22, 27, 46, 0.42);
|
|
font-size: 42rpx;
|
|
}
|
|
|
|
.principle-line {
|
|
position: relative;
|
|
padding-left: 24rpx;
|
|
margin-top: 18rpx;
|
|
color: rgba(22, 27, 46, 0.62);
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.principle-line::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 14rpx;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: #a9ffe7;
|
|
}
|
|
</style>
|
|
|