192 lines
7.3 KiB
Plaintext
192 lines
7.3 KiB
Plaintext
<!--pages/index/index.wxml-->
|
||
<!--Soul创业派对 - 首页（按临时需求池/首页页面设计）-->
|
||
<view class="page page-transition">
|
||
<!-- 自定义导航栏占位 -->
|
||
<view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
|
||
|
||
<!-- 顶部区域 -->
|
||
<view class="header">
|
||
<view class="header-content">
|
||
<view class="logo-section">
|
||
<view class="logo-icon">
|
||
<text class="logo-text">S</text>
|
||
</view>
|
||
<view class="logo-info">
|
||
<view class="logo-title-row">
|
||
<text class="logo-title-text">Soul创业派对</text>
|
||
<view class="contact-btn" bindtap="goToAbout">
|
||
<text class="contact-icon">+</text>
|
||
<text class="contact-text">联系作者</text>
|
||
</view>
|
||
</view>
|
||
<text class="logo-subtitle">来自派对房的真实故事</text>
|
||
</view>
|
||
</view>
|
||
<view class="header-right">
|
||
<view class="chapter-badge">{{totalSections}}章</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索栏 -->
|
||
<view class="search-bar" bindtap="goToSearch">
|
||
<view class="search-icon-wrap">
|
||
<text class="search-icon-text">🔍</text>
|
||
</view>
|
||
<text class="search-placeholder">搜索章节标题或内容...</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主内容区 -->
|
||
<view class="main-content">
|
||
<!-- Banner卡片 - 最新章节 -->
|
||
<view class="banner-card" bindtap="goToRead" data-id="{{latestSection.id}}">
|
||
<view class="banner-glow"></view>
|
||
<view class="banner-tag">最新更新</view>
|
||
<view class="banner-title">{{latestSection.title}}</view>
|
||
<view class="banner-part">{{latestSection.part}}</view>
|
||
<view class="banner-action">
|
||
<text class="banner-action-text">开始阅读</text>
|
||
<view class="banner-arrow">→</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 阅读进度卡 -->
|
||
<view class="progress-card card">
|
||
<view class="progress-header">
|
||
<text class="progress-title">我的阅读</text>
|
||
<text class="progress-count">{{readCount}}/{{totalSections}}章</text>
|
||
</view>
|
||
<view class="progress-bar-wrapper">
|
||
<view class="progress-bar-bg">
|
||
<view class="progress-bar-fill" style="width: {{totalSections > 0 ? (readCount / totalSections) * 100 : 0}}%;"></view>
|
||
</view>
|
||
</view>
|
||
<view class="progress-stats">
|
||
<view class="stat-item">
|
||
<text class="stat-value brand-color">{{readCount}}</text>
|
||
<text class="stat-label">已读</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{totalSections - readCount}}</text>
|
||
<text class="stat-label">待读</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{partCount}}</text>
|
||
<text class="stat-label">篇章</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">{{totalSections}}</text>
|
||
<text class="stat-label">章节</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 超级个体（横向滚动） -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text class="section-title">超级个体</text>
|
||
<view class="section-more" bindtap="goToSuperList">
|
||
<text class="more-text">查看全部</text>
|
||
<text class="more-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
<!-- 加载中：骨架动画 -->
|
||
<view wx:if="{{superMembersLoading}}" class="super-loading">
|
||
<view class="super-loading-inner">
|
||
<view class="super-loading-item" wx:for="{{[1,2,3,4]}}" wx:key="*this">
|
||
<view class="super-loading-avatar"></view>
|
||
<view class="super-loading-name"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 已加载有数据 -->
|
||
<scroll-view wx:elif="{{superMembers.length > 0}}" class="super-scroll" scroll-x>
|
||
<view class="super-scroll-inner">
|
||
<view
|
||
class="super-item-h"
|
||
wx:for="{{superMembers}}"
|
||
wx:key="id"
|
||
bindtap="goToMemberDetail"
|
||
data-id="{{item.id}}"
|
||
>
|
||
<view class="super-avatar {{item.isVip ? 'super-avatar-vip' : ''}}">
|
||
<image class="super-avatar-img" wx:if="{{item.avatar}}" src="{{item.avatar}}" mode="aspectFill"/>
|
||
<text class="super-avatar-text" wx:else>{{item.name[0] || '会'}}</text>
|
||
</view>
|
||
<text class="super-name">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 已加载无数据 -->
|
||
<view wx:else class="super-empty">
|
||
<text class="super-empty-text">成为会员，展示你的项目</text>
|
||
<view class="super-empty-btn" bindtap="goToVip">加入创业派对 →</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 精选推荐（带 tag） -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text class="section-title">精选推荐</text>
|
||
<view class="section-more" bindtap="goToChapters">
|
||
<text class="more-text">查看全部</text>
|
||
<text class="more-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
<view class="featured-list">
|
||
<view
|
||
class="featured-item"
|
||
wx:for="{{featuredSections}}"
|
||
wx:key="id"
|
||
bindtap="goToRead"
|
||
data-id="{{item.id}}"
|
||
>
|
||
<view class="featured-content">
|
||
<view class="featured-meta">
|
||
<text class="featured-id brand-color">{{item.id}}</text>
|
||
<text class="featured-tag {{item.tagClass || 'tag-rec'}}">{{item.tag || '精选'}}</text>
|
||
</view>
|
||
<text class="featured-title">{{item.title}}</text>
|
||
<text class="featured-part">{{item.part}}</text>
|
||
</view>
|
||
<view class="featured-arrow">›</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最新新增（时间线样式） -->
|
||
<view class="section" wx:if="{{latestChapters.length > 0}}">
|
||
<view class="section-header latest-header">
|
||
<text class="section-title">最新新增</text>
|
||
<view class="daily-badge-wrap">
|
||
<text class="daily-badge">+{{latestChapters.length}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="timeline-wrap">
|
||
<view class="timeline-line"></view>
|
||
<view class="timeline-list">
|
||
<view class="timeline-item {{index === 0 ? 'timeline-item-first' : ''}}" wx:for="{{latestChapters}}" wx:key="id" bindtap="goToRead" data-id="{{item.id}}">
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-content">
|
||
<view class="timeline-row">
|
||
<view class="timeline-left">
|
||
<text class="latest-new-tag">NEW</text>
|
||
<text class="timeline-title">{{item.title}}</text>
|
||
</view>
|
||
<view class="timeline-right">
|
||
<text class="timeline-price">¥{{item.price}}</text>
|
||
<text class="timeline-date">{{item.dateStr}}</text>
|
||
</view>
|
||
</view>
|
||
<text class="timeline-desc" wx:if="{{item.desc && item.desc.length > 2}}">{{item.desc}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部留白 -->
|
||
<view class="bottom-space"></view>
|
||
</view>
|