写一个vue的电影选座部分页面

好的，以下是一个简单的 Vue 电影选座页面示例：

<template>
  <div class="seat-selection">
    <h2>请选择座位</h2>
    <div class="seat-map">
      <div class="screen">
        <span class="screen-text">屏幕</span>
      </div>
      <div class="seats">
        <div v-for="row in rows" :key="row.rowNumber" class="seat-row">
          <span class="row-number">{{ row.rowNumber }}</span>
          <div v-for="seat in row.seats" :key="seat.seatNumber" 
               :class="[{ 'seat': true, 'available': seat.available, 'selected': seat.selected }, 
                        { 'aisle-left': seat.aisle === 'left' }, 
                        { 'aisle-right': seat.aisle === 'right' }]">
            <span class="seat-number">{{ seat.seatNumber }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="seat-legend">
      <div class="seat-legend-item">
        <div class="seat available"></div>
        <span>可选座位</span>
      </div>
      <div class="seat-legend-item">
        <div class="seat selected"></div>
        <span>已选座位</span>
      </div>
      <div class="seat-legend-item">
        <div class="seat aisle-left"></div>
        <span>靠近过道（左）</span>
      </div>
      <div class="seat-legend-item">
        <div class="seat aisle-right"></div>
        <span>靠近过道（右）</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { rowNumber: 1, seats: [
          { seatNumber: 'A1', available: true, selected: false, aisle: 'left' },
          { seatNumber: 'B1', available: true, selected: false },
          { seatNumber: 'C1', available: true, selected: false },
          { seatNumber: 'D1', available: false, selected: false, aisle: 'right' },
          { seatNumber: 'E1', available: true, selected: false },
          { seatNumber: 'F1', available: true, selected: false },
          { seatNumber: 'G1', available: true, selected: false },
        ]},
        { rowNumber: 2, seats: [
          { seatNumber: 'A2', available: false, selected: false, aisle: 'left' },
          { seatNumber: 'B2', available: true, selected: false },
          { seatNumber: 'C2', available: true, selected: false },
          { seatNumber: 'D2', available: true, selected: false, aisle: 'right' },
          { seatNumber: 'E2', available: true, selected: false },
          { seatNumber: 'F2', available: true, selected: false },
          { seatNumber: 'G2', available: true, selected: false },
        ]},
        { rowNumber: 3, seats: [
          { seatNumber: 'A3', available: true, selected: false, aisle: 'left' },
          { seatNumber: 'B3', available: true, selected: false },
          { seatNumber: 'C3', available: true, selected: false },
          { seatNumber: 'D3', available: true, selected: false, aisle: 'right' },
          { seatNumber: 'E3', available: true, selected: false },
          { seatNumber: 'F3', available: true, selected: false },
          { seatNumber: 'G3', available: true, selected: false },
        ]},
        { rowNumber: 4, seats: [
          { seatNumber: 'A4', available: true, selected: false, aisle: 'left' },
          { seatNumber: 'B4', available: true, selected: false },
          { seatNumber: 'C4', available: true, selected: false },
          { seatNumber: 'D4', available: true, selected: false, aisle: 'right' },
          { seatNumber: 'E4', available: true, selected: false },
          { seatNumber: 'F4', available: true, selected: false },
          { seatNumber: 'G4', available: true, selected: false },
        ]},
        { rowNumber: 5, seats: [
          { seatNumber: 'A5', available: true, selected: false, aisle: 'left' },
          { seatNumber: 'B5', available: true, selected: false },
          { seatNumber: 'C5', available: true, selected: false },
          { seatNumber: 'D5', available: true, selected: false, aisle: 'right' },
          { seatNumber: 'E5', available: true, selected: false },
          { seatNumber: 'F5', available: true, selected: false },
          { seatNumber: 'G5', available: true, selected: false },
        ]}
      ]
    }
  }
}
</script>

<style>
.seat-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.seat-map {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 200px;
  background-color: gray;
  margin-right: 20px;
}

.screen-text {
  font-size: 24px;
  color: white;
}

.seats {
  display: flex;
  flex-direction: column;
}

.seat-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.row-number {
  font-size: 18px;
  margin-right: 10px;
}

.seat {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: none;
  margin-right: 10px;
  cursor: pointer;
}

.seat.available {
  background-color: lightgreen;
}

.seat.selected {
  background-color: lightblue;
}

.seat.aisle-left::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 10px solid gray;
  position: absolute;
  left: -10px;
}

.seat.aisle-right::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 10px solid gray;
  position: absolute;
  right: -10px;
}

.seat-legend {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.seat-legend-item {
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}

.seat-legend-item span {
  margin-left: 5px;
}
</style>

以上代码实现了一个简单的电影选座页面，包括座位地图、屏幕、座位图例等。其中，座位地图由 Vue 组件动态生成，根据每个座位的状态（可用、已选、靠近过道）设置不同的样式。用户可以通过点击座位来选座，选中的座位会被标记为已选状态。

这只是一个简单的示例，实际的电影选座页面可能需要更复杂的交互和功能，例如座位的价格、不同放映时间的座位状态等。