feat: 添加搜索功能,优化资讯来源展示和股票名称屏蔽逻辑
This commit is contained in:
parent
6b6dc25dea
commit
37dee18a22
|
|
@ -17,6 +17,22 @@
|
||||||
<!-- 标题 end -->
|
<!-- 标题 end -->
|
||||||
|
|
||||||
<view :class="['page-main']">
|
<view :class="['page-main']">
|
||||||
|
<!-- 搜索 start -->
|
||||||
|
<view class="page-search">
|
||||||
|
<u-input
|
||||||
|
v-model="keyword"
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索资讯"
|
||||||
|
prefixIcon="search"
|
||||||
|
fontSize="28rpx"
|
||||||
|
prefixIconStyle="font-size: 40rpx;color: #BDC1C7;"
|
||||||
|
:customStyle="{
|
||||||
|
borderRadius: '36rpx',
|
||||||
|
background: '#F3F5F8',
|
||||||
|
}"
|
||||||
|
@confirm="handleSearch"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
<view :class="['timeline', { mask: isMask }]" v-for="item in data" :key="item.day">
|
<view :class="['timeline', { mask: isMask }]" v-for="item in data" :key="item.day">
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
|
@ -32,7 +48,7 @@
|
||||||
<view class="time">{{ news.timeStr }}</view>
|
<view class="time">{{ news.timeStr }}</view>
|
||||||
<view class="source">
|
<view class="source">
|
||||||
<view class="t-1">来自</view>
|
<view class="t-1">来自</view>
|
||||||
<view class="t-2">{{ news.source }}</view>
|
<view class="t-2">中国证券报</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="news-title">
|
<view class="news-title">
|
||||||
|
|
@ -215,13 +231,34 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-main {
|
.page-main {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 60rpx 30rpx 0;
|
min-height: calc(100vh - 400rpx);
|
||||||
|
padding: 30rpx 30rpx 0;
|
||||||
background: #f3f5f8;
|
background: #f3f5f8;
|
||||||
border-radius: 24rpx 24rpx 0px 0px;
|
border-radius: 24rpx 24rpx 0px 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 140rpx;
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-search {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 39rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-main {
|
||||||
.timeline {
|
.timeline {
|
||||||
display: flex;
|
display: flex;
|
||||||
&.mask {
|
&.mask {
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
{{ news.summary }}
|
{{ news.summary }}
|
||||||
</view>
|
</view>
|
||||||
<view :class="['source', { mask: isMask }]">
|
<view :class="['source', { mask: isMask }]">
|
||||||
<view>{{ news.source }}</view>
|
<view>中国证券报</view>
|
||||||
<view>{{ `${item.day} ${news.timeStr}` }}</view>
|
<view>{{ `${item.day} ${news.timeStr}` }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,11 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="tag-box">
|
<view class="tag-box">
|
||||||
<view v-for="(item, index) in topConceptList" :key="index" class="tag">
|
<view v-for="(item, index) in topConceptList" :key="index" class="tag">
|
||||||
{{ item.content }}
|
{{ item.content.split("-")[1] }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tag-content">
|
<view class="tag-content">
|
||||||
<view class="content" @click="goDetail(oneData)">{{ oneData.title }} </view>
|
<view class="content" @click="goDetail(oneData)">{{ oneData?.title }} </view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -29,7 +29,7 @@ const oneData = ref({});
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const start_time = dayjs().subtract(1, "month").format("YYYY-MM-DD");
|
const start_time = dayjs().subtract(1, "month").format("YYYY-MM-DD");
|
||||||
const end_time = dayjs().format("YYYY-MM-DD");
|
const end_time = dayjs().format("YYYY-MM-DD");
|
||||||
const limit_num = 3
|
const limit_num = 4;
|
||||||
|
|
||||||
// 热门行业top10
|
// 热门行业top10
|
||||||
async function getTopConcept_dFn() {
|
async function getTopConcept_dFn() {
|
||||||
|
|
|
||||||
|
|
@ -16,11 +16,11 @@
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<image class="icon-hot" src="@/assets/images/page/icon_hot@2x.png"></image>
|
<image class="icon-hot" src="@/assets/images/page/icon_hot@2x.png"></image>
|
||||||
<view class="name">
|
<view class="name">
|
||||||
<text class="text">{{ oneData.title }}</text>
|
<text class="text">{{ oneData?.title }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
{{ oneData.summary }}
|
{{ oneData?.summary }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -53,10 +53,10 @@
|
||||||
>
|
>
|
||||||
<view class="news-top">
|
<view class="news-top">
|
||||||
<view class="time">{{ news.timeStr }}</view>
|
<view class="time">{{ news.timeStr }}</view>
|
||||||
<view class="source" v-if="news.source">
|
<view class="source">
|
||||||
<!-- <view class="star" :style="{ width: `${4 * 20}rpx` }"></view> -->
|
<!-- <view class="star" :style="{ width: `${4 * 20}rpx` }"></view> -->
|
||||||
<view class="t-1">来自</view>
|
<view class="t-1">来自</view>
|
||||||
<view class="t-2">{{ news.source }}</view>
|
<view class="t-2">中国证券报</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="news-title">
|
<view class="news-title">
|
||||||
|
|
|
||||||
|
|
@ -88,11 +88,11 @@ export function maskStockNameProportional(name: string) {
|
||||||
|
|
||||||
// 根据名称长度动态决定屏蔽比例
|
// 根据名称长度动态决定屏蔽比例
|
||||||
let maskRatio;
|
let maskRatio;
|
||||||
if (name.length <= 2) {
|
if (name.length <= 4) {
|
||||||
maskRatio = 0.5; // 短名称屏蔽一半
|
maskRatio = 0.5; // 短名称屏蔽一半
|
||||||
} else if (name.length <= 4) {
|
|
||||||
maskRatio = 0.6; // 中等长度屏蔽60%
|
|
||||||
} else if (name.length <= 6) {
|
} else if (name.length <= 6) {
|
||||||
|
maskRatio = 0.6; // 中等长度屏蔽60%
|
||||||
|
} else if (name.length <= 8) {
|
||||||
maskRatio = 0.7; // 较长名称屏蔽70%
|
maskRatio = 0.7; // 较长名称屏蔽70%
|
||||||
} else {
|
} else {
|
||||||
maskRatio = 0.8; // 长名称屏蔽80%
|
maskRatio = 0.8; // 长名称屏蔽80%
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue