feat: 新增智能资讯榜页面和优化文章详情页组件
- 添加了新的智能资讯榜页面 (topNews/index.vue) - 新增雷达图组件用于展示AI追踪海外资讯 - 重构文章详情页组件(indexNewsInfo.vue)，改进布局和样式 - 优化关联个股显示，添加股票代码和涨跌幅信息 - 添加拓展阅读功能模块 - 更新评论组件样式，使用本地图片资源替换远程链接 - 修改概念页面背景图片和颜色配置 - 调整页面底部内边距设置
This commit is contained in:
parent
5ee56a3d24
commit
dba108f0e1
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 189 KiB |
|
|
@ -1,96 +1,161 @@
|
|||
<template>
|
||||
<view class="main">
|
||||
<view class="title" :class="{ mohu: !isLogin }">{{ props.data.title }}</view>
|
||||
<view class="author">
|
||||
<view class="name" :class="{ mohu: !isLogin }">
|
||||
<text class="text">来源:</text>
|
||||
<text class="text" v-if="intoType === 'etf'">中国证券报</text>
|
||||
<text class="text" v-else>{{ props.data.tag ? props.data.tag : "中国证券报" }}</text>
|
||||
</view>
|
||||
<view class="page-container">
|
||||
<view class="main">
|
||||
<view class="title" :class="{ mohu: !isLogin }">{{ props.data.title }}</view>
|
||||
<view class="author">
|
||||
<view class="name" :class="{ mohu: !isLogin }">
|
||||
<text class="text">来源:</text>
|
||||
<text class="text" v-if="intoType === 'etf'">中国证券报</text>
|
||||
<text class="text" v-else>{{
|
||||
props.data.tag ? props.data.tag : "中国证券报"
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<!-- <view class="name" v-if="props.data.editor">
|
||||
<!-- <view class="name" v-if="props.data.editor">
|
||||
<text class="text">编辑:</text>
|
||||
<text class="text">{{ props.data.editor }}</text>
|
||||
</view> -->
|
||||
<view class="time" :class="{ mohu: !isLogin }">{{ props.data.publishTime }}</view>
|
||||
</view>
|
||||
<view class="time" :class="{ mohu: !isLogin }">{{ props.data.publishTime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 两个标签 start -->
|
||||
<view class="r_r_tags" :class="{ mohu: !isLogin }">
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
class="tag"
|
||||
style="background-color: #fff9ec; color: #ffb100"
|
||||
v-for="(item, index) in props.data.conceptLabels"
|
||||
:key="index"
|
||||
>{{ item }}</view
|
||||
>
|
||||
<!-- 两个标签 start -->
|
||||
<view class="r_r_tags" :class="{ mohu: !isLogin }">
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
class="tag"
|
||||
style="background-color: #fff9ec; color: #ffb100"
|
||||
v-for="(item, index) in props.data.conceptLabels"
|
||||
:key="index"
|
||||
>{{ item }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
class="tag"
|
||||
style="background-color: #f5f8fe; color: #007aff"
|
||||
v-for="(item, index) in props.data.industryLabels"
|
||||
:key="index"
|
||||
>{{ item }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两个标签 end -->
|
||||
|
||||
<!-- 摘要 -->
|
||||
<view class="desc" v-if="props.data.summary" :class="{ mohu: !isLogin }">
|
||||
<!-- <view class="bill_icon"></view> -->
|
||||
<image :src="zhaiyaoImg" mode="scaleToFill" class="zhaiyao_icon" />
|
||||
<view>
|
||||
{{ props.data.summary }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
class="tag"
|
||||
style="background-color: #f5f8fe; color: #007aff"
|
||||
v-for="(item, index) in props.data.industryLabels"
|
||||
:key="index"
|
||||
>{{ item }}</view
|
||||
>
|
||||
</view>
|
||||
<view class="thumbnail" v-if="props.data.picture">
|
||||
<image :src="props.data.picture" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两个标签 end -->
|
||||
|
||||
<!-- 摘要 -->
|
||||
<view class="desc" v-if="props.data.summary" :class="{ mohu: !isLogin }">
|
||||
<!-- <view class="bill_icon"></view> -->
|
||||
<image :src="zhaiyaoImg" mode="scaleToFill" class="zhaiyao_icon" />
|
||||
<view>
|
||||
{{ props.data.summary }}
|
||||
<view style="padding: 35rpx" :class="{ mohu: !isLogin }">
|
||||
<text
|
||||
class="articleDes"
|
||||
:class="props?.data?.needpay && 'needpay'"
|
||||
style="white-space: pre-wrap"
|
||||
v-html="props.data.content"
|
||||
>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="thumbnail" v-if="props.data.picture">
|
||||
<image :src="props.data.picture" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<view style="padding: 35rpx" :class="{ mohu: !isLogin }">
|
||||
<text
|
||||
class="articleDes"
|
||||
:class="props?.data?.needpay && 'needpay'"
|
||||
style="white-space: pre-wrap"
|
||||
v-html="props.data.content"
|
||||
>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- <view
|
||||
<!-- <view
|
||||
class="articleDes"
|
||||
:class="props?.data?.needpay && 'needpay'"
|
||||
v-html="props.data.content"
|
||||
>
|
||||
</view> -->
|
||||
|
||||
<view class="author" style="justify-content: flex-start; margin-top: -30rpx">
|
||||
<view class="name" v-if="props.data.editor">
|
||||
<text class="text">编辑:</text>
|
||||
<text class="text">{{ props.data.editor }}</text>
|
||||
<view class="author" style="justify-content: flex-start">
|
||||
<view class="name" v-if="props.data.editor">
|
||||
<text class="text">编辑:</text>
|
||||
<text class="text">{{ props.data.editor }}</text>
|
||||
</view>
|
||||
|
||||
<view class="name" style="margin-left: 40rpx" v-if="props.data.secondReviewer">
|
||||
<text class="text">二校:</text>
|
||||
<text class="text">{{ props.data.secondReviewer }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="name" style="margin-left: 40rpx" v-if="props.data.secondReviewer">
|
||||
<text class="text">二校:</text>
|
||||
<text class="text">{{ props.data.secondReviewer }}</text>
|
||||
<!-- <view class="r_etf" style="margin-top: 80rpx" v-if="intoType == 'etf'">
|
||||
<text class="etf_title">AI关联标的</text>
|
||||
<view class="etfs">
|
||||
<view
|
||||
v-for="(item, index) in data.etfs"
|
||||
class="etf_item"
|
||||
:key="index"
|
||||
@click="goEtfDetail(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 关联个股 -->
|
||||
<view class="r_etf" style="margin-top: 20rpx" v-if="intoType == 'etf'">
|
||||
<text class="etf_title">关联个股</text>
|
||||
<view class="etfs">
|
||||
<view
|
||||
v-for="(item, index) in data.etfs"
|
||||
class="etf_item"
|
||||
:key="index"
|
||||
@click="goEtfDetail(item)"
|
||||
>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="code">{{ item.code }}</view>
|
||||
</view>
|
||||
<view
|
||||
v-for="(item, index) in data.etfs"
|
||||
class="stock_item"
|
||||
:key="index"
|
||||
@click="goEtfDetail(item)"
|
||||
>
|
||||
<view>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="code">{{ item.code }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="percent up">-0.28%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="r_etf" style="margin-top: 80rpx" v-if="intoType == 'etf'">
|
||||
<text class="etf_title">AI关联标的</text>
|
||||
<view class="etfs">
|
||||
<view v-for="(item, index) in data.etfs" class="etf_item" :key="index" @click="goEtfDetail(item)">
|
||||
{{ item.name }}
|
||||
<!-- 拓展阅读 -->
|
||||
<view class="more-news" style="margin-top: 20rpx" v-if="false">
|
||||
<text class="more-news-title">拓展阅读</text>
|
||||
<view class="more-news-list">
|
||||
<view class="news">
|
||||
<view class="title"
|
||||
>国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="news">
|
||||
<view class="title"
|
||||
>国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
|
||||
>
|
||||
</view>
|
||||
<view class="news">
|
||||
<view class="title"
|
||||
>国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-btn">
|
||||
<view class="text">查看更多</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -98,14 +163,19 @@
|
|||
:show="LoginShow"
|
||||
@handlePopupClose="handlePopupClose"
|
||||
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||
@handlePopupErrorCallback="handlePopupErrorCallback"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { onLaunch, onShow, onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||
import {
|
||||
onLaunch,
|
||||
onShow,
|
||||
onLoad,
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
} from "@dcloudio/uni-app";
|
||||
import articleMock from "@/mock/article.js";
|
||||
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||
import { Session } from "@/utils/storage";
|
||||
|
|
@ -226,10 +296,14 @@ const handleSub = () => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
background-color: #f3f5f8;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
.main {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding-bottom: 120rpx;
|
||||
padding-bottom: 50rpx;
|
||||
|
||||
.title {
|
||||
padding-top: 16rpx;
|
||||
|
|
@ -343,7 +417,9 @@ const handleSub = () => {
|
|||
gap: 10rpx;
|
||||
|
||||
.tag {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #3f80fa;
|
||||
|
|
@ -369,18 +445,24 @@ const handleSub = () => {
|
|||
.r_etf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
|
||||
.etfs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.etf_title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: bold;
|
||||
padding-left: 53rpx;
|
||||
background-image: url("@/assets/images/page/page_icon_1@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 40rpx 40rpx;
|
||||
background-position: 0 center;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
line-height: 42rpx;
|
||||
|
|
@ -389,23 +471,143 @@ const handleSub = () => {
|
|||
}
|
||||
|
||||
.etf_item {
|
||||
width: calc(50vw - 80rpx);
|
||||
height: 64rpx;
|
||||
background: #edf1f5;
|
||||
border-radius: 8rpx;
|
||||
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 44rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
background: rgba(240, 247, 255, 1);
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
line-height: 44rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.code {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.stock_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
background: rgba(240, 247, 255, 1);
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
line-height: 30rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.code {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.percent {
|
||||
padding-right: 25rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #2fa054;
|
||||
line-height: 33rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
&.up {
|
||||
color: #e6253b;
|
||||
background: url("@/assets/images/page/up2_icon@2x.png") no-repeat right center;
|
||||
background-size: 20rpx 12rpx;
|
||||
}
|
||||
&.down {
|
||||
color: #2fa054;
|
||||
background: url("@/assets/images/page/down2_icon@2x.png") no-repeat right center;
|
||||
background-size: 20rpx 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-news {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.more-news-title {
|
||||
padding-left: 53rpx;
|
||||
background-image: url("@/assets/images/page/page_icon_2@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 40rpx 40rpx;
|
||||
background-position: 0 center;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
line-height: 42rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.more-news-list {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.news {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #f3f3f5;
|
||||
.title {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5rpx 20rpx;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
padding-right: 31rpx;
|
||||
background: url("@/assets/images/page/grey_down@2x.png") no-repeat right center;
|
||||
background-size: 21rpx 11rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,15 @@
|
|||
<template>
|
||||
<view class="comment">
|
||||
<view class="comment-count">
|
||||
<view class="count" @click="handleClickLike">
|
||||
<image
|
||||
:src="
|
||||
props.data.isLike
|
||||
? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_fill%402x.png'
|
||||
: 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_normal%402x.png'
|
||||
"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="count zan" @click="handleClickLike">
|
||||
<view :class="['icon', { active: props.data.isLike }]" />
|
||||
<text class="num">点赞</text>
|
||||
</view>
|
||||
<!-- <view class="count" @click="handleClickStar">
|
||||
<image
|
||||
:src="props.data.isFav ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_normal%402x.png'"
|
||||
class="icon" />
|
||||
<view class="count fav" @click="handleClickStar">
|
||||
<view :class="['icon', { active: props.data.isFav }]" />
|
||||
<text class="num">收藏</text>
|
||||
</view>
|
||||
<button class="count" style="background-color: transparent;" open-type="share">
|
||||
<!-- <button class="count" style="background-color: transparent;" open-type="share">
|
||||
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png" class="icon" />
|
||||
<text class="num">分享</text>
|
||||
</button> -->
|
||||
|
|
@ -68,14 +59,15 @@ const handleSubmit = () => {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
height: 80rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.3);
|
||||
// box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.3);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px -1px 0px 0px #dfdfe0;
|
||||
|
||||
.comment-input {
|
||||
width: 100%;
|
||||
|
|
@ -110,16 +102,42 @@ const handleSubmit = () => {
|
|||
width: 100%;
|
||||
|
||||
.num {
|
||||
margin-left: 12rpx;
|
||||
// font-size: 24rpx;
|
||||
font-size: var(--h4-font-size);
|
||||
color: #333;
|
||||
margin-left: 15rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 33rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
.icon {
|
||||
width: 33rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
&.zan {
|
||||
.icon {
|
||||
background-image: url("@/assets/images/page/icon_zan@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 33rpx 34rpx;
|
||||
|
||||
&.active {
|
||||
background-image: url("@/assets/images/page/icon_zan_press@2x.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fav {
|
||||
.icon {
|
||||
background-image: url("@/assets/images/page/shoucang_icon@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 33rpx 34rpx;
|
||||
|
||||
&.active {
|
||||
background-image: url("@/assets/images/page/shoucang_icon_press@2x.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,9 @@
|
|||
},
|
||||
{
|
||||
"path": "pages/concept/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/topNews/index"
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ const handleBack = () => {
|
|||
margin:0 30rpx 30rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
border-radius: 10rpx;
|
||||
background-image: url("@/assets/images/page/page_5@2x.png");
|
||||
background-image: url("@/assets/images/page/page_5_1@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 690rpx 113rpx;
|
||||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
||||
|
|
@ -241,7 +241,7 @@ const handleBack = () => {
|
|||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #3f80fa;
|
||||
color: #ffa800;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
.text-2 {
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ const jumpDetail = (item: any) => {
|
|||
|
||||
.container {
|
||||
// background-color: #f5f5f5;
|
||||
padding-bottom: 112rpx;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 112rpx;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<view class="radar-container">
|
||||
<view class="title">24h AI追踪海外资讯</view>
|
||||
|
||||
<div ref="chatRef" class="chat-box"></div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, ref, watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chatRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
myChart = echarts.init(chatRef.value);
|
||||
|
||||
let option = {
|
||||
gird: {
|
||||
show: true,
|
||||
top: 50,
|
||||
left: 50,
|
||||
right: 50,
|
||||
},
|
||||
color: ["#4681FF"],
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: "资本市场相关", max: 6500 },
|
||||
{ name: "资讯质量", max: 6000 },
|
||||
{ name: "媒体影响力", max: 30000 },
|
||||
{ name: "行业导向", max: 38000 },
|
||||
{ name: "历史溯洄", max: 52000 },
|
||||
{ name: "话题性", max: 30000 },
|
||||
{ name: "风险性", max: 6500 },
|
||||
{ name: "地缘影响", max: 6500 },
|
||||
{ name: "产业政策", max: 6500 },
|
||||
{ name: "潜在信号", max: 6500 },
|
||||
],
|
||||
axisName: {
|
||||
color: '#666666',
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(234, 234, 236, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "1111",
|
||||
type: "radar",
|
||||
areaStyle: { color: "rgba(62, 122, 252, 0.20)" },
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000, 4200, 3000,4200, 3000],
|
||||
name: "AI追踪海外资讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
//使用配置
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
watch(() => chatRef.value, () => {
|
||||
initChart()
|
||||
})
|
||||
|
||||
|
||||
// onMounted(async () => {
|
||||
// await nextTick()
|
||||
// await initChart();
|
||||
// })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.radar-container {
|
||||
height: 600rpx;
|
||||
margin: 38rpx 20rpx 20rpx;
|
||||
padding-top: 39rpx;
|
||||
background-image: linear-gradient( 180deg, rgba(194,214,253,0.96) 0%, #FFFFFF 50%);
|
||||
box-shadow: inset 0px 1px 0px 0px #ffffff;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
width: 329rpx;
|
||||
padding: 14rpx 30rpx;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx;
|
||||
border: 1px solid #e7e7e7;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 38rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-box{
|
||||
width: 100%;
|
||||
height: calc(100% - 120rpx);
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 导航栏 start -->
|
||||
<view class="custom-bav-bar">
|
||||
<view class="left">
|
||||
<u-icon name="arrow-left" color="#fff" size="36rpx" @click="handleBack" />
|
||||
</view>
|
||||
<view class="center"> 智能资讯榜 </view>
|
||||
</view>
|
||||
<!-- 导航栏 end -->
|
||||
|
||||
<!-- 24小时榜 start -->
|
||||
<RadarView />
|
||||
<!-- 24小时榜 end -->
|
||||
<view class="page-main blur">
|
||||
<view class="news-list-top3">
|
||||
<view class="news-item">
|
||||
<view class="news-no"> 1 </view>
|
||||
<view class="news-info">
|
||||
<view class="news-title">
|
||||
<view class="title">三星生物风险投资基金将投资拓济医药</view>
|
||||
<view class="score">98.52</view>
|
||||
</view>
|
||||
<view class="news-cont">
|
||||
三星集团宣布，其生物风险基金将投资中国生物技术公司phronline
|
||||
Biopharma，以扩大其抗体药物偶联物（A ...
|
||||
</view>
|
||||
<view class="source">
|
||||
<view class="t-1">中国证券报</view>
|
||||
<view class="t-2">2025-06-23 11:51</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="news-item">
|
||||
<view class="news-no"> 1 </view>
|
||||
<view class="news-info">
|
||||
<view class="news-title">
|
||||
<view class="title">三星生物风险投资基金将投资拓济医药</view>
|
||||
<view class="score">98.5</view>
|
||||
</view>
|
||||
<view class="news-cont">
|
||||
三星集团宣布，其生物风险基金将投资中国生物技术公司phronline
|
||||
Biopharma，以扩大其抗体药物偶联物（A ...
|
||||
</view>
|
||||
<view class="source">
|
||||
<view class="t-1">中国证券报</view>
|
||||
<view class="t-2">2025-06-23 11:51</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="news-list">
|
||||
<view class="news-item">
|
||||
<view class="news-no"> 1 </view>
|
||||
<view class="news-title">
|
||||
三星生物风险投资基金将投资拓济医药三星生物风险投资基金将投资拓济医药
|
||||
</view>
|
||||
<view class="news-score">98.5</view>
|
||||
</view>
|
||||
<view class="news-item">
|
||||
<view class="news-no"> 1 </view>
|
||||
<view class="news-title">
|
||||
三星生物风险投资基金将投资拓济医药三星生物风险投资基金将投资拓济医药
|
||||
</view>
|
||||
<view class="news-score">98.5</view>
|
||||
</view>
|
||||
<view class="news-item">
|
||||
<view class="news-no"> 1 </view>
|
||||
<view class="news-title">
|
||||
三星生物风险投资基金将投资拓济医药三星生物风险投资基金将投资拓济医药
|
||||
</view>
|
||||
<view class="news-score">98.5</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import RadarView from "./components/RadarView.vue";
|
||||
|
||||
// 导航栏路由返回
|
||||
const handleBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20rpx;
|
||||
background-color: #f3f5f8;
|
||||
background-image: url("@/assets/images/page/page6_pic@2x.png");
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.custom-bav-bar {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.back_icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.logo_icon {
|
||||
width: 168rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 32rpx;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 34rpx;
|
||||
color: #ffffff;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page-main {
|
||||
&.blur {
|
||||
filter: blur(5px);
|
||||
}
|
||||
.news-list-top3 {
|
||||
margin: 0 20rpx;
|
||||
.news-item {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0px 2rpx 0px 0px #ffffff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.news-no {
|
||||
flex: 0 0 35rpx;
|
||||
height: 46rpx;
|
||||
margin-right: 15rpx;
|
||||
background-image: url("@/assets/images/page/icon_no1@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 35rpx 46rpx;
|
||||
text-indent: -999em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
.news-no {
|
||||
background-image: url("@/assets/images/page/icon_no1@2x.png");
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.news-no {
|
||||
background-image: url("@/assets/images/page/icon_no2@2x.png");
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.news-no {
|
||||
background-image: url("@/assets/images/page/icon_no3@2x.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-info {
|
||||
.news-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14rpx;
|
||||
.title {
|
||||
width: 505rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
line-height: 42rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.score {
|
||||
font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #3f80fa;
|
||||
line-height: 42rpx;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.news-cont {
|
||||
margin-bottom: 16rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 33rpx;
|
||||
text-align: justify;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.source {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.t-1 {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 33rpx;
|
||||
margin-right: 4rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.t-2 {
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 33rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
margin: 0 20rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0px 2rpx 0px 0px #ffffff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0;
|
||||
margin: 0 30rpx;
|
||||
border-bottom: 2rpx solid #f3f3f5;
|
||||
|
||||
.news-no {
|
||||
flex: 0 0 35rpx;
|
||||
height: 42rpx;
|
||||
margin-right: 15rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #e98254;
|
||||
line-height: 42rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
width: 505rpx;
|
||||
font-family: "PingFangSC, PingFang SC";
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
line-height: 42rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.news-score {
|
||||
font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #3f80fa;
|
||||
line-height: 42rpx;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue