bbh-mobile/src/components/GuidePage.vue

<template>
  <div id="guide" @click="openContactInfo">
    <img id="background1" src="@/assets/images/background.png" />
    <div id="contact">
      <img
        id="contactButton"
        @click="isShowContact = !isShowContact"
        src="@/assets/images/contactbutton.png"
      />
      <div id="info" v-show="isShowContact">
        <img id="contactInfo" src="@/assets/images/contactinfo.png" />
        <div id="phone">
          <div class="contact-title">
            <img class="img-contact" src="@/assets/images/phoneIcon.png" />
            商务合作电话：
          </div>
          <div
            class="contact-content"
            v-for="(phoneNumber, index) of phones"
            :key="index"
          >
            {{ phoneNumber }}
          </div>
        </div>
        <div id="email">
          <div class="contact-title">
            <img class="img-contact" src="@/assets/images/emailIcon.png" />
            商务合作邮箱：
          </div>
          <div class="contact-content">{{ email }}</div>
        </div>
        <div id="weChat">
          <div class="contact-title">
            <img class="img-contact" src="@/assets/images/wechatIcon.png" />
            商务合作微信：
          </div>
          <div class="qrcode"><img class="img-qrcode" src="@/assets/images/qrcode.png" /></div>
        </div>
      </div>
    </div>
    <guide-button></guide-button>
  </div>
</template>

<script>
import GuideButton from "./GuideButton.vue";
export default {
  components: { GuideButton },
  name: "GuidePage",
  data() {
    return {
      isShowContact: false,
      phones: ["13581625033（黎先生）", "15733737800（刘小姐）"],
      email: "sales@4dage.com",
      buttoInGuidePage: {
        titles: ["点击看展", "参加云展", "往届博博会"],
      },
    };
  },
  methods: {
    openContactInfo(event) {
      let contactId = [
        "contactButton",
        "contactInfo",
        "phone",
        "email",
        "weChat",
      ];
      if (
        !contactId.includes(event.target.id) &&
        ![].slice.call(event.target.classList).includes("contact-content") &&
        ![].slice.call(event.target.classList).includes("contact-title") && 
        ![].slice.call(event.target.classList).includes("img-qrcode")
      ) {
        this.isShowContact = false;

        //TODO:测试下点击其他组件时能不能收回
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#guide {
  position: relative;
  font-size: 16px;
}
#background1 {
  width: 100%;
  opacity: 0.5;
}
#contact {
  position: fixed;
  right: 0.5rem;
  top: 1rem;
  width: 3.6rem;
  height: 3.6rem;
}
@media screen and (min-width: 780px) {
  #contact {
    position: absolute;
    right: 0.5rem;
    top: 1rem;
    width: 3.6rem;
    height: 3.6rem;
  }
}
#contactButton {
  width: 3.6rem;
  height: 3.6rem;
}
#info {
  position: absolute;
  right: 1rem;
  top: 3.6rem;
  width: 20.7rem;
  height: 27.3rem;
}
#contactInfo {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
#phone {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 13.3rem;
  height: 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#info .contact-title {
  width: 9.8rem;
  height: 1.3rem;
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #d06814;
  opacity: 1;
}
.contact-content {
  position: relative;
  left: 2.5rem;
  color: #ffffff;
  font-size: 0.9rem;
  text-align: left;
}
#email {
  position: absolute;
  top: 11rem;
  left: 50%;
  transform: translateX(-50%);
  width: 13.3rem;
  height: 3.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
div.qrcode {
  width: 4.6rem;
  height: 4.6rem;
}
.qrcode > img {
  position: relative;
  width: 100%;
  left: 2.5rem;
  top: 1.3rem;
}

#weChat {
  position: absolute;
  top: 18rem;
  left: 50%;
  transform: translateX(-50%);
  width: 13.3rem;
}
img.img-contact {
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: sub;
  margin-right: 0.3rem;
  pointer-events: none;
}

#guide-button {
  position: absolute;
  top: 38.1rem;
  left: 50%;
  width: 18.9rem;
  height: 9.4rem;
  transform: translateX(-50%);
}
</style>