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.
1882 lines
47 KiB
1882 lines
47 KiB
<template>
|
|
<view class="ie-page">
|
|
<view class="ambient ambient-a"></view>
|
|
<view class="ambient ambient-b"></view>
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
|
|
|
|
<view class="status-head">
|
|
<view class="time-line">{{ timeLabel }}</view>
|
|
<view class="live-line">此刻有 <text class="count-num">{{ displayAwakeCount }}</text> 个灵魂在线漂流。</view>
|
|
<view class="sub-line">{{ waitingCount }} 个人正在等一句话。</view>
|
|
<view class="archive-entry planet-entry" @tap="openProfile">
|
|
<view class="planet-ring"></view>
|
|
<view class="planet-icon">◌</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="drift-field">
|
|
<view class="wave-line wave-a"></view>
|
|
<view class="wave-line wave-b"></view>
|
|
<view class="drift-fragment" v-for="(item,index) in driftMessages" :key="item.text"
|
|
:class="['fragment-' + index, item.type, item.mood]" @tap="selectDrift(item)">
|
|
<view class="fragment-dot"></view>
|
|
<view class="fragment-text">{{ item.text }}</view>
|
|
<view class="bubble-actions" v-if="activeDriftText === item.text" @tap.stop>
|
|
<view @tap="replyDrift">回复</view>
|
|
<view @tap="likeDrift">轻轻赞</view>
|
|
</view>
|
|
</view>
|
|
<view class="signal-planet" :style="galaxyStyle" @touchstart.stop="startGalaxyDrag" @touchmove.stop="moveGalaxyDrag"
|
|
@touchend="endGalaxyDrag" @touchcancel="endGalaxyDrag">
|
|
<view class="galaxy-breath">
|
|
<view class="galaxy-ring ring-main"></view>
|
|
<view class="galaxy-ring ring-second"></view>
|
|
<view class="galaxy-ring ring-third"></view>
|
|
<view class="orbit-planet" v-for="(planet,index) in orbitPlanets" :key="planet.name"
|
|
:class="'orbit-planet-' + index" :style="orbitPlanetStyles[index]"></view>
|
|
<view class="galaxy-body">
|
|
<view class="liquid liquid-a"></view>
|
|
<view class="liquid liquid-b"></view>
|
|
<view class="soul-particle soul-a"></view>
|
|
<view class="soul-particle soul-b"></view>
|
|
<view class="soul-particle soul-c"></view>
|
|
<view class="planet-core">
|
|
<view class="planet-text">有人也在等你</view>
|
|
<view class="planet-sub">{{ currentMode === 'i' ? '安静靠近' : '轻轻热闹' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mood-dock">
|
|
<view class="dock-title">
|
|
<text>{{ displayMoodCopy }}</text><text class="typing-cursor" v-if="displayMoodCopy.length < activeMood.copy.length"></text>
|
|
</view>
|
|
<scroll-view scroll-x class="dock-scroll" show-scrollbar="false">
|
|
<view class="dock-row">
|
|
<view class="mood-chip" v-for="item in moods" :key="item.key"
|
|
:class="{ active: currentMood === item.key }" @tap="changeMood(item.key)">
|
|
<text class="mood-icon">{{ item.icon }}</text>{{ item.label }}
|
|
</view>
|
|
<view class="mode-switch" @tap="toggleMode">{{ currentMode }} · {{ currentMode === 'i' ? '慢一点' : '亮一点' }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="bottom-actions">
|
|
<view class="tab-glow"></view>
|
|
<view class="bottom-item active"><text class="tab-icon">⌛</text><text>此刻</text></view>
|
|
<view class="bottom-item" @tap="goFate"><text class="tab-icon">⌁</text><text>缘分</text></view>
|
|
<view class="bottom-item" @tap="goMessages"><text class="tab-icon">◔</text><text>消息</text></view>
|
|
<view class="bottom-item" @tap="goUniverse"><text class="tab-icon">♙</text><text>我的</text></view>
|
|
</view>
|
|
|
|
<view class="match-mask" v-if="showMatch" @tap="closeMatch">
|
|
<view class="match-panel" @tap.stop>
|
|
<view class="match-top">
|
|
<view class="match-label">半匿名漂流者</view>
|
|
<view class="close" @tap="closeMatch">×</view>
|
|
</view>
|
|
<view class="companion-orb" :class="currentMode">{{ matchedPerson.avatar }}</view>
|
|
<view class="match-name">{{ matchedPerson.name }}</view>
|
|
<view class="match-state">{{ activeMood.label }} · {{ matchedPerson.state }}</view>
|
|
<view class="match-quote">{{ matchedPerson.quote }}</view>
|
|
<view class="match-actions">
|
|
<view class="ghost-btn" @tap="skipMatch">轻轻划过</view>
|
|
<view class="solid-btn" @tap="goChat">进入限时陪伴</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="profile-mask" v-if="showProfile" @tap="closeProfile">
|
|
<view class="profile-mini" @tap.stop>
|
|
<view class="mini-orb">◌</view>
|
|
<view class="mini-title">半匿名漂流者</view>
|
|
<view class="mini-sub">今天更适合：{{ currentMode === 'i' ? '慢一点靠近' : '轻轻热闹一下' }}</view>
|
|
<view class="mini-action" @tap="goUniverse">进入我的宇宙</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: { top: 44 },
|
|
currentMood: 'quiet',
|
|
currentMode: 'i',
|
|
chancesLeft: 3,
|
|
showMatch: false,
|
|
now: new Date(),
|
|
awakeCount: 127,
|
|
displayAwakeCount: 0,
|
|
waitingCount: 49,
|
|
liveTimer: null,
|
|
countTimer: null,
|
|
showProfile: false,
|
|
activeDriftText: '',
|
|
displayMoodCopy: '对方没有催我讲话，沉默变得没那么尴尬。',
|
|
moodTypeTimer: null,
|
|
galaxyRotateX: -8,
|
|
galaxyRotateY: 18,
|
|
galaxyDragging: false,
|
|
galaxyMoved: false,
|
|
galaxyStartX: 0,
|
|
galaxyStartY: 0,
|
|
galaxyAutoAngle: 0,
|
|
galaxyTimer: null,
|
|
orbitPlanets: [
|
|
{ name: 'mint', angle: 12, radiusX: 224, radiusY: 58, size: 18, speed: 1.05, color: 'rgba(169,255,231,.92)' },
|
|
{ name: 'violet', angle: 86, radiusX: 190, radiusY: 92, size: 26, speed: .72, color: 'rgba(162,155,254,.86)' },
|
|
{ name: 'peach', angle: 156, radiusX: 246, radiusY: 74, size: 15, speed: .9, color: 'rgba(255,184,209,.9)' },
|
|
{ name: 'lemon', angle: 218, radiusX: 202, radiusY: 110, size: 12, speed: 1.22, color: 'rgba(255,226,139,.88)' },
|
|
{ name: 'aqua', angle: 288, radiusX: 270, radiusY: 84, size: 22, speed: .62, color: 'rgba(132,233,255,.82)' },
|
|
{ name: 'snow', angle: 332, radiusX: 166, radiusY: 48, size: 10, speed: 1.38, color: 'rgba(255,255,255,.95)' }
|
|
],
|
|
matchText: "随机遇见一个人",
|
|
doneText: "今天先到这里",
|
|
moods: [{"key":"quiet","label":"想安静","icon":"◐","copy":"对方没有催我讲话，沉默变得没那么尴尬。"},{"key":"talk","label":"想说话","icon":"◒","copy":"聊了一个很小的日常话题，心情被拉亮了一点。"},{"key":"listen","label":"听着呢","icon":"◌","copy":"像有人坐在旁边，不需要解释为什么低落。"},{"key":"drift","label":"轻了一点","icon":"✦","copy":"只是给今天留一点柔软的痕迹。"}],
|
|
companions: {"i":[{"name":"树荫下的风","avatar":"风","state":"在校园里发呆","quote":"可以安静待 15 分钟，不用急着找话题。"},{"name":"耳机里的云","avatar":"云","state":"刚从教室出来","quote":"今天只想慢慢说两句。"}],"e":[{"name":"便利店灯光","avatar":"光","state":"想聊点不重要的","quote":"要不要交换一句今天最荒唐的小事？"},{"name":"操场散步员","avatar":"跑","state":"刚从操场回来","quote":"我可以负责开场，你负责随便接。"}]},
|
|
matchedPerson: {},
|
|
stateBubbles: [
|
|
{ type: 'i', text: '有人刚下课，想安静走一会。', time: '2 分钟前' },
|
|
{ type: 'e', text: '一个 e 人想聊 5 分钟废话。', time: '刚刚' },
|
|
{ type: 'i', text: '图书馆三楼有人在发呆。', time: '8 分钟前' }
|
|
],
|
|
quickSignals: [
|
|
{ icon: '☁', text: '有点 emo', sub: '不想解释', mood: 'quiet' },
|
|
{ icon: '✦', text: '太无聊了', sub: '想被拉一下', mood: 'talk' },
|
|
{ icon: '◌', text: '只想旁听', sub: '听别人说说', mood: 'listen' }
|
|
],
|
|
driftMessages: [
|
|
{ type: 'i', mood: 'quiet', text: '东操现在风很舒服' },
|
|
{ type: 'i', mood: 'listen', text: '有人在图书馆假装努力' },
|
|
{ type: 'e', mood: 'talk', text: '谁愿意陪我散步 10 分钟' },
|
|
{ type: 'i', mood: 'quiet', text: '刚刚有人有点低落' },
|
|
{ type: 'e', mood: 'talk', text: '想听一个不重要的故事' },
|
|
{ type: 'i', mood: 'drift', text: '走在路上突然有点空' }
|
|
],
|
|
rules: [{"title":"半匿名","desc":"不展示学校、真实照片和复杂资料。"},{"title":"限时","desc":"房间自然结束，关系不会变成负担。"},{"title":"低压力","desc":"可以聊天，也可以只发一个“我在”。"}]
|
|
}
|
|
},
|
|
computed: {
|
|
activeMood() {
|
|
return this.moods.find(item => item.key === this.currentMood) || this.moods[0]
|
|
},
|
|
timeLabel() {
|
|
const hours = String(this.now.getHours()).padStart(2, '0')
|
|
const minutes = String(this.now.getMinutes()).padStart(2, '0')
|
|
return `${hours}:${minutes}`
|
|
},
|
|
galaxyStyle() {
|
|
return 'transform: translate(-50%, -50%);'
|
|
},
|
|
orbitPlanetStyles() {
|
|
return this.orbitPlanets.map((planet) => {
|
|
const angle = (planet.angle + this.galaxyRotateY + this.galaxyAutoAngle * planet.speed) * Math.PI / 180
|
|
const tilt = this.galaxyRotateX * Math.PI / 180
|
|
const depth = Math.sin(angle)
|
|
const x = Math.cos(angle) * planet.radiusX
|
|
const y = Math.sin(angle) * planet.radiusY * Math.cos(tilt) + Math.sin(tilt) * 20
|
|
const scale = 0.72 + (depth + 1) * 0.18
|
|
const opacity = 0.42 + (depth + 1) * 0.25
|
|
const blur = depth > 0 ? 0 : 1.2
|
|
const zIndex = Math.round(8 + (depth + 1) * 7)
|
|
return [
|
|
`width: ${planet.size}rpx`,
|
|
`height: ${planet.size}rpx`,
|
|
`background: ${planet.color}`,
|
|
`color: ${planet.color}`,
|
|
`opacity: ${opacity}`,
|
|
`z-index: ${zIndex}`,
|
|
`filter: blur(${blur}rpx)`,
|
|
`transform: translate(-50%, -50%) translate(${x}rpx, ${y}rpx) scale(${scale})`
|
|
].join(';')
|
|
})
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (uni.getMenuButtonBoundingClientRect) {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
}
|
|
this.pickCompanion()
|
|
this.animateAwakeCount(this.awakeCount)
|
|
this.liveTimer = setInterval(() => {
|
|
this.now = new Date()
|
|
this.awakeCount = 118 + Math.floor(Math.random() * 28)
|
|
this.waitingCount = 39 + Math.floor(Math.random() * 18)
|
|
this.animateAwakeCount(this.awakeCount)
|
|
}, 2600)
|
|
this.galaxyTimer = setInterval(() => {
|
|
this.galaxyAutoAngle = (this.galaxyAutoAngle + 1.2) % 360
|
|
}, 50)
|
|
this.displayMoodCopy = this.activeMood.copy
|
|
},
|
|
onUnload() {
|
|
if (this.liveTimer) {
|
|
clearInterval(this.liveTimer)
|
|
this.liveTimer = null
|
|
}
|
|
if (this.countTimer) {
|
|
clearInterval(this.countTimer)
|
|
this.countTimer = null
|
|
}
|
|
if (this.galaxyTimer) {
|
|
clearInterval(this.galaxyTimer)
|
|
this.galaxyTimer = null
|
|
}
|
|
if (this.moodTypeTimer) {
|
|
clearInterval(this.moodTypeTimer)
|
|
this.moodTypeTimer = null
|
|
}
|
|
},
|
|
methods: {
|
|
animateAwakeCount(target) {
|
|
if (this.countTimer) {
|
|
clearInterval(this.countTimer)
|
|
}
|
|
const start = this.displayAwakeCount
|
|
const diff = target - start
|
|
let step = 0
|
|
this.countTimer = setInterval(() => {
|
|
step += 1
|
|
const progress = Math.min(step / 18, 1)
|
|
const eased = 1 - Math.pow(1 - progress, 3)
|
|
this.displayAwakeCount = Math.round(start + diff * eased)
|
|
if (progress >= 1) {
|
|
clearInterval(this.countTimer)
|
|
this.countTimer = null
|
|
}
|
|
}, 24)
|
|
},
|
|
pickCompanion() {
|
|
const list = this.companions[this.currentMode]
|
|
this.matchedPerson = list[Math.floor(Math.random() * list.length)]
|
|
},
|
|
openMatch() {
|
|
if (this.chancesLeft === 0) {
|
|
uni.showToast({ title: this.doneText, icon: 'none' })
|
|
return
|
|
}
|
|
this.pickCompanion()
|
|
this.showMatch = true
|
|
},
|
|
closeMatch() { this.showMatch = false },
|
|
toggleMode() {
|
|
this.currentMode = this.currentMode === 'i' ? 'e' : 'i'
|
|
},
|
|
changeMood(key) {
|
|
this.currentMood = key
|
|
this.playMoodCopy(this.activeMood.copy)
|
|
},
|
|
selectDrift(item) {
|
|
this.currentMood = item.mood
|
|
this.currentMode = item.type
|
|
this.playMoodCopy(this.activeMood.copy)
|
|
this.activeDriftText = this.activeDriftText === item.text ? '' : item.text
|
|
},
|
|
playMoodCopy(text) {
|
|
if (this.moodTypeTimer) {
|
|
clearInterval(this.moodTypeTimer)
|
|
this.moodTypeTimer = null
|
|
}
|
|
const chars = Array.from(text)
|
|
let index = 0
|
|
this.displayMoodCopy = ''
|
|
this.moodTypeTimer = setInterval(() => {
|
|
index += 1
|
|
this.displayMoodCopy = chars.slice(0, index).join('')
|
|
if (index >= chars.length) {
|
|
clearInterval(this.moodTypeTimer)
|
|
this.moodTypeTimer = null
|
|
}
|
|
}, 42)
|
|
},
|
|
replyDrift() {
|
|
uni.showToast({ title: '可以从一句话开始', icon: 'none' })
|
|
},
|
|
likeDrift() {
|
|
uni.showToast({ title: '已轻轻回应', icon: 'none' })
|
|
},
|
|
openProfile() {
|
|
this.openMatch()
|
|
},
|
|
closeProfile() {
|
|
this.showProfile = false
|
|
},
|
|
getGalaxyPoint(event) {
|
|
const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0])
|
|
if (!touch) return null
|
|
const x = touch.pageX !== undefined ? touch.pageX : touch.clientX
|
|
const y = touch.pageY !== undefined ? touch.pageY : touch.clientY
|
|
if (x === undefined || y === undefined) return null
|
|
return { x, y }
|
|
},
|
|
startGalaxyDrag(event) {
|
|
const point = this.getGalaxyPoint(event)
|
|
if (!point) return
|
|
this.galaxyDragging = true
|
|
this.galaxyMoved = false
|
|
this.galaxyStartX = point.x
|
|
this.galaxyStartY = point.y
|
|
},
|
|
moveGalaxyDrag(event) {
|
|
if (!this.galaxyDragging) return
|
|
const point = this.getGalaxyPoint(event)
|
|
if (!point) return
|
|
const deltaX = point.x - this.galaxyStartX
|
|
const deltaY = point.y - this.galaxyStartY
|
|
if (Math.abs(deltaX) + Math.abs(deltaY) > 4) {
|
|
this.galaxyMoved = true
|
|
}
|
|
this.galaxyRotateY = (this.galaxyRotateY + deltaX * 0.82) % 360
|
|
this.galaxyRotateX = Math.max(-48, Math.min(48, this.galaxyRotateX - deltaY * 0.28))
|
|
this.galaxyStartX = point.x
|
|
this.galaxyStartY = point.y
|
|
},
|
|
endGalaxyDrag() {
|
|
if (!this.galaxyDragging) return
|
|
this.galaxyDragging = false
|
|
if (!this.galaxyMoved) {
|
|
this.goMatch()
|
|
}
|
|
},
|
|
skipMatch() {
|
|
this.chancesLeft = Math.max(this.chancesLeft - 1, 0)
|
|
this.showMatch = false
|
|
uni.showToast({ title: "这次轻轻划过了", icon: 'none' })
|
|
},
|
|
goChat() {
|
|
this.chancesLeft = Math.max(this.chancesLeft - 1, 0)
|
|
this.showMatch = false
|
|
uni.navigateTo({ url: '/package1/ieBrowser/chat?mode=' + this.currentMode + '&mood=' + this.currentMood })
|
|
},
|
|
goMatch() {
|
|
uni.navigateTo({ url: '/package1/ieBrowser/match?mode=' + this.currentMode + '&mood=' + this.currentMood })
|
|
},
|
|
goRecords() { uni.navigateTo({ url: '/package1/ieBrowser/chatList' }) },
|
|
goArchive() { uni.navigateTo({ url: '/package1/ieBrowser/universe' }) },
|
|
goFate() { uni.navigateTo({ url: '/package1/ieBrowser/fate' }) },
|
|
goMessages() { uni.navigateTo({ url: '/package1/ieBrowser/messages' }) },
|
|
goUniverse() { uni.navigateTo({ url: '/package1/ieBrowser/universe' }) }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #f7f9ff;
|
|
}
|
|
|
|
.ie-page {
|
|
min-height: 100vh;
|
|
padding: 0 32rpx 164rpx;
|
|
box-sizing: border-box;
|
|
color: #161b2e;
|
|
background:
|
|
radial-gradient(circle at 82% 8%, rgba(221, 231, 255, .96), rgba(221, 231, 255, 0) 330rpx),
|
|
radial-gradient(circle at 18% 28%, rgba(169, 255, 231, .48), rgba(169, 255, 231, 0) 300rpx),
|
|
radial-gradient(circle at 86% 62%, rgba(255, 184, 209, .32), rgba(255, 184, 209, 0) 360rpx),
|
|
linear-gradient(180deg, #fbfdff 0%, #eef4ff 52%, #fff4e8 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ambient {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(10rpx);
|
|
opacity: .74;
|
|
animation: floatGlow 8s ease-in-out infinite;
|
|
}
|
|
|
|
.ambient-a {
|
|
top: 190rpx;
|
|
right: -90rpx;
|
|
width: 250rpx;
|
|
height: 250rpx;
|
|
background: rgba(139, 124, 255, .16);
|
|
}
|
|
|
|
.ambient-b {
|
|
left: -130rpx;
|
|
top: 520rpx;
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
background: rgba(255, 214, 165, .34);
|
|
animation-delay: 1.6s;
|
|
}
|
|
|
|
.page-head {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding-top: 76rpx;
|
|
animation: riseIn .58s ease both;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: rgba(22, 27, 46, .42);
|
|
font-size: 22rpx;
|
|
letter-spacing: 6rpx;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-title {
|
|
margin-top: 18rpx;
|
|
font-size: 56rpx;
|
|
line-height: 68rpx;
|
|
font-weight: 800;
|
|
letter-spacing: -1rpx;
|
|
}
|
|
|
|
.hero-desc {
|
|
width: 500rpx;
|
|
margin-top: 16rpx;
|
|
color: rgba(22, 27, 46, .56);
|
|
font-size: 26rpx;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.archive-entry {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, .8);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 92rpx;
|
|
color: rgba(22, 27, 46, .58);
|
|
font-size: 23rpx;
|
|
background: rgba(255, 255, 255, .62);
|
|
backdrop-filter: blur(24rpx);
|
|
box-shadow: 0 18rpx 50rpx rgba(96, 112, 160, .12);
|
|
}
|
|
|
|
.night-card,
|
|
.chance-card,
|
|
.state-flow {
|
|
position: relative;
|
|
z-index: 1;
|
|
border: 1rpx solid rgba(255, 255, 255, .76);
|
|
background: rgba(255, 255, 255, .62);
|
|
box-shadow: 0 28rpx 80rpx rgba(96, 112, 160, .13);
|
|
backdrop-filter: blur(28rpx);
|
|
animation: riseIn .58s ease both;
|
|
}
|
|
|
|
.night-card {
|
|
margin-top: 54rpx;
|
|
padding: 38rpx;
|
|
border-radius: 46rpx;
|
|
animation-delay: .08s;
|
|
}
|
|
|
|
.night-label,
|
|
.match-label {
|
|
color: #6c69d8;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.night-copy {
|
|
margin-top: 18rpx;
|
|
color: #161b2e;
|
|
font-size: 38rpx;
|
|
line-height: 58rpx;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.mood-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.mood-chip {
|
|
height: 62rpx;
|
|
line-height: 62rpx;
|
|
padding: 0 26rpx;
|
|
margin: 0 16rpx 16rpx 0;
|
|
border-radius: 999rpx;
|
|
color: rgba(22, 27, 46, .52);
|
|
background: rgba(255, 255, 255, .58);
|
|
font-size: 24rpx;
|
|
transition: all .24s ease;
|
|
}
|
|
|
|
.mood-chip.active {
|
|
color: #11162a;
|
|
background: #a9ffe7;
|
|
box-shadow: 0 12rpx 28rpx rgba(169, 255, 231, .28);
|
|
}
|
|
|
|
.mode-section {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 42rpx;
|
|
animation: riseIn .58s ease .14s both;
|
|
}
|
|
|
|
.section-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: 20rpx;
|
|
color: #161b2e;
|
|
font-size: 30rpx;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.section-more {
|
|
margin-bottom: 20rpx;
|
|
color: rgba(22, 27, 46, .38);
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.mode-grid {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.mode-card {
|
|
flex: 1;
|
|
min-height: 218rpx;
|
|
padding: 30rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, .76);
|
|
border-radius: 38rpx;
|
|
background: rgba(255, 255, 255, .5);
|
|
box-sizing: border-box;
|
|
box-shadow: 0 18rpx 54rpx rgba(96, 112, 160, .1);
|
|
transition: transform .18s ease, border-color .24s ease, background .24s ease;
|
|
}
|
|
|
|
.mode-card:active,
|
|
.match-button:active,
|
|
.state-bubble:active {
|
|
transform: scale(.97);
|
|
}
|
|
|
|
.mode-card.active {
|
|
border-color: rgba(169, 255, 231, .95);
|
|
background: rgba(255, 255, 255, .72);
|
|
}
|
|
|
|
.mode-mark {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
border-radius: 28rpx;
|
|
text-align: center;
|
|
line-height: 76rpx;
|
|
font-size: 42rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.mode-i .mode-mark {
|
|
color: #f7f4ff;
|
|
background: #8b7cff;
|
|
}
|
|
|
|
.mode-e .mode-mark {
|
|
color: #11162a;
|
|
background: #a9ffe7;
|
|
}
|
|
|
|
.mode-title {
|
|
margin-top: 24rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.mode-desc {
|
|
margin-top: 12rpx;
|
|
color: rgba(22, 27, 46, .52);
|
|
font-size: 23rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.chance-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 34rpx;
|
|
padding: 32rpx;
|
|
border-radius: 38rpx;
|
|
animation-delay: .2s;
|
|
}
|
|
|
|
.chance-title {
|
|
font-size: 30rpx;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.chance-sub {
|
|
margin-top: 10rpx;
|
|
color: rgba(22, 27, 46, .5);
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.chance-count {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 110rpx;
|
|
color: #11162a;
|
|
background: linear-gradient(145deg, #ffffff, #a9ffe7);
|
|
font-size: 34rpx;
|
|
font-weight: 800;
|
|
box-shadow: 0 18rpx 42rpx rgba(169, 255, 231, .34);
|
|
}
|
|
|
|
.match-button {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 108rpx;
|
|
margin-top: 34rpx;
|
|
border-radius: 999rpx;
|
|
text-align: center;
|
|
line-height: 108rpx;
|
|
color: #11162a;
|
|
background: linear-gradient(135deg, #ffffff, #a9ffe7 58%, #ffd6a5);
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
box-shadow: 0 24rpx 58rpx rgba(169, 255, 231, .3);
|
|
overflow: hidden;
|
|
animation: breathButton 2.8s ease-in-out infinite;
|
|
}
|
|
|
|
.match-button.disabled {
|
|
color: rgba(22, 27, 46, .36);
|
|
background: rgba(255, 255, 255, .48);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.pulse {
|
|
position: absolute;
|
|
left: 34rpx;
|
|
top: 34rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
background: rgba(139, 124, 255, .16);
|
|
}
|
|
|
|
.state-flow {
|
|
margin-top: 44rpx;
|
|
padding: 30rpx;
|
|
border-radius: 40rpx;
|
|
animation-delay: .26s;
|
|
}
|
|
|
|
.flow-cloud {
|
|
min-height: 280rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.state-bubble {
|
|
width: 560rpx;
|
|
margin-bottom: 18rpx;
|
|
padding: 24rpx 26rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, .56);
|
|
box-shadow: 0 14rpx 38rpx rgba(96, 112, 160, .1);
|
|
display: flex;
|
|
align-items: center;
|
|
animation: floatBubble 7s ease-in-out infinite;
|
|
}
|
|
|
|
.state-bubble:nth-child(2) {
|
|
width: 500rpx;
|
|
margin-left: 80rpx;
|
|
animation-delay: .9s;
|
|
}
|
|
|
|
.state-bubble:nth-child(3) {
|
|
width: 540rpx;
|
|
margin-left: 26rpx;
|
|
animation-delay: 1.8s;
|
|
}
|
|
|
|
.bubble-type {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
margin-right: 18rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 54rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.bubble-type.i {
|
|
color: #f7f4ff;
|
|
background: #8b7cff;
|
|
}
|
|
|
|
.bubble-type.e {
|
|
color: #11162a;
|
|
background: #a9ffe7;
|
|
}
|
|
|
|
.bubble-text {
|
|
flex: 1;
|
|
color: rgba(22, 27, 46, .72);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.bubble-time {
|
|
margin-left: 14rpx;
|
|
color: rgba(22, 27, 46, .34);
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.bottom-actions {
|
|
position: fixed;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
bottom: 30rpx;
|
|
z-index: 10;
|
|
display: flex;
|
|
padding: 10rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, .76);
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, .62);
|
|
backdrop-filter: blur(24rpx);
|
|
box-shadow: 0 20rpx 60rpx rgba(96, 112, 160, .16);
|
|
}
|
|
|
|
.bottom-item {
|
|
flex: 1;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
text-align: center;
|
|
border-radius: 999rpx;
|
|
color: rgba(22, 27, 46, .45);
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.bottom-item.active {
|
|
color: #11162a;
|
|
background: #dffef4;
|
|
}
|
|
|
|
.match-mask {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 30rpx;
|
|
background: rgba(22, 27, 46, .18);
|
|
backdrop-filter: blur(18rpx);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.match-panel {
|
|
width: 100%;
|
|
padding: 34rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, .76);
|
|
border-radius: 46rpx;
|
|
background: rgba(255, 255, 255, .76);
|
|
box-sizing: border-box;
|
|
box-shadow: 0 30rpx 90rpx rgba(96, 112, 160, .18);
|
|
}
|
|
|
|
.match-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.close {
|
|
color: rgba(22, 27, 46, .45);
|
|
font-size: 42rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.companion-orb {
|
|
width: 152rpx;
|
|
height: 152rpx;
|
|
margin: 34rpx auto 0;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 152rpx;
|
|
font-size: 48rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.companion-orb.i {
|
|
color: #f7f4ff;
|
|
background: linear-gradient(145deg, #8b7cff, #dde7ff);
|
|
}
|
|
|
|
.companion-orb.e {
|
|
color: #11162a;
|
|
background: linear-gradient(145deg, #a9ffe7, #ffd6a5);
|
|
}
|
|
|
|
.match-name {
|
|
margin-top: 24rpx;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.match-state {
|
|
margin-top: 10rpx;
|
|
text-align: center;
|
|
color: rgba(22, 27, 46, .48);
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.match-quote {
|
|
margin-top: 30rpx;
|
|
padding: 26rpx;
|
|
border-radius: 28rpx;
|
|
color: rgba(22, 27, 46, .72);
|
|
background: rgba(255, 255, 255, .58);
|
|
font-size: 26rpx;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.match-actions {
|
|
display: flex;
|
|
gap: 18rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.ghost-btn,
|
|
.solid-btn {
|
|
flex: 1;
|
|
height: 86rpx;
|
|
border-radius: 999rpx;
|
|
text-align: center;
|
|
line-height: 86rpx;
|
|
font-size: 25rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ghost-btn {
|
|
color: rgba(22, 27, 46, .55);
|
|
background: rgba(255, 255, 255, .54);
|
|
}
|
|
|
|
.solid-btn {
|
|
color: #11162a;
|
|
background: #a9ffe7;
|
|
}
|
|
|
|
@keyframes riseIn {
|
|
from { opacity: 0; transform: translateY(20rpx); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes floatGlow {
|
|
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
|
|
50% { transform: translate3d(20rpx, -26rpx, 0) scale(1.08); }
|
|
}
|
|
|
|
@keyframes floatBubble {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12rpx); }
|
|
}
|
|
|
|
@keyframes breathButton {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.018); }
|
|
}
|
|
|
|
.ie-page {
|
|
padding-bottom: 170rpx;
|
|
color: #161b2e;
|
|
background:
|
|
radial-gradient(circle at 12% 10%, rgba(221,231,255,.92), transparent 320rpx),
|
|
radial-gradient(circle at 88% 18%, rgba(169,255,231,.54), transparent 360rpx),
|
|
radial-gradient(circle at 20% 72%, rgba(255,214,165,.5), transparent 380rpx),
|
|
radial-gradient(circle at 86% 78%, rgba(255,184,209,.32), transparent 420rpx),
|
|
linear-gradient(180deg, #fbfdff 0%, #eef4ff 58%, #fff7ec 100%);
|
|
}
|
|
|
|
.ie-page::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
opacity: .12;
|
|
background-image:
|
|
radial-gradient(circle, rgba(22,27,46,.34) 0 1rpx, transparent 1rpx),
|
|
radial-gradient(circle, rgba(139,124,255,.22) 0 1rpx, transparent 1rpx);
|
|
background-size: 42rpx 42rpx, 68rpx 68rpx;
|
|
animation: noiseFloat 9s steps(6) infinite;
|
|
}
|
|
|
|
.ie-page::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: -20%;
|
|
top: -15%;
|
|
width: 140%;
|
|
height: 120%;
|
|
pointer-events: none;
|
|
background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.42), transparent 45%, rgba(169,255,231,.24), transparent 70%);
|
|
filter: blur(18rpx);
|
|
animation: auroraMove 12s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.status-head {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding-top: 74rpx;
|
|
}
|
|
|
|
.time-line {
|
|
font-size: 46rpx;
|
|
line-height: 58rpx;
|
|
font-weight: 300;
|
|
letter-spacing: 2rpx;
|
|
color: #161b2e;
|
|
}
|
|
|
|
.live-line {
|
|
width: 560rpx;
|
|
margin-top: 18rpx;
|
|
font-size: 34rpx;
|
|
line-height: 48rpx;
|
|
font-weight: 700;
|
|
color: #161b2e;
|
|
}
|
|
|
|
.sub-line {
|
|
margin-top: 8rpx;
|
|
color: rgba(22,27,46,.48);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.status-head .archive-entry {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 72rpx;
|
|
width: 134rpx;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
border-radius: 999rpx;
|
|
color: rgba(22,27,46,.58);
|
|
background: rgba(255,255,255,.58);
|
|
border-color: rgba(255,255,255,.78);
|
|
box-shadow: 0 24rpx 70rpx rgba(96,112,160,.13);
|
|
}
|
|
|
|
.drift-field {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 660rpx;
|
|
margin-top: 28rpx;
|
|
}
|
|
|
|
.wave-line {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
border: 1rpx solid rgba(139,124,255,.16);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%) rotate(-12deg);
|
|
}
|
|
|
|
.wave-a {
|
|
width: 620rpx;
|
|
height: 310rpx;
|
|
animation: orbitBreath 7.5s ease-in-out infinite;
|
|
}
|
|
|
|
.wave-b {
|
|
width: 460rpx;
|
|
height: 460rpx;
|
|
border-color: rgba(169,255,231,.34);
|
|
animation: orbitSpin 18s linear infinite;
|
|
}
|
|
|
|
.signal-planet {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 246rpx;
|
|
height: 246rpx;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.52);
|
|
box-shadow:
|
|
0 0 0 1rpx rgba(255,255,255,.78),
|
|
0 28rpx 90rpx rgba(169,255,231,.24),
|
|
inset 0 0 70rpx rgba(255,255,255,.38);
|
|
backdrop-filter: blur(26rpx);
|
|
overflow: hidden;
|
|
animation: planetBreath 3.2s ease-in-out infinite;
|
|
}
|
|
|
|
.liquid {
|
|
position: absolute;
|
|
border-radius: 45%;
|
|
filter: blur(2rpx);
|
|
}
|
|
|
|
.liquid-a {
|
|
left: -30rpx;
|
|
top: 22rpx;
|
|
width: 220rpx;
|
|
height: 190rpx;
|
|
background: rgba(169,255,231,.58);
|
|
animation: liquidMove 7s ease-in-out infinite;
|
|
}
|
|
|
|
.liquid-b {
|
|
right: -44rpx;
|
|
bottom: 10rpx;
|
|
width: 190rpx;
|
|
height: 210rpx;
|
|
background: rgba(139,124,255,.28);
|
|
animation: liquidMove 8s ease-in-out infinite reverse;
|
|
}
|
|
|
|
.planet-core {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.planet-text {
|
|
width: 150rpx;
|
|
font-size: 28rpx;
|
|
line-height: 38rpx;
|
|
font-weight: 700;
|
|
color: #161b2e;
|
|
}
|
|
|
|
.planet-sub {
|
|
margin-top: 10rpx;
|
|
color: rgba(22,27,46,.48);
|
|
font-size: 21rpx;
|
|
}
|
|
|
|
.drift-fragment {
|
|
position: absolute;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16rpx 22rpx;
|
|
border: 1rpx solid rgba(255,255,255,.78);
|
|
border-radius: 999rpx;
|
|
background: rgba(255,255,255,.64);
|
|
backdrop-filter: blur(22rpx);
|
|
box-shadow: 0 18rpx 60rpx rgba(0,0,0,.12);
|
|
animation: fragmentFloat 8s ease-in-out infinite;
|
|
}
|
|
|
|
.fragment-dot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
margin-right: 12rpx;
|
|
border-radius: 50%;
|
|
background: #a9ffe7;
|
|
box-shadow: 0 0 20rpx rgba(169,255,231,.8);
|
|
}
|
|
|
|
.drift-fragment.e .fragment-dot {
|
|
background: #ffd6a5;
|
|
box-shadow: 0 0 20rpx rgba(255,214,165,.75);
|
|
}
|
|
|
|
.fragment-text {
|
|
color: rgba(22,27,46,.72);
|
|
font-size: 23rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fragment-0 { left: 18rpx; top: 72rpx; animation-delay: .2s; }
|
|
.fragment-1 { right: 18rpx; top: 154rpx; animation-delay: 1.1s; }
|
|
.fragment-2 { left: 62rpx; bottom: 110rpx; animation-delay: 2s; }
|
|
.fragment-3 { right: 26rpx; bottom: 196rpx; animation-delay: .6s; }
|
|
.fragment-4 { left: 210rpx; top: 18rpx; animation-delay: 1.7s; }
|
|
.fragment-5 { left: 154rpx; bottom: 28rpx; animation-delay: 2.4s; }
|
|
|
|
.mood-dock {
|
|
position: relative;
|
|
z-index: 3;
|
|
margin-top: -34rpx;
|
|
padding: 28rpx;
|
|
border: 1rpx solid rgba(255,255,255,.9);
|
|
border-radius: 42rpx;
|
|
background:
|
|
linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
|
|
radial-gradient(circle at 18% 0%, rgba(169,255,231,.26), transparent 180rpx),
|
|
radial-gradient(circle at 88% 100%, rgba(255,184,209,.16), transparent 220rpx);
|
|
backdrop-filter: blur(30rpx);
|
|
box-shadow:
|
|
0 28rpx 80rpx rgba(96,112,160,.16),
|
|
inset 0 1rpx 0 rgba(255,255,255,.96),
|
|
inset 0 -1rpx 0 rgba(139,124,255,.08);
|
|
overflow: hidden;
|
|
animation: panelBreath 5.6s ease-in-out infinite;
|
|
}
|
|
|
|
.mood-dock::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -20%;
|
|
top: -80%;
|
|
width: 140%;
|
|
height: 120%;
|
|
background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.48), transparent 58%);
|
|
animation: glassSweep 7s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dock-title {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: rgba(22,27,46,.72);
|
|
font-size: 27rpx;
|
|
line-height: 42rpx;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.dock-scroll {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dock-row {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.mood-dock .mood-chip,
|
|
.mode-switch {
|
|
flex-shrink: 0;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
padding: 0 26rpx;
|
|
margin-right: 14rpx;
|
|
border-radius: 999rpx;
|
|
color: rgba(22,27,46,.5);
|
|
background: rgba(255,255,255,.72);
|
|
border: 1rpx solid rgba(255,255,255,.82);
|
|
box-shadow:
|
|
0 10rpx 28rpx rgba(96,112,160,.08),
|
|
inset 0 1rpx 0 rgba(255,255,255,.9);
|
|
font-size: 23rpx;
|
|
transition: transform .16s ease, background .24s ease;
|
|
}
|
|
|
|
.mood-dock .mood-chip:active,
|
|
.mode-switch:active {
|
|
transform: scale(.96);
|
|
}
|
|
|
|
.mood-dock .mood-chip.active {
|
|
color: #161b2e;
|
|
background: linear-gradient(135deg, #eafff8, #a9ffe7);
|
|
box-shadow:
|
|
0 14rpx 34rpx rgba(169,255,231,.34),
|
|
inset 0 1rpx 0 rgba(255,255,255,.92);
|
|
}
|
|
|
|
.mode-switch {
|
|
color: #6c69d8;
|
|
border: 1rpx solid rgba(139,124,255,.2);
|
|
background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(221,231,255,.58));
|
|
}
|
|
|
|
.page-head,
|
|
.night-card:not(.mood-console),
|
|
.mode-section,
|
|
.chance-card,
|
|
.match-button,
|
|
.state-flow,
|
|
.quick-signals {
|
|
display: none;
|
|
}
|
|
|
|
.bottom-actions {
|
|
padding: 12rpx;
|
|
border-radius: 999rpx;
|
|
background:
|
|
linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
|
|
radial-gradient(circle at 12% 0%, rgba(169,255,231,.2), transparent 160rpx);
|
|
border: 1rpx solid rgba(255,255,255,.9);
|
|
box-shadow:
|
|
0 24rpx 80rpx rgba(96,112,160,.18),
|
|
inset 0 1rpx 0 rgba(255,255,255,.96),
|
|
inset 0 -1rpx 0 rgba(139,124,255,.08);
|
|
}
|
|
|
|
.bottom-item {
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
color: rgba(22,27,46,.38);
|
|
transition: transform .16s ease, background .24s ease;
|
|
}
|
|
|
|
.bottom-item:active {
|
|
transform: scale(.96);
|
|
}
|
|
|
|
.bottom-item.active {
|
|
color: #161b2e;
|
|
background: linear-gradient(135deg, #eafff8, #a9ffe7);
|
|
box-shadow:
|
|
0 12rpx 30rpx rgba(169,255,231,.34),
|
|
inset 0 1rpx 0 rgba(255,255,255,.95);
|
|
}
|
|
|
|
@keyframes panelBreath {
|
|
0%, 100% { transform: translateY(0); box-shadow: 0 28rpx 80rpx rgba(96,112,160,.16), inset 0 1rpx 0 rgba(255,255,255,.96), inset 0 -1rpx 0 rgba(139,124,255,.08); }
|
|
50% { transform: translateY(-4rpx); box-shadow: 0 34rpx 92rpx rgba(96,112,160,.2), inset 0 1rpx 0 rgba(255,255,255,.98), inset 0 -1rpx 0 rgba(139,124,255,.12); }
|
|
}
|
|
|
|
@keyframes glassSweep {
|
|
0%, 70%, 100% { transform: translateX(-40%) rotate(8deg); opacity: 0; }
|
|
80% { opacity: .7; }
|
|
92% { transform: translateX(45%) rotate(8deg); opacity: 0; }
|
|
}
|
|
|
|
@keyframes noiseFloat {
|
|
0%, 100% { transform: translate3d(0,0,0); }
|
|
50% { transform: translate3d(-16rpx, 10rpx, 0); }
|
|
}
|
|
|
|
@keyframes auroraMove {
|
|
from { transform: translateX(-70rpx) rotate(-4deg); opacity: .5; }
|
|
to { transform: translateX(70rpx) rotate(4deg); opacity: .9; }
|
|
}
|
|
|
|
@keyframes orbitBreath {
|
|
0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(.96); opacity: .42; }
|
|
50% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.05); opacity: .9; }
|
|
}
|
|
|
|
@keyframes orbitSpin {
|
|
from { transform: translate(-50%, -50%) rotate(0deg); }
|
|
to { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
@keyframes planetBreath {
|
|
0%, 100% { transform: translate(-50%, -50%) scale(.98); }
|
|
50% { transform: translate(-50%, -50%) scale(1.04); }
|
|
}
|
|
|
|
@keyframes liquidMove {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
50% { transform: translate(22rpx, 18rpx) rotate(18deg) scale(1.12); }
|
|
}
|
|
|
|
@keyframes fragmentFloat {
|
|
0%, 100% { transform: translate3d(0,0,0); }
|
|
50% { transform: translate3d(0,-18rpx,0); }
|
|
}
|
|
|
|
/* All-day airy theme override: keep motion, remove heavy night mood. */
|
|
.ie-page {
|
|
color: #161b2e;
|
|
background:
|
|
radial-gradient(circle at 12% 10%, rgba(221,231,255,.92), transparent 320rpx),
|
|
radial-gradient(circle at 88% 18%, rgba(169,255,231,.54), transparent 360rpx),
|
|
radial-gradient(circle at 20% 72%, rgba(255,214,165,.5), transparent 380rpx),
|
|
radial-gradient(circle at 86% 78%, rgba(255,184,209,.32), transparent 420rpx),
|
|
linear-gradient(180deg, #fbfdff 0%, #eef4ff 58%, #fff7ec 100%);
|
|
}
|
|
|
|
.ie-page::before {
|
|
opacity: .11;
|
|
background-image:
|
|
radial-gradient(circle, rgba(22,27,46,.34) 0 1rpx, transparent 1rpx),
|
|
radial-gradient(circle, rgba(139,124,255,.22) 0 1rpx, transparent 1rpx);
|
|
}
|
|
|
|
.ie-page::after {
|
|
background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.42), transparent 42%, rgba(169,255,231,.24), transparent 70%);
|
|
opacity: .75;
|
|
}
|
|
|
|
.time-line,
|
|
.live-line,
|
|
.planet-text {
|
|
color: #161b2e;
|
|
}
|
|
|
|
.sub-line,
|
|
.planet-sub {
|
|
color: rgba(22,27,46,.48);
|
|
}
|
|
|
|
.status-head .archive-entry,
|
|
.mood-dock,
|
|
.drift-fragment,
|
|
.bottom-actions {
|
|
background: rgba(255,255,255,.58);
|
|
border-color: rgba(255,255,255,.78);
|
|
box-shadow: 0 24rpx 70rpx rgba(96,112,160,.13);
|
|
}
|
|
|
|
.drift-fragment {
|
|
background: rgba(255,255,255,.64);
|
|
}
|
|
|
|
.fragment-text,
|
|
.dock-title {
|
|
color: rgba(22,27,46,.72);
|
|
}
|
|
|
|
.wave-line {
|
|
border-color: rgba(139,124,255,.16);
|
|
}
|
|
|
|
.wave-b {
|
|
border-color: rgba(169,255,231,.34);
|
|
}
|
|
|
|
.signal-planet {
|
|
background: rgba(255,255,255,.52);
|
|
box-shadow:
|
|
0 0 0 1rpx rgba(255,255,255,.78),
|
|
0 28rpx 90rpx rgba(169,255,231,.24),
|
|
inset 0 0 70rpx rgba(255,255,255,.38);
|
|
}
|
|
|
|
.liquid-a {
|
|
background: rgba(169,255,231,.58);
|
|
}
|
|
|
|
.liquid-b {
|
|
background: rgba(139,124,255,.28);
|
|
}
|
|
|
|
.mood-dock .mood-chip,
|
|
.mode-switch {
|
|
color: rgba(22,27,46,.54);
|
|
background: rgba(255,255,255,.68);
|
|
}
|
|
|
|
.mode-switch {
|
|
color: #6c69d8;
|
|
border-color: rgba(139,124,255,.18);
|
|
}
|
|
|
|
.bottom-actions {
|
|
background: rgba(255,255,255,.72);
|
|
}
|
|
|
|
.bottom-item {
|
|
color: rgba(22,27,46,.42);
|
|
}
|
|
|
|
.bottom-item.active {
|
|
color: #161b2e;
|
|
background: rgba(169,255,231,.9);
|
|
}
|
|
|
|
/* Final polish for the two floating controls. */
|
|
.mood-dock {
|
|
background:
|
|
linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
|
|
radial-gradient(circle at 18% 0%, rgba(169,255,231,.26), transparent 180rpx),
|
|
radial-gradient(circle at 88% 100%, rgba(255,184,209,.16), transparent 220rpx);
|
|
border-color: rgba(255,255,255,.9);
|
|
border-radius: 42rpx;
|
|
box-shadow:
|
|
0 28rpx 80rpx rgba(96,112,160,.16),
|
|
inset 0 1rpx 0 rgba(255,255,255,.96),
|
|
inset 0 -1rpx 0 rgba(139,124,255,.08);
|
|
}
|
|
|
|
.mood-dock .mood-chip,
|
|
.mode-switch {
|
|
background: rgba(255,255,255,.72);
|
|
border: 1rpx solid rgba(255,255,255,.82);
|
|
box-shadow: 0 10rpx 28rpx rgba(96,112,160,.08), inset 0 1rpx 0 rgba(255,255,255,.9);
|
|
}
|
|
|
|
.mood-dock .mood-chip.active {
|
|
background: linear-gradient(135deg, #eafff8, #a9ffe7);
|
|
box-shadow: 0 14rpx 34rpx rgba(169,255,231,.34), inset 0 1rpx 0 rgba(255,255,255,.92);
|
|
}
|
|
|
|
.bottom-actions {
|
|
background:
|
|
linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58)),
|
|
radial-gradient(circle at 12% 0%, rgba(169,255,231,.2), transparent 160rpx);
|
|
border-color: rgba(255,255,255,.9);
|
|
box-shadow:
|
|
0 24rpx 80rpx rgba(96,112,160,.18),
|
|
inset 0 1rpx 0 rgba(255,255,255,.96),
|
|
inset 0 -1rpx 0 rgba(139,124,255,.08);
|
|
}
|
|
|
|
.bottom-item.active {
|
|
background: linear-gradient(135deg, #eafff8, #a9ffe7);
|
|
box-shadow: 0 12rpx 30rpx rgba(169,255,231,.34), inset 0 1rpx 0 rgba(255,255,255,.95);
|
|
}
|
|
|
|
/* Z-generation Morandi neumorphism polish. */
|
|
.live-line {
|
|
font-size: 48rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 300;
|
|
letter-spacing: -1rpx;
|
|
}
|
|
|
|
.count-num {
|
|
display: inline-block;
|
|
min-width: 74rpx;
|
|
font-weight: 700;
|
|
color: #6c5ce7;
|
|
animation: countPop .42s ease;
|
|
}
|
|
|
|
.sub-line {
|
|
display: inline-block;
|
|
margin-top: 16rpx;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255,255,255,.52);
|
|
backdrop-filter: blur(16rpx);
|
|
box-shadow: inset 0 1rpx 0 rgba(255,255,255,.9), 0 10rpx 28rpx rgba(96,112,160,.08);
|
|
text-align: left;
|
|
}
|
|
|
|
.planet-entry {
|
|
width: 88rpx !important;
|
|
height: 88rpx !important;
|
|
border-radius: 50% !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
|
|
box-shadow: 0 18rpx 46rpx rgba(108,92,231,.28), 0 0 0 10rpx rgba(162,155,254,.12) !important;
|
|
transition: transform .18s ease;
|
|
}
|
|
|
|
.planet-entry:active {
|
|
transform: scale(.94);
|
|
box-shadow: 0 24rpx 62rpx rgba(108,92,231,.36), 0 0 0 16rpx rgba(162,155,254,.12) !important;
|
|
}
|
|
|
|
.planet-ring {
|
|
position: absolute;
|
|
width: 62rpx;
|
|
height: 28rpx;
|
|
border: 3rpx solid rgba(255,255,255,.5);
|
|
border-radius: 50%;
|
|
transform: rotate(-18deg);
|
|
}
|
|
|
|
.planet-icon {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: #fff;
|
|
font-size: 42rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.drift-fragment {
|
|
border-radius: 40rpx;
|
|
box-shadow:
|
|
10rpx 14rpx 34rpx rgba(150,164,190,.16),
|
|
-8rpx -8rpx 24rpx rgba(255,255,255,.82),
|
|
inset 1rpx 1rpx 1rpx rgba(255,255,255,.9),
|
|
inset -2rpx -2rpx 6rpx rgba(139,124,255,.06);
|
|
transition: transform .18s ease, box-shadow .18s ease;
|
|
}
|
|
|
|
.drift-fragment:active {
|
|
transform: translateY(-8rpx) scale(1.02);
|
|
box-shadow:
|
|
14rpx 20rpx 46rpx rgba(150,164,190,.2),
|
|
-8rpx -8rpx 24rpx rgba(255,255,255,.9),
|
|
inset 1rpx 1rpx 1rpx rgba(255,255,255,.95);
|
|
}
|
|
|
|
.drift-fragment.quiet,
|
|
.drift-fragment.listen,
|
|
.drift-fragment.drift {
|
|
background: linear-gradient(135deg, rgba(229,238,248,.86), rgba(255,255,255,.62));
|
|
}
|
|
|
|
.drift-fragment.talk {
|
|
background: linear-gradient(135deg, rgba(255,214,165,.74), rgba(255,255,255,.62));
|
|
}
|
|
|
|
.drift-fragment.e {
|
|
background: linear-gradient(135deg, rgba(255,184,209,.62), rgba(255,255,255,.62));
|
|
}
|
|
|
|
.bubble-actions {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 72rpx;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
padding: 8rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255,255,255,.72);
|
|
backdrop-filter: blur(18rpx);
|
|
box-shadow: 0 16rpx 40rpx rgba(96,112,160,.14);
|
|
}
|
|
|
|
.bubble-actions view {
|
|
padding: 8rpx 18rpx;
|
|
border-radius: 999rpx;
|
|
color: rgba(22,27,46,.62);
|
|
font-size: 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.signal-planet {
|
|
border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%;
|
|
animation: planetBreath 3.2s ease-in-out infinite, blobMorph 9s ease-in-out infinite;
|
|
}
|
|
|
|
.signal-planet {
|
|
width: 370rpx;
|
|
height: 370rpx;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
perspective: 980rpx;
|
|
animation: none;
|
|
}
|
|
|
|
.galaxy-breath {
|
|
position: absolute;
|
|
inset: 0;
|
|
animation: galaxyBreath 4.2s ease-in-out infinite;
|
|
}
|
|
|
|
.galaxy-body {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 226rpx;
|
|
height: 226rpx;
|
|
transform: translate(-50%, -50%) translateZ(34rpx);
|
|
border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%;
|
|
background:
|
|
radial-gradient(circle at 28% 24%, rgba(255,255,255,.92), rgba(255,255,255,0) 36%),
|
|
radial-gradient(circle at 70% 74%, rgba(162,155,254,.64), rgba(162,155,254,0) 44%),
|
|
linear-gradient(135deg, rgba(169,255,231,.74), rgba(221,231,255,.72) 54%, rgba(255,184,209,.48));
|
|
box-shadow:
|
|
0 34rpx 90rpx rgba(108,92,231,.2),
|
|
inset 10rpx 12rpx 34rpx rgba(255,255,255,.62),
|
|
inset -20rpx -22rpx 42rpx rgba(108,92,231,.17);
|
|
overflow: hidden;
|
|
z-index: 12;
|
|
animation: blobMorph 9s ease-in-out infinite;
|
|
}
|
|
|
|
.galaxy-body::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 22rpx;
|
|
top: 18rpx;
|
|
width: 88rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(255,255,255,.82), rgba(255,255,255,0) 68%);
|
|
filter: blur(2rpx);
|
|
z-index: 1;
|
|
}
|
|
|
|
.galaxy-ring {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.orbit-planet {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
box-shadow:
|
|
0 0 18rpx rgba(255,255,255,.72),
|
|
0 0 34rpx currentColor,
|
|
inset 3rpx 4rpx 8rpx rgba(255,255,255,.68),
|
|
inset -4rpx -5rpx 10rpx rgba(108,92,231,.18);
|
|
transition: transform .08s linear, opacity .08s linear, filter .08s linear;
|
|
}
|
|
|
|
.orbit-planet::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 18%;
|
|
top: 16%;
|
|
width: 34%;
|
|
height: 28%;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.86);
|
|
filter: blur(1rpx);
|
|
}
|
|
|
|
.orbit-planet-1,
|
|
.orbit-planet-4 {
|
|
box-shadow:
|
|
0 0 22rpx rgba(162,155,254,.42),
|
|
0 0 46rpx currentColor,
|
|
inset 4rpx 5rpx 10rpx rgba(255,255,255,.66),
|
|
inset -5rpx -7rpx 12rpx rgba(108,92,231,.2);
|
|
}
|
|
|
|
.ring-main {
|
|
width: 430rpx;
|
|
height: 132rpx;
|
|
margin-left: -215rpx;
|
|
margin-top: -66rpx;
|
|
border: 12rpx solid rgba(111, 231, 224, .34);
|
|
box-shadow: 0 0 34rpx rgba(169,255,231,.3), inset 0 0 22rpx rgba(255,255,255,.44);
|
|
transform: rotateX(66deg) rotateZ(-14deg);
|
|
animation: ringDrift 9s linear infinite;
|
|
}
|
|
|
|
.ring-second {
|
|
width: 360rpx;
|
|
height: 108rpx;
|
|
margin-left: -180rpx;
|
|
margin-top: -54rpx;
|
|
border: 4rpx solid rgba(162,155,254,.36);
|
|
transform: rotateX(72deg) rotateZ(24deg) translateZ(24rpx);
|
|
animation: ringDrift 12s linear infinite reverse;
|
|
}
|
|
|
|
.ring-third {
|
|
width: 292rpx;
|
|
height: 292rpx;
|
|
margin-left: -146rpx;
|
|
margin-top: -146rpx;
|
|
border: 3rpx solid rgba(255,214,165,.34);
|
|
transform: rotateX(18deg) rotateY(64deg);
|
|
animation: ringDrift 15s linear infinite;
|
|
}
|
|
|
|
.galaxy-body .liquid-a {
|
|
left: -38rpx;
|
|
top: 14rpx;
|
|
width: 202rpx;
|
|
height: 182rpx;
|
|
}
|
|
|
|
.galaxy-body .liquid-b {
|
|
right: -50rpx;
|
|
bottom: -16rpx;
|
|
width: 194rpx;
|
|
height: 190rpx;
|
|
}
|
|
|
|
.galaxy-body .planet-text {
|
|
width: 146rpx;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.galaxy-body .planet-sub {
|
|
font-size: 21rpx;
|
|
}
|
|
|
|
.soul-particle {
|
|
position: absolute;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.86);
|
|
box-shadow: 0 0 18rpx rgba(255,255,255,.8);
|
|
z-index: 2;
|
|
animation: soulFloat 5s ease-in-out infinite;
|
|
}
|
|
|
|
.soul-a { left: 64rpx; top: 54rpx; }
|
|
.soul-b { right: 58rpx; top: 96rpx; animation-delay: 1.2s; }
|
|
.soul-c { left: 118rpx; bottom: 58rpx; animation-delay: 2s; }
|
|
|
|
.planet-sub {
|
|
animation: subBreath 3s ease-in-out infinite;
|
|
}
|
|
|
|
.dock-title {
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 44rpx;
|
|
font-style: normal;
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
letter-spacing: -.2rpx;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0), rgba(169,255,231,.1));
|
|
border-radius: 28rpx;
|
|
padding: 8rpx 8rpx 14rpx;
|
|
min-height: 66rpx;
|
|
}
|
|
|
|
.typing-cursor {
|
|
display: inline-block;
|
|
width: 3rpx;
|
|
height: 30rpx;
|
|
margin-left: 6rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(108,92,231,.58);
|
|
vertical-align: -4rpx;
|
|
animation: typingCursor .86s steps(1) infinite;
|
|
}
|
|
|
|
.mood-icon {
|
|
display: inline-block;
|
|
margin-right: 8rpx;
|
|
transition: transform .24s ease;
|
|
}
|
|
|
|
.mood-dock .mood-chip:active .mood-icon {
|
|
transform: translateY(-3rpx) scale(1.12);
|
|
}
|
|
|
|
.tab-glow {
|
|
position: absolute;
|
|
left: 12rpx;
|
|
bottom: 8rpx;
|
|
width: calc(25% - 6rpx);
|
|
height: 6rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(90deg, rgba(169,255,231,0), rgba(169,255,231,.95), rgba(169,255,231,0));
|
|
box-shadow: 0 0 18rpx rgba(169,255,231,.7);
|
|
}
|
|
|
|
.bottom-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 76rpx;
|
|
line-height: 1;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.tab-icon {
|
|
margin-bottom: 6rpx;
|
|
font-size: 28rpx;
|
|
filter: grayscale(1);
|
|
opacity: .55;
|
|
}
|
|
|
|
.bottom-item.active .tab-icon {
|
|
filter: none;
|
|
opacity: 1;
|
|
color: #6c5ce7;
|
|
}
|
|
|
|
.profile-mask {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 34rpx;
|
|
background: rgba(22,27,46,.12);
|
|
backdrop-filter: blur(18rpx);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.profile-mini {
|
|
width: 100%;
|
|
padding: 40rpx 34rpx;
|
|
border-radius: 44rpx;
|
|
background: rgba(255,255,255,.78);
|
|
border: 1rpx solid rgba(255,255,255,.9);
|
|
box-shadow: 0 30rpx 90rpx rgba(96,112,160,.18), inset 0 1rpx 0 rgba(255,255,255,.96);
|
|
text-align: center;
|
|
}
|
|
|
|
.mini-orb {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
margin: 0 auto;
|
|
border-radius: 50%;
|
|
line-height: 104rpx;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.mini-title {
|
|
margin-top: 22rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.mini-sub {
|
|
margin-top: 10rpx;
|
|
color: rgba(22,27,46,.5);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.mini-action {
|
|
margin-top: 28rpx;
|
|
height: 82rpx;
|
|
line-height: 82rpx;
|
|
border-radius: 999rpx;
|
|
color: #161b2e;
|
|
background: linear-gradient(135deg, #eafff8, #a9ffe7);
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@keyframes countPop {
|
|
0% { transform: translateY(8rpx) scale(.96); opacity: .55; }
|
|
70% { transform: translateY(-3rpx) scale(1.04); opacity: 1; }
|
|
100% { transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes blobMorph {
|
|
0%, 100% { border-radius: 47% 53% 44% 56% / 56% 42% 58% 44%; }
|
|
50% { border-radius: 58% 42% 55% 45% / 44% 58% 42% 56%; }
|
|
}
|
|
|
|
@keyframes soulFloat {
|
|
0%, 100% { transform: translate3d(0,0,0); opacity: .36; }
|
|
50% { transform: translate3d(12rpx,-18rpx,0); opacity: .95; }
|
|
}
|
|
|
|
@keyframes subBreath {
|
|
0%, 100% { opacity: .75; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes typingCursor {
|
|
0%, 48% { opacity: 1; }
|
|
49%, 100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes galaxyBreath {
|
|
0%, 100% { transform: scale(.98); }
|
|
50% { transform: scale(1.035); }
|
|
}
|
|
|
|
@keyframes ringDrift {
|
|
from { filter: hue-rotate(0deg); }
|
|
to { filter: hue-rotate(18deg); }
|
|
}
|
|
</style>
|
|
|