menduner/src/views/headhunting/index.vue

<!-- 门墩儿猎寻服务 -->
<template>
  <div class="headhunting">
    <v-card class="headhunting-content pa-8 py-12">
      <div class="resume-header mb-5">
        <div class="resume-title">{{ $t('headhunting.headhuntingName') }}</div>
      </div>
      <formItem ref="formRef"></formItem>
      <div class="text-center">
        <v-btn color="primary" rounded class="buttons mt-3" @click="submit">提交</v-btn>
      </div>
    </v-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import formItem from './components/form.vue'
defineOptions({ name: 'headhunting-index'})


// 提交
const formRef = ref()
const submit = async () => {
  try {
    const obj = await formRef.value.getQuery()
    console.log('1', obj)
    // if (!obj) return
    // await savePersonSimpleInfo(obj)
  } 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.3); /* 遮罩层颜色，半透明黑色 */
  // z-index: -1; /* 确保遮罩层在背景图片之下（通常不需要，因为伪元素默认就在内容之下） */
}
.headhunting-content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 600px;
  // height: 430px;
  background-color: #fff;
  border-radius: 10px;
}
</style>