vue写一个点名系统

<script setup lang="js">
import { ref } from 'vue'
const draw = ref(0)
const item1 =ref(null)
const item2 =ref(null)
const item3 =ref(null)
const item4 =ref(null)
const item5 =ref(null)
const item6 =ref(null)
const item7 =ref(null)
const item8 =ref(null)
const item9 =ref(null)
const item10 =ref(null)
const item11 =ref(null)
const item12 =ref(null)
const item13 =ref(null)
const item14 =ref(null)
const item15 =ref(null)
const item16 =ref(null)
const item17 =ref(null)
const item18 =ref(null)
const item19 =ref(null)
const item20 =ref(null)
const item21=ref(null)
const item22 =ref(null)
const item23 =ref(null)
const item24 =ref(null)
const item25 =ref(null)
const item26 =ref(null)
const item27 =ref(null)
const item28 =ref(null)
const item29 =ref(null)
const item30 =ref(null)
const item31 =ref(null)
const item32 =ref(null)
const item33 =ref(null)
const item34 =ref(null)
const item35 =ref(null)
const item36 =ref(null)
const item37 =ref(null)
const item38 =ref(null)
const item39 =ref(null)
const item40 =ref(null)
const item41 =ref(null)
const item42 =ref(null)
const item43 =ref(null)
const item44 =ref(null)
const item45 =ref(null)
const item46 =ref(null)
const item47 =ref(null)
const item48 =ref(null)
const item49 =ref(null)
const item50 =ref(null)
const item51 =ref(null)

const itemArray  = [
  item1,item2,item3,item4,item5,item6,
  item7,item8,item9,item10,item11,item12,
  item13,item14,item15,item16,item17,item18,
  item19,item20,item21,item22,item23,item24,
  item25,item26,item27,item28,item29,item30,
  item31,item32,item33,item34,item35,item36,
  item37,item38,item39,item40,item41,item42,
  item43,item44,item45,item46,item47,item48,
  item49,item50,item51
]

const numberArray = [
  [1,2,3,4,5,6],
  [7,8,9,10,11,12],
  [13,14,15,16,17,18],
  [19,20,21,22,23,24],
  [25,26,27,28,29,30],
  [31,32,33,34,35,36],
  [37,38,39,40,41,42],
  [43,44,45,46,47,48],
  [49,50,51]
]

const timer1 = ref(null)
const startClick = ()=>{
  itemArray.forEach(item=>{
    item.value[0].style.backgroundColor =  '#fcfaed'
    item.value[0].style.color =  'black'
  })
 timer1.value =  setInterval(()=>{
  const random = Math.round(Math.random()*51)
    itemArray[random].value[0].style.backgroundColor = '#ccccff'
    itemArray[random].value[0].style.color = '#003399'
    draw.value= random
    setTimeout(()=>{
      itemArray[random].value[0].style.backgroundColor = '#fcfaed'
    itemArray[random].value[0].style.color = 'black'
    },200)
  },300)
}

const endClick = ()=>{
  clearInterval(timer1.value)
  itemArray.forEach(item=>{
    item.value[0].style.backgroundColor =  '#fcfaed'
    item.value[0].style.color =  'black'
  })
  const random = Math.round(Math.random()*51)
  itemArray[random].value[0].style.backgroundColor = '#ccccff'
    itemArray[random].value[0].style.color = '#003399'
    draw.value = random + 1
}
</script>

<template>
  <div class="outer">
    <div class="menu1">
      <button @click="startClick">开始点名</button>
      <button @click="endClick">停止点名</button>
    </div>
    <div class="menu2" style="margin: 10px 0">点名开始！请看大屏幕</div>
    <div class="menu3">{{ draw }}号</div>
    <div class="menu4">
      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[0]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[1]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[2]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[3]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[4]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[5]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[6]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="width: 100%">
        <div v-for="item in numberArray[7]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>

      <div class="item1" style="display: flex; justify-content: center">
        <div v-for="item in numberArray[8]" :key="item" :ref="'item' + item">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.outer {
  width: 500px;
  height: 700px;
  background-color: #fcfaed;
  border: 2px solid #cc9966;
  display: flex;
  flex-direction: column;
  align-items: center;
  .menu1 {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    button {
      width: 150px;
      height: 50px;
      border-radius: 5px;
      border: none;
      background-color: #ffcc99;
      color: #ac1616;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .menu2 {
    width: 100%;
    text-align: center;
    color: #339900;
    font-size: 20px;
    font-weight: bold;
  }
  .menu3 {
    width: 140px;
    height: 70px;
    text-align: center;
    border: 2px solid #339900;
    border-radius: 5px;
    line-height: 70px;
    font-size: 25px;
  }
  .menu4 {
    height: 520px;
    width: 90%;
    // display: flex;
    .item1 {
      display: flex;
      div {
        width: calc(100% / 6);
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: dashed 4px #cc6666;
        margin: 5px;
        border-radius: 15px;
      }
    }
  }
}
</style>