14 changed files with 3376 additions and 893 deletions
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<view class="card-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="label">半匿名陪伴对象</view> |
|||
<view class="companion-card"> |
|||
<view class="orb" :class="mode">{{ companion.avatar }}</view> |
|||
<view class="name">{{ companion.name }}</view> |
|||
<view class="state">{{ companion.state }}</view> |
|||
<view class="quote">{{ companion.quote }}</view> |
|||
<view class="tags"> |
|||
<text>{{ modeText }}</text> |
|||
<text>限时 15 分钟</text> |
|||
<text>不留完整记录</text> |
|||
</view> |
|||
</view> |
|||
<view class="actions"> |
|||
<view class="ghost" @tap="skip">轻轻划过</view> |
|||
<view class="solid" @tap="enter">进入陪伴房间</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: 'i', |
|||
menuButtonInfo: { top: 44 }, |
|||
pool: { |
|||
i: { name: '月台旁的影子', avatar: '月', state: '在图书馆发呆', quote: '可以安静待 15 分钟，不用急着找话题。' }, |
|||
e: { name: '便利店灯光', avatar: '光', state: '想聊点不重要的', quote: '要不要交换一句今天最荒唐的小事？' } |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
companion() { return this.pool[this.mode] || this.pool.i }, |
|||
modeText() { return this.mode === 'e' ? '轻轻热闹' : '安静陪伴' } |
|||
}, |
|||
onLoad(options) { |
|||
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
this.mode = options.mode || 'i' |
|||
}, |
|||
methods: { |
|||
enter() { uni.redirectTo({ url: '/package1/ieBrowser/chat?mode=' + this.mode }) }, |
|||
skip() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }, |
|||
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.card-page { min-height: 100vh; padding: 0 32rpx 70rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 30%, rgba(169,255,231,.45), transparent 360rpx), radial-gradient(circle at 85% 12%, rgba(255,184,209,.28), transparent 320rpx), linear-gradient(180deg, #fbfdff, #eef4ff 60%, #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; } |
|||
.label { margin-top: 20rpx; color: rgba(22,27,46,.42); font-size: 23rpx; letter-spacing: 4rpx; text-transform: uppercase; } |
|||
.companion-card { margin-top: 54rpx; padding: 48rpx 36rpx; border-radius: 56rpx; border: 1rpx solid rgba(255,255,255,.82); background: rgba(255,255,255,.64); backdrop-filter: blur(28rpx); box-shadow: 0 30rpx 90rpx rgba(96,112,160,.16); text-align: center; animation: cardIn .58s ease both; } |
|||
.orb { width: 168rpx; height: 168rpx; margin: 0 auto; border-radius: 50%; text-align: center; line-height: 168rpx; font-size: 58rpx; font-weight: 800; } |
|||
.orb.i { color: #f7f4ff; background: linear-gradient(145deg, #8b7cff, #dde7ff); box-shadow: 0 22rpx 68rpx rgba(139,124,255,.25); } |
|||
.orb.e { color: #11162a; background: linear-gradient(145deg, #a9ffe7, #fff0b8); } |
|||
.name { margin-top: 30rpx; font-size: 42rpx; font-weight: 800; } |
|||
.state { margin-top: 12rpx; color: rgba(22,27,46,.48); font-size: 24rpx; } |
|||
.quote { margin-top: 34rpx; padding: 30rpx; border-radius: 32rpx; background: rgba(255,255,255,.58); color: rgba(22,27,46,.72); font-size: 28rpx; line-height: 44rpx; text-align: left; } |
|||
.tags { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 28rpx; } |
|||
.tags text { margin: 0 8rpx 12rpx; padding: 8rpx 16rpx; border-radius: 999rpx; color: #6c69d8; background: rgba(139,124,255,.1); font-size: 21rpx; } |
|||
.actions { position: fixed; left: 32rpx; right: 32rpx; bottom: 42rpx; display: flex; gap: 18rpx; } |
|||
.ghost, .solid { flex: 1; height: 94rpx; border-radius: 999rpx; text-align: center; line-height: 94rpx; font-size: 26rpx; font-weight: 800; } |
|||
.ghost { color: rgba(22,27,46,.56); background: rgba(255,255,255,.58); box-shadow: 0 18rpx 48rpx rgba(96,112,160,.1); } |
|||
.solid { color: #11162a; background: linear-gradient(135deg, #ffffff, #a9ffe7); box-shadow: 0 24rpx 58rpx rgba(169,255,231,.3); animation: breath 2.8s ease-in-out infinite; } |
|||
.ghost:active, .solid:active { transform: scale(.97); } |
|||
@keyframes cardIn { from { opacity: 0; transform: translateY(28rpx) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } |
|||
@keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<view class="fate-page"> |
|||
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|||
<view class="nav"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="title">今日缘分</view> |
|||
<view class="ghost"></view> |
|||
</view> |
|||
<view class="hero"> |
|||
<view class="hero-title">今天的 3 次轻连接</view> |
|||
<view class="hero-sub">它们不会变成关系压力，只留下一点情绪轨迹。</view> |
|||
</view> |
|||
<view class="timeline"> |
|||
<view class="line"></view> |
|||
<view class="fate-card" v-for="item in fates" :key="item.time"> |
|||
<view class="node" :class="item.type">{{ item.type }}</view> |
|||
<view class="card-main"> |
|||
<view class="card-top"> |
|||
<text class="name">{{ item.name }}</text> |
|||
<text class="time">{{ item.time }}</text> |
|||
</view> |
|||
<view class="feeling">{{ item.feeling }}</view> |
|||
<view class="remeet" v-if="item.remeet">24 小时内可再遇见一次</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { top: 44 }, |
|||
fates: [ |
|||
{ type: 'i', name: '月台旁的影子', time: '23:18', feeling: '沉默不尴尬，像有人坐在旁边。', remeet: true }, |
|||
{ type: 'e', name: '便利店灯光', time: '21:42', feeling: '聊了一句夜宵废话，心情被拉亮一点。', remeet: false }, |
|||
{ type: 'i', name: '耳机里的风', time: '昨天', feeling: '不用解释低落，也被轻轻听见。', remeet: false } |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
methods: { |
|||
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.fate-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 84% 12%, rgba(139,124,255,.22), transparent 300rpx), linear-gradient(180deg, #fbfdff, #eef4ff); } |
|||
.nav { height: 90rpx; display: flex; align-items: center; } |
|||
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.64); } |
|||
.title { flex: 1; text-align: center; font-size: 31rpx; font-weight: 800; } |
|||
.hero { margin-top: 22rpx; padding: 36rpx; border-radius: 44rpx; background: rgba(255,255,255,.58); border: 1rpx solid rgba(255,255,255,.86); backdrop-filter: blur(24rpx); } |
|||
.hero-title { font-size: 44rpx; font-weight: 800; } |
|||
.hero-sub { margin-top: 14rpx; color: rgba(21,26,45,.52); font-size: 25rpx; line-height: 40rpx; } |
|||
.timeline { position: relative; margin-top: 36rpx; } |
|||
.line { position: absolute; left: 37rpx; top: 30rpx; bottom: 30rpx; width: 2rpx; background: rgba(139,124,255,.2); } |
|||
.fate-card { position: relative; display: flex; margin-bottom: 24rpx; } |
|||
.node { z-index: 1; width: 76rpx; height: 76rpx; border-radius: 50%; text-align: center; line-height: 76rpx; font-size: 30rpx; font-weight: 800; } |
|||
.node.i { color: #fff; background: #7771d8; } |
|||
.node.e { color: #11162a; background: #a9ffe7; } |
|||
.card-main { flex: 1; margin-left: 20rpx; padding: 28rpx; border-radius: 34rpx; background: rgba(255,255,255,.64); box-shadow: 0 22rpx 54rpx rgba(96,112,160,.12); } |
|||
.card-top { display: flex; } |
|||
.name { flex: 1; font-size: 28rpx; font-weight: 800; } |
|||
.time { color: rgba(21,26,45,.4); font-size: 22rpx; } |
|||
.feeling { margin-top: 14rpx; color: rgba(21,26,45,.62); font-size: 25rpx; line-height: 40rpx; } |
|||
.remeet { display: inline-block; margin-top: 18rpx; padding: 8rpx 18rpx; border-radius: 999rpx; color: #11162a; background: #dffef4; font-size: 21rpx; } |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,106 @@ |
|||
<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> |
|||
@ -0,0 +1,103 @@ |
|||
<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> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<view class="messages-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="head"> |
|||
<view class="title">消息</view> |
|||
<view class="sub">这里不是聊天列表，只放未完成的陪伴。</view> |
|||
</view> |
|||
<view class="room-card active" @tap="goChat"> |
|||
<view class="pulse"></view> |
|||
<view class="main"> |
|||
<view class="name">月台旁的影子</view> |
|||
<view class="desc">限时房间还剩 08:32，可以继续回去待一会。</view> |
|||
</view> |
|||
<view class="tag">进行中</view> |
|||
</view> |
|||
<view class="room-card" v-for="item in requests" :key="item.name"> |
|||
<view class="avatar">{{ item.avatar }}</view> |
|||
<view class="main"> |
|||
<view class="name">{{ item.name }}</view> |
|||
<view class="desc">{{ item.desc }}</view> |
|||
</view> |
|||
<view class="tag soft">再遇见</view> |
|||
</view> |
|||
<view class="empty">没有未完成的关系，也是一种轻松。</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { top: 44 }, |
|||
requests: [ |
|||
{ name: '便利店灯光', avatar: '光', desc: '对方也愿意在 24 小时内再聊一次。' }, |
|||
{ name: '耳机里的风', avatar: '风', desc: '昨天的安静陪伴已自然结束。' } |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
methods: { |
|||
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }, |
|||
goChat() { uni.navigateTo({ url: '/package1/ieBrowser/chat?mode=i' }) } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.messages-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 18% 8%, rgba(169,255,231,.42), transparent 280rpx), linear-gradient(180deg, #fbfdff, #eef4ff); } |
|||
.nav { height: 90rpx; display: flex; align-items: center; } |
|||
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.55); } |
|||
.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; } |
|||
.head { padding-top: 10rpx; } |
|||
.title { font-size: 52rpx; font-weight: 800; } |
|||
.sub { margin-top: 12rpx; color: rgba(21,26,45,.5); font-size: 25rpx; } |
|||
.room-card { display: flex; align-items: center; margin-top: 26rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.64); border: 1rpx solid rgba(255,255,255,.86); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.12); } |
|||
.room-card.active { background: rgba(17,22,42,.92); color: #fff; } |
|||
.pulse, .avatar { width: 78rpx; height: 78rpx; margin-right: 20rpx; border-radius: 50%; text-align: center; line-height: 78rpx; background: #a9ffe7; color: #11162a; font-weight: 800; } |
|||
.pulse { animation: breath 2.4s ease-in-out infinite; } |
|||
.main { flex: 1; } |
|||
.name { font-size: 29rpx; font-weight: 800; } |
|||
.desc { margin-top: 8rpx; color: rgba(21,26,45,.52); font-size: 23rpx; line-height: 36rpx; } |
|||
.active .desc { color: rgba(255,255,255,.58); } |
|||
.tag { padding: 8rpx 16rpx; border-radius: 999rpx; color: #11162a; background: #a9ffe7; font-size: 20rpx; } |
|||
.tag.soft { color: #7771d8; background: rgba(119,113,216,.1); } |
|||
.empty { margin-top: 42rpx; text-align: center; color: rgba(21,26,45,.36); font-size: 23rpx; } |
|||
@keyframes breath { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } } |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class="mode-page" :class="'theme-' + activeMode"> |
|||
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|||
<view class="nav"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="nav-title">i/e 选择</view> |
|||
<view class="ghost"></view> |
|||
</view> |
|||
<view class="head"> |
|||
<view class="eyebrow">Today Mode</view> |
|||
<view class="title">今天想以哪种方式被陪伴？</view> |
|||
<view class="sub">这不是人格测试，只是此刻的社交能量。</view> |
|||
</view> |
|||
|
|||
<view class="mode-card i" :class="{ active: activeMode === 'i' }" @tap="activeMode = 'i'"> |
|||
<view class="mark">i</view> |
|||
<view class="copy"> |
|||
<view class="name">安静陪伴</view> |
|||
<view class="desc">慢回复、少说话、允许沉默。像两个人坐在操场边。</view> |
|||
</view> |
|||
<view class="state">月光 / 耳机 / 图书馆</view> |
|||
</view> |
|||
|
|||
<view class="mode-card e" :class="{ active: activeMode === 'e' }" @tap="activeMode = 'e'"> |
|||
<view class="mark">e</view> |
|||
<view class="copy"> |
|||
<view class="name">轻轻热闹</view> |
|||
<view class="desc">有人开场、聊点废话，把情绪拉亮一点。</view> |
|||
</view> |
|||
<view class="state">便利店 / 夜跑 / 随机话题</view> |
|||
</view> |
|||
|
|||
<view class="continue" @tap="goHome">进入此刻</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
activeMode: 'i', |
|||
menuButtonInfo: { top: 44 } |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
} |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.redirectTo({ url: '/package1/ieBrowser/index' }) |
|||
}, |
|||
goHome() { |
|||
uni.redirectTo({ url: '/package1/ieBrowser/index?mode=' + this.activeMode }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.mode-page { |
|||
min-height: 100vh; |
|||
padding: 0 32rpx 72rpx; |
|||
box-sizing: border-box; |
|||
color: #151a2d; |
|||
background: |
|||
radial-gradient(circle at 82% 8%, rgba(139, 124, 255, .24), transparent 290rpx), |
|||
linear-gradient(180deg, #fbfdff, #eef4ff); |
|||
transition: background .35s ease; |
|||
} |
|||
.theme-e { |
|||
background: |
|||
radial-gradient(circle at 82% 8%, rgba(255, 184, 209, .36), transparent 300rpx), |
|||
radial-gradient(circle at 18% 70%, rgba(255, 214, 165, .38), transparent 320rpx), |
|||
linear-gradient(180deg, #fffaf4, #f7f9ff); |
|||
} |
|||
.nav { height: 90rpx; display: flex; align-items: center; } |
|||
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21, 26, 45, .55); } |
|||
.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; } |
|||
.head { padding-top: 10rpx; } |
|||
.eyebrow { color: rgba(21, 26, 45, .42); font-size: 22rpx; letter-spacing: 5rpx; text-transform: uppercase; } |
|||
.title { width: 570rpx; margin-top: 18rpx; font-size: 52rpx; line-height: 66rpx; font-weight: 800; } |
|||
.sub { margin-top: 18rpx; color: rgba(21, 26, 45, .5); font-size: 25rpx; } |
|||
.mode-card { |
|||
position: relative; |
|||
margin-top: 34rpx; |
|||
padding: 34rpx; |
|||
border: 1rpx solid rgba(255, 255, 255, .74); |
|||
border-radius: 44rpx; |
|||
background: rgba(255, 255, 255, .56); |
|||
backdrop-filter: blur(24rpx); |
|||
box-shadow: 0 28rpx 80rpx rgba(96, 112, 160, .13); |
|||
transition: transform .22s ease, border-color .22s ease; |
|||
} |
|||
.mode-card.active { transform: scale(1.02); border-color: rgba(169, 255, 231, .95); } |
|||
.mark { width: 92rpx; height: 92rpx; border-radius: 32rpx; text-align: center; line-height: 92rpx; font-size: 52rpx; font-weight: 800; } |
|||
.i .mark { color: #f7f4ff; background: #7771d8; } |
|||
.e .mark { color: #11162a; background: #a9ffe7; } |
|||
.copy { margin-top: 26rpx; } |
|||
.name { font-size: 38rpx; font-weight: 800; } |
|||
.desc { margin-top: 12rpx; color: rgba(21, 26, 45, .58); font-size: 26rpx; line-height: 42rpx; } |
|||
.state { margin-top: 28rpx; color: rgba(21, 26, 45, .42); font-size: 22rpx; } |
|||
.continue { |
|||
position: fixed; |
|||
left: 32rpx; |
|||
right: 32rpx; |
|||
bottom: 40rpx; |
|||
height: 104rpx; |
|||
border-radius: 999rpx; |
|||
text-align: center; |
|||
line-height: 104rpx; |
|||
color: #11162a; |
|||
background: linear-gradient(135deg, #effffb, #a9ffe7); |
|||
font-size: 30rpx; |
|||
font-weight: 800; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<view class="settings-page"> |
|||
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|||
<view class="nav"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="title">设置</view> |
|||
<view class="ghost"></view> |
|||
</view> |
|||
<view class="panel" v-for="group in groups" :key="group.title"> |
|||
<view class="panel-title">{{ group.title }}</view> |
|||
<view class="row" v-for="item in group.items" :key="item.name" @tap="tapItem(item)"> |
|||
<view> |
|||
<view class="name">{{ item.name }}</view> |
|||
<view class="desc">{{ item.desc }}</view> |
|||
</view> |
|||
<view class="arrow">›</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { top: 44 }, |
|||
groups: [ |
|||
{ title: '隐私', items: [ |
|||
{ name: '半匿名资料', desc: '不展示真实头像、学校、距离。' }, |
|||
{ name: '聊天保留规则', desc: '只保存情绪记录，不保存完整聊天。' } |
|||
] }, |
|||
{ title: '安全', items: [ |
|||
{ name: '黑名单', desc: '被拉黑对象不会再次出现。' }, |
|||
{ name: '举报记录', desc: '查看已提交的安全反馈。' } |
|||
] }, |
|||
{ title: '提醒', items: [ |
|||
{ name: '深夜轻提醒', desc: '只在你允许的时间出现。' }, |
|||
{ name: '今日次数', desc: '每天 3 次，不做无限刷。' } |
|||
] } |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
methods: { |
|||
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }, |
|||
tapItem(item) { uni.showToast({ title: item.name, icon: 'none' }) } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.settings-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: linear-gradient(180deg, #fbfdff, #eef4ff); } |
|||
.nav { height: 90rpx; display: flex; align-items: center; } |
|||
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.64); } |
|||
.title { flex: 1; text-align: center; font-size: 31rpx; font-weight: 800; } |
|||
.panel { margin-top: 26rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.68); border: 1rpx solid rgba(255,255,255,.88); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.1); } |
|||
.panel-title { margin-bottom: 12rpx; font-size: 30rpx; font-weight: 800; } |
|||
.row { display: flex; align-items: center; padding: 24rpx 0; border-top: 1rpx solid rgba(21,26,45,.06); } |
|||
.row:first-of-type { border-top: 0; } |
|||
.name { font-size: 27rpx; font-weight: 800; } |
|||
.desc { margin-top: 8rpx; color: rgba(21,26,45,.48); font-size: 22rpx; } |
|||
.arrow { flex: 1; text-align: right; color: rgba(21,26,45,.34); font-size: 42rpx; } |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<view class="splash-page" @tap="enter"> |
|||
<view class="orb"></view> |
|||
<view class="brand">i/e Campus</view> |
|||
<view class="slogan">把此刻的频率，轻轻调近一点。</view> |
|||
<view class="hint">已登录 · 轻触进入</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
onLoad() { |
|||
setTimeout(() => { |
|||
this.enter() |
|||
}, 1200) |
|||
}, |
|||
methods: { |
|||
enter() { |
|||
uni.redirectTo({ url: '/package1/ieBrowser/mode' }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.splash-page { |
|||
min-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #151a2d; |
|||
background: |
|||
radial-gradient(circle at 50% 38%, rgba(169, 255, 231, .65), rgba(169, 255, 231, 0) 220rpx), |
|||
radial-gradient(circle at 18% 12%, rgba(139, 124, 255, .24), rgba(139, 124, 255, 0) 300rpx), |
|||
linear-gradient(180deg, #fbfdff 0%, #eef4ff 100%); |
|||
} |
|||
.orb { |
|||
width: 178rpx; |
|||
height: 178rpx; |
|||
border-radius: 50%; |
|||
background: linear-gradient(145deg, #ffffff, #a9ffe7); |
|||
box-shadow: 0 0 80rpx rgba(139, 124, 255, .22); |
|||
animation: breath 2.8s ease-in-out infinite; |
|||
} |
|||
.brand { margin-top: 54rpx; font-size: 50rpx; font-weight: 800; letter-spacing: 2rpx; } |
|||
.slogan { width: 520rpx; margin-top: 22rpx; text-align: center; color: rgba(21, 26, 45, .58); font-size: 27rpx; line-height: 44rpx; } |
|||
.hint { position: fixed; bottom: 86rpx; color: rgba(21, 26, 45, .36); font-size: 23rpx; } |
|||
@keyframes breath { |
|||
0%, 100% { transform: scale(.96); opacity: .76; } |
|||
50% { transform: scale(1.06); opacity: 1; } |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<view class="universe-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="profile"> |
|||
<view class="orb">夜</view> |
|||
<view class="name">半匿名漂流者</view> |
|||
<view class="desc">不经营人设，不展示粉丝。这里只记录你更喜欢怎样被陪伴。</view> |
|||
</view> |
|||
<view class="stats"> |
|||
<view><text>3</text><text>今日机会</text></view> |
|||
<view><text>15m</text><text>默认限时</text></view> |
|||
<view><text>i</text><text>近期偏好</text></view> |
|||
</view> |
|||
<view class="panel"> |
|||
<view class="panel-title">情绪轨道</view> |
|||
<view class="orbit-row" v-for="item in orbit" :key="item.day"> |
|||
<view class="day">{{ item.day }}</view> |
|||
<view class="bar"><view :style="{ width: item.value + '%' }"></view></view> |
|||
<view class="mood">{{ item.mood }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="panel"> |
|||
<view class="setting" @tap="goSettings"> |
|||
<view> |
|||
<view class="setting-title">隐私与安全</view> |
|||
<view class="setting-desc">黑名单、举报记录、半匿名规则</view> |
|||
</view> |
|||
<view class="arrow">›</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { top: 44 }, |
|||
orbit: [ |
|||
{ day: '今天', value: 72, mood: '轻了一点' }, |
|||
{ day: '昨天', value: 48, mood: '安静' }, |
|||
{ day: '周六', value: 86, mood: '被听见' } |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
methods: { |
|||
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }, |
|||
goSettings() { uni.navigateTo({ url: '/package1/ieBrowser/settings' }) } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.universe-page { min-height: 100vh; padding: 0 32rpx 60rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 12%, rgba(169,255,231,.42), transparent 330rpx), radial-gradient(circle at 86% 28%, rgba(255,184,209,.24), transparent 320rpx), 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; } |
|||
.profile { padding-top: 18rpx; text-align: center; } |
|||
.orb { width: 148rpx; height: 148rpx; margin: 0 auto; border-radius: 50%; text-align: center; line-height: 148rpx; color: #11162a; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 48rpx; font-weight: 800; box-shadow: 0 0 80rpx rgba(169,255,231,.18); } |
|||
.name { margin-top: 26rpx; font-size: 42rpx; font-weight: 800; } |
|||
.desc { width: 560rpx; margin: 14rpx auto 0; color: rgba(22,27,46,.52); font-size: 24rpx; line-height: 38rpx; } |
|||
.stats { display: flex; margin-top: 36rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.78); box-shadow: 0 20rpx 64rpx rgba(96,112,160,.12); } |
|||
.stats view { flex: 1; text-align: center; } |
|||
.stats text { display: block; } |
|||
.stats text:first-child { font-size: 34rpx; font-weight: 800; } |
|||
.stats text:last-child { margin-top: 8rpx; color: rgba(22,27,46,.42); font-size: 21rpx; } |
|||
.panel { margin-top: 26rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.78); backdrop-filter: blur(24rpx); box-shadow: 0 20rpx 64rpx rgba(96,112,160,.12); } |
|||
.panel-title { margin-bottom: 24rpx; font-size: 30rpx; font-weight: 800; } |
|||
.orbit-row { display: flex; align-items: center; margin-top: 22rpx; } |
|||
.day { width: 86rpx; color: rgba(22,27,46,.52); font-size: 22rpx; } |
|||
.bar { flex: 1; height: 12rpx; border-radius: 999rpx; background: rgba(22,27,46,.06); overflow: hidden; } |
|||
.bar view { height: 100%; border-radius: 999rpx; background: #a9ffe7; } |
|||
.mood { width: 120rpx; text-align: right; color: #6c69d8; font-size: 22rpx; } |
|||
.setting { display: flex; align-items: center; } |
|||
.setting-title { font-size: 28rpx; font-weight: 800; } |
|||
.setting-desc { margin-top: 8rpx; color: rgba(22,27,46,.48); font-size: 22rpx; } |
|||
.arrow { flex: 1; text-align: right; color: rgba(22,27,46,.4); font-size: 46rpx; } |
|||
</style> |
|||
Loading…
Reference in new issue