|
@@ -1,34 +1,57 @@
|
|
|
<template>
|
|
|
<div class="search d-flex align-center">
|
|
|
- <div class="jobBox d-flex pl-5">
|
|
|
- <div>职位类型</div>
|
|
|
- <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
|
|
|
+ <div style="position: relative;">
|
|
|
+ <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click="showJobTypeCard">
|
|
|
+ <span>职位类型</span>
|
|
|
+ <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
|
|
|
+ </div>
|
|
|
+ <!-- <jobTypeCard v-if="drawer" style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"></jobTypeCard> -->
|
|
|
+ <!-- <div style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"> -->
|
|
|
+ <div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<v-text-field
|
|
|
v-model="value"
|
|
|
placeholder="搜索职位/公司"
|
|
|
color="#00897B"
|
|
|
variant="plain"
|
|
|
- density="comfortable"
|
|
|
+ density="compact"
|
|
|
:hide-details="true"
|
|
|
class="px-2"
|
|
|
style="height: 100%; line-height: 100%;"
|
|
|
></v-text-field>
|
|
|
<div class="searchBtn">搜索</div>
|
|
|
+ <v-navigation-drawer
|
|
|
+ v-model="drawer"
|
|
|
+ right absolute floating app
|
|
|
+ >
|
|
|
+ <v-list density="compact" nav>
|
|
|
+ <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
|
|
|
+ <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
|
|
|
+ </v-list>
|
|
|
+ </v-navigation-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+// import jobTypeCard from './jobTypeCard.vue'
|
|
|
+
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
defineOptions({ name:'personal-search'})
|
|
|
|
|
|
const value = ref('')
|
|
|
+let drawer = ref(false)
|
|
|
+
|
|
|
+const showJobTypeCard = () => {
|
|
|
+ drawer.value = !drawer.value
|
|
|
+ console.log('drawer.value', drawer.value)
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.search {
|
|
|
- height: 60px;
|
|
|
+ height: 50px;
|
|
|
width: 800px;
|
|
|
margin: 16px auto 8px auto;
|
|
|
border: 2px solid var(--v-primary-base);
|
|
@@ -39,11 +62,14 @@ const value = ref('')
|
|
|
color: var(--v-primary-base);
|
|
|
}
|
|
|
}
|
|
|
+ .drawer {
|
|
|
+ color: var(--v-primary-base);
|
|
|
+ }
|
|
|
.searchBtn {
|
|
|
width: 100px;
|
|
|
- height: 60px; line-height: 60px;
|
|
|
- font-size: 18px;
|
|
|
+ height: 50px; line-height: 48px;
|
|
|
text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
color: #fff;
|
|
|
background-color: var(--v-primary-base);
|
|
|
}
|