|
@@ -1,5 +1,34 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view>
|
|
<view>
|
|
|
|
|
+ <!-- 首次进入的 splash loading 蒙板 — 覆盖首页直到数据加载完毕 -->
|
|
|
|
|
+ <view class="splash-overlay" :class="{'fade-out': splashOverlayFading}" v-if="splashOverlay || splashOverlayFading">
|
|
|
|
|
+ <view class="splash-overlay-bg">
|
|
|
|
|
+ <view class="splash-overlay-circle c1"></view>
|
|
|
|
|
+ <view class="splash-overlay-circle c2"></view>
|
|
|
|
|
+ <view class="splash-overlay-circle c3"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="splash-overlay-body">
|
|
|
|
|
+ <view class="splash-overlay-logo-wrap">
|
|
|
|
|
+ <image class="splash-overlay-logo" src="/static/logo.png" mode="aspectFit" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="splash-overlay-brand">浠艾福</text>
|
|
|
|
|
+ <text class="splash-overlay-en">Care Family</text>
|
|
|
|
|
+ <view class="splash-overlay-dims">
|
|
|
|
|
+ <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">🌏</text><text class="splash-overlay-dim-label">身</text></view>
|
|
|
|
|
+ <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">🔥</text><text class="splash-overlay-dim-label">心</text></view>
|
|
|
|
|
+ <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">⚡</text><text class="splash-overlay-dim-label">智</text></view>
|
|
|
|
|
+ <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">🌿</text><text class="splash-overlay-dim-label">行</text></view>
|
|
|
|
|
+ <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">💧</text><text class="splash-overlay-dim-label">富</text></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="splash-overlay-tagline">给全家的一站式幸福提案</text>
|
|
|
|
|
+ <view class="splash-overlay-loading">
|
|
|
|
|
+ <view class="splash-overlay-dot"></view>
|
|
|
|
|
+ <view class="splash-overlay-dot"></view>
|
|
|
|
|
+ <view class="splash-overlay-dot"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
<!-- Tabbar 切换过渡页 -->
|
|
<!-- Tabbar 切换过渡页 -->
|
|
|
<tab-transition v-if="showTabTransition" dimCode="action" />
|
|
<tab-transition v-if="showTabTransition" dimCode="action" />
|
|
|
|
|
|
|
@@ -82,12 +111,18 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 推荐阅读(无条件展示) -->
|
|
<!-- 推荐阅读(无条件展示) -->
|
|
|
- <view class="section" v-if="indexArticles.length > 0">
|
|
|
|
|
|
|
+ <view class="section">
|
|
|
<view class="section-header">
|
|
<view class="section-header">
|
|
|
<text class="section-title">📖 推荐阅读</text>
|
|
<text class="section-title">📖 推荐阅读</text>
|
|
|
<text class="section-more" @click="goArticles">更多 ›</text>
|
|
<text class="section-more" @click="goArticles">更多 ›</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="article-list">
|
|
|
|
|
|
|
+ <view v-if="articlesLoading" class="loading-state">
|
|
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view v-else-if="indexArticles.length === 0" class="empty-state" style="padding: 40rpx 0;">
|
|
|
|
|
+ <text class="empty-text">暂无文章</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="article-list" v-else>
|
|
|
<view class="article-card" v-for="article in indexArticles" :key="article.id" @click="goArticleDetail(article.id)">
|
|
<view class="article-card" v-for="article in indexArticles" :key="article.id" @click="goArticleDetail(article.id)">
|
|
|
<view class="article-category" :style="{ background: article.categoryColor }">
|
|
<view class="article-category" :style="{ background: article.categoryColor }">
|
|
|
<text class="article-category-text">{{ article.category }}</text>
|
|
<text class="article-category-text">{{ article.category }}</text>
|
|
@@ -194,6 +229,10 @@ export default {
|
|
|
currentRole: _currentRole,
|
|
currentRole: _currentRole,
|
|
|
showTabTransition: true,
|
|
showTabTransition: true,
|
|
|
|
|
|
|
|
|
|
+ // splash loading ovarlay(首次进入时展示,数据加载完关闭)
|
|
|
|
|
+ splashOverlay: false,
|
|
|
|
|
+ splashOverlayFading: false,
|
|
|
|
|
+
|
|
|
typeList: [
|
|
typeList: [
|
|
|
{ label: '全部', value: '' },
|
|
{ label: '全部', value: '' },
|
|
|
{ label: '活动', value: 'activity' },
|
|
{ label: '活动', value: 'activity' },
|
|
@@ -206,29 +245,75 @@ export default {
|
|
|
products: [],
|
|
products: [],
|
|
|
loading: false,
|
|
loading: false,
|
|
|
dimensionActivities: [],
|
|
dimensionActivities: [],
|
|
|
- indexArticles: []
|
|
|
|
|
|
|
+ indexArticles: [],
|
|
|
|
|
+ articlesLoading: false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
onLoad(options) {
|
|
onLoad(options) {
|
|
|
this._doInit(options)
|
|
this._doInit(options)
|
|
|
},
|
|
},
|
|
|
onShow() {
|
|
onShow() {
|
|
|
- // Tabbar 切换过渡动画:从 splash 首次进入时跳过(splash 本身就是过渡)
|
|
|
|
|
- var fromSplash = uni.getStorageSync('_fromSplash')
|
|
|
|
|
- if (fromSplash === '1') {
|
|
|
|
|
- uni.removeStorageSync('_fromSplash')
|
|
|
|
|
- } else {
|
|
|
|
|
- this.showTabTransition = true
|
|
|
|
|
- var self = this
|
|
|
|
|
- setTimeout(function() {
|
|
|
|
|
- self.showTabTransition = false
|
|
|
|
|
- }, 1100)
|
|
|
|
|
|
|
+ // 从 splash 首次进入:展示 splash overlay,数据加载完后自动关闭
|
|
|
|
|
+ var showOverlay = uni.getStorageSync('_showSplashOverlay')
|
|
|
|
|
+ if (showOverlay === '1') {
|
|
|
|
|
+ uni.removeStorageSync('_showSplashOverlay')
|
|
|
|
|
+ this._showSplashOverlayMask()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // Tabbar 切换过渡动画
|
|
|
|
|
+ this.showTabTransition = true
|
|
|
|
|
+ var self = this
|
|
|
|
|
+ setTimeout(function() {
|
|
|
|
|
+ self.showTabTransition = false
|
|
|
|
|
+ }, 1800)
|
|
|
|
|
+
|
|
|
// 始终执行初始化,确保登录态变更后及时切换视图
|
|
// 始终执行初始化,确保登录态变更后及时切换视图
|
|
|
this._doInit()
|
|
this._doInit()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ // ===== Splash overlay (首次进入蒙板) =====
|
|
|
|
|
+ _showSplashOverlayMask() {
|
|
|
|
|
+ this.splashOverlay = true
|
|
|
|
|
+ this._splashLoadCount = 0
|
|
|
|
|
+ this._splashMinPassed = false
|
|
|
|
|
+
|
|
|
|
|
+ // 最小展示 800ms,让 overlay 有足够时间呈现
|
|
|
|
|
+ var self = this
|
|
|
|
|
+ setTimeout(function() {
|
|
|
|
|
+ self._splashMinPassed = true
|
|
|
|
|
+ self._tryHideSplash()
|
|
|
|
|
+ }, 800)
|
|
|
|
|
+
|
|
|
|
|
+ // 最长 6 秒强制关闭,防止 API 卡死导致蒙板不消失
|
|
|
|
|
+ setTimeout(function() {
|
|
|
|
|
+ if (self.splashOverlay) {
|
|
|
|
|
+ self._hideSplashOverlay()
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 6000)
|
|
|
|
|
+ },
|
|
|
|
|
+ _checkSplashReady() {
|
|
|
|
|
+ this._splashLoadCount++
|
|
|
|
|
+ this._tryHideSplash()
|
|
|
|
|
+ },
|
|
|
|
|
+ _tryHideSplash() {
|
|
|
|
|
+ if (this.splashOverlayFading) return
|
|
|
|
|
+ // 最小展示时间未到 → 等待
|
|
|
|
|
+ if (!this._splashMinPassed) return
|
|
|
|
|
+ // 已登录用户只需最小时间;游客需要等待 3 个 API 全部返回
|
|
|
|
|
+ if (this.isLoggedIn() || this._splashLoadCount >= 3) {
|
|
|
|
|
+ this._hideSplashOverlay()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ _hideSplashOverlay() {
|
|
|
|
|
+ if (this.splashOverlayFading) return
|
|
|
|
|
+ this.splashOverlayFading = true
|
|
|
|
|
+ var self = this
|
|
|
|
|
+ setTimeout(function() {
|
|
|
|
|
+ self.splashOverlay = false
|
|
|
|
|
+ self.splashOverlayFading = false
|
|
|
|
|
+ }, 400)
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
_doInit(options) {
|
|
_doInit(options) {
|
|
|
options = options || {}
|
|
options = options || {}
|
|
|
if (!this.isLoggedIn()) {
|
|
if (!this.isLoggedIn()) {
|
|
@@ -279,34 +364,45 @@ export default {
|
|
|
uni.setStorageSync('currentRole', this.currentRole)
|
|
uni.setStorageSync('currentRole', this.currentRole)
|
|
|
},
|
|
},
|
|
|
// ===== 发现页 / 未登录态方法 =====
|
|
// ===== 发现页 / 未登录态方法 =====
|
|
|
- loadProducts() {
|
|
|
|
|
|
|
+ loadProducts: function() {
|
|
|
this.loading = true
|
|
this.loading = true
|
|
|
var params = { page: 1, size: 10 }
|
|
var params = { page: 1, size: 10 }
|
|
|
if (this.currentType) {
|
|
if (this.currentType) {
|
|
|
params.productType = this.currentType
|
|
params.productType = this.currentType
|
|
|
}
|
|
}
|
|
|
|
|
+ var self = this
|
|
|
productList(params).then(function(res) {
|
|
productList(params).then(function(res) {
|
|
|
- this.loading = false
|
|
|
|
|
- if (res.code === 200 && res.data) {
|
|
|
|
|
- this.products = res.data.records || []
|
|
|
|
|
|
|
+ self.loading = false
|
|
|
|
|
+ if (res && res.code === 200) {
|
|
|
|
|
+ // res.data is the response wrapper, products are in res.data.data or res.data.records
|
|
|
|
|
+ var rawData = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
|
|
|
|
|
+ self.products = Array.isArray(rawData) ? rawData : []
|
|
|
}
|
|
}
|
|
|
- }.bind(this)).catch(function() {
|
|
|
|
|
- this.loading = false
|
|
|
|
|
- }.bind(this))
|
|
|
|
|
|
|
+ self._checkSplashReady()
|
|
|
|
|
+ }).catch(function() {
|
|
|
|
|
+ self.loading = false
|
|
|
|
|
+ self._checkSplashReady()
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
loadDimensionActivities: function() {
|
|
loadDimensionActivities: function() {
|
|
|
var self = this
|
|
var self = this
|
|
|
getActivityList({ dimensionCode: '', page: 1, size: 3 }).then(function(res) {
|
|
getActivityList({ dimensionCode: '', page: 1, size: 3 }).then(function(res) {
|
|
|
- if (res && res.data) {
|
|
|
|
|
- var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
|
|
|
|
|
- self.dimensionActivities = list.slice(0, 3)
|
|
|
|
|
|
|
+ if (res && res.code === 200) {
|
|
|
|
|
+ // res.data is the response wrapper, activities are in res.data.data or res.data.records
|
|
|
|
|
+ var rawData = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
|
|
|
|
|
+ self.dimensionActivities = Array.isArray(rawData) ? rawData.slice(0, 3) : []
|
|
|
}
|
|
}
|
|
|
- }.bind(this)).catch(function() {})
|
|
|
|
|
|
|
+ self._checkSplashReady()
|
|
|
|
|
+ }).catch(function() {
|
|
|
|
|
+ self._checkSplashReady()
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
loadFeaturedArticles: function() {
|
|
loadFeaturedArticles: function() {
|
|
|
var self = this
|
|
var self = this
|
|
|
|
|
+ this.articlesLoading = true
|
|
|
getFeaturedArticles({ size: 5 }).then(function(res) {
|
|
getFeaturedArticles({ size: 5 }).then(function(res) {
|
|
|
- if (res.code === 200 && res.data) {
|
|
|
|
|
|
|
+ self.articlesLoading = false
|
|
|
|
|
+ if (res && res.code === 200) {
|
|
|
var gradientColors = [
|
|
var gradientColors = [
|
|
|
'linear-gradient(135deg, #10B981, #34D399)',
|
|
'linear-gradient(135deg, #10B981, #34D399)',
|
|
|
'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
|
|
'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
|
|
@@ -314,11 +410,13 @@ export default {
|
|
|
'linear-gradient(135deg, #F97316, #FB923C)',
|
|
'linear-gradient(135deg, #F97316, #FB923C)',
|
|
|
'linear-gradient(135deg, #6366F1, #818CF8)'
|
|
'linear-gradient(135deg, #6366F1, #818CF8)'
|
|
|
]
|
|
]
|
|
|
- var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
|
|
|
|
|
|
|
+ // res.data is the response wrapper, articles are in res.data.data
|
|
|
|
|
+ var rawList = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
|
|
|
|
|
+ var list = Array.isArray(rawList) ? rawList : []
|
|
|
self.indexArticles = list.map(function(item, index) {
|
|
self.indexArticles = list.map(function(item, index) {
|
|
|
return {
|
|
return {
|
|
|
id: item.id,
|
|
id: item.id,
|
|
|
- category: item.categoryName || '热门文章',
|
|
|
|
|
|
|
+ category: item.categoryName || item.category || '热门文章',
|
|
|
categoryColor: gradientColors[index % gradientColors.length],
|
|
categoryColor: gradientColors[index % gradientColors.length],
|
|
|
title: item.title || '',
|
|
title: item.title || '',
|
|
|
summary: item.summary || '',
|
|
summary: item.summary || '',
|
|
@@ -327,7 +425,11 @@ export default {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
- }.bind(this)).catch(function() {})
|
|
|
|
|
|
|
+ self._checkSplashReady()
|
|
|
|
|
+ }).catch(function() {
|
|
|
|
|
+ self.articlesLoading = false
|
|
|
|
|
+ self._checkSplashReady()
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
goActivities: function() {
|
|
goActivities: function() {
|
|
|
uni.navigateTo({ url: '/pages/discover/index?type=activity' })
|
|
uni.navigateTo({ url: '/pages/discover/index?type=activity' })
|
|
@@ -383,7 +485,7 @@ export default {
|
|
|
uni.showToast({ title: '加入成功', icon: 'success' })
|
|
uni.showToast({ title: '加入成功', icon: 'success' })
|
|
|
// 刷新页面
|
|
// 刷新页面
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
- uni.reLaunch({ url: '/pages/index/index' })
|
|
|
|
|
|
|
+ uni.switchTab({ url: '/pages/index/index' })
|
|
|
}, 1500)
|
|
}, 1500)
|
|
|
}
|
|
}
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
@@ -813,4 +915,137 @@ export default {
|
|
|
font-size: 22rpx;
|
|
font-size: 22rpx;
|
|
|
color: #bbb;
|
|
color: #bbb;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== Splash Loading Overlay(首次进入蒙板) ===== */
|
|
|
|
|
+.splash-overlay {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ z-index: 9999;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ transition: opacity 0.4s ease;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay.fade-out {
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-bg {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-circle {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ opacity: 0.15;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-circle.c1 {
|
|
|
|
|
+ width: 400rpx; height: 400rpx;
|
|
|
|
|
+ background: #FF8C42;
|
|
|
|
|
+ top: -100rpx; right: -100rpx;
|
|
|
|
|
+ animation: splash-float 6s ease-in-out infinite;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-circle.c2 {
|
|
|
|
|
+ width: 300rpx; height: 300rpx;
|
|
|
|
|
+ background: #F59E0B;
|
|
|
|
|
+ bottom: 100rpx; left: -80rpx;
|
|
|
|
|
+ animation: splash-float 8s ease-in-out infinite reverse;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-circle.c3 {
|
|
|
|
|
+ width: 200rpx; height: 200rpx;
|
|
|
|
|
+ background: #FF6B9D;
|
|
|
|
|
+ top: 300rpx; right: 50rpx;
|
|
|
|
|
+ animation: splash-float 5s ease-in-out infinite 1s;
|
|
|
|
|
+}
|
|
|
|
|
+@keyframes splash-float {
|
|
|
|
|
+ 0%, 100% { transform: translateY(0) scale(1); }
|
|
|
|
|
+ 50% { transform: translateY(-20rpx) scale(1.05); }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.splash-overlay-body {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ animation: splash-overlay-fade-in 0.8s ease forwards;
|
|
|
|
|
+}
|
|
|
|
|
+@keyframes splash-overlay-fade-in {
|
|
|
|
|
+ from { opacity: 0; transform: translateY(30rpx); }
|
|
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.splash-overlay-logo-wrap {
|
|
|
|
|
+ width: 160rpx; height: 160rpx;
|
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
|
+ background: rgba(255,255,255,0.95);
|
|
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+ box-shadow: 0 8rpx 32rpx rgba(249,115,22,0.25);
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-logo {
|
|
|
|
|
+ width: 100rpx; height: 100rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.splash-overlay-brand {
|
|
|
|
|
+ font-size: 60rpx; font-weight: 700;
|
|
|
|
|
+ color: #7C2D12;
|
|
|
|
|
+ letter-spacing: 8rpx; margin-bottom: 4rpx;
|
|
|
|
|
+ text-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-en {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ color: rgba(124,45,18,0.6);
|
|
|
|
|
+ letter-spacing: 4rpx; margin-bottom: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.splash-overlay-dims {
|
|
|
|
|
+ display: flex; flex-direction: row;
|
|
|
|
|
+ align-items: center; justify-content: center;
|
|
|
|
|
+ gap: 20rpx; margin: 24rpx 0;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-dim {
|
|
|
|
|
+ display: flex; flex-direction: column;
|
|
|
|
|
+ align-items: center; gap: 6rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-dim-icon { font-size: 36rpx; line-height: 1; }
|
|
|
|
|
+.splash-overlay-dim-label { font-size: 20rpx; color: rgba(124,45,18,0.7); line-height: 1; font-weight: 500; }
|
|
|
|
|
+
|
|
|
|
|
+.splash-overlay-tagline {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: rgba(124,45,18,0.8);
|
|
|
|
|
+ letter-spacing: 2rpx; font-weight: 500;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* Loading dots */
|
|
|
|
|
+.splash-overlay-loading {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 120rpx;
|
|
|
|
|
+ left: 0; right: 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 12rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-dot {
|
|
|
|
|
+ width: 14rpx; height: 14rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: rgba(249,115,22,0.6);
|
|
|
|
|
+ animation: splash-dot-bounce 1.4s ease-in-out infinite both;
|
|
|
|
|
+}
|
|
|
|
|
+.splash-overlay-dot:nth-child(1) { animation-delay: -0.32s; }
|
|
|
|
|
+.splash-overlay-dot:nth-child(2) { animation-delay: -0.16s; }
|
|
|
|
|
+.splash-overlay-dot:nth-child(3) { animation-delay: 0s; }
|
|
|
|
|
+@keyframes splash-dot-bounce {
|
|
|
|
|
+ 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
|
|
|
+ 40% { transform: scale(1); opacity: 1; }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|