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.
103 lines
5.2 KiB
103 lines
5.2 KiB
<template>
|
|
<view class="matching-page">
|
|
<view class="back" @tap="back">‹</view>
|
|
<view class="space">
|
|
<view class="radio-ring ring-a"></view>
|
|
<view class="radio-ring ring-b"></view>
|
|
<view class="particle p1"></view>
|
|
<view class="particle p2"></view>
|
|
<view class="particle p3"></view>
|
|
<view class="tag tag-a">慢热</view>
|
|
<view class="tag tag-b">失眠</view>
|
|
<view class="tag tag-c">想散步</view>
|
|
<view class="flash-word word-a">靠近</view>
|
|
<view class="flash-word word-b">同频</view>
|
|
<view class="user-dot">{{ mode }}</view>
|
|
<view class="other-dot"></view>
|
|
</view>
|
|
<view class="title">校园电波正在接近</view>
|
|
<view class="desc">{{ copyList[currentCopy] }}</view>
|
|
<view class="skip" @tap="goCard">跳过动画</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
mode: 'i',
|
|
mood: 'quiet',
|
|
currentCopy: 0,
|
|
copyList: ['模糊人格标签正在漂浮', '两个光点正在靠近', '情绪文字短暂闪了一下']
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.mode = options.mode || 'i'
|
|
this.mood = options.mood || 'quiet'
|
|
this.timer = setInterval(() => {
|
|
this.currentCopy = (this.currentCopy + 1) % this.copyList.length
|
|
}, 700)
|
|
setTimeout(() => {
|
|
this.goCard()
|
|
}, 1800)
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.timer)
|
|
},
|
|
methods: {
|
|
back() {
|
|
clearInterval(this.timer)
|
|
uni.redirectTo({ url: '/package1/ieBrowser/index' })
|
|
},
|
|
goCard() {
|
|
clearInterval(this.timer)
|
|
uni.redirectTo({ url: '/package1/ieBrowser/companion?mode=' + this.mode + '&mood=' + this.mood })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page { background: #0b1024; }
|
|
.matching-page {
|
|
min-height: 100vh;
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
color: #f7f4ff;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(circle at 50% 42%, rgba(169, 255, 231, .2), transparent 380rpx),
|
|
radial-gradient(circle at 78% 16%, rgba(255, 184, 209, .18), transparent 320rpx),
|
|
radial-gradient(circle at 12% 20%, rgba(139, 124, 255, .28), transparent 360rpx),
|
|
linear-gradient(145deg, #0b1024, #151a31 56%, #101729);
|
|
overflow: hidden;
|
|
}
|
|
.back { position: fixed; left: 32rpx; top: 72rpx; z-index: 2; width: 70rpx; height: 70rpx; color: rgba(247,244,255,.62); font-size: 56rpx; line-height: 64rpx; text-align: left; }
|
|
.space { position: relative; height: 620rpx; }
|
|
.user-dot, .other-dot, .particle { position: absolute; border-radius: 50%; }
|
|
.user-dot { left: 150rpx; top: 320rpx; width: 116rpx; height: 116rpx; line-height: 116rpx; background: linear-gradient(145deg, #ffffff, #a9ffe7); color: #11162a; font-size: 52rpx; font-weight: 800; box-shadow: 0 22rpx 80rpx rgba(169,255,231,.32); animation: moveUser 1.8s ease-in-out forwards; }
|
|
.other-dot { right: 150rpx; top: 320rpx; width: 100rpx; height: 100rpx; background: linear-gradient(145deg, #8b7cff, #ffb8d1); box-shadow: 0 18rpx 70rpx rgba(139,124,255,.3); animation: moveOther 1.8s ease-in-out forwards; }
|
|
.particle { width: 14rpx; height: 14rpx; background: rgba(169,255,231,.58); animation: drift 3s ease-in-out infinite; }
|
|
.p1 { left: 90rpx; top: 210rpx; }
|
|
.p2 { right: 110rpx; top: 180rpx; animation-delay: .4s; }
|
|
.p3 { left: 360rpx; top: 460rpx; animation-delay: .8s; }
|
|
.title { font-size: 42rpx; font-weight: 800; }
|
|
.desc { margin-top: 18rpx; color: rgba(247,244,255,.48); font-size: 25rpx; }
|
|
.skip { position: fixed; left: 50%; bottom: 70rpx; transform: translateX(-50%); color: rgba(247,244,255,.4); font-size: 23rpx; }
|
|
.radio-ring { position: absolute; left: 50%; top: 360rpx; border-radius: 50%; border: 1rpx solid rgba(255,255,255,.1); transform: translate(-50%, -50%); }
|
|
.ring-a { width: 520rpx; height: 260rpx; animation: ringPulse 2.4s ease-in-out infinite; }
|
|
.ring-b { width: 360rpx; height: 360rpx; border-color: rgba(169,255,231,.15); animation: ringRotate 14s linear infinite; }
|
|
.tag, .flash-word { position: absolute; padding: 12rpx 20rpx; border-radius: 999rpx; background: rgba(255,255,255,.08); border: 1rpx solid rgba(255,255,255,.12); backdrop-filter: blur(18rpx); color: rgba(247,244,255,.66); font-size: 22rpx; }
|
|
.tag-a { left: 90rpx; top: 250rpx; animation: drift 3.6s ease-in-out infinite; }
|
|
.tag-b { right: 86rpx; top: 248rpx; animation: drift 3.4s ease-in-out infinite .6s; }
|
|
.tag-c { left: 260rpx; top: 470rpx; animation: drift 3.8s ease-in-out infinite 1s; }
|
|
.flash-word { color: rgba(169,255,231,.9); opacity: 0; }
|
|
.word-a { left: 170rpx; top: 170rpx; animation: flashWord 1.8s ease-in-out infinite .2s; }
|
|
.word-b { right: 170rpx; top: 430rpx; animation: flashWord 1.8s ease-in-out infinite .8s; }
|
|
@keyframes moveUser { to { left: 300rpx; transform: scale(1.12); } }
|
|
@keyframes moveOther { to { right: 300rpx; transform: scale(1.12); } }
|
|
@keyframes drift { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-30rpx); opacity: 1; } }
|
|
@keyframes ringPulse { 0%, 100% { transform: translate(-50%, -50%) scale(.9) rotate(-10deg); opacity: .35; } 50% { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); opacity: .9; } }
|
|
@keyframes ringRotate { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
|
|
@keyframes flashWord { 0%, 100% { opacity: 0; transform: translateY(12rpx); } 45%, 60% { opacity: 1; transform: translateY(0); } }
|
|
</style>
|
|
|