门墩猎寻服务

src/views/headhunting/components/form.vue

@@ -0,0 +1,76 @@
+<template>
+  <div style="width: 100%;">
+    <CtForm ref="formPageRef" :items="items"></CtForm>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'headhunting-form'})
+import { reactive, ref, defineExpose } from 'vue'
+
+const formPageRef = ref()
+let query = reactive({})
+
+const items = ref({
+  options: [
+    {
+      type: 'text',
+      key: 'name',
+      value: '',
+      default: null,
+      label: '姓名 *',
+      outlined: true,
+      rules: [v => !!v || '请输入姓名']
+    },
+    {
+      type: 'phoneNumber',
+      key: 'phone',
+      value: '',
+      clearable: true,
+      label: '联系手机号 *',
+      rules: [v => !!v || '请填写联系手机号']
+    },
+    {
+      type: 'phoneNumber',
+      key: 'phone',
+      value: '',
+      clearable: true,
+      label: '联系手机号 *',
+      rules: [v => !!v || '请填写联系手机号']
+    },
+    {
+      type: 'phoneNumber',
+      key: 'phone',
+      value: '',
+      clearable: true,
+      label: '联系手机号 *',
+      rules: [v => !!v || '请填写联系手机号']
+    },
+    {
+      type: 'phoneNumber',
+      key: 'phone',
+      value: '',
+      clearable: true,
+      label: '联系手机号 *',
+      rules: [v => !!v || '请填写联系手机号']
+    },
+  ]
+})
+
+
+const getQuery = async () => {
+  const { valid } = await formPageRef.value.formRef.validate()
+  if (!valid) return false
+  const obj = {}
+  items.value.options.forEach(e => {
+    if (Object.prototype.hasOwnProperty.call(e, 'data')) return obj[e.key] = e.data
+    obj[e.key] = e.value
+  })
+  query = Object.assign(query, obj)
+  return query
+}
+
+defineExpose({
+  getQuery
+})
+</script>

src/views/headhunting/index.vue

@@ -1,15 +1,63 @@
+<!-- 门墩猎寻服务 -->
 <template>
-  <div class="headhunting">门墩猎寻服务</div>
+  <div class="headhunting">
+    <v-card class="headhunting-content pa-8 py-12">
+      <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-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>