用vue写一个教室选座前端要求有教室选择下拉框有教室座位的布局设计教室座位之间有2条过道并且给过道加个样式标注出来有座位选择提交按钮座位已选和未选有样式的区别并且座位被选择后就不可以再选了设计一个展示栏将该用户选择的座位进行展示座位一共150个每一行展示15个座位再设计一个选座成功后会有选座成功弹窗弹出展示两秒后会自动关闭同时设计退座按钮每个用户只可以选择一个座位如果要重新选择座位必须要将之前选择

以下是使用Vue实现的教室选座前端的示例代码：

<template>
  <div>
    <div>
      <label for="classroom">教室选择：</label>
      <select id="classroom" v-model="selectedClassroom">
        <option v-for="classroom in classrooms" :key="classroom.id" :value="classroom.id">{{ classroom.name }}</option>
      </select>
    </div>
    <div class="classroom-layout">
      <div v-for="(row, rowIndex) in layout" :key="rowIndex" class="row">
        <div v-for="(seat, seatIndex) in row" :key="seatIndex" :class="{ 'seat': true, 'selected': seat.selected, 'aisle': seatIndex === 6 || seatIndex === 8 }" @click="selectSeat(rowIndex, seatIndex)">
          {{ seat.selected ? '已选' : '未选' }}
        </div>
      </div>
    </div>
    <button @click="submitSeat" :disabled="selectedSeat === null || selectedSeat === ''">座位选择提交</button>
    <div class="selected-seats">
      <div class="seat" v-for="(seat, index) in selectedSeats" :key="index">
        {{ seat.rowIndex }}排{{ seat.seatIndex }}座
        <button @click="cancelSeat(index)">退座</button>
      </div>
    </div>
    <div v-if="showSuccessPopup" class="success-popup">
      选座成功！
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classrooms: [
        { id: 1, name: '教室1' },
        { id: 2, name: '教室2' },
        { id: 3, name: '教室3' }
      ],
      selectedClassroom: null,
      layout: [
        [{ selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }],
        [{ selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }, { selected: false }],
        ...
      ],
      selectedSeat: null,
      selectedSeats: [],
      showSuccessPopup: false
    };
  },
  methods: {
    selectSeat(rowIndex, seatIndex) {
      if (this.layout[rowIndex][seatIndex].selected) {
        return;
      }
      this.layout[rowIndex][seatIndex].selected = true;
      this.selectedSeat = `${rowIndex}排${seatIndex}座`;
    },
    submitSeat() {
      if (this.selectedSeat) {
        this.selectedSeats.push(this.selectedSeat);
        this.selectedSeat = null;
        this.showSuccessPopup = true;
        setTimeout(() => {
          this.showSuccessPopup = false;
        }, 2000);
      }
    },
    cancelSeat(index) {
      this.layout[this.selectedSeats[index].rowIndex][this.selectedSeats[index].seatIndex].selected = false;
      this.selectedSeats.splice(index, 1);
    }
  }
};
</script>

<style>
.seat {
  width: 40px;
  height: 40px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}

.selected {
  background-color: green;
  color: white;
}

.aisle {
  border-color: red;
}

.selected-seats {
  margin-top: 10px;
}

.success-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 999;
}
</style>

在上述示例代码中，首先定义了一个包含教室选项的下拉框，使用v-model指令绑定选择的教室ID到selectedClassroom变量。然后，利用v-for指令遍历教室座位布局，并根据座位的选中状态和是否为过道添加相应的样式。点击座位时，调用selectSeat方法进行座位的选择操作，已选座位将不再可选。座位选择提交按钮使用@click指令绑定submitSeat方法，当选择的座位不为空时，将座位信息添加到selectedSeats数组中，并显示选座成功弹窗，2秒后自动关闭。已选择的座位将展示在展示栏中，可以通过退座按钮取消选择。最后，使用v-if指令控制选座成功弹窗的显示与隐藏。

注意：上述示例中的座位布局是简化的示例，你可以根据实际需求修改座位布局和样式