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.
119 lines
4.0 KiB
119 lines
4.0 KiB
<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>
|
|
|