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.
76 lines
3.5 KiB
76 lines
3.5 KiB
3 weeks ago
|
<template>
|
||
|
|
<view class="messages-page">
|
||
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
|
||
|
|
<view class="nav">
|
||
|
|
<view class="back" @tap="back">‹</view>
|
||
|
|
<view class="nav-title">消息</view>
|
||
|
|
<view class="ghost"></view>
|
||
|
|
</view>
|
||
|
|
<view class="head">
|
||
|
|
<view class="title">消息</view>
|
||
|
|
<view class="sub">这里不是聊天列表，只放未完成的陪伴。</view>
|
||
|
|
</view>
|
||
|
|
<view class="room-card active" @tap="goChat">
|
||
|
|
<view class="pulse"></view>
|
||
|
|
<view class="main">
|
||
|
|
<view class="name">月台旁的影子</view>
|
||
|
|
<view class="desc">限时房间还剩 08:32，可以继续回去待一会。</view>
|
||
|
|
</view>
|
||
|
|
<view class="tag">进行中</view>
|
||
|
|
</view>
|
||
|
|
<view class="room-card" v-for="item in requests" :key="item.name">
|
||
|
|
<view class="avatar">{{ item.avatar }}</view>
|
||
|
|
<view class="main">
|
||
|
|
<view class="name">{{ item.name }}</view>
|
||
|
|
<view class="desc">{{ item.desc }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="tag soft">再遇见</view>
|
||
|
|
</view>
|
||
|
|
<view class="empty">没有未完成的关系，也是一种轻松。</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
menuButtonInfo: { top: 44 },
|
||
|
|
requests: [
|
||
|
|
{ name: '便利店灯光', avatar: '光', desc: '对方也愿意在 24 小时内再聊一次。' },
|
||
|
|
{ name: '耳机里的风', avatar: '风', desc: '昨天的安静陪伴已自然结束。' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) },
|
||
|
|
goChat() { uni.navigateTo({ url: '/package1/ieBrowser/chat?mode=i' }) }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
page { background: #f7f9ff; }
|
||
|
|
.messages-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 18% 8%, rgba(169,255,231,.42), transparent 280rpx), 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,.55); }
|
||
|
|
.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
|
||
|
|
.head { padding-top: 10rpx; }
|
||
|
|
.title { font-size: 52rpx; font-weight: 800; }
|
||
|
|
.sub { margin-top: 12rpx; color: rgba(21,26,45,.5); font-size: 25rpx; }
|
||
|
|
.room-card { display: flex; align-items: center; margin-top: 26rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.64); border: 1rpx solid rgba(255,255,255,.86); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.12); }
|
||
|
|
.room-card.active { background: rgba(17,22,42,.92); color: #fff; }
|
||
|
|
.pulse, .avatar { width: 78rpx; height: 78rpx; margin-right: 20rpx; border-radius: 50%; text-align: center; line-height: 78rpx; background: #a9ffe7; color: #11162a; font-weight: 800; }
|
||
|
|
.pulse { animation: breath 2.4s ease-in-out infinite; }
|
||
|
|
.main { flex: 1; }
|
||
|
|
.name { font-size: 29rpx; font-weight: 800; }
|
||
|
|
.desc { margin-top: 8rpx; color: rgba(21,26,45,.52); font-size: 23rpx; line-height: 36rpx; }
|
||
|
|
.active .desc { color: rgba(255,255,255,.58); }
|
||
|
|
.tag { padding: 8rpx 16rpx; border-radius: 999rpx; color: #11162a; background: #a9ffe7; font-size: 20rpx; }
|
||
|
|
.tag.soft { color: #7771d8; background: rgba(119,113,216,.1); }
|
||
|
|
.empty { margin-top: 42rpx; text-align: center; color: rgba(21,26,45,.36); font-size: 23rpx; }
|
||
|
|
@keyframes breath { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
|
||
|
|
</style>
|