YD_Event.miniApp/pages/detail/detail.wxml

<view class="page-detail">
  <image wx:if="{{heroImage}}" class="detail-hero" src="{{heroImage}}" mode="widthFix" />
  <view wx:else class="detail-hero detail-hero--placeholder" />

  <view class="main-sheet">
    <view class="title-block">
      <view class="title-row">
        <view class="format-tag" wx:if="{{eventFormatTag}}">{{eventFormatTag}}</view>
        <view class="event-title">{{eventTitle || '—'}}</view>
      </view>
    </view>

    <view class="info-list">
      <view class="info-row info-row1">
        <text class="info-label">{{isReferee ? '执裁报名' : '报名方式'}}：</text>
        <text class="info-value">{{isReferee ? '裁判在线报名' : (registrationMethodText || '—')}}</text>
      </view>
      <view class="info-row info-row1">
        <text class="info-label">收费模式：</text>
        <view class="info-value info-value--fee">
          <text class="info-value-txt">{{feeModeLabel}}</text>
          <view wx:if="{{priceDisplayText}}" class="fee-inline">
            <text class="fee-digits">{{priceDisplayText}}</text>
          </view>
          <view wx:elif="{{priceDisplay != null}}" class="fee-inline">
            <text class="fee-currency">￥</text>
            <text class="fee-digits">{{priceDisplay}}</text>
          </view>
          <view class="info-i" wx:if="{{priceDisplay != null || priceDisplayText}}">i</view>
        </view>
      </view>
      <view class="info-row">
        <text class="info-label">报名时间：</text>
        <text class="info-value info-value--wrap">{{registrationStartText}}~{{registrationEndText}}</text>
      </view>
      <view class="info-row" wx:if="{{showMaterialRange && materialRangeText}}">
        <text class="info-label">上传素材截止时间：</text>
        <text class="info-value info-value--wrap">{{materialRangeText}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">比赛时间：</text>
        <text class="info-value info-value--wrap">{{matchStartText}}~{{matchEndText}}</text>
      </view>
      <view class="info-row" wx:if="{{uploadMaterialRemark}}">
        <text class="info-label">上传素材备注：</text>
        <text class="info-value info-value--wrap">{{uploadMaterialRemark}}</text>
      </view>
      <view class="info-row" wx:if="{{eventAddress}}">
        <text class="info-label">赛事地址：</text>
        <text class="info-value info-value--wrap">{{eventAddress}}</text>
      </view>
    </view>

    <view class="notice-card" wx:if="{{hasNoticeBlock}}">
      <view class="card-head card-head--notice">
        <view class="card-icon card-icon--speaker">
          <image class="icon-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/event-1.png" mode="aspectFit" />
        </view>
        <text class="card-head-title">赛事须知</text>
      </view>
      <view class="notice-body">
        <view class="notice-p" wx:if="{{refundRulesText}}">
          <text class="notice-strong">退款规则：</text>
          <text class="notice-text">{{refundRulesText}}</text>
        </view>
        <view class="notice-row" wx:if="{{participationPointsLabel}}">
          <text class="notice-strong">参与积分：</text>
          <text class="notice-text">{{participationPointsLabel}}</text>
        </view>
        <view class="notice-ranking" wx:if="{{rankingPointsTableRows.length}}">
          <text class="notice-strong">名次积分：</text>
          <view class="table-wrap rank-table-wrap">
            <view class="table-head table-head--light">
              <text class="th th-rank">名次</text>
              <text class="th th-points">积分</text>
            </view>
            <view class="table-body">
              <view class="tr" wx:for="{{rankingPointsTableRows}}" wx:key="rowKey">
                <text class="td td-rank">{{item.rankText}}</text>
                <text class="td td-points">{{item.pointsText}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="section-with-bullet" wx:if="{{hasRegistrationLimit || projectTableRows.length}}">
      <view class="section-head">
        <view class="section-bullet" />
        <text class="section-title">限报与项目</text>
      </view>

      <view class="section-stack limit-card">
        <view class="" wx:if="{{hasRegistrationLimit}}">
          <view class="card-head card-head--limit">
            <view class="card-icon card-icon--speaker">
            <image class="icon-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/event-2.png" mode="aspectFit" />
            </view>
            <text class="card-head-title">报名限制</text>
          </view>
          <view class="limit-list">
            <view class="limit-item">
              <text class="limit-num">1.</text>
              <view class="limit-text">运动员限报: <view>{{athleteLimitText}}</view></view>
            </view>
            <view class="limit-item">
              <text class="limit-num">2.</text>
              <view class="limit-text">
                <text class="limit-text">项目限报(每个单位针对项目下的各组别可报名x个人/x队)</text>
              </view>
            </view>
            <view class="table-wrap project-limit-table" wx:if="{{projectLimitTableRows.length}}">
                  <view class="table-head table-head--light">
                    <text class="th th-limit-proj">项目</text>
                    <text class="th th-limit-proj">项目类型</text>
                    <text class="th th-limit-count">限报</text>
                  </view>
                  <view class="table-body">
                    <view class="tr" wx:for="{{projectLimitTableRows}}" wx:key="rowKey">
                      <text class="td td-limit-proj">{{item.projectName}}</text>
                      <text class="td td-limit-proj">{{item.typeName}}</text>
                      <text class="td td-limit-count">{{item.limitText}}</text>
                    </view>
                  </view>
                </view>
          </view>
        </view>

        <view class="project-panel" wx:if="{{projectTableRows.length}}">
          <view class="card-head card-head--project">
            <view class="card-icon card-icon--doc">
            <image class="icon-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/event-3.png" mode="aspectFit" />
            </view>
            <text class="card-head-title">项目列表</text>
          </view>
          <view class="table-wrap">
            <view class="table-head">
              <text class="th th-proj">项目</text>
              <text class="th th-proj" >项目类型</text>
              <text class="th th-group" >组别</text>
              <!-- <text class="th th-age">年龄限制</text> -->
              <!-- <text class="th th-gender">性别</text> -->
              <text class="th th-fee" wx:if="{{feeModeLabel == '单价（项目）'}}">费用（元）</text>
            </view>
            <view class="table-body">
              <view class="tr" wx:for="{{projectTableRows}}" wx:key="rowKey">
                <text class="td td-proj">{{item.projectName}}</text>
                <text class="td td-proj">{{item.typeName}}</text>
                <view class="td td-group">
                  <text wx:for="{{item.groupNames}}" wx:key="*this" class="group-name-line">{{item}}</text>
                </view>
                <!-- <text class="td td-age">{{item.ageRange}}</text> -->
                <!-- <text class="td td-gender">{{item.genderText}}</text> -->
                <text class="td td-fee" wx:if="{{feeModeLabel == '单价（项目）'}}">{{item.fee}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="section-with-bullet" wx:if="{{introductionText || introImage}}">
      <view class="section-head">
        <view class="section-bullet" />
        <text class="section-title">赛事简介</text>
      </view>
      <view class="intro-block">
        <rich-text nodes="{{introductionText}}" class="intro-text" wx:if="{{introductionText}}" />
        <image wx:if="{{introImage}}" class="intro-image" src="{{introImage}}" mode="widthFix" />
      </view>
    </view>

    <view class="participant-section" wx:if="{{unitGroups.length > 0}}">
      <view class="participant-head">
        <view class="participant-hex" />
        <text class="participant-title">参与单位</text>
      </view>
      <view class="participant-card">
        <view class="participant-row" wx:for="{{unitGroups}}" wx:key="label">
          <text class="participant-label">{{item.label}}：</text>
          <view class="participant-names">
            <text class="participant-value" wx:for="{{item.names}}" wx:for-item="name" wx:key="*this">{{name}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="bottom-bar">
    <button
      class="apply-btn {{applyGrey ? 'apply-btn--disabled' : ''}}"
      type="primary"
      disabled="{{applyDisabled}}"
      bindtap="onApplyTap"
    >{{applyButtonText}}</button>
  </view>
</view>