<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__fadeInLeft" @click="officialAccountState =!officialAccountState">
            <img src="@/assets/images/tianbao.png">
            <span>访客登记</span>
        </div>
        <div class="home-contain-bottom-list animate__animated animate__fadeInRight">
          <router-link to="/validate">
            <img src="@/assets/images/heyan.png">
            <span>邀约码查验</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
  <layout :data="{logoLeft:'17.2%',returnState:true}"/>
  <officialAccount v-if="officialAccountState" @changeStage="changeStage" class="animate__animated animate__fadeIn"/>
</template>

<script setup name="Index">
/*----------------------------------依赖引入-----------------------------------*/
import { ref } from "vue";
import { useRouter } from "vue-router";
import 'animate.css';
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
import officialAccount from "@/components/officialAccount/index.vue";
/*----------------------------------变量声明-----------------------------------*/
const officialAccountState = ref(false);
const router = useRouter();
/*----------------------------------方法声明-----------------------------------*/
/**
 * 公众号引导状态切换
 */
function changeStage() {
  officialAccountState.value = !officialAccountState.value;
  router.push({ path: "/fillIn" });
}
</script>

<style lang="scss">
.home-contain-bottom-list {
  margin:0 3rem;
}
.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{
        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;
        margin-left:4.2rem;
        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>
