OhPlay/components/btAlert/btAlert.vue

<template>
  <view class="bt-alert"> 
    <view class="box">
      <image class="img1" src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/ic_bluetooth_permission.png" mode="aspectFit"/>
      <text class="text1">蓝牙权限</text>
      <text class="text2">请开启手机蓝牙功能进行连接</text>
    </view>
    <image class="ic-close" src="../../static/common/ic_close.svg" mode="aspectFit" @click.self="close"/>
  </view>
</template>

<script>
export default {
  props: {},
  data: () => ({}),
  computed: {},
  methods: {
    close(){
      this.$emit('close')
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},

  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style>
.bt-alert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box {
  margin-top: 14vh;
  width: 69.33vw;
  height: 70.4vw;
  border-radius: 16rpx;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img1 {
  width: 38.4vw;
  height: 39.7vw;
  margin-top: 50rpx;
}
.text1 {
  margin-top: 30rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #353535;
}
.text2 {
  margin-top: 10rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.ic-close{
  margin-top: 20rpx;
  width: 88rpx;
  height: 88rpx;
}
</style>