<template>
  <div class="Indexmain">
    <div class="header">自助预约服务平台</div>
    <div class="body1">
      <div class="row">
        <div class="yuyue" @click="goto('checkitemmainlist')">
          <el-icon size="60" color="#fff">
            <Clock/>
          </el-icon>
          <div>预 约</div>
        </div>
        <div class="baodao">
          <el-icon size="60" color="#fff">
            <Coordinate/>
          </el-icon>
          <div>报 到</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
 const goto=(url)=>{
   window.location.href="./#/"+url;
 }
</script>

<style scoped>
.Indexmain {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  background-color: #317bc8;
  color: #fff;
  font-size: 28px;
  text-align: center;
  padding: 20px;
}

.body1 {
  padding: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.yuyue {
  background-color: #4cd07f;
  width: 48%;
  text-align: center;
  height: 300px;
  width: 500px;

  color: #fff;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.baodao {
  background-color: #35a3d9;
  width: 500px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>