样式调整

pages/index/position.vue

@@ -30,7 +30,7 @@
                 >
                 </uni-search-bar>
                 <button class="search-btn" @tap.stop="onSearch">搜索</button>
-            </view>
+              </view>
             </view>
             <view class="white-bgc px-10 stickFilter">
             <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>

pagesB/jobFair/enterprisesClassification.vue

@@ -2,10 +2,25 @@
 <template>
   <view class="box" :style="`background-color: ${backgroundColor}`">
     <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
-      <view>
+      <view style="position: relative;">
         <!-- 轮播图 -->
         <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" margin="0" borderRadius="0" @click="handleToDetails"></SwiperAd>
-        <view class="stick" :style="`background-color: ${backgroundColor}`">
+        <view class="stick" :style="`background-color: ${backgroundColor}`"><view style="position: relative;" class="ss-m-t-30" >
+          <view class="ss-p-y-30">
+            <view style="position: relative;"></view>
+              <uni-search-bar
+                v-model="query.content"
+                placeholder="输入职位/公司关键字"
+                cancelButton="none"
+                :focus="false"
+                bgColor="#fff"
+                @confirm="onSearch($event.value)"
+                @clear="query.content = ''; onSearch()"
+              >
+              </uni-search-bar>
+              <button class="search-btn" @tap.stop="onSearch">搜索</button>
+            </view>
+          </view>
           <!-- tab页签 -->
           <scroll-view v-if="tabList?.length" scroll-x="true" class="scroll-container">
             <view
@@ -53,12 +68,12 @@
         <view v-else class="nodata-img-parent">
           <uni-load-more class="ss-m-t-50" status="noMore" :color="textColor" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
         </view>
+        <!-- 招聘会分享按钮 -->
+        <view v-if="showShareBtn" class="shareButtonBox" @tap="handleShare">
+          <uni-icons type="redo-filled" size="20" color="#fff" />
+        </view>
       </view>
     </scroll-view>
-    <!-- 招聘会分享按钮 -->
-    <view v-if="showShareBtn" class="shareButtonBox" @tap="handleShare">
-      <uni-icons type="redo-filled" size="20" color="#fff" />
-    </view>
   </view>
 </template>
 
@@ -75,6 +90,7 @@ const listData = ref([])
 const query = reactive({
   pageSize: 20, 
   pageNo: 1,
+  content: '',
   jobFairId: undefined,
 })
 
@@ -124,6 +140,12 @@ const handClickTab = (index) => {
   getEnterpriseList()
 }
 
+const onSearch = () => {
+  query.pageNo = 1
+  listData.value = []
+  getEnterpriseList()
+}
+
 const getEnterpriseList = async () => {
   if (!query.jobFairId) return
   try {
@@ -189,7 +211,7 @@ const handleShare = () => {
 }
 .shareButtonBox {
   z-index: 1;
-  position: fixed;
+  position: absolute;
   right: 20px;
   top: 16px;
   border-radius: 50%;
@@ -267,4 +289,36 @@ const handleShare = () => {
     }
   }
 }
+
+:deep(.uni-searchbar) {
+  // background-color: #fff !important;
+  padding: 0;
+  margin: 0 10px;
+  border-radius: 5px;
+}
+
+:deep(.uni-searchbar__box) {
+  width: calc(100% - 100px);
+  height: 40px !important;
+  // border: 1px solid #00B760;
+  padding-right: 20px;
+  flex: none;
+  background-color: #fff;
+}
+
+.search-btn {
+  position: absolute;
+  right: 13px;
+  top: 19px;
+  width: 106px;
+  height: 34px;
+  line-height: 34px;
+  line-height: 36px;
+  font-size: 16px;
+  // margin: 4px 4px 4px 0;
+  background-color: #00B760;
+  color: #fff;
+  border-radius: 5px;
+  z-index: 9;
+}
 </style>

pagesB/jobFair/positionClassification.vue

@@ -3,12 +3,25 @@
 <template>
   <view class="box" :style="`background-color: ${backgroundColor}`">
     <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
-      <view>
+      <view style="position: relative;">
         <!-- 轮播图 -->
         <SwiperAd v-if="swiperAdList.length && !query.enterpriseId" :list="swiperAdList" margin="0" borderRadius="0" @click="handleToDetails"></SwiperAd>
         <view class="stick" :style="`background-color: ${backgroundColor}`">
           <!-- tab页签 -->
           <scroll-view v-if="tabList?.length && !query.enterpriseId" scroll-x="true" class="scroll-container">
+            <view style="position: relative;" class="ss-m-t-30" >
+              <uni-search-bar
+                v-model="query.content"
+                placeholder="输入职位/公司关键字"
+                cancelButton="none"
+                :focus="false"
+                bgColor="#fff"
+                @confirm="onSearch($event.value)"
+                @clear="query.content = ''; onSearch()"
+              >
+              </uni-search-bar>
+              <button class="search-btn" @tap.stop="onSearch">搜索</button>
+            </view>
             <view
               class="scroll-item"
               :style="`margin-left: ${index ? '24px' : ''};`"
@@ -38,12 +51,12 @@
         <view v-else class="nodata-img-parent">
           <uni-load-more class="ss-m-t-50" :color="textColor" status="noMore" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
         </view>
+        <!-- 招聘会分享按钮 -->
+        <view v-if="showShareBtn" class="shareButtonBox" @tap="handleShare">
+          <uni-icons type="redo-filled" size="20" color="#fff" />
+        </view>
       </view>
     </scroll-view>
-    <!-- 招聘会分享按钮 -->
-    <view v-if="showShareBtn" class="shareButtonBox" @tap="handleShare">
-      <uni-icons type="redo-filled" size="20" color="#fff" />
-    </view>
   </view>
 </template>
 
@@ -61,6 +74,7 @@ const listData = ref([])
 const query = reactive({
   pageSize: 20, 
   pageNo: 1,
+  content: '',
   jobFairId: undefined,
 })
 
@@ -138,6 +152,12 @@ const handClickTab = (index) => {
   getEntPositionList()
 }
 
+const onSearch = () => {
+  query.pageNo = 1
+  listData.value = []
+  getEntPositionList()
+}
+
 const getEntPositionList = async () => {
   if (!query.jobFairId) {
     uni.showToast({ title: '获取企业岗位失败，请重试！', icon: 'none', duration: 2000 })
@@ -205,7 +225,7 @@ const handleShare = () => {
 }
 .shareButtonBox {
   z-index: 1;
-  position: fixed;
+  position: absolute;
   right: 20px;
   top: 16px;
   border-radius: 50%;
@@ -285,4 +305,35 @@ const handleShare = () => {
     border-radius: 2px;
   }
 }
+
+:deep(.uni-searchbar) {
+  // background-color: #fff !important;
+  padding: 0;
+  margin: 0 10px;
+  border-radius: 5px;
+}
+
+:deep(.uni-searchbar__box) {
+  width: calc(100% - 100px);
+  height: 40px !important;
+  // border: 1px solid #00B760;
+  padding-right: 20px;
+  flex: none;
+  background-color: #fff;
+}
+
+.search-btn {
+  position: absolute;
+  right: 13px;
+  top: 3px;
+  width: 106px;
+  height: 34px;
+  line-height: 34px;
+  font-size: 16px;
+  // margin: 4px 4px 4px 0;
+  background-color: #00B760;
+  color: #fff;
+  border-radius: 5px;
+  z-index: 9;
+}
 </style>