feat(资讯页): 添加搜索功能并优化样式布局

- 替换静态搜索框为可交互的u-search组件
- 调整标题位置和z-index防止遮挡
- 优化资讯标题过长时的显示效果
- 统一调整页面元素间距和位置
- 修复来源文本格式问题
This commit is contained in:
34701892@qq.com 2025-11-20 09:41:42 +08:00
parent 4c647c7d59
commit 8c3b5c825f
1 changed files with 39 additions and 21 deletions

View File

@ -16,12 +16,13 @@
<!-- 搜索 start --> <!-- 搜索 start -->
<view class="r_sreach"> <view class="r_sreach">
<view class="sreach"> <view class="sreach">
<view class="sreach_icon"> <u-search v-model="form.keyword" placeholder="搜索资讯" @search="getData" />
<!-- <view class="sreach_icon">
<image :src="icon_search"></image> <image :src="icon_search"></image>
</view> </view>
<view class="sreach_text"> <view class="sreach_text">
<text>搜索资讯</text> <text>搜索资讯</text>
</view> </view> -->
</view> </view>
</view> </view>
<!-- 搜索 end --> <!-- 搜索 end -->
@ -46,7 +47,7 @@
<view v-for="item in item.list" :key="item.time"> <view v-for="item in item.list" :key="item.time">
<view class="item_time"> <view class="item_time">
<text>{{ item.time }}</text> <text>{{ item.time }}</text>
<text class="item_source_title">来自<text class="item_source">中国证券报</text></text> <text class="item_source_title">来自 <text class="item_source">中国证券报</text></text>
</view> </view>
<view class="item_title"> <view class="item_title">
<text>{{ item.title }}</text> <text>{{ item.title }}</text>
@ -104,7 +105,7 @@ const listData = ref(
"list": [ "list": [
{ {
"time": "11:30:56", "time": "11:30:56",
"title": "刚果延长禁令后,中国钴价和库存飙升", "title": "刚果延长禁令后,中国钴价和库存飙升刚果延长禁令后,中国钴价和库存飙升",
"summary": "刚果民主共和国将钴出口禁令延长至9月导致全球约四分之三的钴供应受到影响。这一消息引…", "summary": "刚果民主共和国将钴出口禁令延长至9月导致全球约四分之三的钴供应受到影响。这一消息引…",
"etfs": [ "etfs": [
{ {
@ -118,9 +119,12 @@ const listData = ref(
] ]
) )
const form = ref({
keyword: ""
})
async function getData() { async function getData() {
let { code, data } = await getEtfIndexList({ let { code, data } = await getEtfIndexList({
"date": "2026-10-26", ...form.value
}) })
if (code == 200) { if (code == 200) {
listData.value = data listData.value = data
@ -174,18 +178,14 @@ onMounted(async () => {
.all { .all {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.banner {
position: relative; position: relative;
// background: red;
.top_menu_text { .top_menu_text {
position: absolute; position: absolute;
top: 30rpx; top: 60rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 9999;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
@ -195,6 +195,11 @@ onMounted(async () => {
text-align: center; text-align: center;
font-style: normal; font-style: normal;
} }
}
.banner {
position: relative;
} }
.banner_bk { .banner_bk {
@ -203,7 +208,7 @@ onMounted(async () => {
.r_banner_title { .r_banner_title {
position: absolute; position: absolute;
top: 160rpx; top: 200rpx;
left: 50rpx; left: 50rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -258,7 +263,7 @@ onMounted(async () => {
background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%); background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%);
border-radius: 24rpx 24rpx 0rpx 0rpx; border-radius: 24rpx 24rpx 0rpx 0rpx;
margin-top: -50px; margin-top: -70px;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%); background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%);
@ -324,7 +329,7 @@ onMounted(async () => {
.item_top { .item_top {
display: flex; display: flex;
margin-top: 30rpx; margin-top: 40rpx;
padding: 0 30rpx; padding: 0 30rpx;
.r_line { .r_line {
@ -377,6 +382,8 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20rpx; margin-left: 20rpx;
width: 95%;
margin-top: 10rpx;
.item_time { .item_time {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
@ -392,14 +399,25 @@ onMounted(async () => {
} }
.item_title { .item_title {
font-family: PingFangSC, PingFang SC; width: 100%;
font-weight: bold;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-top: 30rpx; margin-top: 30rpx;
text {
font-family: PingFangSC, PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-align: left;
font-style: normal;
display: inline-block;
/* 或 block */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
.item_summary { .item_summary {