web/components/connectUs/index.vue

<template>
  <div class="customBox">
    <div class="customBox_title">No Relevant Report Found? Please Contact Us</div>
    <div class="customBox_content">Need more information? Our team is ready to assist.Reach out today for expert support tailored to your needs.</div>
    <a class="customBox_btn" @click="handleContact()">Custom Reports</a>
    <img class="customBox_img" src="/assets/images/img1.png" alt="">
  </div>
  <n-modal :show="demandShow" @close="demandShow = false" @esc="demandShow = false" @mask-click="demandShow = false" :style="'width: 720px'">
    <demand @closeDialog="handleCloseDiag" />
  </n-modal>
</template>

<script setup>
import { ref, onMounted } from "vue";
const showModal = ref(false);
const demandShow = ref(false); // 需求页面
const modalType = ref(1);
const submitType = ref();
const openModel = (index, type) => {
  submitType.value = type;
  modalType.value = index;
  showModal.value = true;
}
// 联系我们
function handleContact () {
  demandShow.value = true;
}

// 关闭diag
function handleCloseDiag () {
  demandShow.value = false;
}
</script>

<style lang='scss' scoped>
@import "~/assets/css/tool.scss";
.customBox {
  background: url("@/assets/images/bg1.png");
  padding: var(--size-105) var(--size-145) var(--size-120);
  position: relative;
  .customBox_title {
    font-size: var(--size-48);
    font-family: Impact, Impact-Regular;
    font-weight: 400;
    text-align: left;
    color: #1a1a1a;
  }
  .customBox_content {
    font-size: var(--size-18);
    font-family: Arial, Arial-Regular;
    font-weight: 400;
    text-align: left;
    color: #1a1a1a;
  }
  .customBox_btn {
    display: block;
    width: var(--size-227);
    height: var(--size-60);
    background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
    border-radius: var(--size-8);
    text-align: center;
    line-height: var(--size-60);
    font-size: var(--size-18);
    color: #ffffff;
    margin: var(--size-40) 0 0;
    cursor: pointer;
  }
  .customBox_img {
    width: var(--size-362);
    height: var(--size-553);
    position: absolute;
    bottom: 0;
    right: var(--size-145);
  }
}
@include responseTo("phone") {
  .customBox {
    padding: var(--size-30);
    .customBox_title {
      font-size: var(--size-24);
      font-weight: 700;
    }
    .customBox_content {
      font-size: var(--size-14);
    }
    .customBox_btn {
      width: var(--size-150);
      height: var(--size-40);
      line-height: var(--size-40);
      font-size: var(--size-14);
    }
    .customBox_img {
      width: var(--size-181);
      height: var(--size-276);
      right: 0;
      display: none;
    }
  }
}
</style>