menduner-uniapp/pages/index/position.vue

<template>
  <view class="box">
    <uni-search-bar
      class="ss-flex-1 white-bgc"
      radius="8"
      placeholder="请输入关键字"
      cancelButton="none"
      :focus="false"
      @confirm="onSearch($event.value)"
    />
    <view class="block">
      <SwiperAd class="pb-10" :list="swiperAdList"></SwiperAd>
      <FilterList class="pb-10" :list="filterList" idValue="label"></FilterList>
    </view>
  </view>
</template>

<script setup>
import SwiperAd from '@/components/SwiperAd'
// import SearchBar from '@/components/SearchBar'
import FilterList from '@/components/FilterList'
import { ref } from 'vue'

const swiperAdList = ref([
  'https://img.bosszhipin.com/beijin/activity/img/20240829/488f35070cc7d0b615328d1e05fe62df4b7d0ebc36568cfb80c0fe17b37418f00945b742138a9e17.jpg.webp',
  'https://img.bosszhipin.com/beijin/activity/img/20240829/488f35070cc7d0b615328d1e05fe62df4b7d0ebc36568cfb80c0fe17b37418f00945b742138a9e17.jpg.webp',
  'https://img.bosszhipin.com/beijin/activity/img/20240829/488f35070cc7d0b615328d1e05fe62df4b7d0ebc36568cfb80c0fe17b37418f00945b742138a9e17.jpg.webp',
])
const filterList = ref([
  { label: '行业' },
  { label: '城市' },
  { label: '工作性质' },
  { label: '月薪范围' },
  { label: '工作经验' },
])

const onSearch = (val) => {
  console.log('onSearch', val)
}

</script>

<style scoped lang="scss">
.pb-10 { padding-bottom: 10px; }
.box {
  height: 100vh;
  background-color: #f2f4f7;
  // background-color: var(--default-bgc);
  .block{
    margin-bottom: 10px;
    padding: 0 10px;
    background-color: #fff;
  }
}
</style>