<template>
  <div class="app-container home">
    <div class="home-contain">
      <div class="home-contain-middle animate__animated animate__zoomIn">
        <img src="@/assets/images/middle-bg.jpg">
      </div>
      <div class="home-contain-bottom">
        <div class="home-contain-bottom-list animate__animated animate__slideInUp">
          <router-link to="/list">
            <img src="@/assets/images/yuyue.png">
            <span>访客预约</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
  <layout :data="{logoLeft:'17.2%',returnState:false}"/>
</template>
<script setup name="Index">
/*----------------------------------依赖引入-----------------------------------*/
import 'animate.css';
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
/*----------------------------------变量声明-----------------------------------*/
</script>

<style lang="scss">
.home {
  width:100%;
  height:100%;
  position: absolute;
  &-contain {
    height:88%;
    &-middle{
      // width:65.8%;
      height:76vh;
      z-index: 1;
      margin:5.6% 17.1% 0;
      img{
        max-height:100%;
      }
    }
    &-bottom{
      width:100%;
      margin-top:1.5%;
      display: flex;
      justify-content: center;
      align-items: center;
      &-list{
        width:12.6%;
        border:2px solid #fff;
        border-radius: 10px;
        padding:1.4rem 0;
        text-align: center;
        background: rgba(0,0,0,0.8);
        cursor: pointer;
        img{
            width:15.8%;
            vertical-align: middle;
        }
        span{
            vertical-align: middle;
            font-size: 2.4rem;
            margin:0 0 0 1.8rem;
            letter-spacing: 2px;
            color:#fff;
        }
      }
    }
  }
}
</style>
