mp_exhibitor_miniprog/components/layout/float-button.vue

<template>
  <view class="floating-buttons">
    <view hover-class="hover" @click="navigateTo('https://pc.global-eservice.com/h5/?lang=cn&channel=xcx#/')">
      <view class="iconfont icon-bishi"></view>
      <view class="floating-button-label">参观登记</view>
    </view>
    <view hover-class="hover" @click="onContactClick()">
      <view class="iconfont icon-xiaochengxu-lianxiwomenicon"></view>
      <view class="floating-button-label">联系我们</view>
    </view>
    <contact-us :show.sync="contactData.showContactUs" :qrcode_url="contactData.q_url" />
  </view>
</template>

<script>
import {getBuoyInfo} from "@/api";
import ContactUs from '@/pages/index/components/contact-us.vue'

export default {
  name: "float-button",
  components: {
    ContactUs
  },
	data() {
		return {
			contactData: {
				showContactUs: false,
				q_url: ''
			}
		}
	},
  methods: {
    onContactClick() {
      getBuoyInfo().then(res => {
        this.contactData.showContactUs = true
        this.contactData.q_url = res.data.contact_us_qrcode
      })
    }
  }
}
</script>

<style lang="scss">
.floating-buttons {
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 19rpx;
  z-index: 8;
  &>view {
    @include display-flex-center;
    flex-direction: column;
    width: 100rpx;
    height: 100rpx;
    background-color: #FFFFFF;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: pointer;
  }

  .floating-button-label {
    margin-top: 4rpx;
    font-size: 17rpx;
    color: #94A3B8;
    white-space: nowrap;
  }

  .iconfont {
    font-size: 44rpx;
    color: $textActionColor;
  }
}
</style>