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.
106 lines
4.3 KiB
106 lines
4.3 KiB
<template>
|
|
<view class="match-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="focus">
|
|
<view class="halo"></view>
|
|
<view class="dot">{{ mode }}</view>
|
|
</view>
|
|
|
|
<view class="copy">
|
|
<view class="title">使用一次今日陪伴机会</view>
|
|
<view class="desc">系统会根据你的此刻状态，随机靠近一个也想被轻轻陪伴的人。</view>
|
|
</view>
|
|
|
|
<view class="meta-card">
|
|
<view>
|
|
<text class="label">当前模式</text>
|
|
<text class="value">{{ modeText }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="label">剩余机会</text>
|
|
<text class="value">3/3</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="start" @tap="start">开始调频</view>
|
|
<view class="tips">不展示真实头像、距离和学校。连接只在限时房间里发生。</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
mode: 'i',
|
|
mood: 'quiet',
|
|
menuButtonInfo: { top: 44 }
|
|
}
|
|
},
|
|
computed: {
|
|
modeText() {
|
|
return this.mode === 'e' ? '轻轻热闹' : '安静陪伴'
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (uni.getMenuButtonBoundingClientRect) {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
}
|
|
this.mode = options.mode || 'i'
|
|
this.mood = options.mood || 'quiet'
|
|
},
|
|
methods: {
|
|
start() {
|
|
uni.navigateTo({ url: '/package1/ieBrowser/matching?mode=' + this.mode + '&mood=' + this.mood })
|
|
},
|
|
back() {
|
|
uni.redirectTo({ url: '/package1/ieBrowser/index' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page { background: #f7f9ff; }
|
|
.match-page {
|
|
min-height: 100vh;
|
|
padding: 0 32rpx 60rpx;
|
|
box-sizing: border-box;
|
|
color: #161b2e;
|
|
background:
|
|
radial-gradient(circle at 50% 34%, rgba(169, 255, 231, .48), transparent 360rpx),
|
|
radial-gradient(circle at 80% 8%, rgba(139, 124, 255, .24), transparent 320rpx),
|
|
radial-gradient(circle at 18% 76%, rgba(255, 214, 165, .34), transparent 340rpx),
|
|
linear-gradient(180deg, #fbfdff, #eef4ff 62%, #fff4e8);
|
|
}
|
|
.nav { height: 90rpx; display: flex; align-items: center; }
|
|
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(22,27,46,.55); }
|
|
.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
|
|
.focus { position: relative; height: 430rpx; display: flex; align-items: center; justify-content: center; }
|
|
.halo { position: absolute; width: 300rpx; height: 300rpx; border-radius: 50%; border: 1rpx solid rgba(139,124,255,.22); background: rgba(255,255,255,.32); backdrop-filter: blur(18rpx); animation: pulse 2.8s ease-in-out infinite; }
|
|
.dot { width: 154rpx; height: 154rpx; border-radius: 50%; text-align: center; line-height: 154rpx; color: #11162a; background: linear-gradient(145deg, #ffffff, #a9ffe7); font-size: 70rpx; font-weight: 800; box-shadow: 0 24rpx 68rpx rgba(169,255,231,.36); }
|
|
.copy { text-align: center; }
|
|
.title { font-size: 44rpx; font-weight: 800; }
|
|
.desc { width: 560rpx; margin: 18rpx auto 0; color: rgba(22,27,46,.56); font-size: 25rpx; line-height: 42rpx; }
|
|
.meta-card { display: flex; margin-top: 46rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.8); backdrop-filter: blur(24rpx); box-shadow: 0 22rpx 64rpx rgba(96,112,160,.13); }
|
|
.meta-card view { flex: 1; }
|
|
.label, .value { display: block; text-align: center; }
|
|
.label { color: rgba(22,27,46,.42); font-size: 22rpx; }
|
|
.value { margin-top: 12rpx; font-size: 32rpx; font-weight: 800; }
|
|
.start { margin-top: 42rpx; height: 104rpx; border-radius: 999rpx; text-align: center; line-height: 104rpx; color: #11162a; background: linear-gradient(135deg, #ffffff, #a9ffe7 60%, #ffd6a5); font-size: 30rpx; font-weight: 800; box-shadow: 0 24rpx 58rpx rgba(169,255,231,.3); animation: pulseButton 2.8s ease-in-out infinite; }
|
|
.start:active { transform: scale(.97); }
|
|
.tips { width: 560rpx; margin: 26rpx auto 0; text-align: center; color: rgba(22,27,46,.38); font-size: 22rpx; line-height: 36rpx; }
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(.86); opacity: .45; }
|
|
50% { transform: scale(1.12); opacity: 1; }
|
|
}
|
|
@keyframes pulseButton {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.018); }
|
|
}
|
|
</style>
|
|
|