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.
66 lines
2.7 KiB
66 lines
2.7 KiB
<template>
|
|
<view class="settings-page">
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
|
|
<view class="nav">
|
|
<view class="back" @tap="back">‹</view>
|
|
<view class="title">设置</view>
|
|
<view class="ghost"></view>
|
|
</view>
|
|
<view class="panel" v-for="group in groups" :key="group.title">
|
|
<view class="panel-title">{{ group.title }}</view>
|
|
<view class="row" v-for="item in group.items" :key="item.name" @tap="tapItem(item)">
|
|
<view>
|
|
<view class="name">{{ item.name }}</view>
|
|
<view class="desc">{{ item.desc }}</view>
|
|
</view>
|
|
<view class="arrow">›</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: { top: 44 },
|
|
groups: [
|
|
{ title: '隐私', items: [
|
|
{ name: '半匿名资料', desc: '不展示真实头像、学校、距离。' },
|
|
{ name: '聊天保留规则', desc: '只保存情绪记录，不保存完整聊天。' }
|
|
] },
|
|
{ title: '安全', items: [
|
|
{ name: '黑名单', desc: '被拉黑对象不会再次出现。' },
|
|
{ name: '举报记录', desc: '查看已提交的安全反馈。' }
|
|
] },
|
|
{ title: '提醒', items: [
|
|
{ name: '深夜轻提醒', desc: '只在你允许的时间出现。' },
|
|
{ name: '今日次数', desc: '每天 3 次，不做无限刷。' }
|
|
] }
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
methods: {
|
|
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) },
|
|
tapItem(item) { uni.showToast({ title: item.name, icon: 'none' }) }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page { background: #f7f9ff; }
|
|
.settings-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: linear-gradient(180deg, #fbfdff, #eef4ff); }
|
|
.nav { height: 90rpx; display: flex; align-items: center; }
|
|
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.64); }
|
|
.title { flex: 1; text-align: center; font-size: 31rpx; font-weight: 800; }
|
|
.panel { margin-top: 26rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.68); border: 1rpx solid rgba(255,255,255,.88); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.1); }
|
|
.panel-title { margin-bottom: 12rpx; font-size: 30rpx; font-weight: 800; }
|
|
.row { display: flex; align-items: center; padding: 24rpx 0; border-top: 1rpx solid rgba(21,26,45,.06); }
|
|
.row:first-of-type { border-top: 0; }
|
|
.name { font-size: 27rpx; font-weight: 800; }
|
|
.desc { margin-top: 8rpx; color: rgba(21,26,45,.48); font-size: 22rpx; }
|
|
.arrow { flex: 1; text-align: right; color: rgba(21,26,45,.34); font-size: 42rpx; }
|
|
</style>
|
|
|