From 8dd919e8b0bec71ceb7e862a26d9aa0979eb22aa Mon Sep 17 00:00:00 2001
From: "34701892@qq.com" <34701892@qq.com>
Date: Mon, 10 Nov 2025 10:51:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(rank.vue):=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=BE=93=E5=85=A5=E6=A1=86=E4=B8=BA=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将原有的u-input组件替换为自定义样式的div和input组合，以提供更灵活的样式控制和更好的用户体验
---
 src/pages/realtimeInfo/pc/rank.vue | 84 ++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 3 deletions(-)

diff --git a/src/pages/realtimeInfo/pc/rank.vue b/src/pages/realtimeInfo/pc/rank.vue
index 282e3a7..8d53367 100644
--- a/src/pages/realtimeInfo/pc/rank.vue
+++ b/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>