wxamp-ymtxUser/pagesA/pages/carouselDetail/carouselDetail.wxml

<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>