ht80/sheji(1)/pages/detail/detail.wxml

<!-- pages/detail/detail.wxml -->
<view class="detail-container">
  <!-- 景点图片轮播 - 增加阴影和圆角 -->
  <swiper class="spot-swiper" indicator-dots="{{true}}" autoplay="{{false}}" interval="5000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#e54d42">
    <swiper-item>
      <image src="{{spot.image_url}}" mode="aspectFill" class="swiper-image"/>
    </swiper-item>
  </swiper>
  
  <!-- 景点基本信息卡片 - 增加卡片阴影和红色主题 -->
  <view class="spot-info-card">
    <view class="spot-header">
      <text class="spot-name">{{spot.name}}</text>
      <text class="spot-category red-badge">{{spot.category | formatCategory}}</text>
    </view>
    
    <view class="spot-meta">
      <view class="meta-item">
        <icon type="location" size="16" color="#e54d42"></icon>
        <text class="meta-text">{{spot.location}}</text>
      </view>
      <view class="meta-item">
        <icon type="time" size="16" color="#e54d42"></icon>
        <text class="meta-text">开放时间: {{spot.open_time || '全天'}}</text>
      </view>
      <view class="meta-item">
        <icon type="money" size="16" color="#e54d42"></icon>
        <text class="meta-text">门票: {{spot.ticket_info || '免费'}}</text>
      </view>
    </view>
  </view>
  
  <!-- 景点介绍 - 卡片式设计 -->
  <view class="info-card">
    <view class="section-title">

      <text>景点介绍</text>
    </view>
    <view class="section-content">{{spot.description || '暂无详细介绍'}}</view>
  </view>
  
  <!-- 红色历史 - 突出显示 -->
  <view class="info-card red-history" wx:if="{{spot.history}}">
    <view class="section-title">
      <text>红色历史</text>
    </view>
    <view class="section-content">{{spot.history}}</view>
  </view>
</view>

<!-- 底部操作栏 - 固定定位 -->
<view class="action-bar">
  <!-- 修改底部操作栏部分 -->
<view class="action-bar">
  <button class="action-btn" bindtap="addToPlan" hover-class="button-hover">
    <text>加入行程</text>
  </button>
</view>

</view>