网站右侧联系我们盒子

 展开前

 展开后

<template>
  <div class="contact-us-box" @click="showPopup = true">
    <div>
      <el-icon>
        <Service/>
      </el-icon>
      <div>联系我们</div>
    </div>
  </div>

  <div v-show="showPopup" class="popup-mask" @click="closePopup"></div>

  <transition name="slide-left">
    <div v-show="showPopup" class="popup">
      <div class="left_box">
        <div class="hot_title">
          <el-icon>
            <Phone/>
          </el-icon>&nbsp;&nbsp;联系热线
        </div>
        <div class="hot_line">12345678901</div>
      </div>
      <div class="right_box">
        <div class="follow_title">关注微信公众号</div>
        <img class="follow_img" src="@/assets/images/pinellia.png"/>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ContactUs',
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    closePopup() {
      this.showPopup = false;
    },
  },
};
</script>

<style scoped>
.follow_img {
  margin-top: 5%;
  width: 40%;
}
.follow_title {
  font-size: larger;
}

.hot_title {
  display: flex;
  align-items: center;
  font-size: x-large;
  padding: 0 20%;
}

.hot_line {
  margin-top: 20px;
  font-size: xx-large;
  text-align: center;
}

.right_box {
  background-color: #a4a4a4;
  color: white;
  width: 50%;
  height: 100%;
  padding-top: 5%;
  text-align: center;
}

.left_box {
  background-color: #1c84c6;
  padding-top: 10%;
  color: white;
  width: 50%;
  height: 100%;
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter, .slide-left-leave-to {
  transform: translateX(100%);
}

.slide-left-enter-to, .slide-left-leave {
  transform: translateX(0);
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.01);
}

.popup {
  position: fixed;
  display: flex;
  right: 0;
  bottom: 35vh;
  height: 200px;
  width: 500px;
  z-index: 9999;
  cursor: pointer;
}

.contact-us-box {
  position: fixed;
  right: 0;
  bottom: 40vh;
  width: 100px;
  padding: 10px;
  text-align: center;
  background-color: #1c84c6;
  color: white;
  z-index: 999;
}
</style>