|
|
@@ -1,49 +1,288 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="placeholder">
|
|
|
- <text class="icon">🔍</text>
|
|
|
- <text class="title">发现</text>
|
|
|
- <text class="desc">活动与课程即将上线,敬请期待</text>
|
|
|
+ <view class="discover-container">
|
|
|
+ <!-- 品牌头部 -->
|
|
|
+ <view class="brand-header">
|
|
|
+ <image class="brand-logo" src="/static/logo.png" mode="aspectFit" />
|
|
|
+ <text class="brand-title">汐艾福</text>
|
|
|
+ <text class="brand-slogan">遵循五行节律,陪伴孩子自然成长</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 五行沙盘预览 -->
|
|
|
+ <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
|
|
|
+
|
|
|
+ <!-- 活动/商品推荐 -->
|
|
|
+ <view class="recommend-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">🔥 热门推荐</text>
|
|
|
+ <text class="section-more" @click="handleLogin">查看更多 ›</text>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="recommend-scroll" scroll-x enable-flex show-scrollbar="false">
|
|
|
+ <view class="recommend-card" @click="handleLogin">
|
|
|
+ <view class="card-banner">测评</view>
|
|
|
+ <view class="card-body">
|
|
|
+ <text class="card-title">DAN少儿核心素养评估</text>
|
|
|
+ <text class="card-desc">科学评估五大维度成长水平</text>
|
|
|
+ <view class="card-meta">
|
|
|
+ <text class="card-price">¥299起</text>
|
|
|
+ <text class="card-tag">限时优惠</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="recommend-card" @click="handleLogin">
|
|
|
+ <view class="card-banner" style="background: #52c41a;">课程</view>
|
|
|
+ <view class="card-body">
|
|
|
+ <text class="card-title">专注力训练营</text>
|
|
|
+ <text class="card-desc">21天提升孩子专注力</text>
|
|
|
+ <view class="card-meta">
|
|
|
+ <text class="card-price">¥199</text>
|
|
|
+ <text class="card-tag">火热报名</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="recommend-card" @click="handleLogin">
|
|
|
+ <view class="card-banner" style="background: #722ed1;">活动</view>
|
|
|
+ <view class="card-body">
|
|
|
+ <text class="card-title">亲子户外探索营</text>
|
|
|
+ <text class="card-desc">周末一起探索自然</text>
|
|
|
+ <view class="card-meta">
|
|
|
+ <text class="card-price">¥99起</text>
|
|
|
+ <text class="card-tag">本周末</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 为何选择汐艾福 -->
|
|
|
+ <view class="why-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">💡 为什么选择汐艾福</text>
|
|
|
+ </view>
|
|
|
+ <view class="feature-grid">
|
|
|
+ <view class="feature-item">
|
|
|
+ <text class="feature-icon">🎯</text>
|
|
|
+ <text class="feature-title">科学评估</text>
|
|
|
+ <text class="feature-desc">DAN少儿核心素养评估体系</text>
|
|
|
+ </view>
|
|
|
+ <view class="feature-item">
|
|
|
+ <text class="feature-icon">🏆</text>
|
|
|
+ <text class="feature-title">积分激励</text>
|
|
|
+ <text class="feature-desc">完成任务得积分,兑换心愿</text>
|
|
|
+ </view>
|
|
|
+ <view class="feature-item">
|
|
|
+ <text class="feature-icon">👨👩👧👦</text>
|
|
|
+ <text class="feature-title">家庭参与</text>
|
|
|
+ <text class="feature-desc">全家一起见证成长每一步</text>
|
|
|
+ </view>
|
|
|
+ <view class="feature-item">
|
|
|
+ <text class="feature-icon">🌟</text>
|
|
|
+ <text class="feature-title">专业规划</text>
|
|
|
+ <text class="feature-desc">成长规划师一对一指导</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部登录按钮 -->
|
|
|
+ <view class="login-footer">
|
|
|
+ <button class="login-btn" @click="handleLogin">登录 / 注册</button>
|
|
|
+ <text class="login-footer-text">登录即表示同意《用户协议》和《隐私政策》</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import WuxingSandbox from '../../components/wuxing-sandbox.vue'
|
|
|
+
|
|
|
export default {
|
|
|
+ components: { WuxingSandbox },
|
|
|
data() {
|
|
|
return {}
|
|
|
},
|
|
|
- onLoad() {}
|
|
|
+ onShow() {
|
|
|
+ this.resetTabBar()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ resetTabBar() {
|
|
|
+ uni.setTabBarItem({ index: 1, text: '发现' })
|
|
|
+ uni.setTabBarItem({ index: 2, text: '商城' })
|
|
|
+ },
|
|
|
+ handleLogin() {
|
|
|
+ uni.navigateTo({ url: '/pages/login/login' })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-.container {
|
|
|
+<style scoped>
|
|
|
+.discover-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 品牌头部 ===== */
|
|
|
+.brand-header {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- min-height: 100vh;
|
|
|
- background: #f8f8f8;
|
|
|
+ padding: 60rpx 30rpx 30rpx;
|
|
|
+ background: linear-gradient(180deg, #1a1a2e 0%, #16213e 60%, #f5f7fa 100%);
|
|
|
}
|
|
|
-.placeholder {
|
|
|
+.brand-logo {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.brand-title {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFD700;
|
|
|
+ letter-spacing: 8rpx;
|
|
|
+}
|
|
|
+.brand-slogan {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(255, 215, 0, 0.7);
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 推荐 ===== */
|
|
|
+.recommend-section {
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+}
|
|
|
+.section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.section-more {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF6B6B;
|
|
|
+}
|
|
|
+.recommend-scroll {
|
|
|
+ display: flex;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+}
|
|
|
+.recommend-card {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 260rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
+}
|
|
|
+.card-banner {
|
|
|
+ padding: 14rpx 20rpx;
|
|
|
+ background: #FF6B6B;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.card-body {
|
|
|
+ padding: 16rpx;
|
|
|
+ white-space: normal;
|
|
|
+}
|
|
|
+.card-title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+}
|
|
|
+.card-desc {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+.card-meta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.card-price {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FF6B6B;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.card-tag {
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #FF6B6B;
|
|
|
+ background: rgba(255,107,107,0.1);
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 为何选择 ===== */
|
|
|
+.why-section {
|
|
|
+ margin: 30rpx;
|
|
|
+}
|
|
|
+.feature-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+.feature-item {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- padding: 100rpx 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
}
|
|
|
-.icon {
|
|
|
- font-size: 120rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
+.feature-icon {
|
|
|
+ font-size: 48rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
}
|
|
|
-.title {
|
|
|
- font-size: 40rpx;
|
|
|
+.feature-title {
|
|
|
+ font-size: 24rpx;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
}
|
|
|
-.desc {
|
|
|
- font-size: 28rpx;
|
|
|
+.feature-desc {
|
|
|
+ font-size: 20rpx;
|
|
|
color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 底部登录 ===== */
|
|
|
+.login-footer {
|
|
|
+ margin: 40rpx 30rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.login-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ background: linear-gradient(135deg, #FF6B6B, #FF8E53);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 44rpx;
|
|
|
text-align: center;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.login-btn::after {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.login-footer-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #bbb;
|
|
|
+ margin-top: 16rpx;
|
|
|
}
|
|
|
</style>
|