wangfukang
1 month 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