1

package.json

@@ -29,7 +29,8 @@
         "vconsole": "^3.15.1",
         "vue": "^3.3.11",
         "vue-i18n": "^9.1.9",
-        "wot-design-uni": "^1.3.12"
+        "wot-design-uni": "^1.3.12",
+        "xinhua-sdk": "^1.8.0"
     },
     "devDependencies": {
         "@dcloudio/types": "^3.3.2",

src/components/navBar/index.vue

@@ -81,7 +81,7 @@ const back = () => {
     .search {
         position: absolute;
         bottom: 10rpx;
-        left: 50%;
+        left: 0;
 
         // padding-left: 20rpx;
         box-sizing: border-box;
@@ -89,14 +89,17 @@ const back = () => {
         // margin-top: 44rpx;
         display: flex;
         align-items: center;
-        width: 710rpx;
-        height: 80rpx;
-        margin: 0 auto;
+        width: 100%;
 
-        // background: rgba(255, 255, 255, 0.8);
-        border-radius: 16rpx;
+        // height: 80rpx;
+
+        // margin: 0 auto;
+
+        // background: red;
+        // border-radius: 16rpx;
         opacity: 0.8;
-        transform: translateX(-50%);
+
+        // transform: translateX(-50%);
         .arrow {
             width: 15rpx;
             height: 24rpx;

src/main.ts

@@ -7,8 +7,8 @@ import Vconsole from "vconsole";
 export function createApp() {
     const app = createSSRApp(App);
     app.component("NavBar", NavBar);
+    const vConsole = new Vconsole();
     app.use(store);
-    app.use(vConsole);
     return {
         app
     };

src/pages/postionList/index.vue

@@ -7,6 +7,12 @@
     <input placeholder="搜索职位，公司" placeholder-class="log-input-p" type="text"></input>
   </view>
 </nav-bar> -->
+    <NavBar :showIcon="false" backgroundBox="#ffffff">
+        <view class="search-form">
+            <wd-icon class="search-icon" name="search"></wd-icon>
+            <input placeholder="请输入要查询的内容" placeholder-class="log-input-p" type="text" />
+        </view>
+    </NavBar>
     <!-- 轮播区 -->
 
     <wd-swiper
@@ -357,41 +363,27 @@ getListData();
 /* page {
     background: #ffffff;
 } */
-
-// 顶部导航
-.nav-bar {
-    position: relative;
-    .search-form {
-        // background: rgba(245, 245, 245, 1);
-        position: relative;
-        box-sizing: content-box;
-        width: 452rpx;
-        height: 60rpx;
+.search-form {
+    display: flex;
+    align-items: center;
+    width: 452rpx;
+    height: 72rpx;
+    margin-left: 32rpx;
+    overflow: hidden;
+    background: #f7f7f7;
+    border-radius: 68rpx;
+    .search-icon {
+        width: 28rpx;
+        height: 28rpx;
         margin-left: 32rpx;
-        overflow: hidden;
-        background-color: #f7f7f7;
-        border-radius: 30rpx;
-        .search-icon {
-            position: absolute;
-            top: 50%;
-            left: 42rpx;
-            z-index: 10;
-            width: 28rpx;
-            height: 28rpx;
-            transform: translateY(-50%);
-        }
-        input {
-            // background-color: #F7F7F7;
-            position: absolute;
-            right: 0rpx;
-            left: 0rpx;
-            z-index: 9999;
-            box-sizing: border-box;
-            width: 100%;
-            width: auto;
-            height: 100%;
-            padding: 0 88rpx;
-        }
+        color: #86909c;
+    }
+    input {
+        margin-left: 16rpx;
+        font-size: 28rpx;
+    }
+    .log-input-p {
+        color: #b3b7bf;
     }
 }