refactor(realtimeInfo): 调整搜索栏位置并优化样式

将搜索栏从banner区域移至内容区域,并修改相关样式。移除绝对定位,添加背景图片,调整高度和间距以改善布局。
This commit is contained in:
zzp 2025-09-12 09:51:37 +08:00
parent 725f4eb9af
commit 885109158d
1 changed files with 26 additions and 18 deletions

View File

@ -3,19 +3,6 @@
<view class="all">
<!-- banner start -->
<view class="banner">
<view class="r_sreach">
<image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image>
<view class="sreach" @click="goSreach">
<view class="sreach_icon">
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
</view>
<view class="sreach_text">
<text>搜索资讯</text>
</view>
</view>
</view>
<img :src="bannerImg" class="banner_bk" />
<view class="r_banner_title">
<img :src="bannerTitle" class="banner_title" />
@ -92,6 +79,20 @@
</view>
<view style="background-color: white; margin-top: 40rpx">
<view class="r_sreach">
<!-- <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image> -->
<image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image>
<view class="sreach" @click="goSreach">
<view class="sreach_icon">
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
</view>
<view class="sreach_text">
<text>搜索资讯</text>
</view>
</view>
</view>
<indexMenuTitle title="编辑精选 Top20"></indexMenuTitle>
<RankList :newsList="newsList"></RankList>
</view>
@ -448,18 +449,20 @@ onMounted(async () => {
}
.r_sreach {
height: 60px;
display: flex;
align-items: center;
padding: 0 30rpx;
position: absolute;
top: 10px;
left: 0;
z-index: 9999;
// position: absolute;
// top: 10px;
// left: 0;
// z-index: 9999;
background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png");
}
.logo_text {
width: 88rpx;
height: 45rpx;
height: 40rpx;
}
.sreach {
@ -494,4 +497,9 @@ onMounted(async () => {
text-align: left;
font-style: normal;
}
.top_bk {
width: 100vw;
height: 60px;
}
</style>