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

<view class="page-container">
  <!-- 背景图片放在最底层 -->
  <view class="map-container" style="height: {{layoutConfig.map * 100}}vh">
    <map 
    id="map" 
    longitude="118.0" 
    latitude="36.5" 
    scale="7" 
    markers="{{markers}}" 
    bindmarkertap="onMarkerTap" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    scale="{{scale}}"
    markers="{{markers}}"
    style="width: 100%; height: 60vh;"
  ></map>
  <view class="map-fade"></view>
</view>

  <!-- 自定义全屏弹窗 -->
  <view 
    wx:if="{{showImageModal}}" 
    class="custom-modal"
    bindtap="hideImageModal"
  >
    <!-- 弹窗内容容器（阻止事件冒泡） -->
    <view 
      class="modal-content"
      catchtap="stopPropagation"
    >
      <!-- 可滚动区域（增加最小高度确保内容完整显示） -->
      <scroll-view 
        scroll-y 
        class="scroll-container"
        style="height: 70vh;"
      >
        <!-- 图片 -->
        <image 
          src="{{currentMarker.imageUrl}}" 
          mode="widthFix" 
          class="modal-image"
        />
        
        <!-- 主要内容区域 -->
        <view class="main-content">
          <!-- 标题和地址 -->
          <view class="header">
            <view class="modal-title">{{currentMarker.title}}</view>
            <view class="modal-address">
              <text class="icon">📍</text>
              {{currentMarker.address}}
            </view>
          </view>
          
          <!-- 描述文本 -->
          <view class="modal-description">
            {{currentMarker.description}}
          </view>
          
          <!-- 详情列表部分 -->
          <view class="detail-list">
            <block wx:for="{{currentMarker.detail}}" wx:key="label">
              <view class="detail-item {{item.label.includes('门票') ? 'highlight-item' : ''}}">
                <text class="detail-label">{{item.label}}</text>
                <view class="detail-value-container">
                  <text wx:if="{{!item.label.includes('门票')}}">{{item.value}}</text>
                  <block wx:else>
                    <text class="{{item.value === '免费' ? 'free-text' : 'fee-text'}}">
                      {{item.value}}
                    </text>
                    <text wx:if="{{item.value === '免费'}}" class="free-badge">免费</text>
                  </block>
                </view>
              </view>
            </block>
          </view>
        </view>
      </scroll-view>
      
      <!-- 底部操作栏 -->
      <view class="action-bar">
        <button class="nav-btn" bindtap="openLocation">
          导航前往
        </button>
        <button class="close-btn" bindtap="hideImageModal">
          关闭
        </button>
      </view>
    </view>
    
    <!-- 顶部关闭图标 -->
    <view class="top-close" bindtap="hideImageModal">
      <text class="close-icon">×</text>
    </view>
  </view>

  

<view class="menu">
  <view class="service-container">
    <block wx:for="{{weightedMenuItems}}" wx:key="url">
      <view 
        class="item-container {{item.isTop ? 'main-item' : 'side-item'}}"
        style="{{item.isTop ? '' : (index < 1 ? 'order:2' : 'order:3')}}"
      >
        <view class="item-frame" bindtap="navigateTopage" data-url="{{item.url}}">
          <view class="item-content">
            <view class="icon-container">
              <image src="{{item.icon}}" class="img"/>
            </view>
            <text class="title">{{item.title}}</text>
          </view>
          <view wx:if="{{item.isTop}}" class="top-tag">推荐</view>
        </view>
      </view>
    </block>
  </view>
</view>

<view class="vr-container" style="height: {{layoutConfig.vr * 100}}vh">
  <view class="section-header">
    <text class="section-title">VR全景体验</text>
    <view class="brush-stroke"></view>
</view>
<!-- VR全景体验模块 -->

  
  <!-- 横向滚动VR列表 -->
  <scroll-view 
    class="vr-scroll" 
    scroll-x 
    enhanced 
    show-scrollbar="{{false}}"
  >
    <view class="vr-list">
      <block wx:for="{{vrList}}" wx:key="id">
        <view 
          class="vr-card" 
          bindtap="showWebView" 
          data-url="{{item.url}}"
          data-title="{{item.title}}"
        >
          <image src="{{item.thumb}}" mode="aspectFill" class="vr-image"/>
          <view class="vr-info">
            <text class="vr-title">{{item.title}}</text>
            <text class="vr-desc">{{item.desc}}</text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

<!-- WebView弹窗 -->
<view wx:if="{{showWebView}}" class="vr-modal">
  <view class="modal-header">
    <text class="modal-title">{{currentVrTitle}}</text>
    <text class="close-btn" bindtap="hideWebView">×</text>
  </view>
  <web-view 
    src="{{webViewUrl}}"
    style="height: 85vh; width: 100%;"
  ></web-view>
</view>


  <!-- 悬浮按钮容器 -->
  <view class="float-container">
    <!-- 悬浮按钮 -->
    <image 
      src="/images/鸽子.png" 
      class="float-btn {{walking ? 'walking' : ''}}" 
      bindtap="showFloatMenu"
      bindtouchstart="touchStart"
      bindtouchmove="touchMove"
      bindtouchend="touchEnd"
      style="left: {{positionX}}px; top: {{positionY}}px;"
    ></image>

    <!-- 弹出菜单 -->
    <view class="float-menu" wx:if="{{showMenu}}">
      <view class="menu-item"><navigator url="/pages/quiz/quiz">红史问答堂</navigator></view>
    </view>
  </view>

  <!-- 遮罩层 -->
  <view class="mask" wx:if="{{showMenu}}" bindtap="hideFloatMenu"></view>



  <view class="dynamic-features">
    <block wx:for="{{featureLayout}}" wx:key="feature">
      <view 
        class="feature-item {{item.size}}" 
        bindtap="navigateToFeature" 
        data-feature="{{item.feature}}"
      >
        <image 
          src="{{getFeatureImage(item.feature)}}" 
          mode="aspectFit" 
          class="feature-icon"
        />
        <text class="feature-title">{{getFeatureName(item.feature)}}</text>
      </view>
    </block>
  </view>
</view>