fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

将原有的u-input组件替换为自定义样式的div和input组合，以提供更灵活的样式控制和更好的用户体验
This commit is contained in:
34701892@qq.com 2025-11-10 10:51:04 +08:00
parent 8bead115f5
commit 8dd919e8b0
1 changed files with 81 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/pages/realtimeInfo/pc/rank.vue
View File

@ -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>