<template>
  <div class="home">
    <Head></Head>
    <Homeinput></Homeinput>
    <Nav></Nav>
    <nuxt></nuxt>
    <Footer></Footer>
    <div class="imagesList" >
        <img src="../assets/images/phone.png" alt="电话">
        <img src="../assets/images/QQ.png" alt="QQ">
        <img src="../assets/images/email.png" alt="邮箱">
        <img src="../assets/images/weixin.png" alt="微信" class="weixin"  @mouseover="enter" @mouseout="leave">
        <div>
            <img src="../assets/images/qrcode.png" alt="二维码"  class="qrcode" v-if="isshowqrcode">
        </div>
    </div>
  </div>
</template>
<script>
import Head from "~/components/header";
import Nav from "~/components/nav";
import Footer from "~/components/footer";
import Homeinput from "~/components/homeinput";
export default {
  name: "homePage",
  data() {
    return {
        isshowqrcode:false
    };
  },
  components: {
    Head,
    Nav,
    Footer,
  },
  methods:{
      enter(){
          this.isshowqrcode = true
      },
      leave(){
          this.isshowqrcode = false
      }
  }
};
</script>

<style scoped>

.home {
  width: 100%;
  min-width: 810px;
  height: 100%;
  min-height: 600px;
}
.imagesList{
    position: fixed;
    /* flex-direction: column; */
    width:30px;
    right:10px;
    top:35%;
}
.imagesList>img{
    margin-top:5px;
    margin-bottom: 5px;
    width:30px;
}
.qrcode{
    width:100px;
    height:100px;
    position: absolute;
    right:40px;
    top:58px;
}
</style>
