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.
626 lines
12 KiB
626 lines
12 KiB
<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>
|
|
|