feat: 首页样式改版
This commit is contained in:
parent
a00988529d
commit
453936dd56
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "uni-preset-vue",
|
"name": "uni-preset-vue",
|
||||||
"version": "0.0.1",
|
"version": "2.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev:h5": "uni",
|
"dev:h5": "uni",
|
||||||
"build:h5": "uni build",
|
"build:h5": "uni build",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 783 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 697 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
Binary file not shown.
|
After Width: | Height: | Size: 933 B |
Binary file not shown.
|
After Width: | Height: | Size: 983 B |
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 669 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 721 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
Binary file not shown.
|
After Width: | Height: | Size: 917 B |
|
|
@ -6,7 +6,7 @@
|
||||||
<text class="date">({{ dayjs(new Date().getTime()).format("MM/DD") }})</text>
|
<text class="date">({{ dayjs(new Date().getTime()).format("MM/DD") }})</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<text class="sub_title">评分80分以上精选资讯数量</text>
|
<text class="sub_title">覆盖行业、产业，风口的精选资讯数量</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="right">
|
<view class="right">
|
||||||
<!-- <text class="num">{{ count }}</text> -->
|
<!-- <text class="num">{{ count }}</text> -->
|
||||||
|
|
@ -45,8 +45,14 @@ watch(
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.info-summary {
|
.info-summary {
|
||||||
background: #f5f8fe;
|
/* border: 1rpx solid #e3ecfd; */
|
||||||
border: 1rpx solid #e3ecfd;
|
|
||||||
|
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #FFFFFF;
|
||||||
|
border-image: linear-gradient(180deg, rgba(227, 236, 253, 1), rgba(245, 248, 254, 1)) 1 1;
|
||||||
|
|
||||||
|
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -70,7 +76,7 @@ watch(
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 33rpx;
|
/* line-height: 33rpx; */
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
<template>
|
||||||
|
<view class="news-section">
|
||||||
|
<swiper
|
||||||
|
class="news-section-swiper"
|
||||||
|
circular
|
||||||
|
:indicator-dots="true"
|
||||||
|
:autoplay="true"
|
||||||
|
:interval="3000"
|
||||||
|
:duration="500"
|
||||||
|
indicator-color="rgba(199, 199, 199, 1)"
|
||||||
|
indicator-active-color="#3F80FA"
|
||||||
|
>
|
||||||
|
<swiper-item>
|
||||||
|
<view class="swiper-item">
|
||||||
|
<view class="source">
|
||||||
|
<view>
|
||||||
|
<text class="label">来自</text>
|
||||||
|
<text class="name">中证报</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>00:12:34</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="title">三星生物风险投资基金将投资拓济医药</view>
|
||||||
|
<view class="content"
|
||||||
|
>三星集团宣布，其生物风险基金将投资中国生物技术公司phronline三星集团宣布，其生物风险基金将投资中国生物技术公司phronline
|
||||||
|
Biopharma，以扩大其抗体药物偶联物（ADC）合作伙伴关系</view
|
||||||
|
>
|
||||||
|
<view class="tag">
|
||||||
|
<text class="txt">#三星生物制药</text>
|
||||||
|
<text class="txt">#三星生物制药</text>
|
||||||
|
</view>
|
||||||
|
<view class="industry">
|
||||||
|
<text class="txt">**能源</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<view class="swiper-item">
|
||||||
|
<view class="source">
|
||||||
|
<view>
|
||||||
|
<text class="label">来自</text>
|
||||||
|
<text class="name">中证报</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>00:12:34</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="title">三星生物风险投资基金将投资拓济医药</view>
|
||||||
|
<view class="content"
|
||||||
|
>三星集团宣布，其生物风险基金将投资中国生物技术公司phronline三星集团宣布，其生物风险基金将投资中国生物技术公司phronline
|
||||||
|
Biopharma，以扩大其抗体药物偶联物（ADC）合作伙伴关系</view
|
||||||
|
>
|
||||||
|
<view class="tag">
|
||||||
|
<text class="txt">#三星生物制药</text>
|
||||||
|
<text class="txt">#三星生物制药</text>
|
||||||
|
</view>
|
||||||
|
<view class="industry">
|
||||||
|
<text class="txt">**能源</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.news-section {
|
||||||
|
width: 100%;
|
||||||
|
height: 522rpx;
|
||||||
|
margin: 0 20rpx 20rpx;
|
||||||
|
padding: 87rpx 54rpx 0 24rpx;
|
||||||
|
background-image: url("@/assets/images/page/banner-2@2x.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.news-section-swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 435rpx;
|
||||||
|
|
||||||
|
:deep(.uni-swiper-dot) {
|
||||||
|
width: 11rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background: #c7c7c7;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.uni-swiper-dot-active) {
|
||||||
|
width: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 33rpx;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
margin-right: 2rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
color: #666664;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 42rpx;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
margin-bottom: 14rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666664;
|
||||||
|
line-height: 33rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
.txt {
|
||||||
|
margin-right: 16rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #d6a68c;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.industry {
|
||||||
|
.txt {
|
||||||
|
padding: 8rpx 12rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #5c5c5b;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<template>
|
||||||
|
<view class="hot-section">
|
||||||
|
<view class="hot-top">
|
||||||
|
<view class="title">风口概念</view>
|
||||||
|
<view class="time">近一个月热门</view>
|
||||||
|
</view>
|
||||||
|
<view class="tag-box">
|
||||||
|
<view class="tag tag-active">医药生物</view>
|
||||||
|
<view class="tag">医药生物</view>
|
||||||
|
<view class="tag">医药生物</view>
|
||||||
|
<view class="tag">医药生物</view>
|
||||||
|
</view>
|
||||||
|
<view class="tag-content">
|
||||||
|
<view class="content"
|
||||||
|
>据称中国科技巨头赴海外训练AI模型以获取英伟达芯片据称中国科技巨头赴海外训练AI模型以获取英伟达芯片据称中国科技巨头赴海外训练AI模型以获取英伟达芯片
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.hot-section {
|
||||||
|
width: 710rpx;
|
||||||
|
height: 257rpx;
|
||||||
|
margin: 0 20rpx 20rpx;
|
||||||
|
padding: 30rpx 30rpx 0 30rpx;
|
||||||
|
background-image: url("@/assets/images/page/5_pic@2x.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #111111;
|
||||||
|
line-height: 45rpx;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rpx 8rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
border: 1px solid #bb875d;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #c18252;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-content {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #111111;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<view class="footer">
|
||||||
|
<button class="logout">退出登录</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang='scss'>
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin: 0 20rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
.logout {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #666666;
|
||||||
|
border: none;
|
||||||
|
font-size: 32rpx;
|
||||||
|
&::after {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<template>
|
||||||
|
<view class="header">
|
||||||
|
<view class="banner">
|
||||||
|
<text class="date"> 数据更新时间：{{ date }} </text>
|
||||||
|
</view>
|
||||||
|
<u-grid class="menu" :col="5" :border="false" align="center">
|
||||||
|
<u-grid-item v-for="menu in menus">
|
||||||
|
<image :src="menu.icon" class="menu-icon"></image>
|
||||||
|
<text class="menu-text">{{ menu.name }}</text>
|
||||||
|
</u-grid-item>
|
||||||
|
</u-grid>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, reactive } from "vue";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import MENUICON1 from "@/assets/images/page/icon_1@2x.png";
|
||||||
|
import MENUICON2 from "@/assets/images/page/icon_2@2x.png";
|
||||||
|
import MENUICON3 from "@/assets/images/page/icon_3@2x.png";
|
||||||
|
import MENUICON4 from "@/assets/images/page/icon_4@2x.png";
|
||||||
|
import MENUICON5 from "@/assets/images/page/icon_5@2x.png";
|
||||||
|
|
||||||
|
const menus = reactive([
|
||||||
|
{
|
||||||
|
name: "海外独家",
|
||||||
|
icon: MENUICON1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "编辑精选",
|
||||||
|
icon: MENUICON2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "宏观知微",
|
||||||
|
icon: MENUICON3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "热门行业",
|
||||||
|
icon: MENUICON4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "风口概念",
|
||||||
|
icon: MENUICON5,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const date = computed(() => dayjs().format("YYYY-MM-DD"));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.header {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
background-color: #fbf9f6;
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
position: relative;
|
||||||
|
min-height: 334rpx;
|
||||||
|
background-image: url("@/assets/images/page/banner_1@2x.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
.date {
|
||||||
|
position: absolute;
|
||||||
|
top: 271rpx;
|
||||||
|
left: 38rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #aa8e83;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30rpx;
|
||||||
|
background: linear-gradient(180deg, rgba(253, 250, 249, 0) 0%, #fbf9f6 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
height: 193rpx;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.menu-icon {
|
||||||
|
width: 88rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
}
|
||||||
|
.menu-text {
|
||||||
|
margin-top: 12rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
<template>
|
||||||
|
<view class="hot-section">
|
||||||
|
<view class="hot-top">
|
||||||
|
<view class="title">热门行业</view>
|
||||||
|
<view class="time">近一个月热门</view>
|
||||||
|
</view>
|
||||||
|
<view class="tag-box">
|
||||||
|
<view class="tag tag-active">医药生物</view>
|
||||||
|
<view class="tag">医药生物</view>
|
||||||
|
<view class="tag">医药生物</view>
|
||||||
|
<view class="tag">医药生物</view>
|
||||||
|
</view>
|
||||||
|
<view class="tag-content">
|
||||||
|
<view class="title">
|
||||||
|
<image class="icon-hot" src="@/assets/images/page/icon_hot@2x.png"></image>
|
||||||
|
<view class="name">
|
||||||
|
<text class="text"
|
||||||
|
>行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
|
||||||
|
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
|
||||||
|
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
const active = ref(0);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.hot-section {
|
||||||
|
width: 710rpx;
|
||||||
|
height: 482rpx;
|
||||||
|
margin: 0 20rpx 20rpx;
|
||||||
|
padding: 40rpx 30rpx 0 30rpx;
|
||||||
|
background-image: url("@/assets/images/page/4_pic@2x.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 34rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #111111;
|
||||||
|
line-height: 45rpx;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
height: 96rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-active {
|
||||||
|
background: #f3f5fc;
|
||||||
|
border: 2rpx solid #4d71dc;
|
||||||
|
color: #466feb;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -12rpx;
|
||||||
|
left: 50%;
|
||||||
|
border-left: 12rpx solid transparent;
|
||||||
|
border-right: 12rpx solid transparent;
|
||||||
|
border-top: 12rpx solid #4d71dc;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: -10rpx;
|
||||||
|
border-top-color: #f3f5fc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 185rpx;
|
||||||
|
background: #fafbfc;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 2rpx solid #e7e9eb;
|
||||||
|
background-image: url("@/assets/images/page/icon_symbol@2x.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 32rpx 23rpx;
|
||||||
|
background-position: 10rpx 0;
|
||||||
|
padding: 34rpx 30rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
.icon-hot {
|
||||||
|
// flex: 1;
|
||||||
|
width: 79rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
position: relative;
|
||||||
|
height: 40rpx;
|
||||||
|
.text {
|
||||||
|
position: relative;
|
||||||
|
max-width: 500rpx;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: #111111;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 10rpx;
|
||||||
|
background: #e0e7fc;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #343636;
|
||||||
|
line-height: 33rpx;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<view class="info-section">
|
||||||
|
<InfoSummary :count="newsNum" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const newsNum = ref(40);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang='scss'>
|
||||||
|
.info-section {
|
||||||
|
margin: 0 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<view class="top-section">
|
||||||
|
<view class="top-section-news">
|
||||||
|
<view class="top-section-img">
|
||||||
|
<image
|
||||||
|
class="image"
|
||||||
|
mode="aspectFit"
|
||||||
|
src="@/assets/images/page/icon_smart@2x.png"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
<view class="news-title">
|
||||||
|
<view class="num">1</view>
|
||||||
|
<view class="text"
|
||||||
|
>小米将于6月26日发布新款YU7车型上市小米将于6月26日发布新款YU7车型上市</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.top-section {
|
||||||
|
height: 104rpx;
|
||||||
|
margin: 0 20rpx 20rpx;
|
||||||
|
background: linear-gradient(90deg, #fce8ea 0%, #ffffff 27.03%, #ffffff 100%);
|
||||||
|
box-shadow: inset 0px 1rpx 0px 0px #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.top-section-news {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12rpx 20rpx;
|
||||||
|
|
||||||
|
.top-section-img {
|
||||||
|
width: 83rpx;
|
||||||
|
height: 75rpx;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
border-right: 1px solid #e7e9eb;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 22rpx;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
margin-right: 13rpx;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
|
||||||
|
border-radius: 5px;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
width: 488rpx;
|
||||||
|
font-family: "PingFangSC, PingFang SC";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #111111;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,499 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 顶部 banner 区域 -->
|
<!-- 容器 -->
|
||||||
<view class="all">
|
<view class="container">
|
||||||
<!-- banner start -->
|
<!-- 头部 start -->
|
||||||
<view class="banner">
|
<HeaderView />
|
||||||
<img :src="bannerImg" class="banner_bk" />
|
<!-- 头部 end -->
|
||||||
<view class="r_banner_title">
|
|
||||||
<img :src="bannerTitle" class="banner_title" />
|
|
||||||
<text>数据更新时间:{{ dayjs(new Date().getTime()).format("YYYY-MM-DD") }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- banner end -->
|
|
||||||
|
|
||||||
<view class="">
|
<!-- 海外独家 start -->
|
||||||
<view class="tag">
|
<BannerNewsView />
|
||||||
<view class="r_tag_img">
|
<!-- 海外独家 end -->
|
||||||
<img :src="tagicon_1_bg" class="tag_bk" />
|
|
||||||
<view class="tag_content">
|
|
||||||
<view class="tag_item_left">
|
|
||||||
<text class="tag_title">行业分类贴标</text>
|
|
||||||
|
|
||||||
<view style="display: flex; margin-top: 15rpx">
|
<!-- 资讯榜 start -->
|
||||||
<!-- <text class="tag_num">{{ topNum.leftNum }}</text> -->
|
<TopNewsView />
|
||||||
<countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></countTo>
|
<!-- 资讯榜 end -->
|
||||||
|
|
||||||
<text class="tag_status">已处理</text>
|
<!-- 热门行业 start -->
|
||||||
</view>
|
<HotNewsView />
|
||||||
</view>
|
<!-- 热门行业 end -->
|
||||||
|
|
||||||
<view class="tag_item_right">
|
<!-- 风口概念 start -->
|
||||||
<img :src="tagicon_1" class="tag_icon" />
|
<ConceptNewsView />
|
||||||
</view>
|
<!-- 风口概念 end -->
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="r_tag_img">
|
<!-- 今日资讯 start -->
|
||||||
<img :src="tagicon_2_bg" class="tag_bk" />
|
<TodayNewsView />
|
||||||
<view class="tag_content">
|
<!-- 今日资讯 end -->
|
||||||
<view class="tag_item_left">
|
|
||||||
<text class="tag_title">概念标签贴标</text>
|
|
||||||
<view style="display: flex; margin-top: 15rpx">
|
|
||||||
<!-- <text class="tag_num">{{ topNum.rightNum }}</text> -->
|
|
||||||
<countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></countTo>
|
|
||||||
|
|
||||||
<text class="tag_status">已处理</text>
|
<!-- 尾部 start -->
|
||||||
</view>
|
<FooterView />
|
||||||
</view>
|
<!-- 尾部 end -->
|
||||||
|
|
||||||
<view class="tag_item_right">
|
|
||||||
<img :src="tagicon_2" class="tag_icon" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view style="background-color: white; margin-top: 40rpx">
|
|
||||||
<indexMenuTitle title="资讯评分分布区间"></indexMenuTitle>
|
|
||||||
<Line style="margin-top: 30rpx" :data="lineData"></Line>
|
|
||||||
|
|
||||||
<view style="display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; padding-bottom: 30rpx">
|
|
||||||
<InfoSummary style="width: 85%" :count="newsNum"></InfoSummary>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view style="background-color: white; margin-top: 40rpx">
|
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
|
||||||
<indexMenuTitle title="资讯头条 Top20"></indexMenuTitle>
|
|
||||||
<view style="display: flex; align-items: center; margin-right: 15rpx; font-size: 30rpx; gap: 10rpx; margin-top: 10rpx" @click="showCalendar">
|
|
||||||
{{ chooseDate.startDate.split(" ")[0] }}
|
|
||||||
<u-icon name="calendar" size="26" style="margin-right: 10rpx"></u-icon>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- <view style="display: flex; align-items: center; gap: 25rpx;margin-right: 15px;margin-top: 10px;">
|
|
||||||
<u-icon name="play-left-fill" color="#2979ff" size="20"></u-icon>
|
|
||||||
{{ chooseDate.startDate.split(' ')[0] }}
|
|
||||||
<u-icon name="play-right-fill" color="#2979ff" size="20"></u-icon>
|
|
||||||
</view> -->
|
|
||||||
</div>
|
|
||||||
<RankList :newsList="newsList"></RankList>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view style="background-color: white; margin-top: 40rpx">
|
|
||||||
<view style="display: flex; justify-content: space-between; align-items: center; padding-right: 30rpx; height: 100rpx">
|
|
||||||
<indexMenuTitle title="热门行业池 Top10"></indexMenuTitle>
|
|
||||||
<view style="display: flex; gap: 3rpx">
|
|
||||||
<text class="view-all" @click="onViewAll(0)">查看全部</text>
|
|
||||||
|
|
||||||
<u-icon size="12" name="arrow-right"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<HotIndustryList :industryList="industryList" :type="0" @viewAll="handleViewAll" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view style="background-color: white; margin-top: 40rpx">
|
|
||||||
<view style="display: flex; justify-content: space-between; align-items: center; padding-right: 30rpx; height: 100rpx">
|
|
||||||
<indexMenuTitle title="风口概念池 Top10"></indexMenuTitle>
|
|
||||||
<view style="display: flex; gap: 3rpx">
|
|
||||||
<text class="view-all" @click="onViewAll(1)">查看全部</text>
|
|
||||||
|
|
||||||
<u-icon size="12" name="arrow-right"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<HotIndustryList :type="1" :industryList="topConceptList" @viewAll="handleViewAll" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
|
|
||||||
|
|
||||||
<LoginPopup
|
|
||||||
:show="LoginShow"
|
|
||||||
@handlePopupClose="handlePopupClose"
|
|
||||||
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
|
||||||
@handlePopupErrorCallback="handlePopupErrorCallback" />
|
|
||||||
|
|
||||||
<u-calendar
|
|
||||||
:show="calendarShow"
|
|
||||||
min-date="2025-01-01"
|
|
||||||
closeOnClickOverlay
|
|
||||||
:max-date="maxDate"
|
|
||||||
:default-date="chooseDate.startDate"
|
|
||||||
monthNum="12"
|
|
||||||
:key="chooseDate.startDate"
|
|
||||||
@confirm="calendarConfirm"
|
|
||||||
@close="calendarShow = false">
|
|
||||||
</u-calendar>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
import Line from "@/components/charts/Line.vue";
|
import HeaderView from "./components/HeaderView/index.vue";
|
||||||
import bannerImg from "@/assets/zixun/banner_pic.png";
|
import BannerNewsView from "./components/BannerNewsView/index.vue";
|
||||||
import bannerTitle from "@/assets/zixun/banner_title.png";
|
import TopNewsView from "./components/TopNewsView/index.vue";
|
||||||
import tagicon_1_bg from "@/assets/zixun/tagicon_1_bg.png";
|
import HotNewsView from "./components/HotNewsView/index.vue";
|
||||||
import tagicon_2_bg from "@/assets/zixun/tagicon_2_bg.png";
|
import ConceptNewsView from "./components/ConceptNewsView/index.vue";
|
||||||
import tagicon_1 from "@/assets/zixun/tagicon_1.png";
|
import TodayNewsView from "./components/TodayNewsView/index.vue";
|
||||||
import tagicon_2 from "@/assets/zixun/tagicon_2.png";
|
import FooterView from "./components/FooterView/index.vue";
|
||||||
import LoginPopup from "@/components/loginPopup/index.vue";
|
|
||||||
import { Session } from "@/utils/storage";
|
|
||||||
|
|
||||||
import { getindustryCount, getConceptCount, getTopNews, getTopIndustry_d, getTopConcept_d, getNews_cnt_d, newsInfoScore } from "@/api/newsInfo";
|
|
||||||
import countTo from "@/components/count-to/vue-countTo.vue";
|
|
||||||
import RankList from "@/components/RankList.vue"; // 路径根据实际调整
|
|
||||||
import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整
|
|
||||||
import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实际调整
|
|
||||||
import dayjs from "dayjs/esm/index";
|
|
||||||
import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整
|
|
||||||
|
|
||||||
const d = new Date();
|
|
||||||
const year = d.getFullYear();
|
|
||||||
let month = d.getMonth() + 1;
|
|
||||||
month = month < 10 ? `0${month}` : month;
|
|
||||||
const date = d.getDate();
|
|
||||||
const maxDate = ref(`${year}-${month}-${date} 23:59:59`);
|
|
||||||
const minDate = ref(`${year}-${month}-${date}`);
|
|
||||||
|
|
||||||
const calendarShow = ref(false);
|
|
||||||
const newsList = ref([]);
|
|
||||||
|
|
||||||
const lastLeftNum = ref(0);
|
|
||||||
const lastRightNum = ref(0);
|
|
||||||
|
|
||||||
const industryList = ref([]);
|
|
||||||
const topConceptList = ref([]);
|
|
||||||
const newsNum = ref(0);
|
|
||||||
const lineData = ref();
|
|
||||||
const handleViewAll = () => {
|
|
||||||
// 在这里处理点击“查看全部”的逻辑，比如跳转新页面等
|
|
||||||
console.log("点击了查看全部");
|
|
||||||
};
|
|
||||||
|
|
||||||
const topNum = ref({});
|
|
||||||
|
|
||||||
// 获取顶部两个统计数据
|
|
||||||
async function getTopNum() {
|
|
||||||
let res1 = await getindustryCount({});
|
|
||||||
topNum.value.leftNum = res1.aggregations.industry_non_empty.doc_count;
|
|
||||||
let res2 = await getConceptCount({});
|
|
||||||
topNum.value.rightNum = res2.aggregations.concept_non_empty.doc_count;
|
|
||||||
|
|
||||||
lastLeftNum.value = topNum.value.leftNum;
|
|
||||||
lastRightNum.value = topNum.value.rightNum;
|
|
||||||
}
|
|
||||||
|
|
||||||
const chooseDate = reactive({
|
|
||||||
startDate: `${year}-${month}-${date}`,
|
|
||||||
endDate: null,
|
|
||||||
});
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
function calendarConfirm(dateList) {
|
|
||||||
console.log("🚀 ~ calendarConfirm ~ dateList:", dateList);
|
|
||||||
if (dateList && dateList.length > 0) {
|
|
||||||
chooseDate.startDate = dateList[0] + " 00:00:00";
|
|
||||||
chooseDate.endDate = dateList[dateList.length - 1] + " 23:59:59";
|
|
||||||
}
|
|
||||||
getNewsList();
|
|
||||||
calendarShow.value = false;
|
|
||||||
console.log("🚀 ~ calendarConfirm ~ chooseDate:", chooseDate);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 概念标签贴标
|
|
||||||
async function getNewsList() {
|
|
||||||
newsList.value = await getTopNews({
|
|
||||||
start_date: chooseDate.startDate
|
|
||||||
? timeFormat(chooseDate.startDate)
|
|
||||||
: timeFormat(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0)),
|
|
||||||
end_date: chooseDate.endDate
|
|
||||||
? timeFormat(chooseDate.endDate)
|
|
||||||
: timeFormat(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 0, 0, 0)),
|
|
||||||
limit_num: 1000,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 热门行业top10
|
|
||||||
async function getTopIndustry_dFn() {
|
|
||||||
industryList.value = await getTopIndustry_d({});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 风口概念池top10
|
|
||||||
async function getTopConcept_dFn() {
|
|
||||||
topConceptList.value = await getTopConcept_d({});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 今日精选
|
|
||||||
async function getNews_cnt_dFn() {
|
|
||||||
let temp = await getNews_cnt_d({});
|
|
||||||
|
|
||||||
newsNum.value = temp[0].value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取柱状图数据
|
|
||||||
async function getLineData() {
|
|
||||||
let res = await newsInfoScore({});
|
|
||||||
lineData.value = res;
|
|
||||||
}
|
|
||||||
|
|
||||||
function initData() {
|
|
||||||
// 获取柱状图数据
|
|
||||||
getLineData();
|
|
||||||
// 获取顶部两个统计数据
|
|
||||||
getTopNum();
|
|
||||||
|
|
||||||
// 热门行业top10
|
|
||||||
getTopIndustry_dFn();
|
|
||||||
// 风口概念池top10
|
|
||||||
getTopConcept_dFn();
|
|
||||||
// 今日精选
|
|
||||||
getNews_cnt_dFn();
|
|
||||||
}
|
|
||||||
|
|
||||||
const type = ref(null);
|
|
||||||
function onViewAll(type1) {
|
|
||||||
type.value = type1;
|
|
||||||
if (Session.get("token")) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
LoginShow.value = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
initData();
|
|
||||||
}, 5000);
|
|
||||||
|
|
||||||
function showCalendar() {
|
|
||||||
calendarShow.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LoginShow = ref(false);
|
|
||||||
const isLoginStatus = ref();
|
|
||||||
// 关闭弹框
|
|
||||||
const handlePopupClose = () => {
|
|
||||||
LoginShow.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 登录成功之后的回调
|
|
||||||
const handlePopupSuccessCallback = () => {
|
|
||||||
isLoginStatus.value = true;
|
|
||||||
|
|
||||||
// uni.navigateTo({
|
|
||||||
// url: "/pages/realtimeInfo/rankDetail?type=" + type.value,
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
|
|
||||||
// 登录失败之后的回调
|
|
||||||
const handlePopupErrorCallback = () => {
|
|
||||||
console.log("登录失败");
|
|
||||||
};
|
|
||||||
import { doLogout } from "@/api";
|
|
||||||
function loginOut() {
|
|
||||||
doLogout({
|
|
||||||
financialAccount: Session.get("userPhone"),
|
|
||||||
});
|
|
||||||
|
|
||||||
Session.clear();
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
clearInterval(timer);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
initData();
|
|
||||||
if (!Session.get("token")) {
|
|
||||||
LoginShow.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 概念标签贴标
|
|
||||||
getNewsList();
|
|
||||||
|
|
||||||
const { aplus_queue } = window;
|
|
||||||
aplus_queue.push({
|
|
||||||
action: "aplus.sendPV",
|
|
||||||
arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 格式化时间
|
|
||||||
* @param {String|Number} dateTime 需要格式化的时间戳
|
|
||||||
* @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
|
|
||||||
* @returns {string} 返回格式化后的字符串
|
|
||||||
*/
|
|
||||||
function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
|
|
||||||
let date;
|
|
||||||
// 若传入时间为假值，则取当前时间
|
|
||||||
if (!dateTime) {
|
|
||||||
date = new Date();
|
|
||||||
}
|
|
||||||
// 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
|
|
||||||
else if (/^\d{10}$/.test(dateTime.toString().trim())) {
|
|
||||||
date = new Date(dateTime * 1000);
|
|
||||||
}
|
|
||||||
// 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
|
|
||||||
else if (typeof dateTime === "string" && /^\d+$/.test(dateTime.trim())) {
|
|
||||||
date = new Date(Number(dateTime));
|
|
||||||
}
|
|
||||||
// 其他都认为符合 RFC 2822 规范
|
|
||||||
else {
|
|
||||||
// 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
|
|
||||||
date = new Date(typeof dateTime === "string" ? dateTime.replace(/-/g, "/") : dateTime);
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeSource = {
|
|
||||||
y: date.getFullYear().toString(), // 年
|
|
||||||
m: (date.getMonth() + 1).toString().padStart(2, "0"), // 月
|
|
||||||
d: date.getDate().toString().padStart(2, "0"), // 日
|
|
||||||
h: date.getHours().toString().padStart(2, "0"), // 时
|
|
||||||
M: date.getMinutes().toString().padStart(2, "0"), // 分
|
|
||||||
s: date.getSeconds().toString().padStart(2, "0"), // 秒
|
|
||||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const key in timeSource) {
|
|
||||||
const [ret] = new RegExp(`${key}+`).exec(formatStr) || [];
|
|
||||||
if (ret) {
|
|
||||||
// 年可能只需展示两位
|
|
||||||
const beginIndex = key === "y" && ret.length === 2 ? 2 : 0;
|
|
||||||
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return formatStr;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.all {
|
.container {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #f3f5f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner_bk {
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r_banner_title {
|
|
||||||
position: absolute;
|
|
||||||
top: 160rpx;
|
|
||||||
left: 50rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.banner_title {
|
|
||||||
width: 364rpx;
|
|
||||||
height: 134rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
display: flex;
|
|
||||||
margin-top: -150rpx;
|
|
||||||
position: relative;
|
|
||||||
z-index: 999;
|
|
||||||
padding: 0 25rpx;
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r_tag_img {
|
|
||||||
width: calc(50vw - 20rpx);
|
|
||||||
height: 175rpx;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 10rpx 10rpx rgba(80, 80, 80, 0.1);
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_bk {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
max-width: 750rpx;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
background-color: #f3f5f8;
|
||||||
.tag_content {
|
font-family: "PingFangSC, PingFang SC";
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
top: 40rpx;
|
|
||||||
left: 30rpx;
|
|
||||||
width: 83%;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.tag_item_left {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_title {
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #222222;
|
|
||||||
line-height: 33rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_num {
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 38rpx;
|
|
||||||
color: #222222;
|
|
||||||
line-height: 56rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_status {
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #999999;
|
|
||||||
line-height: 33rpx;
|
|
||||||
margin-top: 15rpx;
|
|
||||||
margin-left: 7rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_item_right {
|
|
||||||
width: 70rpx;
|
|
||||||
height: 84rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_icon {
|
|
||||||
width: 70rpx;
|
|
||||||
height: 84rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-all {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout {
|
|
||||||
// width: 100%;
|
|
||||||
height: 80rpx;
|
|
||||||
background-color: red;
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: white;
|
|
||||||
margin-top: 50rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
<template>
|
||||||
|
<!-- 顶部 banner 区域 -->
|
||||||
|
<view class="all">
|
||||||
|
<view class="tabbar">
|
||||||
|
<view class="tabbar_item" @click="tabChange(0)">
|
||||||
|
<image
|
||||||
|
v-if="tabIndex == 1"
|
||||||
|
src=" @/assets/zixun/home_icon_normal.png"
|
||||||
|
class="tabbar_img"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="tabIndex == 0"
|
||||||
|
src=" @/assets/zixun/home_icon_press.png"
|
||||||
|
class="tabbar_img"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
class="tabbar_title"
|
||||||
|
:style="{ color: tabIndex == 0 ? '#3F80FA' : '#666666' }"
|
||||||
|
>首页</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tabbar_item" @click="tabChange(1)">
|
||||||
|
<image
|
||||||
|
v-if="tabIndex == 0"
|
||||||
|
src=" @/assets/zixun/all_icon_normal.png"
|
||||||
|
class="tabbar_img"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="tabIndex == 1"
|
||||||
|
src=" @/assets/zixun/all_icon_press.png"
|
||||||
|
class="tabbar_img"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
class="tabbar_title"
|
||||||
|
:style="{ color: tabIndex == 1 ? '#3F80FA' : '#666666' }"
|
||||||
|
>全部</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
|
||||||
|
const tabIndex = ref(0);
|
||||||
|
function tabChange(index) {
|
||||||
|
tabIndex.value = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.tabbar {
|
||||||
|
display: flex;
|
||||||
|
height: 150rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: 0 -2rpx 10rpx rgba(128, 128, 128, 0.2);
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
.tabbar_item {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar_img {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar_title {
|
||||||
|
display: flex;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 28rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,500 @@
|
||||||
|
<!-- 旧版本文件备份 -->
|
||||||
|
<template>
|
||||||
|
<!-- 顶部 banner 区域 -->
|
||||||
|
<view class="all">
|
||||||
|
<!-- banner start -->
|
||||||
|
<view class="banner">
|
||||||
|
<img :src="bannerImg" class="banner_bk" />
|
||||||
|
<view class="r_banner_title">
|
||||||
|
<img :src="bannerTitle" class="banner_title" />
|
||||||
|
<text>数据更新时间:{{ dayjs(new Date().getTime()).format("YYYY-MM-DD") }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- banner end -->
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<view class="tag">
|
||||||
|
<view class="r_tag_img">
|
||||||
|
<img :src="tagicon_1_bg" class="tag_bk" />
|
||||||
|
<view class="tag_content">
|
||||||
|
<view class="tag_item_left">
|
||||||
|
<text class="tag_title">行业分类贴标</text>
|
||||||
|
|
||||||
|
<view style="display: flex; margin-top: 15rpx">
|
||||||
|
<!-- <text class="tag_num">{{ topNum.leftNum }}</text> -->
|
||||||
|
<countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></countTo>
|
||||||
|
|
||||||
|
<text class="tag_status">已处理</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tag_item_right">
|
||||||
|
<img :src="tagicon_1" class="tag_icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="r_tag_img">
|
||||||
|
<img :src="tagicon_2_bg" class="tag_bk" />
|
||||||
|
<view class="tag_content">
|
||||||
|
<view class="tag_item_left">
|
||||||
|
<text class="tag_title">概念标签贴标</text>
|
||||||
|
<view style="display: flex; margin-top: 15rpx">
|
||||||
|
<!-- <text class="tag_num">{{ topNum.rightNum }}</text> -->
|
||||||
|
<countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></countTo>
|
||||||
|
|
||||||
|
<text class="tag_status">已处理</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tag_item_right">
|
||||||
|
<img :src="tagicon_2" class="tag_icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="background-color: white; margin-top: 40rpx">
|
||||||
|
<indexMenuTitle title="资讯评分分布区间"></indexMenuTitle>
|
||||||
|
<Line style="margin-top: 30rpx" :data="lineData"></Line>
|
||||||
|
|
||||||
|
<view style="display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; padding-bottom: 30rpx">
|
||||||
|
<InfoSummary style="width: 85%" :count="newsNum"></InfoSummary>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="background-color: white; margin-top: 40rpx">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
|
<indexMenuTitle title="资讯头条 Top20"></indexMenuTitle>
|
||||||
|
<view style="display: flex; align-items: center; margin-right: 15rpx; font-size: 30rpx; gap: 10rpx; margin-top: 10rpx" @click="showCalendar">
|
||||||
|
{{ chooseDate.startDate.split(" ")[0] }}
|
||||||
|
<u-icon name="calendar" size="26" style="margin-right: 10rpx"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view style="display: flex; align-items: center; gap: 25rpx;margin-right: 15px;margin-top: 10px;">
|
||||||
|
<u-icon name="play-left-fill" color="#2979ff" size="20"></u-icon>
|
||||||
|
{{ chooseDate.startDate.split(' ')[0] }}
|
||||||
|
<u-icon name="play-right-fill" color="#2979ff" size="20"></u-icon>
|
||||||
|
</view> -->
|
||||||
|
</div>
|
||||||
|
<RankList :newsList="newsList"></RankList>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="background-color: white; margin-top: 40rpx">
|
||||||
|
<view style="display: flex; justify-content: space-between; align-items: center; padding-right: 30rpx; height: 100rpx">
|
||||||
|
<indexMenuTitle title="热门行业池 Top10"></indexMenuTitle>
|
||||||
|
<view style="display: flex; gap: 3rpx">
|
||||||
|
<text class="view-all" @click="onViewAll(0)">查看全部</text>
|
||||||
|
|
||||||
|
<u-icon size="12" name="arrow-right"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<HotIndustryList :industryList="industryList" :type="0" @viewAll="handleViewAll" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="background-color: white; margin-top: 40rpx">
|
||||||
|
<view style="display: flex; justify-content: space-between; align-items: center; padding-right: 30rpx; height: 100rpx">
|
||||||
|
<indexMenuTitle title="风口概念池 Top10"></indexMenuTitle>
|
||||||
|
<view style="display: flex; gap: 3rpx">
|
||||||
|
<text class="view-all" @click="onViewAll(1)">查看全部</text>
|
||||||
|
|
||||||
|
<u-icon size="12" name="arrow-right"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<HotIndustryList :type="1" :industryList="topConceptList" @viewAll="handleViewAll" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
|
||||||
|
|
||||||
|
<LoginPopup
|
||||||
|
:show="LoginShow"
|
||||||
|
@handlePopupClose="handlePopupClose"
|
||||||
|
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||||
|
@handlePopupErrorCallback="handlePopupErrorCallback" />
|
||||||
|
|
||||||
|
<u-calendar
|
||||||
|
:show="calendarShow"
|
||||||
|
min-date="2025-01-01"
|
||||||
|
closeOnClickOverlay
|
||||||
|
:max-date="maxDate"
|
||||||
|
:default-date="chooseDate.startDate"
|
||||||
|
monthNum="12"
|
||||||
|
:key="chooseDate.startDate"
|
||||||
|
@confirm="calendarConfirm"
|
||||||
|
@close="calendarShow = false">
|
||||||
|
</u-calendar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import Line from "@/components/charts/Line.vue";
|
||||||
|
import bannerImg from "@/assets/zixun/banner_pic.png";
|
||||||
|
import bannerTitle from "@/assets/zixun/banner_title.png";
|
||||||
|
import tagicon_1_bg from "@/assets/zixun/tagicon_1_bg.png";
|
||||||
|
import tagicon_2_bg from "@/assets/zixun/tagicon_2_bg.png";
|
||||||
|
import tagicon_1 from "@/assets/zixun/tagicon_1.png";
|
||||||
|
import tagicon_2 from "@/assets/zixun/tagicon_2.png";
|
||||||
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
|
||||||
|
import { getindustryCount, getConceptCount, getTopNews, getTopIndustry_d, getTopConcept_d, getNews_cnt_d, newsInfoScore } from "@/api/newsInfo";
|
||||||
|
import countTo from "@/components/count-to/vue-countTo.vue";
|
||||||
|
import RankList from "@/components/RankList.vue"; // 路径根据实际调整
|
||||||
|
import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整
|
||||||
|
import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实际调整
|
||||||
|
import dayjs from "dayjs/esm/index";
|
||||||
|
import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整
|
||||||
|
|
||||||
|
const d = new Date();
|
||||||
|
const year = d.getFullYear();
|
||||||
|
let month = d.getMonth() + 1;
|
||||||
|
month = month < 10 ? `0${month}` : month;
|
||||||
|
const date = d.getDate();
|
||||||
|
const maxDate = ref(`${year}-${month}-${date} 23:59:59`);
|
||||||
|
const minDate = ref(`${year}-${month}-${date}`);
|
||||||
|
|
||||||
|
const calendarShow = ref(false);
|
||||||
|
const newsList = ref([]);
|
||||||
|
|
||||||
|
const lastLeftNum = ref(0);
|
||||||
|
const lastRightNum = ref(0);
|
||||||
|
|
||||||
|
const industryList = ref([]);
|
||||||
|
const topConceptList = ref([]);
|
||||||
|
const newsNum = ref(0);
|
||||||
|
const lineData = ref();
|
||||||
|
const handleViewAll = () => {
|
||||||
|
// 在这里处理点击“查看全部”的逻辑，比如跳转新页面等
|
||||||
|
console.log("点击了查看全部");
|
||||||
|
};
|
||||||
|
|
||||||
|
const topNum = ref({});
|
||||||
|
|
||||||
|
// 获取顶部两个统计数据
|
||||||
|
async function getTopNum() {
|
||||||
|
let res1 = await getindustryCount({});
|
||||||
|
topNum.value.leftNum = res1.aggregations.industry_non_empty.doc_count;
|
||||||
|
let res2 = await getConceptCount({});
|
||||||
|
topNum.value.rightNum = res2.aggregations.concept_non_empty.doc_count;
|
||||||
|
|
||||||
|
lastLeftNum.value = topNum.value.leftNum;
|
||||||
|
lastRightNum.value = topNum.value.rightNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
const chooseDate = reactive({
|
||||||
|
startDate: `${year}-${month}-${date}`,
|
||||||
|
endDate: null,
|
||||||
|
});
|
||||||
|
const today = new Date();
|
||||||
|
|
||||||
|
function calendarConfirm(dateList) {
|
||||||
|
console.log("🚀 ~ calendarConfirm ~ dateList:", dateList);
|
||||||
|
if (dateList && dateList.length > 0) {
|
||||||
|
chooseDate.startDate = dateList[0] + " 00:00:00";
|
||||||
|
chooseDate.endDate = dateList[dateList.length - 1] + " 23:59:59";
|
||||||
|
}
|
||||||
|
getNewsList();
|
||||||
|
calendarShow.value = false;
|
||||||
|
console.log("🚀 ~ calendarConfirm ~ chooseDate:", chooseDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 概念标签贴标
|
||||||
|
async function getNewsList() {
|
||||||
|
newsList.value = await getTopNews({
|
||||||
|
start_date: chooseDate.startDate
|
||||||
|
? timeFormat(chooseDate.startDate)
|
||||||
|
: timeFormat(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0)),
|
||||||
|
end_date: chooseDate.endDate
|
||||||
|
? timeFormat(chooseDate.endDate)
|
||||||
|
: timeFormat(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 0, 0, 0)),
|
||||||
|
limit_num: 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 热门行业top10
|
||||||
|
async function getTopIndustry_dFn() {
|
||||||
|
industryList.value = await getTopIndustry_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风口概念池top10
|
||||||
|
async function getTopConcept_dFn() {
|
||||||
|
topConceptList.value = await getTopConcept_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 今日精选
|
||||||
|
async function getNews_cnt_dFn() {
|
||||||
|
let temp = await getNews_cnt_d({});
|
||||||
|
|
||||||
|
newsNum.value = temp[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取柱状图数据
|
||||||
|
async function getLineData() {
|
||||||
|
let res = await newsInfoScore({});
|
||||||
|
lineData.value = res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initData() {
|
||||||
|
// 获取柱状图数据
|
||||||
|
getLineData();
|
||||||
|
// 获取顶部两个统计数据
|
||||||
|
getTopNum();
|
||||||
|
|
||||||
|
// 热门行业top10
|
||||||
|
getTopIndustry_dFn();
|
||||||
|
// 风口概念池top10
|
||||||
|
getTopConcept_dFn();
|
||||||
|
// 今日精选
|
||||||
|
getNews_cnt_dFn();
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = ref(null);
|
||||||
|
function onViewAll(type1) {
|
||||||
|
type.value = type1;
|
||||||
|
if (Session.get("token")) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
initData();
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
function showCalendar() {
|
||||||
|
calendarShow.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LoginShow = ref(false);
|
||||||
|
const isLoginStatus = ref();
|
||||||
|
// 关闭弹框
|
||||||
|
const handlePopupClose = () => {
|
||||||
|
LoginShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录成功之后的回调
|
||||||
|
const handlePopupSuccessCallback = () => {
|
||||||
|
isLoginStatus.value = true;
|
||||||
|
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pages/realtimeInfo/rankDetail?type=" + type.value,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录失败之后的回调
|
||||||
|
const handlePopupErrorCallback = () => {
|
||||||
|
console.log("登录失败");
|
||||||
|
};
|
||||||
|
import { doLogout } from "@/api";
|
||||||
|
function loginOut() {
|
||||||
|
doLogout({
|
||||||
|
financialAccount: Session.get("userPhone"),
|
||||||
|
});
|
||||||
|
|
||||||
|
Session.clear();
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
initData();
|
||||||
|
if (!Session.get("token")) {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 概念标签贴标
|
||||||
|
getNewsList();
|
||||||
|
|
||||||
|
const { aplus_queue } = window;
|
||||||
|
aplus_queue.push({
|
||||||
|
action: "aplus.sendPV",
|
||||||
|
arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 格式化时间
|
||||||
|
* @param {String|Number} dateTime 需要格式化的时间戳
|
||||||
|
* @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
|
||||||
|
* @returns {string} 返回格式化后的字符串
|
||||||
|
*/
|
||||||
|
function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
|
||||||
|
let date;
|
||||||
|
// 若传入时间为假值，则取当前时间
|
||||||
|
if (!dateTime) {
|
||||||
|
date = new Date();
|
||||||
|
}
|
||||||
|
// 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
|
||||||
|
else if (/^\d{10}$/.test(dateTime.toString().trim())) {
|
||||||
|
date = new Date(dateTime * 1000);
|
||||||
|
}
|
||||||
|
// 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
|
||||||
|
else if (typeof dateTime === "string" && /^\d+$/.test(dateTime.trim())) {
|
||||||
|
date = new Date(Number(dateTime));
|
||||||
|
}
|
||||||
|
// 其他都认为符合 RFC 2822 规范
|
||||||
|
else {
|
||||||
|
// 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
|
||||||
|
date = new Date(typeof dateTime === "string" ? dateTime.replace(/-/g, "/") : dateTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeSource = {
|
||||||
|
y: date.getFullYear().toString(), // 年
|
||||||
|
m: (date.getMonth() + 1).toString().padStart(2, "0"), // 月
|
||||||
|
d: date.getDate().toString().padStart(2, "0"), // 日
|
||||||
|
h: date.getHours().toString().padStart(2, "0"), // 时
|
||||||
|
M: date.getMinutes().toString().padStart(2, "0"), // 分
|
||||||
|
s: date.getSeconds().toString().padStart(2, "0"), // 秒
|
||||||
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const key in timeSource) {
|
||||||
|
const [ret] = new RegExp(`${key}+`).exec(formatStr) || [];
|
||||||
|
if (ret) {
|
||||||
|
// 年可能只需展示两位
|
||||||
|
const beginIndex = key === "y" && ret.length === 2 ? 2 : 0;
|
||||||
|
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return formatStr;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.all {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f3f5f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner_bk {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_banner_title {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.banner_title {
|
||||||
|
width: 364rpx;
|
||||||
|
height: 134rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
margin-top: -150rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_tag_img {
|
||||||
|
width: calc(50vw - 20rpx);
|
||||||
|
height: 175rpx;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 10rpx 10rpx rgba(80, 80, 80, 0.1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_bk {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_content {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 40rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
width: 83%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.tag_item_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_num {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 38rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 56rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_status {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 33rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
margin-left: 7rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item_right {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 84rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_icon {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 84rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-all {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
// width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: red;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,594 @@
|
||||||
|
<template>
|
||||||
|
<!-- 顶部 banner 区域 -->
|
||||||
|
<!-- banner start -->
|
||||||
|
<view class="all">
|
||||||
|
<text class="top_menu_text">海外资讯</text>
|
||||||
|
<view class="banner">
|
||||||
|
<img :src="bannerImg" class="banner_bk" />
|
||||||
|
<view class="r_banner_title">
|
||||||
|
<img :src="bannerTitle2" class="banner_title" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- banner end -->
|
||||||
|
|
||||||
|
<view class="list_content">
|
||||||
|
<!-- 搜索 start -->
|
||||||
|
<view class="r_sreach">
|
||||||
|
<view class="sreach" style="height: 72rpx">
|
||||||
|
<u-search v-model="form.keyword" placeholder="搜索资讯" @search="onSreach" @custom="onSreach" />
|
||||||
|
<!-- <view class="sreach_icon">
|
||||||
|
<image :src="icon_search"></image>
|
||||||
|
</view>
|
||||||
|
<view class="sreach_text">
|
||||||
|
<text>搜索资讯</text>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 搜索 end -->
|
||||||
|
|
||||||
|
<view class="r_list">
|
||||||
|
<view v-for="item in listData" :key="item.day">
|
||||||
|
<!-- 时间轴顶部日期 start -->
|
||||||
|
<view class="item_top">
|
||||||
|
<view class="r_line">
|
||||||
|
<view class="item_point"></view>
|
||||||
|
<view class="item_line"></view>
|
||||||
|
</view>
|
||||||
|
<text class="item_day">{{ dayjs(item.day).format("YYYY年MM月DD日") }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- 时间轴顶部日期 end -->
|
||||||
|
<view class="list_card">
|
||||||
|
<view class="card_left">
|
||||||
|
<img :src="time_icon" />
|
||||||
|
<view class="left_line"></view>
|
||||||
|
</view>
|
||||||
|
<view class="card_right">
|
||||||
|
<view v-for="item in item.list" :key="item.time" @click="goDetail(item)">
|
||||||
|
<view class="item_time">
|
||||||
|
<text>{{ item.timeStr }}</text>
|
||||||
|
<text class="item_source_title">来自 <text class="item_source">中国证券报</text></text>
|
||||||
|
</view>
|
||||||
|
<view class="item_title">
|
||||||
|
<text>{{ item.title }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item_summary">
|
||||||
|
<text>{{ item.summary }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="item_etf">
|
||||||
|
<view v-for="etf in item.etfs" :key="etf.code" class="item_etf_item" @click.stop="goEtfDetail(etf)">
|
||||||
|
<view></view>
|
||||||
|
<text>{{ etf.name }}</text>
|
||||||
|
<div class="btn-play"></div>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="r_logout">
|
||||||
|
<view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<LoginPopup
|
||||||
|
:show="LoginShow"
|
||||||
|
@handlePopupClose="handlePopupClose"
|
||||||
|
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||||
|
@handlePopupErrorCallback="handlePopupErrorCallback"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import Line from "@/components/charts/Line.vue";
|
||||||
|
import bannerImg from "@/assets/zixun/banner_pic1.png";
|
||||||
|
import bannerTitle from "@/assets/zixun/banner_title.png";
|
||||||
|
import bannerTitle2 from "@/assets/zixun/banner_title3.png";
|
||||||
|
import icon_search from "@/assets/zixun/icon_search.png";
|
||||||
|
import time_icon from "@/assets/zixun/time_icon.png";
|
||||||
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
import dayjs from "dayjs/esm/index";
|
||||||
|
import { onReachBottom } from "@dcloudio/uni-app";
|
||||||
|
import { getEtfIndexList } from "@/api/index";
|
||||||
|
|
||||||
|
const listData = ref([
|
||||||
|
// {
|
||||||
|
// day: "2026-10-26",
|
||||||
|
// list: [
|
||||||
|
// {
|
||||||
|
// time: "11:30:56",
|
||||||
|
// title: "刚果延长禁令后，中国钴价和库存飙升刚果延长禁令后，中国钴价和库存飙升",
|
||||||
|
// summary: "刚果民主共和国将钴出口禁令延长至9月，导致全球约四分之三的钴供应受到影响。这一消息引…",
|
||||||
|
// etfs: [
|
||||||
|
// {
|
||||||
|
// name: "医药 ETF",
|
||||||
|
// code: "string",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
page: 1,
|
||||||
|
keyword: null,
|
||||||
|
});
|
||||||
|
async function getData() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: "加载中",
|
||||||
|
});
|
||||||
|
let { code, data } = await getEtfIndexList({
|
||||||
|
...form.value,
|
||||||
|
size: 20,
|
||||||
|
});
|
||||||
|
uni.hideLoading();
|
||||||
|
|
||||||
|
if (code == 200) {
|
||||||
|
if (form.value.page == 1) {
|
||||||
|
listData.value = [];
|
||||||
|
listData.value = data.list;
|
||||||
|
} else {
|
||||||
|
// 处理可能的day字段重复，合并相同day的list数据
|
||||||
|
const newList = [...data.list];
|
||||||
|
const updatedList = [...listData.value];
|
||||||
|
|
||||||
|
newList.forEach(newItem => {
|
||||||
|
// 检查是否存在相同day的条目
|
||||||
|
const existingItemIndex = updatedList.findIndex(item => item.day === newItem.day);
|
||||||
|
|
||||||
|
if (existingItemIndex !== -1) {
|
||||||
|
// 如果存在相同day，合并list数据
|
||||||
|
updatedList[existingItemIndex].list = [...updatedList[existingItemIndex].list, ...newItem.list];
|
||||||
|
} else {
|
||||||
|
// 如果不存在相同day，直接添加
|
||||||
|
updatedList.push(newItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
listData.value = updatedList;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const LoginShow = ref(false);
|
||||||
|
const isLoginStatus = ref();
|
||||||
|
// 关闭弹框
|
||||||
|
const handlePopupClose = () => {
|
||||||
|
LoginShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录成功之后的回调
|
||||||
|
const handlePopupSuccessCallback = () => {
|
||||||
|
isLoginStatus.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录失败之后的回调
|
||||||
|
const handlePopupErrorCallback = () => {
|
||||||
|
console.log("登录失败");
|
||||||
|
};
|
||||||
|
import { doLogout } from "@/api";
|
||||||
|
import { onPullDownRefresh } from "@dcloudio/uni-app";
|
||||||
|
function loginOut() {
|
||||||
|
doLogout({
|
||||||
|
financialAccount: Session.get("userPhone"),
|
||||||
|
});
|
||||||
|
Session.clear();
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
onReachBottom(() => {
|
||||||
|
form.value.page++;
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
function goDetail(item, index) {
|
||||||
|
if (Session.get("token")) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/detail/indexNewsInfo?id=${item.id}&intoType=etf`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goEtfDetail(item) {
|
||||||
|
console.log("🚀 ~ goEtfDetail ~ item:", item);
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/realtimeInfo/indexEtfInfo?name=${item.name}&code=${item.code}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSreach() {
|
||||||
|
if (Session.get("token")) {
|
||||||
|
form.value.page = 1;
|
||||||
|
getData();
|
||||||
|
} else {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (!Session.get("token")) {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.all {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.top_menu_text {
|
||||||
|
position: absolute;
|
||||||
|
top: 60rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner_bk {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_banner_title {
|
||||||
|
position: absolute;
|
||||||
|
top: 200rpx;
|
||||||
|
left: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.banner_title {
|
||||||
|
width: 461rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: AlibabaPuHuiTiM;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_logout {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
background-color: white;
|
||||||
|
width: 100vw;
|
||||||
|
height: auto;
|
||||||
|
box-shadow: 0 -10rpx 20rpx rgba(73, 73, 73, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
// width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: red;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo_text {
|
||||||
|
width: 88rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top_bk {
|
||||||
|
width: 100vw;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
// margin-top: -70px;
|
||||||
|
// padding: 10rpx 30rpx;
|
||||||
|
background-color: #f3f5f8;
|
||||||
|
// background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
|
||||||
|
// min-height: 80vh;
|
||||||
|
|
||||||
|
.r_sreach {
|
||||||
|
position: relative;
|
||||||
|
z-index: 99999;
|
||||||
|
|
||||||
|
margin-top: -120rpx;
|
||||||
|
|
||||||
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||||||
|
// width: 100%;
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-top: 30rpx;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
background-color: white;
|
||||||
|
background-image: linear-gradient(to bottom, white 60rpx, #f3f5f8);
|
||||||
|
// background: linear-gradient(to bottom, #ffffff 0%, #f3f5f8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sreach {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f5f8;
|
||||||
|
border-radius: 36rpx;
|
||||||
|
// box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sreach_icon {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sreach_text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_day {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #222222;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
margin-top: -10rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_list {
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
margin-top: -30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_top {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
|
||||||
|
.r_line {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_point {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #eb5d46;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_line {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
border-left: 2px dashed #d9d7d7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_card {
|
||||||
|
display: flex;
|
||||||
|
// height: 334rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 30rpx 30rpx;
|
||||||
|
|
||||||
|
.card_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 25rpx;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 33rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_line {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 100%;
|
||||||
|
border-left: 2px dashed #d9d7d7;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card_right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 95%;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
gap: 10rpx;
|
||||||
|
|
||||||
|
.item_time {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title {
|
||||||
|
width: 100%;
|
||||||
|
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 {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
/* 1. 必须将元素设置为块级或弹性盒 */
|
||||||
|
display: -webkit-box;
|
||||||
|
/* 2. 定义盒模型的排列方向为垂直 */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* 3. 限制显示的行数 */
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 4. 隐藏超出的内容 */
|
||||||
|
overflow: hidden;
|
||||||
|
/* 5. (可选) 当文本溢出时显示省略号 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_source_title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #b3b3b3;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_source {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #5978b2;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_etf {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.item_etf_item {
|
||||||
|
// width: 168rpx;
|
||||||
|
width: calc(50% - 60rpx);
|
||||||
|
height: 48rpx;
|
||||||
|
background: #edf1f5;
|
||||||
|
border-radius: 125rpx;
|
||||||
|
padding: 5rpx 25rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器样式（模拟红框） */
|
||||||
|
.btn-play {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 三角形伪元素 */
|
||||||
|
.btn-play::before {
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 5px solid transparent;
|
||||||
|
border-bottom: 5px solid transparent;
|
||||||
|
border-left: 8px solid #999;
|
||||||
|
/* 注意：这里是border-left，因为三角形朝右时，左边框是实心 */
|
||||||
|
margin-left: 4px;
|
||||||
|
/* 与文字的间距（从右边移到左边） */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字部分 */
|
||||||
|
.btn-play span {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,262 @@
|
||||||
|
<template>
|
||||||
|
<div class="index-etf-info">
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="vipHeader">
|
||||||
|
<view class="flashBack" @click="doBack">
|
||||||
|
<u-icon size="20" name="arrow-left" color="#000"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view style="display: flex; flex-direction: column">
|
||||||
|
<view class="title">{{ name }}</view>
|
||||||
|
<view class="title_sub">{{ code }}</view>
|
||||||
|
</view>
|
||||||
|
<view style="width: 5%"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="width: 100vw; height: 10rpx; background-color: #f5f5f5"></view>
|
||||||
|
<!-- 指数ETF实时信息展示区域 -->
|
||||||
|
<view class="r_list">
|
||||||
|
<view v-for="(item, index) in etfInfoList" :key="index" class="news-item" @click="goDetail(item, 0)">
|
||||||
|
<view class="news-content">
|
||||||
|
<text class="news-title">{{ item.title }}</text>
|
||||||
|
<text class="news-desc">{{ item.summary }}</text>
|
||||||
|
|
||||||
|
<view class="news-meta">
|
||||||
|
<view>
|
||||||
|
<text class="time">
|
||||||
|
{{ timeFormat(new Date(item.publish_time).getTime()) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<text class="time">中国证券报</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { fetchEtfDetail } from "@/api/index";
|
||||||
|
|
||||||
|
// 使用 Vue3 的 <script setup> 语法糖
|
||||||
|
// 在此声明响应式数据、方法等
|
||||||
|
|
||||||
|
const etfInfoList = ref([]);
|
||||||
|
async function getEtfInfo() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: "加载中",
|
||||||
|
});
|
||||||
|
let { code, data } = await fetchEtfDetail({
|
||||||
|
etfName: name.value,
|
||||||
|
});
|
||||||
|
uni.hideLoading();
|
||||||
|
|
||||||
|
if (code === 200) {
|
||||||
|
console.log(data);
|
||||||
|
etfInfoList.value = data.list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 格式化时间
|
||||||
|
* @param {String|Number} dateTime 需要格式化的时间戳
|
||||||
|
* @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
|
||||||
|
* @returns {string} 返回格式化后的字符串
|
||||||
|
*/
|
||||||
|
function timeFormat(dateTime = null, formatStr = "yyyy-mm-dd hh:MM:ss") {
|
||||||
|
let date;
|
||||||
|
// 若传入时间为假值，则取当前时间
|
||||||
|
if (!dateTime) {
|
||||||
|
date = new Date();
|
||||||
|
}
|
||||||
|
// 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
|
||||||
|
else if (/^\d{10}$/.test(dateTime.toString().trim())) {
|
||||||
|
date = new Date(dateTime * 1000);
|
||||||
|
}
|
||||||
|
// 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
|
||||||
|
else if (typeof dateTime === "string" && /^\d+$/.test(dateTime.trim())) {
|
||||||
|
date = new Date(Number(dateTime));
|
||||||
|
}
|
||||||
|
// 其他都认为符合 RFC 2822 规范
|
||||||
|
else {
|
||||||
|
// 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
|
||||||
|
date = new Date(typeof dateTime === "string" ? dateTime.replace(/-/g, "/") : dateTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeSource = {
|
||||||
|
y: date.getFullYear().toString(), // 年
|
||||||
|
m: (date.getMonth() + 1).toString().padStart(2, "0"), // 月
|
||||||
|
d: date.getDate().toString().padStart(2, "0"), // 日
|
||||||
|
h: date.getHours().toString().padStart(2, "0"), // 时
|
||||||
|
M: date.getMinutes().toString().padStart(2, "0"), // 分
|
||||||
|
s: date.getSeconds().toString().padStart(2, "0"), // 秒
|
||||||
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const key in timeSource) {
|
||||||
|
const [ret] = new RegExp(`${key}+`).exec(formatStr) || [];
|
||||||
|
if (ret) {
|
||||||
|
// 年可能只需展示两位
|
||||||
|
const beginIndex = key === "y" && ret.length === 2 ? 2 : 0;
|
||||||
|
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return formatStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
function goDetail(item, index) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/detail/indexNewsInfo?id=${item.id}&intoType=etf`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function doBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = ref("");
|
||||||
|
const code = ref("");
|
||||||
|
onLoad((option) => {
|
||||||
|
console.log(option.name);
|
||||||
|
name.value = option.name;
|
||||||
|
code.value = option.code;
|
||||||
|
|
||||||
|
getEtfInfo();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.news-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_list {
|
||||||
|
padding: 30rpx;
|
||||||
|
width: calc(100vw - 60rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 42rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
width: calc(100vw - 60rpx);
|
||||||
|
display: inline-block;
|
||||||
|
/* 或 block */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-desc {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
/* 设置为WebKit内核的弹性盒子模型 */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* 垂直排列 */
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 限制显示三行 */
|
||||||
|
overflow: hidden;
|
||||||
|
/* 隐藏超出范围的内容 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* 使用省略号 */
|
||||||
|
|
||||||
|
width: calc(100vw - 60rpx);
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source,
|
||||||
|
.time,
|
||||||
|
.score {
|
||||||
|
// opacity: 0.8;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
// margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ffa800;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vipHeader {
|
||||||
|
width: 100vw;
|
||||||
|
height: 120rpx;
|
||||||
|
background-color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 32rpx 32rpx 6rpx 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
// position: sticky;
|
||||||
|
// top: 0;
|
||||||
|
// z-index: 9999;
|
||||||
|
|
||||||
|
.flashBack {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_sub {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 400;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,548 @@
|
||||||
|
<template>
|
||||||
|
<!-- 顶部 banner 区域 -->
|
||||||
|
<view class="all">
|
||||||
|
<!-- banner start -->
|
||||||
|
<view class="banner">
|
||||||
|
<img :src="bannerImg" class="banner_bk" />
|
||||||
|
<view class="r_banner_title">
|
||||||
|
<img :src="bannerTitle2" class="banner_title" />
|
||||||
|
<text>数据更新时间:{{ dayjs(new Date().getTime()).format("YYYY-MM-DD") }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- banner end -->
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<!-- <view class="tag">
|
||||||
|
<view class="r_tag_img">
|
||||||
|
<img :src="tagicon_1_bg" class="tag_bk" />
|
||||||
|
<view class="tag_content">
|
||||||
|
<view class="tag_item_left">
|
||||||
|
<text class="tag_title">行业分类贴标</text>
|
||||||
|
|
||||||
|
<view style="display: flex; margin-top: 15rpx">
|
||||||
|
<countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></countTo>
|
||||||
|
|
||||||
|
<text class="tag_status">已处理</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tag_item_right">
|
||||||
|
<img :src="tagicon_1" class="tag_icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="r_tag_img">
|
||||||
|
<img :src="tagicon_2_bg" class="tag_bk" />
|
||||||
|
<view class="tag_content">
|
||||||
|
<view class="tag_item_left">
|
||||||
|
<text class="tag_title">概念标签贴标</text>
|
||||||
|
<view style="display: flex; margin-top: 15rpx">
|
||||||
|
<countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></countTo>
|
||||||
|
|
||||||
|
<text class="tag_status">已处理</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tag_item_right">
|
||||||
|
<img :src="tagicon_2" class="tag_icon" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="background-color: white; margin-top: -100rpx; position: relative; z-index: 9999">
|
||||||
|
<indexMenuTitle title="近7天热度统计"></indexMenuTitle>
|
||||||
|
<LineHol v-if="lineTabIndex === 0" barColor="#3C74F1" :data="lineTopData"></LineHol>
|
||||||
|
<LineHol v-else-if="lineTabIndex === 1" barColor="#FFCC65" :data="lineTopData"></LineHol>
|
||||||
|
<LineHolYellow v-else-if="lineTabIndex === 2" barColor="#8B2DD4" :data="lineTopData"></LineHolYellow>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: center; margin-bottom: 20px; margin-top: 20px">
|
||||||
|
<div class="tabs">
|
||||||
|
<div :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</div>
|
||||||
|
<div :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</div>
|
||||||
|
<div :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view style="background-color: white; margin-top: 40rpx">
|
||||||
|
<indexMenuTitle title="资讯评分分布区间"></indexMenuTitle>
|
||||||
|
<Line style="margin-top: 30rpx" :data="lineData"></Line>
|
||||||
|
|
||||||
|
<view style="display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; padding-bottom: 30rpx">
|
||||||
|
<InfoSummary style="width: 85%" :count="newsNum"></InfoSummary>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<view style="background-color: white; padding-top: 40rpx">
|
||||||
|
<view style="width: 100vw; display: flex; justify-content: space-between; align-items: center">
|
||||||
|
<indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle>
|
||||||
|
<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>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<RankList hasTag :newsList="newsList" :needExp="false"></RankList>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view>
|
||||||
|
|
||||||
|
<LoginPopup
|
||||||
|
:show="LoginShow"
|
||||||
|
@handlePopupClose="handlePopupClose"
|
||||||
|
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||||
|
@handlePopupErrorCallback="handlePopupErrorCallback"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import Line from "@/components/charts/Line.vue";
|
||||||
|
import bannerImg from "@/assets/zixun/banner_pic.png";
|
||||||
|
import bannerTitle from "@/assets/zixun/banner_title.png";
|
||||||
|
import bannerTitle2 from "@/assets/zixun/banner_title2.png";
|
||||||
|
import tagicon_1_bg from "@/assets/zixun/tagicon_1_bg.png";
|
||||||
|
import tagicon_2_bg from "@/assets/zixun/tagicon_2_bg.png";
|
||||||
|
import tagicon_1 from "@/assets/zixun/tagicon_1.png";
|
||||||
|
import tagicon_2 from "@/assets/zixun/tagicon_2.png";
|
||||||
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
import LineHol from "@/components/charts/LineHol.vue";
|
||||||
|
import LineHolYellow from "@/components/charts/LineHolYellow.vue";
|
||||||
|
|
||||||
|
import {
|
||||||
|
getindustryCount,
|
||||||
|
getConceptCount,
|
||||||
|
getTopNewsAll,
|
||||||
|
getTopIndustry_d,
|
||||||
|
getTopConcept_d,
|
||||||
|
getNews_cnt_d,
|
||||||
|
newsInfoScore,
|
||||||
|
getTopConceptPeriod,
|
||||||
|
getTopIndustryPeriod,
|
||||||
|
getTopSourcePeriod,
|
||||||
|
} from "@/api/newsInfo";
|
||||||
|
import countTo from "@/components/count-to/vue-countTo.vue";
|
||||||
|
import RankList from "@/components/RankList.vue"; // 路径根据实际调整
|
||||||
|
import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整
|
||||||
|
import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实际调整
|
||||||
|
import dayjs from "dayjs/esm/index";
|
||||||
|
import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整
|
||||||
|
|
||||||
|
const newsList = ref([]);
|
||||||
|
|
||||||
|
const lastLeftNum = ref(0);
|
||||||
|
const lastRightNum = ref(0);
|
||||||
|
|
||||||
|
const industryList = ref([]);
|
||||||
|
const topConceptList = ref([]);
|
||||||
|
const newsNum = ref(0);
|
||||||
|
const lineData = ref();
|
||||||
|
const handleViewAll = () => {
|
||||||
|
// 在这里处理点击“查看全部”的逻辑，比如跳转新页面等
|
||||||
|
console.log("点击了查看全部");
|
||||||
|
};
|
||||||
|
|
||||||
|
const topNum = ref({});
|
||||||
|
|
||||||
|
// 获取顶部两个统计数据
|
||||||
|
async function getTopNum() {
|
||||||
|
let res1 = await getindustryCount({});
|
||||||
|
topNum.value.leftNum = res1.aggregations.industry_non_empty.doc_count;
|
||||||
|
let res2 = await getConceptCount({});
|
||||||
|
topNum.value.rightNum = res2.aggregations.concept_non_empty.doc_count;
|
||||||
|
|
||||||
|
lastLeftNum.value = topNum.value.leftNum;
|
||||||
|
lastRightNum.value = topNum.value.rightNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 概念标签贴标
|
||||||
|
async function getNewsList() {
|
||||||
|
newsList.value = await getTopNewsAll({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 热门行业top10
|
||||||
|
async function getTopIndustry_dFn() {
|
||||||
|
industryList.value = await getTopIndustry_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风口概念池top10
|
||||||
|
async function getTopConcept_dFn() {
|
||||||
|
topConceptList.value = await getTopConcept_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 今日精选
|
||||||
|
async function getNews_cnt_dFn() {
|
||||||
|
let temp = await getNews_cnt_d({});
|
||||||
|
|
||||||
|
newsNum.value = temp[0].value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取柱状图数据
|
||||||
|
async function getLineData() {
|
||||||
|
let res = await newsInfoScore({});
|
||||||
|
lineData.value = res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initData() {
|
||||||
|
// 获取柱状图数据
|
||||||
|
getLineData();
|
||||||
|
// 获取顶部两个统计数据
|
||||||
|
getTopNum();
|
||||||
|
// 概念标签贴标
|
||||||
|
getNewsList();
|
||||||
|
// 热门行业top10
|
||||||
|
getTopIndustry_dFn();
|
||||||
|
// 风口概念池top10
|
||||||
|
getTopConcept_dFn();
|
||||||
|
// 今日精选
|
||||||
|
getNews_cnt_dFn();
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = ref();
|
||||||
|
function onViewAll(type) {
|
||||||
|
type.value = type;
|
||||||
|
if (Session.get("token")) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
initData();
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
const LoginShow = ref(false);
|
||||||
|
const isLoginStatus = ref();
|
||||||
|
// 关闭弹框
|
||||||
|
const handlePopupClose = () => {
|
||||||
|
LoginShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录成功之后的回调
|
||||||
|
const handlePopupSuccessCallback = () => {
|
||||||
|
isLoginStatus.value = true;
|
||||||
|
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pages/realtimeInfo/rankDetail?type=" + type.value,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录失败之后的回调
|
||||||
|
const handlePopupErrorCallback = () => {
|
||||||
|
console.log("登录失败");
|
||||||
|
};
|
||||||
|
import { doLogout } from "@/api";
|
||||||
|
function loginOut() {
|
||||||
|
doLogout({
|
||||||
|
financialAccount: Session.get("userPhone"),
|
||||||
|
});
|
||||||
|
Session.clear();
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
const lineTabIndex = ref(0);
|
||||||
|
function handleTabClick(index) {
|
||||||
|
lineTabIndex.value = index;
|
||||||
|
getLineDataFn();
|
||||||
|
}
|
||||||
|
|
||||||
|
const lineTopData = ref({});
|
||||||
|
async function getLineDataFn() {
|
||||||
|
if (lineTabIndex.value == 0) {
|
||||||
|
// 行业
|
||||||
|
getTopIndustryPeriod({
|
||||||
|
start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
|
||||||
|
end_time: dayjs().format("YYYY-MM-DD"),
|
||||||
|
limit_num: 10,
|
||||||
|
}).then((res) => {
|
||||||
|
lineTopData.value = res;
|
||||||
|
});
|
||||||
|
} else if (lineTabIndex.value == 1) {
|
||||||
|
// 概念
|
||||||
|
getTopConceptPeriod({
|
||||||
|
start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
|
||||||
|
end_time: dayjs().format("YYYY-MM-DD"),
|
||||||
|
limit_num: 10,
|
||||||
|
}).then((res) => {
|
||||||
|
lineTopData.value = res;
|
||||||
|
});
|
||||||
|
} else if (lineTabIndex.value == 2) {
|
||||||
|
// 媒体
|
||||||
|
getTopSourcePeriod({
|
||||||
|
start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
|
||||||
|
end_time: dayjs().format("YYYY-MM-DD"),
|
||||||
|
limit_num: 10,
|
||||||
|
}).then((res) => {
|
||||||
|
lineTopData.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goSreach() {
|
||||||
|
if (Session.get("token")) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/sreachReq/index",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
});
|
||||||
|
const { aplus_queue } = window;
|
||||||
|
onMounted(async () => {
|
||||||
|
initData();
|
||||||
|
if (!Session.get("token")) {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
getLineDataFn();
|
||||||
|
|
||||||
|
aplus_queue.push({
|
||||||
|
action: "aplus.sendPV",
|
||||||
|
arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.all {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f3f5f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner_bk {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_banner_title {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.banner_title {
|
||||||
|
width: 364rpx;
|
||||||
|
height: 134rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
margin-top: -150rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_tag_img {
|
||||||
|
width: calc(50vw - 20rpx);
|
||||||
|
height: 175rpx;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 10rpx 10rpx rgba(80, 80, 80, 0.1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_bk {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_content {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 40rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
width: 83%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.tag_item_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_num {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 38rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 56rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_status {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 33rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
margin-left: 7rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item_right {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 84rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_icon {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 84rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-all {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
// width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: red;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #e7e7e7;
|
||||||
|
color: #000;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_left {
|
||||||
|
border-start-start-radius: 10px;
|
||||||
|
border-end-start-radius: 10px;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab_right {
|
||||||
|
border-start-end-radius: 10px;
|
||||||
|
border-end-end-radius: 10px;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
border: 1px solid #3c74f1;
|
||||||
|
background-color: #3c74f1;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_sreach {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
// 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: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sreach {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
// width: 90vw;
|
||||||
|
height: 63rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
border: 1px solid #e7e7e7;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
// box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sreach_icon {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sreach_text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 33rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top_bk {
|
||||||
|
width: 100vw;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<view class="page_top">
|
||||||
|
<view class="r_menu">
|
||||||
|
<image src="@/assets/images/logo.png" class="logo"></image>
|
||||||
|
|
||||||
|
<view class="r_menu_item" @click="tabChange(1)">
|
||||||
|
<text class="menu_item">资讯头条榜</text>
|
||||||
|
<view class="line" v-if="tabIndex == 1"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="r_menu_item" @click="tabChange(2)">
|
||||||
|
<text class="menu_item">热门行业</text>
|
||||||
|
<view class="line" v-if="tabIndex == 2"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="r_menu_item" @click="tabChange(3)">
|
||||||
|
<text class="menu_item">风口概念</text>
|
||||||
|
<view class="line" v-if="tabIndex == 3"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="r_menu_item" @click="tabChange(4)">
|
||||||
|
<text class="menu_item">编辑精选</text>
|
||||||
|
<view class="line" v-if="tabIndex == 4"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view @click="logout" v-if="Session.get('token')">
|
||||||
|
<text>退出登录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
|
||||||
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
import { doLogout } from "@/api";
|
||||||
|
|
||||||
|
const tabIndex = ref(0);
|
||||||
|
function tabChange(type) {
|
||||||
|
// tabIndex.value = index;
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/index?type=" + type,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
async function logout() {
|
||||||
|
if (Session.get("userPhone")) {
|
||||||
|
await doLogout({
|
||||||
|
financialAccount: Session.get("userPhone"),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Session.clear();
|
||||||
|
|
||||||
|
// 解构路由参数，排除token
|
||||||
|
const { token, ...otherQuery } = route.query;
|
||||||
|
// 若存在token，替换路由清除参数
|
||||||
|
if (token) {
|
||||||
|
router.replace({
|
||||||
|
path: route.path, // 保持当前路径不变
|
||||||
|
query: otherQuery, // 保留其他参数
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((e) => {
|
||||||
|
if (e.type) tabIndex.value = e.type;
|
||||||
|
|
||||||
|
console.log("🚀 ~ route.query.token:", route.query.token);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.page_top {
|
||||||
|
width: 100vw;
|
||||||
|
height: 120rpx;
|
||||||
|
background-color: white;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 5rpx 2rpx rgba($color: #6d6d6d, $alpha: 0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 190rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_menu {
|
||||||
|
width: 55vw;
|
||||||
|
min-width: 1250px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_menu_item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu_item {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 64px;
|
||||||
|
height: 4px;
|
||||||
|
background: #007aff;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
.pc_all {
|
||||||
|
background: #f5f7fd;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: white;
|
||||||
|
width: 55vw;
|
||||||
|
min-width: 1200px;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 40rpx 60rpx;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<view class="all">
|
||||||
|
<!-- <PageTop></PageTop> -->
|
||||||
|
<!-- <component :is="layouts[detailPC]" /> -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, defineAsyncComponent, reactive } from "vue";
|
||||||
|
import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const layoutName = ref();
|
||||||
|
const infoId = ref({});
|
||||||
|
onMounted(async () => {
|
||||||
|
console.log("🚀 ~ route:", route.query);
|
||||||
|
if (route.query.id) {
|
||||||
|
infoId.value = route.query.id;
|
||||||
|
}
|
||||||
|
// 如果过来的链接里有token说明是财保过来的
|
||||||
|
console.log("🚀 ~ route.query:", route.query);
|
||||||
|
|
||||||
|
if (route.query.type) {
|
||||||
|
switch (route.query.type) {
|
||||||
|
case "0":
|
||||||
|
layoutName.value = "detailPC";
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/indexPC?id=" + infoId.value + "&type=1",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "1":
|
||||||
|
layoutName.value = "rank";
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/rank?type=" + route.query.type,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "2":
|
||||||
|
case "3":
|
||||||
|
layoutName.value = "top10";
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/top10?type=" + route.query.type + "&name=" + route.query.name,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "4":
|
||||||
|
layoutName.value = "rank";
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/rank?type=" + route.query.type,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.all {
|
||||||
|
background: #f5f7fd;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
// padding-top: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: white;
|
||||||
|
width: 55vw;
|
||||||
|
min-width: 1200px;
|
||||||
|
min-height: 100vh;
|
||||||
|
// height: 100%;
|
||||||
|
padding: 30rpx 50rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,299 @@
|
||||||
|
<template>
|
||||||
|
<view class="pc_all">
|
||||||
|
<PageTop></PageTop>
|
||||||
|
|
||||||
|
<view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
|
||||||
|
<view class="top" @click="goBack">
|
||||||
|
<image src="@/assets/zixun/icon_fanhui.png" class="icon_back" />
|
||||||
|
<text>返回列表</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="line"></view>
|
||||||
|
|
||||||
|
<view class="title">
|
||||||
|
{{ infoData?.title }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="sub_title">
|
||||||
|
<text class="srouse"> {{ infoData?.tag }}</text>
|
||||||
|
<text class="time"> {{ infoData?.publishTime }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="abstract" v-if="infoData?.summary">
|
||||||
|
{{ infoData?.summary }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 两个标签 start -->
|
||||||
|
<view class="r_tag_two">
|
||||||
|
<view style="display: flex" v-if="infoData?.industryLabels && infoData?.industryLabels.length > 0">
|
||||||
|
<text class="tag_title">行业分类：</text>
|
||||||
|
<view class="r_tags">
|
||||||
|
<view class="tag" style="background-color: #fff9ec; color: #ffb100"
|
||||||
|
v-for="(item, index) in infoData?.industryLabels" :key="index">{{
|
||||||
|
item
|
||||||
|
}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="display: flex" v-if="infoData?.conceptLabels && infoData?.conceptLabels.length > 0">
|
||||||
|
<text class="tag_title">概念标签：</text>
|
||||||
|
<view class="r_tags">
|
||||||
|
<view class="tag" style="background-color: #f5f8fe; color: #007aff"
|
||||||
|
v-for="(item, index) in infoData?.conceptLabels" :key="index">{{
|
||||||
|
item
|
||||||
|
}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 两个标签 end -->
|
||||||
|
|
||||||
|
<view class="text" v-html="infoData.content" style="white-space: pre-wrap"> </view>
|
||||||
|
<!-- <view class="text">
|
||||||
|
<text >{{ infoData.content }}</text>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<LoginPopup :show="LoginShow" mode="center" @handlePopupClose="handlePopupClose"
|
||||||
|
@handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { fetchArticleDetail } from "@/api/detail";
|
||||||
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
// uni.navigateBack();
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/index?type=" + type.value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = ref(0);
|
||||||
|
const infoData = ref({});
|
||||||
|
onLoad(async (e) => {
|
||||||
|
if (e?.type) {
|
||||||
|
type.value = e.type;
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showLoading();
|
||||||
|
const res = await fetchArticleDetail({
|
||||||
|
id: e?.id,
|
||||||
|
});
|
||||||
|
uni.hideLoading();
|
||||||
|
if (res.code === 200) {
|
||||||
|
infoData.value = res.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Session.get("token")) {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const LoginShow = ref(false);
|
||||||
|
const isLoginStatus = ref();
|
||||||
|
// 关闭弹框
|
||||||
|
const handlePopupClose = () => {
|
||||||
|
LoginShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录成功之后的回调
|
||||||
|
const handlePopupSuccessCallback = () => {
|
||||||
|
isLoginStatus.value = true;
|
||||||
|
window.location.reload();
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录失败之后的回调
|
||||||
|
const handlePopupErrorCallback = () => {
|
||||||
|
console.log("登录失败");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import url("./index.css");
|
||||||
|
|
||||||
|
.page_top {
|
||||||
|
width: 100vw;
|
||||||
|
height: 120rpx;
|
||||||
|
background-color: white;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 5rpx 2rpx rgba($color: #6d6d6d, $alpha: 0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 190rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_menu {
|
||||||
|
width: 55vw;
|
||||||
|
min-width: 1250px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_menu_item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu_item {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 64px;
|
||||||
|
height: 4px;
|
||||||
|
background: #007aff;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-left: 30rpx;
|
||||||
|
|
||||||
|
.icon_back {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 38rpx;
|
||||||
|
color: #919191;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub_title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
|
||||||
|
.srouse {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #919191;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #919191;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.abstract {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
background: #f5f8fe;
|
||||||
|
border: 1px solid #e3ecfd;
|
||||||
|
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
margin-top: 50rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_tag_two {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ffb100;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
padding: 5rpx 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
margin-top: 70rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,483 @@
|
||||||
|
<template>
|
||||||
|
<view class="pc_all">
|
||||||
|
<PageTop></PageTop>
|
||||||
|
|
||||||
|
<view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
|
||||||
|
<view class="top_title">
|
||||||
|
<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"
|
||||||
|
@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" class="search_btn"></u-button>
|
||||||
|
</template>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<view class="r_list">
|
||||||
|
<view class="list_item" v-for="(item, index) in newsList" :key="index">
|
||||||
|
<view class="r_list_item_num" v-if="pageType != 4">
|
||||||
|
<view class="list_item_num num1" v-if="index < 3 && index == 0">{{ index + 1 }}</view>
|
||||||
|
<view class="list_item_num num2" v-else-if="index < 3 && index == 1">{{ index + 1 }}</view>
|
||||||
|
<view class="list_item_num num3" v-else-if="index < 3 && index == 2">{{ index + 1 }}</view>
|
||||||
|
<view class="list_item_num nol_num" v-else>{{ index + 1 }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="list_item_content">
|
||||||
|
<text class="item_title" @click="goDetail(item)" v-html="item.title"></text>
|
||||||
|
<text class="item_summary" v-if="pageType != 4">{{ item.summary }}</text>
|
||||||
|
<text class="item_summary" v-if="pageType == 4" v-html="item.summary"></text>
|
||||||
|
|
||||||
|
<view class="item_bottom">
|
||||||
|
<view>
|
||||||
|
<text class="time">{{ item.source }}</text>
|
||||||
|
<text class="time" style="margin-left: 30rpx" v-if="pageType != 4">{{
|
||||||
|
dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss")
|
||||||
|
}}</text>
|
||||||
|
<text class="time" style="margin-left: 30rpx" v-if="pageType == 4">{{ formatTime(item.time) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<text class="score" v-if="pageType != 4">{{ item.news_score }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="width: 100%; display: flex; justify-content: center"
|
||||||
|
v-if="pageType == 4 && newsList && newsList.length > 0"
|
||||||
|
>
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="currentPage"
|
||||||
|
:page-size="form.size"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="form.total"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
<LoginPopup
|
||||||
|
:show="LoginShow"
|
||||||
|
mode="center"
|
||||||
|
@handlePopupClose="handlePopupClose"
|
||||||
|
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||||
|
@handlePopupErrorCallback="handlePopupErrorCallback"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
|
||||||
|
import { getTopNewsDay } from "@/api/newsInfo";
|
||||||
|
import dayjs from "dayjs/esm/index";
|
||||||
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
import { editTopNews } from "@/api/index";
|
||||||
|
import { sendToken } from "@/api/index";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const pageSizes = ref([10, 20, 30, 40]);
|
||||||
|
const form = reactive({
|
||||||
|
keyword: "",
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 10,
|
||||||
|
});
|
||||||
|
const currentPage = ref(form.page);
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const pageType = ref(route.query.type);
|
||||||
|
const newsList = ref([]);
|
||||||
|
|
||||||
|
function formatTime(timestamp) {
|
||||||
|
const date = new Date(Number(timestamp).toString().length === 10 ? timestamp * 1000 : timestamp);
|
||||||
|
return (
|
||||||
|
[
|
||||||
|
date.getFullYear(),
|
||||||
|
(date.getMonth() + 1).toString().padStart(2, "0"),
|
||||||
|
date.getDate().toString().padStart(2, "0"),
|
||||||
|
].join("-") +
|
||||||
|
" " +
|
||||||
|
[
|
||||||
|
date.getHours().toString().padStart(2, "0"),
|
||||||
|
date.getMinutes().toString().padStart(2, "0"),
|
||||||
|
date.getSeconds().toString().padStart(2, "0"),
|
||||||
|
].join(":")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getNewsList() {
|
||||||
|
if (pageType.value == 4) {
|
||||||
|
// 编辑精选
|
||||||
|
let { code, data } = await editTopNews({
|
||||||
|
...form,
|
||||||
|
});
|
||||||
|
if (code == 200) {
|
||||||
|
newsList.value = data.list;
|
||||||
|
form.total = data.total;
|
||||||
|
data.list.forEach((item) => {
|
||||||
|
item.summary = item.summary.replace(form.keyword, "<span style='color: #007aff'>" + form.keyword + "</span>");
|
||||||
|
item.title = item.title.replace(form.keyword, "<span style='color: #007aff'>" + form.keyword + "</span>");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 概念标签贴标
|
||||||
|
newsList.value = await getTopNewsDay({});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goDetail(item) {
|
||||||
|
let id = null;
|
||||||
|
if (pageType.value != 4) {
|
||||||
|
id = item.news_id;
|
||||||
|
} else {
|
||||||
|
id = item.id;
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/indexPC?id=" + id + "&type=" + pageType.value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentChange(page) {
|
||||||
|
form.page = page;
|
||||||
|
getNewsList();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async (e) => {
|
||||||
|
console.log("🚀 ~ route.query:", route.query);
|
||||||
|
console.log(`🚀 ~ Session.get("token"):`, Session.get("token"));
|
||||||
|
if (Session.get("token") == "undefined") {
|
||||||
|
Session.remove("token");
|
||||||
|
}
|
||||||
|
if (route.query?.token && (!Session.get("token") || Session.get("token") == "undefined")) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: "加载中",
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
sendToken({
|
||||||
|
token: route.query.token,
|
||||||
|
}).then((res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
if (res.code == 200) {
|
||||||
|
Session.set("token", res.data.token);
|
||||||
|
Session.set("userPhone", res.data.phone);
|
||||||
|
|
||||||
|
// 解构路由参数，排除token
|
||||||
|
const { token, ...otherQuery } = route.query;
|
||||||
|
// 若存在token，替换路由清除参数
|
||||||
|
if (token) {
|
||||||
|
router.replace({
|
||||||
|
path: route.path, // 保持当前路径不变
|
||||||
|
query: otherQuery, // 保留其他参数
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (!Session.get("token") || Session.get("token") == "undefined") {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解构路由参数，排除token
|
||||||
|
const { token, ...otherQuery } = route.query;
|
||||||
|
// 若存在token，替换路由清除参数
|
||||||
|
if (token) {
|
||||||
|
router.replace({
|
||||||
|
path: route.path, // 保持当前路径不变
|
||||||
|
query: otherQuery, // 保留其他参数
|
||||||
|
});
|
||||||
|
}
|
||||||
|
getNewsList();
|
||||||
|
});
|
||||||
|
|
||||||
|
const LoginShow = ref(false);
|
||||||
|
const isLoginStatus = ref();
|
||||||
|
// 关闭弹框
|
||||||
|
const handlePopupClose = () => {
|
||||||
|
LoginShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录成功之后的回调
|
||||||
|
const handlePopupSuccessCallback = () => {
|
||||||
|
isLoginStatus.value = true;
|
||||||
|
window.location.reload();
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录失败之后的回调
|
||||||
|
const handlePopupErrorCallback = () => {
|
||||||
|
console.log("登录失败");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import url("./index.css");
|
||||||
|
|
||||||
|
.top_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.pageTitle {
|
||||||
|
font-family: AlibabaPuHuiTiM;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_icon {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r_list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item {
|
||||||
|
display: flex;
|
||||||
|
min-height: 200rpx;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1px solid #f6f6f6;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
|
||||||
|
.r_list_item_num {
|
||||||
|
width: 100rpx;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item_num {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num1 {
|
||||||
|
background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num2 {
|
||||||
|
background: linear-gradient(169deg, #a9c3e3 0%, #92b2e0 100%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num3 {
|
||||||
|
background: linear-gradient(169deg, #f2996e 0%, #f77741 100%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nol_num {
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #93a2b3;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item_content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title:hover {
|
||||||
|
color: #057cff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title {
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_summary {
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
/* 必须：限制内容不溢出容器 */
|
||||||
|
overflow: hidden;
|
||||||
|
/* 必须：超出部分显示省略号 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* 必须：将元素设置为webkit弹性盒模型（用于控制行数） */
|
||||||
|
display: -webkit-box;
|
||||||
|
/* 关键：限制显示的行数（这里设为2行） */
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 必须：设置弹性盒的排列方向为垂直（让文本换行） */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
|
||||||
|
/* 可选：调整行高和容器高度，确保刚好容纳2行文本 */
|
||||||
|
line-height: 1.5;
|
||||||
|
/* 行高 */
|
||||||
|
max-height: 3em;
|
||||||
|
/* 2行总高度 = 行高 × 2（1.5×2=3） */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #919191;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffa800;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: right;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,416 @@
|
||||||
|
<template>
|
||||||
|
<view class="pc_all">
|
||||||
|
<PageTop></PageTop>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="content"
|
||||||
|
:style="{ filter: Session.get('token') ? '' : 'blur(5px)' }"
|
||||||
|
>
|
||||||
|
<view class="top_title">
|
||||||
|
<text class="pageTitle" v-if="type == 2">热门行业</text>
|
||||||
|
<text class="pageTitle" v-if="type == 3">风口概念</text>
|
||||||
|
<image src="@/assets/zixun/top10_icon.png" class="title_icon"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="display: flex">
|
||||||
|
<view class="page_left">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in tagList"
|
||||||
|
:key="index"
|
||||||
|
class="tag_item"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: clickTagIndex == index ? '#007AFF' : '',
|
||||||
|
color: clickTagIndex == index ? '#fff' : '#000',
|
||||||
|
}"
|
||||||
|
@mouseenter="handleMouseEnter(index)"
|
||||||
|
@click="tagClick(item, index)"
|
||||||
|
>
|
||||||
|
<view style="display: flex; align-items: center">
|
||||||
|
<!-- 左边数字 start -->
|
||||||
|
<view class="r_list_item_num">
|
||||||
|
<view
|
||||||
|
class="list_item_num num1"
|
||||||
|
v-if="index < 3 && index == 0"
|
||||||
|
>{{ index + 1 }}</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="list_item_num num2"
|
||||||
|
v-else-if="index < 3 && index == 1"
|
||||||
|
>{{ index + 1 }}</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="list_item_num num3"
|
||||||
|
v-else-if="index < 3 && index == 2"
|
||||||
|
>{{ index + 1 }}</view
|
||||||
|
>
|
||||||
|
<view class="list_item_num nol_num" v-else>{{
|
||||||
|
index + 1
|
||||||
|
}}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 左边数字 end -->
|
||||||
|
|
||||||
|
<text> {{ item.content }}</text>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
v-if="clickTagIndex == index"
|
||||||
|
class="tag_item_arrow"
|
||||||
|
src="@/assets/zixun/chose-icon_white.png"
|
||||||
|
mode="scaleToFill"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="clickTagIndex != index && tagHoverIndex == index"
|
||||||
|
class="tag_item_arrow"
|
||||||
|
src="@/assets/zixun/chose_icon_black.png"
|
||||||
|
mode="scaleToFill"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="page_right">
|
||||||
|
<view class="r_list">
|
||||||
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="list_item_content">
|
||||||
|
<text class="item_title" @click="goDetail(item)">{{
|
||||||
|
item.title
|
||||||
|
}}</text>
|
||||||
|
<text class="item_summary">{{ item.summary }}</text>
|
||||||
|
|
||||||
|
<view class="item_bottom">
|
||||||
|
<view>
|
||||||
|
<text class="time">{{ item.tag }}</text>
|
||||||
|
<text class="time" style="margin-left: 30rpx">{{
|
||||||
|
item.time
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<text class="score">{{ item.news_score }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<LoginPopup
|
||||||
|
:show="LoginShow"
|
||||||
|
mode="center"
|
||||||
|
@handlePopupClose="handlePopupClose"
|
||||||
|
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||||
|
@handlePopupErrorCallback="handlePopupErrorCallback"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
|
import { getTopIndustry_d, getTopConcept_d } from "@/api/newsInfo";
|
||||||
|
import { getListByTag, getListByTagIndustry } from "@/api/detail";
|
||||||
|
import dayjs from "dayjs/esm/index";
|
||||||
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||||
|
import { Session } from "@/utils/storage";
|
||||||
|
|
||||||
|
const clickTagIndex = ref(0);
|
||||||
|
const tagList = ref([]);
|
||||||
|
const type = ref(0);
|
||||||
|
const industryList = ref([]);
|
||||||
|
const topConceptList = ref([]);
|
||||||
|
const list = ref([]);
|
||||||
|
|
||||||
|
async function getListByTagFn() {
|
||||||
|
let id = 0;
|
||||||
|
|
||||||
|
if (type.value == 2) {
|
||||||
|
id = industryList.value[clickTagIndex.value]?.content;
|
||||||
|
} else {
|
||||||
|
id = topConceptList.value[clickTagIndex.value]?.content;
|
||||||
|
}
|
||||||
|
uni.showLoading();
|
||||||
|
if (type.value == 3) {
|
||||||
|
// 概念标签
|
||||||
|
let { code, data } = await getListByTag({ name: id });
|
||||||
|
if (code == 200) {
|
||||||
|
list.value = data;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 行业
|
||||||
|
let { code, data } = await getListByTagIndustry({ name: id });
|
||||||
|
if (code == 200) {
|
||||||
|
list.value = data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 热门行业top10
|
||||||
|
async function getTopIndustry_dFn() {
|
||||||
|
industryList.value = await getTopIndustry_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风口概念池top10
|
||||||
|
async function getTopConcept_dFn() {
|
||||||
|
topConceptList.value = await getTopConcept_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
const tagHoverIndex = ref(0);
|
||||||
|
function handleMouseEnter(index) {
|
||||||
|
tagHoverIndex.value = index;
|
||||||
|
}
|
||||||
|
function tagClick(item, index) {
|
||||||
|
clickTagIndex.value = index;
|
||||||
|
|
||||||
|
getListByTagFn();
|
||||||
|
}
|
||||||
|
|
||||||
|
function goDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/realtimeInfo/pc/indexPC?id=" + item.id + "&type=" + type.value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad(async (e) => {
|
||||||
|
if (e.type) {
|
||||||
|
type.value = e.type;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.type && e.type == 2) {
|
||||||
|
// 热门行业
|
||||||
|
await getTopIndustry_dFn();
|
||||||
|
tagList.value = industryList.value;
|
||||||
|
} else {
|
||||||
|
// 风口概念
|
||||||
|
await getTopConcept_dFn();
|
||||||
|
tagList.value = topConceptList.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.name) {
|
||||||
|
tagList.value.forEach((item, index) => {
|
||||||
|
if (item.content == e.name) {
|
||||||
|
clickTagIndex.value = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getListByTagFn();
|
||||||
|
|
||||||
|
if (e.index) {
|
||||||
|
clickTagIndex.value = props.index;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Session.get("token")) {
|
||||||
|
LoginShow.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const LoginShow = ref(false);
|
||||||
|
const isLoginStatus = ref();
|
||||||
|
// 关闭弹框
|
||||||
|
const handlePopupClose = () => {
|
||||||
|
LoginShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录成功之后的回调
|
||||||
|
const handlePopupSuccessCallback = () => {
|
||||||
|
isLoginStatus.value = true;
|
||||||
|
window.location.reload();
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 登录失败之后的回调
|
||||||
|
const handlePopupErrorCallback = () => {
|
||||||
|
console.log("登录失败");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import url("./index.css");
|
||||||
|
|
||||||
|
.top_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
|
||||||
|
.pageTitle {
|
||||||
|
font-family: AlibabaPuHuiTiM;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #1a1a1a;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_icon {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_left {
|
||||||
|
background: #fafbfc;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 20%;
|
||||||
|
|
||||||
|
.r_list_item_num {
|
||||||
|
width: 70rpx;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item_num {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num1 {
|
||||||
|
background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num2 {
|
||||||
|
background: linear-gradient(169deg, #a9c3e3 0%, #92b2e0 100%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.num3 {
|
||||||
|
background: linear-gradient(169deg, #f2996e 0%, #f77741 100%);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nol_num {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #93a2b3;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item {
|
||||||
|
display: flex;
|
||||||
|
height: 110rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item:hover {
|
||||||
|
background-color: #ebf4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item_arrow {
|
||||||
|
width: 9px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_right {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 50rpx;
|
||||||
|
|
||||||
|
.r_list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item {
|
||||||
|
display: flex;
|
||||||
|
min-height: 200rpx;
|
||||||
|
padding-bottom: 50rpx;
|
||||||
|
border-bottom: 1px solid #f6f6f6;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.r_list_item_num {
|
||||||
|
width: 100rpx;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item_num {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item_content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title:hover {
|
||||||
|
color: #057cff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_summary {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
.time {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #919191;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #ffa800;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: right;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,287 @@
|
||||||
|
<template>
|
||||||
|
<view class="all">
|
||||||
|
<PageHeaderView :title="type == 0 ? '热门行业池Top10' : '风口概念池Top10'"></PageHeaderView>
|
||||||
|
|
||||||
|
<!-- 类目标签 start -->
|
||||||
|
<view class="page_content">
|
||||||
|
<view class="tag_list">
|
||||||
|
<view :class="['tag_item', clickTagIndex == index ? tagClickedClass : '']" class="tag_item"
|
||||||
|
v-for="(item, index) in tagList" :key="index" @click="clickTag(index)">
|
||||||
|
{{ item.content }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 类目标签 end -->
|
||||||
|
|
||||||
|
<!-- 列表 start -->
|
||||||
|
<view class="list">
|
||||||
|
<view v-for="(item, index) in list" :key="index" class="news-item" @click="goDetail(item)">
|
||||||
|
<view class="news-content">
|
||||||
|
<text class="news-title">{{ item.title }}</text>
|
||||||
|
<text class="news-desc">{{ item.summary }}</text>
|
||||||
|
<view class="news-meta">
|
||||||
|
<text class="source">{{ item.tag }}</text>
|
||||||
|
<text class="time">{{ item.time }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 列表 end -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||||||
|
import PageHeaderView from "@/components/PageHeaderView.vue";
|
||||||
|
import {
|
||||||
|
getindustryCount,
|
||||||
|
getConceptCount,
|
||||||
|
getTopNews,
|
||||||
|
getTopIndustry_d,
|
||||||
|
getTopConcept_d,
|
||||||
|
getNews_cnt_d,
|
||||||
|
newsInfoScore,
|
||||||
|
} from "@/api/newsInfo";
|
||||||
|
|
||||||
|
import { getListByTag, getListByTagIndustry } from "@/api/detail";
|
||||||
|
|
||||||
|
import dayjs from "dayjs/esm/index";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: () => 0,
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: String,
|
||||||
|
default: () => 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const clickTagIndex = ref(0);
|
||||||
|
|
||||||
|
const tagList = ref([]);
|
||||||
|
|
||||||
|
const listData = ref([
|
||||||
|
{
|
||||||
|
title: "伊朗考虑报复美国对其核设施的袭击",
|
||||||
|
summary:
|
||||||
|
"伊朗誓言报复，向以色列发射导弹；特朗普提出伊朗政权更迭的想法；伊朗外长在莫斯科会见普京；伊朗考虑关闭霍尔木兹海峡，影...",
|
||||||
|
source: "日-日本经济新闻",
|
||||||
|
time: "2025-06-23 10:00",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "刚果延长禁令后，中国钴价和库存飙升",
|
||||||
|
summary:
|
||||||
|
"刚果民主共和国将钴出口禁令延长至9月，导致全球约四分之三的钴供应受到影响。这一消息引发了中国市场的反应。",
|
||||||
|
source: "彭博社", // 原文第二条未显示明确来源，此处留空，可根据实际补充
|
||||||
|
time: "", // 原文第二条未显示明确时间，此处留空，可根据实际补充
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
function clickTag(index) {
|
||||||
|
clickTagIndex.value = index;
|
||||||
|
|
||||||
|
getListByTagFn();
|
||||||
|
}
|
||||||
|
|
||||||
|
const industryList = ref([]);
|
||||||
|
const topConceptList = ref([]);
|
||||||
|
// 热门行业top10
|
||||||
|
async function getTopIndustry_dFn() {
|
||||||
|
industryList.value = await getTopIndustry_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风口概念池top10
|
||||||
|
async function getTopConcept_dFn() {
|
||||||
|
topConceptList.value = await getTopConcept_d({});
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = ref([]);
|
||||||
|
async function getListByTagFn() {
|
||||||
|
let id = 0;
|
||||||
|
|
||||||
|
if (props.type == 0) {
|
||||||
|
id = industryList.value[clickTagIndex.value].content;
|
||||||
|
} else {
|
||||||
|
id = topConceptList.value[clickTagIndex.value].content;
|
||||||
|
}
|
||||||
|
uni.showLoading();
|
||||||
|
if (props.type == 1) {
|
||||||
|
// id = 1125;
|
||||||
|
|
||||||
|
// 概念标签
|
||||||
|
let { code, data } = await getListByTag({ name: id });
|
||||||
|
if (code == 200) {
|
||||||
|
list.value = data;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// id = 181;
|
||||||
|
// 行业
|
||||||
|
let { code, data } = await getListByTagIndustry({ name: id });
|
||||||
|
if (code == 200) {
|
||||||
|
list.value = data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
function goDetail(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/detail/indexNewsInfo?id=" + item.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const tagClickedClass = ref("");
|
||||||
|
onMounted(async () => {
|
||||||
|
if (props.type && props.type == 0) {
|
||||||
|
// 热门行业池
|
||||||
|
tagClickedClass.value = "tag_item_act_blue";
|
||||||
|
// 热门行业top10
|
||||||
|
await getTopIndustry_dFn();
|
||||||
|
tagList.value = industryList.value;
|
||||||
|
} else {
|
||||||
|
// 风口概念池
|
||||||
|
tagClickedClass.value = "tag_item_act_yellow";
|
||||||
|
// 风口概念池top10
|
||||||
|
await getTopConcept_dFn();
|
||||||
|
tagList.value = topConceptList.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.index) {
|
||||||
|
clickTagIndex.value = props.index;
|
||||||
|
}
|
||||||
|
|
||||||
|
getListByTagFn();
|
||||||
|
|
||||||
|
const { aplus_queue } = window;
|
||||||
|
aplus_queue.push({
|
||||||
|
action: 'aplus.sendPV',
|
||||||
|
arguments: [{ is_auto: false }] // 此处上报的数据暂时在后台没有展示
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.page_content {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 15rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
|
||||||
|
.tag_item {
|
||||||
|
background: #f3f5f8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 15rpx 25rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
width: calc(50vw - 100rpx);
|
||||||
|
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item_act_blue {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #3f80fa;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
background-color: #f5f8fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_item_act_yellow {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffa800;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
background-color: #fff9ec;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-desc {
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
/* 设置为WebKit内核的弹性盒子模型 */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* 垂直排列 */
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
/* 限制显示三行 */
|
||||||
|
overflow: hidden;
|
||||||
|
/* 隐藏超出范围的内容 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* 使用省略号 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source,
|
||||||
|
.time {
|
||||||
|
// opacity: 0.8;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue