搜索

src/views/Home/personal/components/search.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="search d-flex align-center">
+    <!-- <v-btn append-icon="$vuetify" variant="text">职位类型</v-btn> -->
+    <div class="jobBox d-flex pl-5">
+      <div>职位类型</div>
+      <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
+    </div>
+    <v-divider vertical color="var(--v-primary-base)" class="border-opacity-100"></v-divider>
+    <v-text-field
+      v-model="value"
+      placeholder="搜索职位/公司"
+      color="#00897B"
+      variant="plain"
+      density="comfortable"
+      :hide-details="true"
+      class="px-2"
+      style="height: 100%; line-height: 100%;"
+    ></v-text-field>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+defineOptions({ name:'personal-search'})
+
+const value = ref('')
+</script>
+
+<style lang="scss" scoped>
+.search {
+  height: 60px;
+  width: 800px;
+  margin: 16px auto 8px auto;
+  border: 2px solid var(--v-primary-base);
+  border-radius: 5px;
+  .jobBox {
+    cursor: pointer;
+    &:hover {
+      color: var(--v-primary-base);
+    }
+  }
+}
+</style>

src/views/Home/personal/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="parent">
     <headCarousel></headCarousel>
+    <headSearch></headSearch>
   </div>
 </template>
 
 <script setup>
 import headCarousel from './components/headCarousel.vue'
+import headSearch from './components/search.vue'
 defineOptions({ name:'personal-index'})
 </script>