|  |  | 
 |  |  |       </div> | 
 |  |  |     </template> | 
 |  |  |     <div class="home-header"> | 
 |  |  |       <!-- <div class="home-searchbar-wrapper"> | 
 |  |  |         <div class="searchbar-container"> | 
 |  |  |           <BlSearchbar | 
 |  |  |             v-model.trim="searchValue" | 
 |  |  |             placeholder="搜索任务" | 
 |  |  |             @search="handleSearch" | 
 |  |  |             @change="handleSearch" | 
 |  |  |           ></BlSearchbar> | 
 |  |  |       <div class="home-searchbar-wrapper"> | 
 |  |  |         <div class="city-btn-wrapper"> | 
 |  |  |           <div class="city-btn" @click="goCitySelect"> | 
 |  |  |             <img :src="IconLocaltion" class="city-btn-icon" /> | 
 |  |  |             <div class="city-btn-text">{{ locationCity }}</div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="city-btn" @click="goCitySelect"> | 
 |  |  |           <img :src="IconLocaltion" class="city-btn-icon" /> | 
 |  |  |           <div class="city-btn-text">{{ locationCity }}</div> | 
 |  |  |         </div> | 
 |  |  |       </div> --> | 
 |  |  |         <div class="reset-localtion">重新定位</div> | 
 |  |  |       </div> | 
 |  |  |       <div class="home-banner-wrapper"> | 
 |  |  |         <nut-swiper :auto-play="3000"> | 
 |  |  |           <nut-swiper-item v-for="(item, index) in list" :key="index"> | 
 |  |  | 
 |  |  |       :key="queryState.orderType" | 
 |  |  |     > | 
 |  |  |       <template #renderItem="{ item }"> | 
 |  |  |         <!-- <TaskCard @click="goTaskDetail(item)" /> --> | 
 |  |  |         <FlexJobCard @click="goFlexJobDetail(item)" :showFooterLeft="false" /> | 
 |  |  |       </template> | 
 |  |  |     </InfiniteLoading> | 
 |  |  |   </PageLayoutWithBg> | 
 |  |  | 
 |  |  | import Taro from '@tarojs/taro'; | 
 |  |  | import { LocationUtils, trim } from '@12333/utils'; | 
 |  |  | import IconLogo from '@/assets/home/icon-logo.png'; | 
 |  |  | import { ProTabs, ProTabPane } from '@12333/components'; | 
 |  |  | import { ProTabs, ProTabPane, FlexJobCard } from '@12333/components'; | 
 |  |  | import { HomeOrderType } from './constants'; | 
 |  |  | import { useInfiniteLoading } from '@12333/hooks'; | 
 |  |  | import { OrderInputType, Gender } from '@12333/constants'; | 
 |  |  | 
 |  |  | import _ from 'lodash'; | 
 |  |  | import HomeQueryMenuView from './HomeQueryMenuView.vue'; | 
 |  |  | import HomeQueryPositionMenuView from './HomeQueryPositionMenuView.vue'; | 
 |  |  | import IconLocaltion from '@/assets/task/icon-localtion.png'; | 
 |  |  | import IconLocaltion from '@/assets/home/icon-localtion.png'; | 
 |  |  |  | 
 |  |  | const { locationCity } = useUser(); | 
 |  |  |  | 
 |  |  | 
 |  |  |  | 
 |  |  | const queryMenuState = reactive({ | 
 |  |  |   gender: '' as any as Gender, | 
 |  |  |   age: [15, 65], | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const queryPositionState = reactive({ | 
 |  |  | 
 |  |  | function handleMenuSelectPositionClose() { | 
 |  |  |   selectPositionItem.value?.toggle?.(); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function goFlexJobDetail(item: API.FrontOrderList) { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.flexJobDetail}?id=${item.id}`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> | 
 |  |  | 
 |  |  |     margin-left: 24px; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .city-btn { | 
 |  |  |   .home-searchbar-wrapper { | 
 |  |  |     padding: 32px 0 28px; | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |  | 
 |  |  |     .city-btn-text { | 
 |  |  |       max-width: 200px; | 
 |  |  |       @include ellipsis; | 
 |  |  |       margin-right: 12px; | 
 |  |  |     .city-btn-wrapper { | 
 |  |  |       flex: 1; | 
 |  |  |       min-width: 0; | 
 |  |  |  | 
 |  |  |       .city-btn { | 
 |  |  |         display: flex; | 
 |  |  |         align-items: center; | 
 |  |  |         padding-right: 36px; | 
 |  |  |         color: boleGetCssVar('text-color', 'primary'); | 
 |  |  |  | 
 |  |  |         .city-btn-icon { | 
 |  |  |           width: 40px; | 
 |  |  |           height: 40px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .city-btn-text { | 
 |  |  |           max-width: 200px; | 
 |  |  |           @include ellipsis; | 
 |  |  |           margin-left: 12px; | 
 |  |  |           font-size: 30px; | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .reset-localtion { | 
 |  |  |       font-weight: 400; | 
 |  |  |       font-size: 24px; | 
 |  |  |       color: boleGetCssVar('color', 'primary'); | 
 |  |  |       line-height: 28px; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  |