feat(资讯页): 添加搜索功能并优化样式布局
- 替换静态搜索框为可交互的u-search组件 - 调整标题位置和z-index防止遮挡 - 优化资讯标题过长时的显示效果 - 统一调整页面元素间距和位置 - 修复来源文本格式问题
This commit is contained in:
parent
4c647c7d59
commit
8c3b5c825f
|
|
@ -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 -->
|
||||||
|
|
@ -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,6 +399,10 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.item_title {
|
.item_title {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
font-family: PingFangSC, PingFang SC;
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|
@ -399,7 +410,14 @@ onMounted(async () => {
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
margin-top: 30rpx;
|
|
||||||
|
display: inline-block;
|
||||||
|
/* 或 block */
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item_summary {
|
.item_summary {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue