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.
103 lines
4.3 KiB
103 lines
4.3 KiB
<view class="carousel-detail-container" style="--bg-color: {{detailInfo.bgColor || '#F8F9FA'}};">
|
|
|
|
<!-- 沉浸式头部，带渐变遮罩和返回按钮 -->
|
|
<view class="hero-section">
|
|
<image
|
|
class="hero-image"
|
|
src="{{baseUrl + detailInfo.imageUrl}}"
|
|
mode="aspectFill"
|
|
binderror="imageLoadError"
|
|
></image>
|
|
<view class="hero-overlay" style="background: linear-gradient(to bottom, transparent 30%, {{detailInfo.bgColor || '#F8F9FA'}} 90%);"></view>
|
|
|
|
<!-- 返回按钮 -->
|
|
<view class="nav-back glass" bindtap="goBack">
|
|
<text class="iconfont icon-back">←</text>
|
|
</view>
|
|
|
|
<!-- 页面标题 - 仅在需要时显示 -->
|
|
<view class="page-title glass" wx:if="{{detailInfo.adsType}}">
|
|
<text>{{detailInfo.adsType}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主要内容卡片 -->
|
|
<view class="content-card" animation="{{cardAnimation}}" style="--text-color: {{detailInfo.textColor || '#2E7D32'}};">
|
|
|
|
<!-- 标题区域 -->
|
|
<view class="title-section">
|
|
<text class="main-title" style="color: {{detailInfo.textColor || '#1A1A1A'}};">{{detailInfo.title || '无标题'}}</text>
|
|
<text class="sub-title">{{detailInfo.subtitle || '暂无副标题'}}</text>
|
|
</view>
|
|
|
|
<!-- 装饰分割线 -->
|
|
<view class="divider">
|
|
<view class="divider-line" style="background-color: {{detailInfo.textColor || '#2E7D32'}};"></view>
|
|
<view class="divider-dot" style="background-color: {{detailInfo.textColor || '#2E7D32'}};"></view>
|
|
<view class="divider-line" style="background-color: {{detailInfo.textColor || '#2E7D32'}};"></view>
|
|
</view>
|
|
|
|
<!-- 信息网格 -->
|
|
<view class="info-grid">
|
|
<!-- 尺寸信息卡片 -->
|
|
<view class="info-item" wx:if="{{detailInfo.imageSize}}">
|
|
<view class="info-icon">📐</view>
|
|
<view class="info-content">
|
|
<text class="info-label">图片尺寸</text>
|
|
<text class="info-value">{{detailInfo.imageSize}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 展示次数卡片 -->
|
|
<view class="info-item" wx:if="{{detailInfo.displayCount !== undefined}}">
|
|
<view class="info-icon">👁️</view>
|
|
<view class="info-content">
|
|
<text class="info-label">展示次数</text>
|
|
<text class="info-value">{{detailInfo.viewCount}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 创建时间卡片 -->
|
|
<view class="info-item" wx:if="{{detailInfo.createdAt}}">
|
|
<view class="info-icon">📅</view>
|
|
<view class="info-content">
|
|
<text class="info-label">创建时间</text>
|
|
<text class="info-value">{{detailInfo.createdAt}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 更新时间卡片 -->
|
|
<view class="info-item" wx:if="{{detailInfo.updatedAt}}">
|
|
<view class="info-icon">🔄</view>
|
|
<view class="info-content">
|
|
<text class="info-label">更新时间</text>
|
|
<text class="info-value">{{detailInfo.updatedAt}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 有效性状态卡片 - 使用优雅的徽章设计 -->
|
|
<view class="info-item status-item" wx:if="{{detailInfo.isActive !== undefined}}">
|
|
<view class="info-icon">⚡</view>
|
|
<view class="info-content">
|
|
<text class="info-label">状态</text>
|
|
<view class="status-badge" style="background-color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}}20; border-color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}};">
|
|
<text class="status-dot" style="background-color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}};"></text>
|
|
<text class="status-text" style="color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}};">{{detailInfo.isActive === 1 ? '有效' : '无效'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 描述/备注区域（如果有remark字段） -->
|
|
<view class="remark-section" wx:if="{{detailInfo.remark}}">
|
|
<view class="remark-icon">📝</view>
|
|
<view class="remark-content">{{detailInfo.remark}}</view>
|
|
</view>
|
|
|
|
<!-- 辅助信息：始终有效标识 -->
|
|
<view class="always-valid" wx:if="{{detailInfo.isAlwaysValid === 1}}">
|
|
<text class="valid-icon">✨</text>
|
|
<text class="valid-text">长期有效</text>
|
|
</view>
|
|
</view>
|
|
</view>
|