menduner/src/views/headhunting/index.vue

<!-- 门墩儿猎寻服务 -->
<template>
  <div class="headhunting">
    <div class="headhunting-title">高端人才猎寻</div>
    <div class="headhunting-guidance" @click="showDialog = true">免费咨询</div>
    <div class="headhunting-title">高端人才猎寻</div>
    <!-- <div class="headhunting-content pa-8 py-12">
      <formItem ref="formRef"></formItem>
      <div class="text-center">
        <v-btn color="#474747" rounded class="buttons" @click="handleSubmit">提交</v-btn>
      </div>
    </div> -->
    <CtDialog
      :visible="showDialog"
      :widthType="2"
      titleClass="text-h6"
      title="门墩儿猎寻服务"
      @submit="handleSubmit"
    >
      <formItem ref="formRef"></formItem>
    </CtDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import formItem from './components/form.vue'
import Curtain from '@/plugins/curtain'
import { huntSubmit } from '@/api/headhunting'
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
defineOptions({ name: 'headhunting-index'})

const showDialog = ref(false)

// 提交
const formRef = ref()
const handleSubmit = async () => {
  try {
    const obj = await formRef.value.getQuery()
    if (!obj) return
    const params = JSON.parse(JSON.stringify(obj))
    await huntSubmit(params)
    showDialog.value = false
    Curtain('message', {
      message: t('headhunting.submitSuccess'),
      icon: 'mdi mdi-check-circle-outline',
      iconColor: 'green',
    })
  } catch (error) {
    console.error('error', error)
  }
}

</script>

<style scoped lang="scss">
.headhunting {
  position: relative;
  width: 100%;
  height: 100%;
  // background-color: var(--default-bgc);
  background-image: url('https://minio.citupro.com/dev/menduner/%E9%97%A8%E5%A2%A9%E7%8C%8E%E5%AF%BB%E6%9C%8D%E5%8A%A1%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87.jpg');
  background-size: cover;
}
// .headhunting::before {
//   content: ""; /* 必须添加，因为伪元素是空的 */
//   position: absolute; /* 绝对定位，相对于最近的已定位（即非static）祖先元素 */
//   top: 0; /* 遮罩层顶部与元素顶部对齐 */
//   left: 0; /* 遮罩层左侧与元素左侧对齐 */
//   right: 0; /* 遮罩层右侧与元素右侧对齐 */
//   bottom: 0; /* 遮罩层底部与元素底部对齐 */
//   background-color: rgba(0, 0, 0, 0.1); /* 遮罩层颜色，半透明黑色 */
//   // z-index: -1; /* 确保遮罩层在背景图片之下（通常不需要，因为伪元素默认就在内容之下） */
// }
.headhunting-title {
  position: absolute;
  top: 45px;
  left: 100px;
  font-size: 24px;
  font-weight: bold;
}
.headhunting-guidance {
  position: absolute;
  top: 45px;
  right: 200px;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}
.headhunting-content {
  position: absolute;
  bottom: 30px;
  left: 250px;
  width: 350px;
}
</style>