wangfukang
4 weeks ago
4 changed files with 1464 additions and 0 deletions
@ -0,0 +1,226 @@ |
|||
<template> |
|||
<view class="chat-page"> |
|||
<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="user"> |
|||
<view class="name">奶茶研究员</view> |
|||
<view class="meta">同校 · 90% 匹配 · 在线</view> |
|||
</view> |
|||
<view class="more">···</view> |
|||
</view> |
|||
|
|||
<view class="topic-card"> |
|||
<view class="topic-label">今日破冰问题</view> |
|||
<view class="topic-text">如果校园里突然多了一个隐藏副本，你希望它是什么？</view> |
|||
</view> |
|||
|
|||
<view class="messages"> |
|||
<view class="msg-row other"> |
|||
<view class="avatar">E</view> |
|||
<view class="bubble">你好，你也是重度米线爱好者吗？</view> |
|||
</view> |
|||
<view class="msg-row mine"> |
|||
<view class="bubble">对啊！但我更想知道哪家汤底最稳。</view> |
|||
</view> |
|||
<view class="msg-row other"> |
|||
<view class="avatar">E</view> |
|||
<view class="bubble">那我们可以开一个“北门米线测评局”。</view> |
|||
</view> |
|||
<view class="msg-row mine"> |
|||
<view class="bubble strong">今晚 6 点？我可以带拍照技能。</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="input-bar"> |
|||
<view class="tool">＋</view> |
|||
<input class="input" placeholder="输入消息..." /> |
|||
<view class="emoji">☺</view> |
|||
<view class="send">发送</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { |
|||
top: 24 |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
} |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background: #fbfcff; |
|||
} |
|||
|
|||
.chat-page { |
|||
min-height: 100vh; |
|||
padding: 0 28rpx 150rpx; |
|||
box-sizing: border-box; |
|||
background: |
|||
radial-gradient(circle at 12% 9%, rgba(131, 255, 216, 0.28), rgba(131, 255, 216, 0) 240rpx), |
|||
linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%); |
|||
} |
|||
|
|||
.nav { |
|||
height: 96rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.back { |
|||
width: 58rpx; |
|||
font-size: 56rpx; |
|||
line-height: 56rpx; |
|||
} |
|||
|
|||
.user { |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.meta { |
|||
margin-top: 6rpx; |
|||
color: #8c9995; |
|||
font-size: 21rpx; |
|||
} |
|||
|
|||
.more { |
|||
width: 58rpx; |
|||
text-align: right; |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.topic-card { |
|||
margin-top: 12rpx; |
|||
padding: 24rpx; |
|||
border-radius: 28rpx; |
|||
background: linear-gradient(135deg, #111, #35413f); |
|||
color: #fff; |
|||
box-shadow: 0 18rpx 36rpx rgba(33, 45, 72, 0.12); |
|||
} |
|||
|
|||
.topic-label { |
|||
color: #bdfce9; |
|||
font-size: 22rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.topic-text { |
|||
margin-top: 10rpx; |
|||
font-size: 27rpx; |
|||
font-weight: 800; |
|||
line-height: 42rpx; |
|||
} |
|||
|
|||
.messages { |
|||
padding-top: 34rpx; |
|||
} |
|||
|
|||
.msg-row { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.msg-row.mine { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
margin-right: 16rpx; |
|||
border-radius: 50%; |
|||
background: #ffe69a; |
|||
color: #a45c00; |
|||
text-align: center; |
|||
line-height: 72rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.bubble { |
|||
max-width: 480rpx; |
|||
padding: 22rpx 26rpx; |
|||
border-radius: 28rpx; |
|||
background: #fff; |
|||
box-shadow: 0 14rpx 30rpx rgba(33, 45, 72, 0.08); |
|||
color: #26322f; |
|||
font-size: 27rpx; |
|||
line-height: 42rpx; |
|||
} |
|||
|
|||
.mine .bubble { |
|||
background: #111; |
|||
color: #fff; |
|||
} |
|||
|
|||
.bubble.strong { |
|||
background: linear-gradient(135deg, #7f6cff, #3f2dcf); |
|||
} |
|||
|
|||
.input-bar { |
|||
position: fixed; |
|||
left: 24rpx; |
|||
right: 24rpx; |
|||
bottom: 34rpx; |
|||
height: 94rpx; |
|||
padding: 12rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 999rpx; |
|||
background: rgba(255, 255, 255, 0.96); |
|||
box-shadow: 0 16rpx 42rpx rgba(33, 45, 72, 0.12); |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.tool, |
|||
.emoji { |
|||
width: 58rpx; |
|||
text-align: center; |
|||
font-size: 34rpx; |
|||
color: #6c7a75; |
|||
} |
|||
|
|||
.input { |
|||
flex: 1; |
|||
height: 70rpx; |
|||
padding: 0 20rpx; |
|||
border-radius: 999rpx; |
|||
background: #f3f6f8; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.send { |
|||
height: 64rpx; |
|||
line-height: 64rpx; |
|||
margin-left: 10rpx; |
|||
padding: 0 24rpx; |
|||
border-radius: 999rpx; |
|||
background: #111; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,282 @@ |
|||
<template> |
|||
<view class="chat-list-page"> |
|||
<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="title">聊天记录</view> |
|||
<view class="filter">同校</view> |
|||
</view> |
|||
|
|||
<view class="summary-card"> |
|||
<view> |
|||
<view class="summary-title">今天有 5 个新话题</view> |
|||
<view class="summary-sub">别让有趣的人掉进已读不回</view> |
|||
</view> |
|||
<view class="bubble">聊</view> |
|||
</view> |
|||
|
|||
<view class="tabs"> |
|||
<view class="tab active">全部</view> |
|||
<view class="tab">找搭子</view> |
|||
<view class="tab">新朋友</view> |
|||
</view> |
|||
|
|||
<view class="chat-card" v-for="item in chats" :key="item.name" @tap="goChat"> |
|||
<view class="avatar" :class="item.type">{{ item.type.toUpperCase() }}</view> |
|||
<view class="chat-main"> |
|||
<view class="chat-line"> |
|||
<text class="name">{{ item.name }}</text> |
|||
<text class="time">{{ item.time }}</text> |
|||
</view> |
|||
<view class="message">{{ item.message }}</view> |
|||
<view class="tags"> |
|||
<text>{{ item.scene }}</text> |
|||
<text>{{ item.status }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="unread" v-if="item.unread">{{ item.unread }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { |
|||
top: 24 |
|||
}, |
|||
chats: [{ |
|||
name: '橘子汽水', |
|||
type: 'e', |
|||
time: '刚刚', |
|||
message: '北门那家米线你去过吗？我想找个试吃搭子', |
|||
scene: '饭搭子', |
|||
status: '正在输入', |
|||
unread: 2 |
|||
}, { |
|||
name: '凌晨两点半', |
|||
type: 'i', |
|||
time: '14:20', |
|||
message: '电影社今晚放映，可以一起坐后排安静看。', |
|||
scene: '电影搭子', |
|||
status: '同频 88%', |
|||
unread: 0 |
|||
}, { |
|||
name: 'DChuo', |
|||
type: 'i', |
|||
time: '昨天', |
|||
message: '明天图书馆三楼还有位置吗？', |
|||
scene: '自习搭子', |
|||
status: '已互关', |
|||
unread: 1 |
|||
}] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
} |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
goChat() { |
|||
uni.navigateTo({ |
|||
url: '/package1/ieBrowser/chat' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background: #f6f8ff; |
|||
} |
|||
|
|||
.chat-list-page { |
|||
min-height: 100vh; |
|||
padding: 0 28rpx 48rpx; |
|||
background: |
|||
radial-gradient(circle at 14% 8%, rgba(131, 255, 216, 0.3), rgba(131, 255, 216, 0) 250rpx), |
|||
linear-gradient(180deg, #fcfdff 0%, #f3f6ff 100%); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.nav { |
|||
height: 88rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.back { |
|||
width: 58rpx; |
|||
font-size: 56rpx; |
|||
line-height: 56rpx; |
|||
} |
|||
|
|||
.title { |
|||
flex: 1; |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.filter { |
|||
height: 54rpx; |
|||
line-height: 54rpx; |
|||
padding: 0 22rpx; |
|||
border-radius: 999rpx; |
|||
background: #111; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.summary-card { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 34rpx; |
|||
border-radius: 38rpx; |
|||
background: linear-gradient(135deg, #111 0%, #35413f 100%); |
|||
color: #fff; |
|||
box-shadow: 0 22rpx 46rpx rgba(30, 43, 50, 0.14); |
|||
} |
|||
|
|||
.summary-title { |
|||
font-size: 36rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.summary-sub { |
|||
margin-top: 10rpx; |
|||
color: rgba(255, 255, 255, 0.72); |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.bubble { |
|||
width: 96rpx; |
|||
height: 96rpx; |
|||
border-radius: 32rpx; |
|||
background: linear-gradient(135deg, #bdfce9, #ffdf75); |
|||
color: #111; |
|||
text-align: center; |
|||
line-height: 96rpx; |
|||
font-size: 40rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.tabs { |
|||
display: flex; |
|||
margin: 28rpx 0; |
|||
padding: 8rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
box-shadow: 0 14rpx 30rpx rgba(33, 45, 72, 0.07); |
|||
} |
|||
|
|||
.tab { |
|||
flex: 1; |
|||
height: 58rpx; |
|||
line-height: 58rpx; |
|||
text-align: center; |
|||
border-radius: 999rpx; |
|||
color: #71807b; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.tab.active { |
|||
background: #111; |
|||
color: #fff; |
|||
} |
|||
|
|||
.chat-card { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 18rpx; |
|||
padding: 24rpx; |
|||
border-radius: 34rpx; |
|||
background: rgba(255, 255, 255, 0.94); |
|||
box-shadow: 0 18rpx 38rpx rgba(33, 45, 72, 0.07); |
|||
} |
|||
|
|||
.avatar { |
|||
width: 88rpx; |
|||
height: 88rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 88rpx; |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.avatar.i { |
|||
background: #c9fff0; |
|||
color: #08705c; |
|||
} |
|||
|
|||
.avatar.e { |
|||
background: #ffe69a; |
|||
color: #a45c00; |
|||
} |
|||
|
|||
.chat-main { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.chat-line { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.name { |
|||
flex: 1; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.time { |
|||
color: #98a4a0; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.message { |
|||
margin-top: 8rpx; |
|||
color: #53615d; |
|||
font-size: 24rpx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.tags { |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
.tags text { |
|||
margin-right: 8rpx; |
|||
padding: 4rpx 10rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(127, 108, 255, 0.1); |
|||
color: #7f6cff; |
|||
font-size: 20rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.unread { |
|||
min-width: 34rpx; |
|||
height: 34rpx; |
|||
line-height: 34rpx; |
|||
padding: 0 8rpx; |
|||
border-radius: 999rpx; |
|||
background: #ff3b57; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 20rpx; |
|||
font-weight: 900; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,330 @@ |
|||
<template> |
|||
<view class="friends-page"> |
|||
<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="title">好友列表</view> |
|||
<view class="add">＋</view> |
|||
</view> |
|||
|
|||
<view class="profile-card"> |
|||
<view class="profile-title">我的社交雷达</view> |
|||
<view class="profile-desc">已连接 28 位同校同学，今天有 6 位正在找搭子</view> |
|||
<view class="radar"> |
|||
<view class="radar-dot dot1"></view> |
|||
<view class="radar-dot dot2"></view> |
|||
<view class="radar-dot dot3"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="group-tabs"> |
|||
<view class="group-tab active">全部好友</view> |
|||
<view class="group-tab">饭搭子</view> |
|||
<view class="group-tab">学习搭子</view> |
|||
</view> |
|||
|
|||
<view class="friend-card" v-for="friend in friends" :key="friend.name" @tap="goChat"> |
|||
<view class="avatar" :class="friend.type"> |
|||
{{ friend.type.toUpperCase() }} |
|||
<view class="online" v-if="friend.online"></view> |
|||
</view> |
|||
<view class="friend-main"> |
|||
<view class="friend-line"> |
|||
<text class="friend-name">{{ friend.name }}</text> |
|||
<text class="friend-type">{{ friend.type.toUpperCase() }}人</text> |
|||
</view> |
|||
<view class="friend-status">{{ friend.status }}</view> |
|||
<view class="friend-tags"> |
|||
<text v-for="tag in friend.tags" :key="tag">{{ tag }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="chat-btn">聊</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { |
|||
top: 24 |
|||
}, |
|||
friends: [{ |
|||
name: '橘子汽水', |
|||
type: 'e', |
|||
online: true, |
|||
status: '正在寻找今晚饭搭子', |
|||
tags: ['北门', '新店', '话题王'] |
|||
}, { |
|||
name: 'DChuo', |
|||
type: 'i', |
|||
online: true, |
|||
status: '图书馆三楼自习中', |
|||
tags: ['自习', '安静', '高匹配'] |
|||
}, { |
|||
name: '奶茶研究员', |
|||
type: 'e', |
|||
online: false, |
|||
status: '收藏了 12 家校园奶茶', |
|||
tags: ['探店', '拍照', '奶茶'] |
|||
}, { |
|||
name: '凌晨两点半', |
|||
type: 'i', |
|||
online: false, |
|||
status: '想找一个电影搭子', |
|||
tags: ['电影', '散步', '慢热'] |
|||
}] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
} |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
goChat() { |
|||
uni.navigateTo({ |
|||
url: '/package1/ieBrowser/chat' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background: #f6f8ff; |
|||
} |
|||
|
|||
.friends-page { |
|||
min-height: 100vh; |
|||
padding: 0 28rpx 48rpx; |
|||
box-sizing: border-box; |
|||
background: |
|||
radial-gradient(circle at 85% 10%, rgba(255, 223, 117, 0.34), rgba(255, 223, 117, 0) 260rpx), |
|||
linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); |
|||
} |
|||
|
|||
.nav { |
|||
height: 88rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.back { |
|||
width: 58rpx; |
|||
font-size: 56rpx; |
|||
line-height: 56rpx; |
|||
} |
|||
|
|||
.title { |
|||
flex: 1; |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.add { |
|||
width: 56rpx; |
|||
height: 56rpx; |
|||
border-radius: 50%; |
|||
background: #111; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 56rpx; |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.profile-card { |
|||
padding: 36rpx; |
|||
border-radius: 42rpx; |
|||
background: linear-gradient(135deg, #7f6cff 0%, #111 100%); |
|||
color: #fff; |
|||
box-shadow: 0 24rpx 52rpx rgba(93, 70, 209, 0.18); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.profile-title { |
|||
font-size: 42rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.profile-desc { |
|||
width: 430rpx; |
|||
margin-top: 12rpx; |
|||
color: rgba(255, 255, 255, 0.72); |
|||
font-size: 24rpx; |
|||
line-height: 38rpx; |
|||
} |
|||
|
|||
.radar { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
border-radius: 50%; |
|||
border: 2rpx dashed rgba(255, 255, 255, 0.38); |
|||
position: absolute; |
|||
right: 28rpx; |
|||
top: 28rpx; |
|||
animation: radarRotate 8s linear infinite; |
|||
} |
|||
|
|||
.radar-dot { |
|||
width: 18rpx; |
|||
height: 18rpx; |
|||
border-radius: 50%; |
|||
background: #bdfce9; |
|||
position: absolute; |
|||
} |
|||
|
|||
.dot1 { |
|||
left: 28rpx; |
|||
top: 46rpx; |
|||
} |
|||
|
|||
.dot2 { |
|||
right: 36rpx; |
|||
top: 68rpx; |
|||
background: #ffdf75; |
|||
} |
|||
|
|||
.dot3 { |
|||
left: 74rpx; |
|||
bottom: 24rpx; |
|||
background: #ff91c8; |
|||
} |
|||
|
|||
.group-tabs { |
|||
display: flex; |
|||
margin: 28rpx 0; |
|||
} |
|||
|
|||
.group-tab { |
|||
height: 58rpx; |
|||
line-height: 58rpx; |
|||
padding: 0 24rpx; |
|||
margin-right: 16rpx; |
|||
border-radius: 999rpx; |
|||
background: #fff; |
|||
color: #71807b; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
box-shadow: 0 12rpx 24rpx rgba(33, 45, 72, 0.06); |
|||
} |
|||
|
|||
.group-tab.active { |
|||
background: #111; |
|||
color: #fff; |
|||
} |
|||
|
|||
.friend-card { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 18rpx; |
|||
padding: 24rpx; |
|||
border-radius: 34rpx; |
|||
background: rgba(255, 255, 255, 0.94); |
|||
box-shadow: 0 18rpx 38rpx rgba(33, 45, 72, 0.07); |
|||
} |
|||
|
|||
.avatar { |
|||
width: 92rpx; |
|||
height: 92rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 92rpx; |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
position: relative; |
|||
} |
|||
|
|||
.avatar.i { |
|||
background: #c9fff0; |
|||
color: #08705c; |
|||
} |
|||
|
|||
.avatar.e { |
|||
background: #ffe69a; |
|||
color: #a45c00; |
|||
} |
|||
|
|||
.online { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
border: 4rpx solid #fff; |
|||
border-radius: 50%; |
|||
background: #19d887; |
|||
position: absolute; |
|||
right: 2rpx; |
|||
bottom: 6rpx; |
|||
} |
|||
|
|||
.friend-main { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.friend-line { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.friend-name { |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.friend-type { |
|||
margin-left: 12rpx; |
|||
padding: 4rpx 10rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(127, 108, 255, 0.1); |
|||
color: #7f6cff; |
|||
font-size: 20rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.friend-status { |
|||
margin-top: 8rpx; |
|||
color: #53615d; |
|||
font-size: 24rpx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.friend-tags { |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.friend-tags text { |
|||
margin-right: 8rpx; |
|||
color: #87938f; |
|||
font-size: 21rpx; |
|||
} |
|||
|
|||
.chat-btn { |
|||
width: 62rpx; |
|||
height: 62rpx; |
|||
border-radius: 50%; |
|||
background: #111; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 62rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
@keyframes radarRotate { |
|||
0% { |
|||
transform: rotate(0); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,626 @@ |
|||
<template> |
|||
<view class="ie-page"> |
|||
<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="nav-title">i/e 浏览器</view> |
|||
<view class="nav-pill" @tap="goFriends">好友</view> |
|||
</view> |
|||
|
|||
<view class="hero-card"> |
|||
<view class="hero-top"> |
|||
<view> |
|||
<view class="eyebrow">Campus Social Lab</view> |
|||
<view class="hero-title">今天想做哪种人？</view> |
|||
<view class="hero-desc">找饭搭子、学习搭子、散步搭子，也可以随机遇见一个有趣灵魂。</view> |
|||
</view> |
|||
<view class="orbit"> |
|||
<view class="orbit-dot i-dot">I</view> |
|||
<view class="orbit-dot e-dot">E</view> |
|||
</view> |
|||
</view> |
|||
<view class="mode-switch"> |
|||
<view class="mode-card i-mode" :class="{ active: activeType === 'i' }" @tap="activeType = 'i'"> |
|||
<view class="mode-label">i 人频道</view> |
|||
<view class="mode-text">安静同频，慢热聊天</view> |
|||
</view> |
|||
<view class="mode-card e-mode" :class="{ active: activeType === 'e' }" @tap="activeType = 'e'"> |
|||
<view class="mode-label">e 人频道</view> |
|||
<view class="mode-text">快速组局，即刻开聊</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="action-grid"> |
|||
<view class="action-card primary" @tap="openMatch"> |
|||
<view class="action-icon">匹</view> |
|||
<view class="action-title">90 秒匹配</view> |
|||
<view class="action-sub">随机遇见同校新朋友</view> |
|||
</view> |
|||
<view class="action-card" @tap="goChatList"> |
|||
<view class="action-icon">聊</view> |
|||
<view class="action-title">聊天记录</view> |
|||
<view class="action-sub">继续上次的话题</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="section-head"> |
|||
<view> |
|||
<view class="section-title">找搭子</view> |
|||
<view class="section-sub">按今天的心情，挑一个局</view> |
|||
</view> |
|||
<view class="fresh">新鲜局</view> |
|||
</view> |
|||
<scroll-view scroll-x class="buddy-scroll" show-scrollbar="false"> |
|||
<view class="buddy-row"> |
|||
<view class="buddy-card" v-for="item in buddyTypes" :key="item.name" @tap="chooseBuddy(item)"> |
|||
<view class="buddy-icon">{{ item.icon }}</view> |
|||
<view class="buddy-name">{{ item.name }}</view> |
|||
<view class="buddy-count">{{ item.count }} 人在线</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<view class="section"> |
|||
<view class="section-head"> |
|||
<view> |
|||
<view class="section-title">可能同频的人</view> |
|||
<view class="section-sub">根据校园、兴趣和作息推荐</view> |
|||
</view> |
|||
<view class="link" @tap="goFriends">好友列表</view> |
|||
</view> |
|||
<view class="person-card" v-for="person in recommendList" :key="person.name" @tap="goChat(person)"> |
|||
<view class="avatar" :class="person.type">{{ person.type.toUpperCase() }}</view> |
|||
<view class="person-main"> |
|||
<view class="person-line"> |
|||
<text class="person-name">{{ person.name }}</text> |
|||
<text class="match">{{ person.match }}% 匹配</text> |
|||
</view> |
|||
<view class="person-tags"> |
|||
<text v-for="tag in person.tags" :key="tag">{{ tag }}</text> |
|||
</view> |
|||
<view class="person-bio">{{ person.bio }}</view> |
|||
</view> |
|||
<view class="say-hi">打招呼</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="match-mask" v-if="showMatch" @tap="showMatch = false"> |
|||
<view class="match-panel" @tap.stop> |
|||
<view class="close" @tap="showMatch = false">×</view> |
|||
<view class="match-title">有新朋友想和你打招呼！</view> |
|||
<view class="match-avatar">E</view> |
|||
<view class="match-name">奶茶研究员</view> |
|||
<view class="match-info">90%匹配 · 距离200m · 想找晚饭搭子</view> |
|||
<view class="match-btn" @tap="goChat()">现在开聊</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { |
|||
top: 24 |
|||
}, |
|||
activeType: 'i', |
|||
showMatch: false, |
|||
buddyTypes: [{ |
|||
name: '饭搭子', |
|||
icon: '饭', |
|||
count: 36 |
|||
}, { |
|||
name: '自习搭子', |
|||
icon: '习', |
|||
count: 18 |
|||
}, { |
|||
name: '夜跑搭子', |
|||
icon: '跑', |
|||
count: 12 |
|||
}, { |
|||
name: '拍照搭子', |
|||
icon: '拍', |
|||
count: 9 |
|||
}], |
|||
recommendList: [{ |
|||
name: 'DChuo', |
|||
type: 'i', |
|||
match: 94, |
|||
tags: ['图书馆', '慢热', '周三有空'], |
|||
bio: '想找一个不尬聊的自习搭子，互相监督就好。' |
|||
}, { |
|||
name: '橘子汽水', |
|||
type: 'e', |
|||
match: 91, |
|||
tags: ['饭搭子', '新店探索', '话多'], |
|||
bio: '今晚想试北门新开的米线，缺一个大胆试吃员。' |
|||
}, { |
|||
name: '凌晨两点半', |
|||
type: 'i', |
|||
match: 88, |
|||
tags: ['电影', '散步', '同频'], |
|||
bio: '喜欢听别人讲奇怪的小事，也会认真回复。' |
|||
}] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
} |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
openMatch() { |
|||
this.showMatch = true |
|||
}, |
|||
chooseBuddy(item) { |
|||
uni.showToast({ |
|||
title: `已进入${item.name}`, |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
goChat() { |
|||
uni.navigateTo({ |
|||
url: '/package1/ieBrowser/chat' |
|||
}) |
|||
}, |
|||
goChatList() { |
|||
uni.navigateTo({ |
|||
url: '/package1/ieBrowser/chatList' |
|||
}) |
|||
}, |
|||
goFriends() { |
|||
uni.navigateTo({ |
|||
url: '/package1/ieBrowser/friends' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { |
|||
background: #f5f7ff; |
|||
} |
|||
|
|||
.ie-page { |
|||
min-height: 100vh; |
|||
padding: 0 28rpx 48rpx; |
|||
box-sizing: border-box; |
|||
background: |
|||
radial-gradient(circle at 18% 8%, rgba(131, 255, 216, 0.36), rgba(131, 255, 216, 0) 260rpx), |
|||
radial-gradient(circle at 92% 18%, rgba(159, 133, 255, 0.28), rgba(159, 133, 255, 0) 280rpx), |
|||
linear-gradient(180deg, #fbfdff 0%, #eef6ff 54%, #f8f3ff 100%); |
|||
color: #14231f; |
|||
} |
|||
|
|||
.nav { |
|||
height: 88rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.back { |
|||
width: 58rpx; |
|||
font-size: 56rpx; |
|||
line-height: 56rpx; |
|||
color: #18241f; |
|||
} |
|||
|
|||
.nav-title { |
|||
flex: 1; |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.nav-pill { |
|||
height: 56rpx; |
|||
line-height: 56rpx; |
|||
padding: 0 24rpx; |
|||
border-radius: 999rpx; |
|||
background: #111; |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.hero-card { |
|||
padding: 34rpx; |
|||
border-radius: 42rpx; |
|||
background: rgba(255, 255, 255, 0.86); |
|||
box-shadow: 0 24rpx 60rpx rgba(33, 45, 72, 0.1); |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.hero-card::after { |
|||
content: ''; |
|||
width: 320rpx; |
|||
height: 320rpx; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, rgba(131, 255, 216, 0.34), rgba(159, 133, 255, 0.2)); |
|||
position: absolute; |
|||
right: -130rpx; |
|||
top: -130rpx; |
|||
} |
|||
|
|||
.hero-top { |
|||
display: flex; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.eyebrow { |
|||
color: #7f6cff; |
|||
font-size: 22rpx; |
|||
font-weight: 900; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.hero-title { |
|||
margin-top: 12rpx; |
|||
font-size: 46rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.hero-desc { |
|||
width: 420rpx; |
|||
margin-top: 16rpx; |
|||
color: #6d7b76; |
|||
font-size: 25rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.orbit { |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
margin-left: auto; |
|||
border-radius: 50%; |
|||
border: 2rpx dashed rgba(127, 108, 255, 0.35); |
|||
position: relative; |
|||
animation: orbitRotate 8s linear infinite; |
|||
} |
|||
|
|||
.orbit-dot { |
|||
width: 62rpx; |
|||
height: 62rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 62rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 900; |
|||
position: absolute; |
|||
} |
|||
|
|||
.i-dot { |
|||
background: #bdfce9; |
|||
left: -12rpx; |
|||
top: 34rpx; |
|||
} |
|||
|
|||
.e-dot { |
|||
background: #ffdf75; |
|||
right: -12rpx; |
|||
top: 34rpx; |
|||
} |
|||
|
|||
.mode-switch { |
|||
display: flex; |
|||
margin-top: 30rpx; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.mode-card { |
|||
flex: 1; |
|||
padding: 24rpx; |
|||
border-radius: 30rpx; |
|||
background: rgba(245, 247, 255, 0.9); |
|||
border: 2rpx solid transparent; |
|||
} |
|||
|
|||
.mode-card + .mode-card { |
|||
margin-left: 18rpx; |
|||
} |
|||
|
|||
.mode-card.active { |
|||
border-color: rgba(127, 108, 255, 0.38); |
|||
box-shadow: 0 16rpx 28rpx rgba(127, 108, 255, 0.12); |
|||
} |
|||
|
|||
.mode-label { |
|||
font-size: 28rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.mode-text { |
|||
margin-top: 8rpx; |
|||
color: #73817c; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.action-grid { |
|||
display: flex; |
|||
margin-top: 26rpx; |
|||
} |
|||
|
|||
.action-card { |
|||
flex: 1; |
|||
padding: 26rpx; |
|||
border-radius: 34rpx; |
|||
background: rgba(255, 255, 255, 0.86); |
|||
box-shadow: 0 18rpx 40rpx rgba(33, 45, 72, 0.08); |
|||
} |
|||
|
|||
.action-card + .action-card { |
|||
margin-left: 18rpx; |
|||
} |
|||
|
|||
.action-card.primary { |
|||
background: linear-gradient(135deg, #111 0%, #36413f 100%); |
|||
color: #fff; |
|||
} |
|||
|
|||
.action-icon { |
|||
width: 62rpx; |
|||
height: 62rpx; |
|||
border-radius: 22rpx; |
|||
background: rgba(131, 255, 216, 0.38); |
|||
text-align: center; |
|||
line-height: 62rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.action-title { |
|||
margin-top: 18rpx; |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.action-sub { |
|||
margin-top: 8rpx; |
|||
color: #7c8985; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.primary .action-sub { |
|||
color: rgba(255, 255, 255, 0.72); |
|||
} |
|||
|
|||
.section { |
|||
margin-top: 34rpx; |
|||
} |
|||
|
|||
.section-head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.section-sub { |
|||
margin-top: 6rpx; |
|||
color: #74817d; |
|||
font-size: 23rpx; |
|||
} |
|||
|
|||
.fresh, |
|||
.link { |
|||
color: #7f6cff; |
|||
font-size: 24rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.buddy-scroll { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.buddy-row { |
|||
display: flex; |
|||
} |
|||
|
|||
.buddy-card { |
|||
width: 190rpx; |
|||
margin-right: 18rpx; |
|||
padding: 24rpx 20rpx; |
|||
border-radius: 34rpx; |
|||
background: linear-gradient(180deg, #fff 0%, #f7fffc 100%); |
|||
box-shadow: 0 18rpx 34rpx rgba(33, 45, 72, 0.07); |
|||
display: inline-block; |
|||
} |
|||
|
|||
.buddy-icon { |
|||
width: 66rpx; |
|||
height: 66rpx; |
|||
border-radius: 22rpx; |
|||
background: linear-gradient(135deg, #bdfce9, #ffdf75); |
|||
text-align: center; |
|||
line-height: 66rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.buddy-name { |
|||
margin-top: 18rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.buddy-count { |
|||
margin-top: 8rpx; |
|||
color: #7f8b87; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.person-card { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 24rpx; |
|||
margin-bottom: 18rpx; |
|||
border-radius: 34rpx; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
box-shadow: 0 18rpx 36rpx rgba(33, 45, 72, 0.07); |
|||
} |
|||
|
|||
.avatar { |
|||
width: 86rpx; |
|||
height: 86rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 86rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.avatar.i { |
|||
background: #c9fff0; |
|||
color: #08705c; |
|||
} |
|||
|
|||
.avatar.e { |
|||
background: #ffe69a; |
|||
color: #a45c00; |
|||
} |
|||
|
|||
.person-main { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.person-line { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.person-name { |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.match { |
|||
margin-left: 12rpx; |
|||
padding: 4rpx 10rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(127, 108, 255, 0.1); |
|||
color: #7f6cff; |
|||
font-size: 20rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.person-tags { |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.person-tags text { |
|||
margin-right: 8rpx; |
|||
color: #73817c; |
|||
font-size: 21rpx; |
|||
} |
|||
|
|||
.person-bio { |
|||
margin-top: 8rpx; |
|||
color: #4f5b57; |
|||
font-size: 23rpx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.say-hi { |
|||
height: 58rpx; |
|||
line-height: 58rpx; |
|||
padding: 0 18rpx; |
|||
border-radius: 999rpx; |
|||
background: #111; |
|||
color: #fff; |
|||
font-size: 22rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.match-mask { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.58); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.match-panel { |
|||
width: 590rpx; |
|||
padding: 44rpx 36rpx 36rpx; |
|||
border-radius: 40rpx; |
|||
background: #fff; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.close { |
|||
position: absolute; |
|||
top: 22rpx; |
|||
right: 28rpx; |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
.match-title { |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.match-avatar { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
margin: 28rpx auto 14rpx; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, #ffdf75, #ff91c8); |
|||
line-height: 120rpx; |
|||
font-size: 46rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.match-name { |
|||
font-size: 30rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
.match-info { |
|||
margin-top: 12rpx; |
|||
color: #73817c; |
|||
font-size: 23rpx; |
|||
} |
|||
|
|||
.match-btn { |
|||
height: 82rpx; |
|||
line-height: 82rpx; |
|||
margin-top: 32rpx; |
|||
border-radius: 999rpx; |
|||
background: #111; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
font-weight: 900; |
|||
} |
|||
|
|||
@keyframes orbitRotate { |
|||
0% { |
|||
transform: rotate(0); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue