公司检索item样式

src/api/common/index.js

@@ -110,4 +110,11 @@ export const getAreaListData = async (params) => {
     url: '/app-api/menduner/system/area/list',
     params
   })
+}
+
+// 公司检索-获取热门地区
+export const getHotArea = async () => {
+  return await request.get({
+    url: '/app-api/menduner/system/area/get/hot'
+  })
 }

src/styles/recruit/company.css

@@ -13,6 +13,7 @@
   color: #222;
   font-size: 14px;
   margin-right: 24px;
+  display: inline-block;
   cursor: pointer;
 }
 
@@ -24,3 +25,77 @@
   color: var(--v-primary-base);
   font-weight: 600;
 }
+
+.company-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sub-li {
+  position: relative;
+  width: calc((100% - 36px) / 4);
+  min-width: calc((100% - 36px) / 4);
+  max-width: calc((100% - 36px) / 4);
+  margin: 0 12px 12px 0;
+  height: 130px;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  transition: all .2s linear;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.sub-li:nth-child(4n) {
+  margin-right: 0;
+}
+
+.sub-li:hover {
+  box-shadow: 0 16px 40px 0 rgba(153, 153, 153, 0.3);
+}
+
+.company-info {
+  float: left;
+  margin-left: 16px;
+  width: 282px;
+}
+
+.company-info-top {
+  display: flex;
+  height: 76px;
+  padding: 16px 20px;
+  overflow: hidden;
+}
+
+.company-info h3 {
+  height: 22px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #222;
+  line-height: 22px;
+  margin: 0 0 4px 0;
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.company-info p {
+  height: 18px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #999;
+  line-height: 18px;
+}
+
+.company-info-bottom {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 16px 20px;
+  font-size: 14px;
+  color: #999;
+  background-color: #f8fcfb;
+}

src/styles/recruit/company.min.css

@@ -1 +1 @@
-.label-title{width:64px;font-weight:500;margin-right:24px;color:#222}.label-content{flex:1}.label-color{color:#222;font-size:14px;margin-right:24px;cursor:pointer}.label-color:hover{color:var(--v-primary-base)}.actives{color:var(--v-primary-base);font-weight:600}
+.label-title{width:64px;font-weight:500;margin-right:24px;color:#222}.label-content{flex:1}.label-color{color:#222;font-size:14px;margin-right:24px;display:inline-block;cursor:pointer}.label-color:hover{color:var(--v-primary-base)}.actives{color:var(--v-primary-base);font-weight:600}.company-box{display:flex;flex-wrap:wrap}.sub-li{position:relative;width:calc((100% - 36px) / 4);min-width:calc((100% - 36px) / 4);max-width:calc((100% - 36px) / 4);margin:0 12px 12px 0;height:130px;border-radius:12px;padding:0;overflow:hidden;transition:all .2s linear;background-color:#fff;cursor:pointer}.sub-li:nth-child(4n){margin-right:0}.sub-li:hover{box-shadow:0 16px 40px 0 rgba(153,153,153,0.3)}.company-info{float:left;margin-left:16px;width:282px}.company-info-top{display:flex;height:76px;padding:16px 20px;overflow:hidden}.company-info h3{height:22px;font-size:16px;font-weight:400;color:#222;line-height:22px;margin:0 0 4px 0;padding:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.company-info p{height:18px;font-size:13px;font-weight:400;color:#999;line-height:18px}.company-info-bottom{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:16px 20px;font-size:14px;color:#999;background-color:#f8fcfb}

src/styles/recruit/company.scss

@@ -1,3 +1,4 @@
+// 筛选样式
 .label-title {
   width: 64px;
   font-weight: 500;
@@ -11,6 +12,7 @@
   color: #222;
   font-size: 14px;
   margin-right: 24px;
+  display: inline-block;
   cursor: pointer;
   &:hover {
     color: var(--v-primary-base);
@@ -19,4 +21,73 @@
 .actives {
   color: var(--v-primary-base);
   font-weight: 600;
+}
+
+
+// 公司列表
+.company-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sub-li {
+  position: relative;
+  width: calc((100% - 36px) / 4);
+  min-width: calc((100% - 36px) / 4);
+  max-width: calc((100% - 36px) / 4);
+  margin: 0 12px 12px 0;
+  height: 130px;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  transition: all .2s linear;
+  background-color: #fff;
+  cursor: pointer;
+  &:nth-child(4n) {
+    margin-right: 0;
+  }
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+  }
+}
+.company-info {
+  float: left;
+  margin-left: 16px;
+  width: 282px;
+}
+.company-info-top {
+  display: flex;
+  height: 76px;
+  padding: 16px 20px;
+  overflow: hidden;
+}
+.company-info h3 {
+  height: 22px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #222;
+  line-height: 22px;
+  margin: 0 0 4px 0;
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.company-info p {
+  height: 18px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #999;
+  line-height: 18px;
+}
+.company-info-bottom {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 16px 20px;
+  font-size: 14px;
+  color: #999;
+  background-color: #f8fcfb;
 }

src/views/recruit/company/components/areaType.vue

@@ -7,7 +7,7 @@
         :key="k.id"
         :class="['label-color', {'actives': k.active}]"
         @click="handleItemClick(k)"
-      >{{ k.label }}</span>
+      >{{ k.name }}</span>
     </div>
   </div>
 </template>
@@ -15,9 +15,20 @@
 <script setup>
 defineOptions({ name: 'search-area-type'})
 import { ref } from 'vue'
+import { getHotArea } from '@/api/common'
+
 const emits = defineEmits(['handleClick'])
 
 const items = ref([])
+const getAreaList = async () => {
+  const data = await getHotArea()
+  const list = data.slice(0, 13).map(e => {
+    e.active = false
+    return e
+  })
+  items.value = [{ id: -1, name: '全国', active: true }, ...list, { id: 'all', name: '更多城市' }]
+}
+getAreaList()
 
 const handleItemClick = (k) => {
   items.value.map(e => e.active = false)

src/views/recruit/company/components/companyItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="company-box">
+    <div class="sub-li" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
+      <div class="company-info-top" @click="handleClickEnterprise(item)">
+        <div class="float-left">
+          <v-img src="https://img.bosszhipin.com/beijin/mcs/banner/3e9d37e9effaa2b6daf43f3f03f7cb15cfcd208495d565ef66e7dff9f98764da.jpg" :alt="item.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
+        </div>
+        <div class="company-info">
+          <h3 :class="{'default-active': item.active }">{{ item.anotherName }}</h3>
+          <p>{{ item.financingName }}<span class="mx-2">|</span>{{ item.industryName }}</p>
+        </div>
+      </div>
+      <div class="company-info-bottom">
+        热招 | 
+        <span style="color: var(--v-primary-base)">产品经理</span>
+        <span style="color: #000;"> · 6-11k</span>
+        等
+        <span style="color: var(--v-primary-base)"> 96 </span>
+        个职位
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'company-item'})
+import { ref } from 'vue'
+
+const handleClickEnterprise = (item) => {
+  console.log(item)
+  // window.open(`/enterprise/details/${item.id}`)
+}
+const list = ref([
+  {
+    anotherName: 'xxx科技有限公司',
+    financingName: '未融资',
+    scaleName: '0-20人',
+    industryName: '互联网/AI',
+    id: 1,
+    active: false
+  },
+  {
+    anotherName: 'xxx科技有限公司',
+    financingName: '未融资',
+    scaleName: '0-20人',
+    industryName: '互联网/AI',
+    id: 2,
+    active: false
+  },
+  {
+    anotherName: 'xxx科技有限公司',
+    financingName: '未融资',
+    scaleName: '0-20人',
+    industryName: '互联网/AI',
+    id: 3,
+    active: false
+  },
+  {
+    anotherName: 'xxx科技有限公司',
+    financingName: '未融资',
+    scaleName: '0-20人',
+    industryName: '互联网/AI',
+    id: 4,
+    active: false
+  },
+  {
+    anotherName: 'xxx科技有限公司',
+    financingName: '未融资',
+    scaleName: '0-20人',
+    industryName: '互联网/AI',
+    id: 5,
+    active: false
+  }
+])
+</script>
+
+<style scoped lang="scss">
+@import url('@/styles/recruit/company.scss');
+</style>

src/views/recruit/company/components/scaleType.vue

@@ -14,9 +14,30 @@
 
 <script setup>
 defineOptions({ name: 'search-scale-type'})
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getDict } from '@/hooks/web/useDictionaries'
-const emits = defineEmits(['handleClick'])
+
+const emits = defineEmits(['handleClick', 'clear'])
+const props = defineProps({
+  isClear: {
+    type: Boolean,
+    default: false
+  }
+})
+watch(
+  () => props.isClear, 
+  (newVal) => {
+    // console.log(newVal, 'newVal')
+    if (!newVal) return
+    // 清空筛选条件时默认选中不限
+    items.value.map(e => {
+      e.active = false
+      if (e.id === -1) e.active = true
+      return e
+    })
+    emits('clear')
+  }
+)
 
 const items = ref([])
 getDict('menduner_scale').then(({ data }) => {

src/views/recruit/company/index.vue

@@ -1,20 +1,45 @@
 <template>
-  <div class="default-width py-3 white-bgc">
-    <headSearch></headSearch>
-    <div class="px-5 mt-3">
-      <areaType class="mb-3"></areaType>
-      <industryType></industryType>
-      <natureType class="my-5"></natureType>
-      <scaleType></scaleType>
+  <div class="default-width">
+    <div class="white-bgc py-3">
+      <headSearch></headSearch>
+      <div class="px-5 mt-3 clear-parent">
+        <areaType class="mb-3" :isClear="clear"></areaType>
+        <industryType :isClear="clear"></industryType>
+        <natureType class="my-5" :isClear="clear"></natureType>
+        <scaleType :isClear="clear" @clear="clear = false"></scaleType>
+        <div class="clear" @click="clear = true">清空筛选条件</div>
+      </div>
     </div>
+    <companyItem class="mt-3"></companyItem>
   </div>
 </template>
 
 <script setup>
 defineOptions({name: 'retrieval-company-page'})
+import { ref } from 'vue'
 import headSearch from '@/components/headSearch'
 import scaleType from './components/scaleType'
-import natureType from './components/natureType.vue'
-import industryType from './components/industryType.vue'
-import areaType from './components/areaType.vue'
-</script>
+import natureType from './components/natureType'
+import industryType from './components/industryType'
+import areaType from './components/areaType'
+import companyItem from './components/companyItem'
+
+const clear = ref(false)
+</script>
+
+<style lang="scss" scoped>
+.clear-parent {
+  position: relative
+}
+.clear {
+  position: absolute;
+  bottom: 0;
+  right: 30px;
+  color: #999;
+  font-size: 14px;
+  cursor: pointer;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+</style>