xukou-ticket-wx/pages/reservation/index.vue

<template>
  <view class="reservation-page">
    <view class="fixed-nav">
    <NavBar title="过闸预约" />
    </view>
    <!-- 船舶信息卡片1（水位等） -->
    <view class="card">
      <view class="card-title">船舶信息</view>
      <view class="water-info-row">
        <view class="water-info-col">
          <text class="label">今日水位：</text>
          <text class="value blue">4.2m</text>
        </view>
        <view class="water-info-col">
          <text class="label">水深：</text>
          <text class="value blue">3.8m</text>
        </view>
        <view class="water-info-col">
          <text class="label">限高：</text>
          <text class="value blue">7.5m</text>
        </view>
      </view>
    </view>

    <!-- 船舶信息卡片2（详细信息） -->
    <view class="card">
      <view class="card-title">船舶信息</view>
      <view class="info-list">
        <view class="info-row">
          <text class="info-label">总长度</text>
          <view class="info-value">45米 <text class="arrow">›</text></view>
        </view>
        <view class="info-row">
          <text class="info-label">型宽</text>
          <view class="info-value">8米 <text class="arrow">›</text></view>
        </view>
        <view class="info-row">
          <text class="info-label">型深</text>
          <view class="info-value">3.5米 <text class="arrow">›</text></view>
        </view>
        <view class="info-row">
          <text class="info-label">编号</text>
          <view class="info-value">ZJ12345 <text class="arrow">›</text></view>
        </view>
        <view class="info-row">
          <text class="info-label">载重</text>
          <view class="info-value">500吨 <text class="arrow">›</text></view>
        </view>
        <view class="info-row">
          <text class="info-label">类型</text>
          <view class="info-value">货船 <text class="arrow">›</text></view>
        </view>
      </view>
    </view>

    <!-- 航行方向选择 -->
    <view class="card">
      <view class="card-title">航行方向</view>
      <view class="direction-row">
        <button class="direction-btn" :class="{ active: direction === 'north' }" @click="setDirection('north')">↓ 北向南</button>
        <button class="direction-btn" :class="{ active: direction === 'south' }" @click="setDirection('south')">↑ 南向北</button>
      </view>
    </view>

    <!-- 预约须知 -->
    <view class="notice-row">
      <text class="notice-title">预约须知</text>
      <view class="notice-check">
        <checkbox />
        <text>我已阅读并同意《过闸预约服务协议》</text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  name: 'ReservationPage',
  components: { NavBar },
  data() {
    return {
      direction: 'north'
    }
  },
  methods: {
    setDirection(dir) {
      this.direction = dir
    }
  }
}
</script>

<style scoped>
.reservation-page {
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  min-height: 100vh;
  padding-bottom: 80px;
  padding-top: 90px;
  font-family: 'SourceHanSansCN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 10px 16px;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  padding-top: 7vh;
}
.back-btn, .more-btn {
  font-size: 24px;
  color: #333;
}
.title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
}
.card {
  background: #fff;
  border-radius: 18px;
  margin: 0 16px 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 18px 12px 18px;
  margin-top: 20px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #222;
}
.water-info-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
  gap: 150rpx;
}
.water-info-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.label {
  color: #888;
  font-size: 15px;
  margin-bottom: 2px;
  text-align: left;
}
.value.blue {
  color: #217aff;
  font-size: 14px;
  text-align: left;
}
.info-list {
  border-top: 1px solid #f0f0f0;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  color: #222;
  font-size: 16px;
}
.info-value {
  color: #222;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.arrow {
  color: #bdbdbd;
  font-size: 18px;
  margin-left: 4px;
}
.direction-row, .batch-row {
  display: flex;
  margin-bottom: 8px;
  justify-content: center;
}
.direction-btn, .batch-btn {
  border: none;
  border-radius: 24px;
  padding: 0;
  font-size: 14px;
  background: #f2f6fa;
  color: #888;
  height: 24px;
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20rpx;
}
.direction-btn.active, .batch-btn.active {
  background: #217aff;
  color: #fff;
}
.notice-row {
  margin: 24px 16px 0 16px;
}
.notice-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}
.notice-check {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 13px;
  color: #888;
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: #fff;
  display: flex;
  border-top: 1px solid #eaeaea;
  z-index: 10;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}
.tab-item.active {
  color: #217aff;
}
.icon {
  font-size: 22px;
  margin-bottom: 2px;
}
</style>