老师，我的有bug

我点击这两个按钮周围也会出现点击按钮的效果

order.vue

<template>
  <div class="order">
    <div class="order__price">
      实付金额 <b>&yen;{{ caculations.price }}</b>
    </div>
    <div class="order__btn" @click="()=>handleSubmitClick(true)">提交订单</div>
  </div>
  <div class="mask" v-show="showMask" @click="()=>handleSubmitClick(false)">
    <div class="mask__con" @click.stop>
      <h3 class="mask__con__h3">确认要离开收银台？</h3>
      <p class="mask__con__p">请尽快完成支付，否则将被取消</p>
      <p class="mask__con__btns">
        <span class="mask__con__btns--first" @click="()=>handleConfirmClick(true)"
          >取消订单</span
        >
        <span class="mask__con__btns--last" @click="()=>handleConfirmClick(false)"
          >确认支付</span
        >
      </p>
    </div>
  </div>
  <Toast v-if="showToast" :message="showToastText" />
</template>
<script>
import {ref} from 'vue';
import { useCommonCartEffect } from "../../effects/cartEffects";
import { useRoute,useRouter } from "vue-router";
import {useStore} from 'vuex';
import { post } from "../../utils/request.js";
import Toast, { useToastEffect } from "../../components/Toast.vue";
export default {
  name: "Order",
  components:{Toast},
  setup() {
    const router=useRouter();
    const route = useRoute();
    const store=useStore();
    const shopId = parseInt(route.params.id);
    const showMask=ref(false);
    const { caculations, shopName, list } = useCommonCartEffect(shopId);
    const { showToast, showToastText,toastFn } = useToastEffect();
    const handleSubmitClick=(boo)=>{
      showMask.value=boo;
    }

    const handleConfirmClick = async (isCanceled) => {
      const products = [];
      for (let i in list.value) {
        const product = list.value[i];
        products.push({ id: parseInt(product._id), num: product.count });
      }
      try {
          const result = await post("api/order", {
            addressId: 1,
            shopId,
            shopName: shopName.value,
            isCanceled,
            products,
          });
          if (result?.errno == 0) {
            store.commit('clearCartData',shopId)
            router.push({ name: "Home" });
          }
      } catch (error) {
        toastFn("下单失败");
      }
    };
    return { showMask,handleSubmitClick,showToast, showToastText,caculations, handleConfirmClick };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/variables.scss";
.order {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 0.49rem;
  line-height: 0.49rem;

  &__price {
    flex: 1;
    background: $color-white;
    font-size: 14px;
    color: $content-fontcolor;
    text-indent: 0.24rem;
  }
  &__btn {
    width: 0.98rem;
    background: $blue-bgcolor;
    color: $color-white;
    text-align: center;
  }
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  &__con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 1.57rem;
    background: #fff;
    border-radius: 0.04rem;
    text-align: center;
    &__h3 {
      margin: 0.24rem 0 0.08rem 0;
      font-size: 18px;
      color: #333333;
    }
    &__p {
      font-size: 14px;
      color: #666666;
    }
    &__btns {
      margin-top: 0.24rem;
      span {
        display: inline-block;
        width: 0.8rem;
        height: 0.32rem;
        line-height: 0.32rem;
        border-radius: 0.16rem;
        border: 1px solid #4fb0f9;
      }
      &--first {
        font-size: 14px;
        color: #0091ff;
        margin-right: 0.24rem;
      }
      &--last {
        background: #4fb0f9;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}
</style>