YingXingAI/components/AdvicePhone.vue

<template>
  <!-- 咨询电话 -->
  <u-popup
    v-model="showPopup"
    mode="center"
    border-radius="16"
    closeable
    close-icon-color="#999999"
    close-icon-pos="top-right"
  >
    <view class="phone-popup">
      <view class="phone-title">招生电话</view>
      <view class="phone-content">0790-6764666/6765666</view>
      <view class="phone-button">
        <u-button class="cancel-button" type="default" @click="closePopup"
          >取消</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "AdvicePhone",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showPopup: false,
    };
  },
  watch: {
    show: {
      handler(newVal) {
        this.showPopup = newVal;
      },
      immediate: true,
    },
    showPopup(val) {
      if (val !== this.show) {
        this.$emit("update:show", val);
      }
    },
  },
  methods: {
    closePopup() {
      this.showPopup = false;
      this.$emit("update:show", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.phone-popup {
  width: 600rpx;
  padding: 60rpx 0;
  border-radius: 16rpx;
  background-image: url("/static/common/images/images_bg_dialog.png");
  background-repeat: no-repeat;
  background-size: 630rpx 100rpx;
  background-position: -20rpx 0;


  .phone-title {
    text-align: center;
    font-family: DouyinSans;
    font-weight: bold;
    font-size: 40rpx;
    color: #477bfb;
    margin-bottom: 40rpx;
  }

  .phone-content {
    margin-bottom: 120rpx;
    text-align: center;
    font-family: PingFang SC;
    font-size: 32rpx;
    color: #333333;
  }

  .phone-button {
    padding: 0 40rpx;

    .cancel-button {
      border-radius: 16rpx;
    }
  }
}
</style>