refactor(rank.vue): 替换搜索输入框为自定义样式组件

将原有的u-input组件替换为自定义样式的div和input组合，以提供更灵活的样式控制和更好的用户体验

src/pages/realtimeInfo/pc/rank.vue

@@ -7,13 +7,20 @@
         <text class="pageTitle" v-if="pageType != 4">资讯头条榜</text>
         <text class="pageTitle" v-if="pageType == 4">编辑精选</text>
         <image src="@/assets/zixun/top20_icon.png" class="title_icon" v-if="pageType != 4"></image>
-        <u-input v-if="pageType == 4" placeholder="请输入搜索内容" v-model="form.keyword" prefixIcon="search"
+        <!-- <u-input v-if="pageType == 4" placeholder="请输入搜索内容" v-model="form.keyword" prefixIcon="search"
           @keyup.enter="getNewsList" @blur="getNewsList" prefixIconStyle="font-size: 22px;color: #909399"
           style="margin-left: 40rpx; margin-top: 5rpx; border-radius: 20rpx">
           <template #suffix>
-            <u-button @tap="getNewsList" text="搜索" size="mini"></u-button>
+            <u-button @tap="getNewsList" text="搜索" size="mini" class="search_btn"></u-button>
           </template>
-        </u-input>
+</u-input> -->
+
+        <div class="r_input" v-if="pageType == 4">
+          <input v-model="form.keyword" placeholder="请输入搜索内容" class="input" @keyup.enter="getNewsList"
+            @clear="getNewsList" @blur="getNewsList" />
+          <div class="input_button" @click="getNewsList">搜索</div>
+        </div>
+
       </view>
 
       <view class="line"></view>
@@ -365,4 +372,75 @@ const handlePopupErrorCallback = () => {
     font-style: normal;
   }
 }
+
+.search_btn {
+  border: none;
+  display: flex;
+  width: 56px;
+  height: 44px;
+  padding: 8px 15px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: #0062d9;
+  margin-right: 5px;
+
+
+}
+
+.input {
+  border: none;
+  flex: 1;
+  margin-left: 10px;
+}
+
+.input_button {
+  display: flex;
+  width: 140px;
+  height: 100%;
+  // padding: 8px 15px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 0 10px 10px 0;
+  background: #007aff;
+
+  color: white;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 18px;
+  color: #ffffff;
+  line-height: 25px;
+  text-align: left;
+  font-style: normal;
+  cursor: pointer;
+}
+
+.r_input {
+  background-color: white;
+  border-radius: 10px;
+  border: 1px solid #e3e3e3;
+  flex: 1;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  margin-left: 30px;
+  margin-top: 3px;
+
+  :deep(.el-input__inner::placeholder) {
+    color: #ccced3;
+    font-family: 'PingFang SC';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 #fff;
+  }
+}
 </style>