fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加行业和概念页面路由及组件

This commit is contained in:
傅光孟 2026-01-30 16:32:27 +08:00
parent 74954007ae
commit 5ee56a3d24
9 changed files with 1376 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages.json
View File

@ -84,6 +84,12 @@
},
{
"path": "pages/macroscopic/index"
},
{
"path": "pages/industry/index"
},
{
"path": "pages/concept/index"
}
],
"globalStyle": {

348
src/pages/concept/components/CustomView.vue Normal file
View File

@ -0,0 +1,348 @@
<template>
<view class="page-container">
<!-- 导航栏 start -->
<view class="custom-bav-bar">
<view class="left">
<u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
</view>
<view class="center"> 添加自选风口概念 </view>
</view>
<!-- 导航栏 end -->
<!-- 搜搜 start -->
<view class="page-search">
<u-input
v-model="input"
type="text"
placeholder="输入概念名称查找"
prefixIcon="search"
fontSize="28rpx"
prefixIconStyle="font-size: 40rpx;color: #BDC1C7;"
:customStyle="{
borderRadius: '36rpx',
background: '#F3F5F8',
}"
/>
</view>
<!-- 搜搜 end -->
<view class="page-main">
<view class="my-industry">
<view class="my-industry-top">
<view class="label">我的风口</view>
<view class="label-count">
<text>已选</text>
<text class="color">4</text>
<text>/10</text>
</view>
</view>
<view class="my-industry-list">
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">电子-半导体</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">计算机-软件开发</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">汽车-乘用车</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
<view class="industry-btn"></view>
</view>
</view>
<view class="my-industry-empty"> 暂无自选，请从下方添加 </view>
</view>
<view class="recommend-industry">
<view class="recommend-industry-top">
<view class="label">预期风口</view>
<view class="right">
<view class="icon"></view>
<view class="text">换一换</view>
</view>
</view>
<view class="recommend-industry-list">
<view class="industry-item active">
<view class="industry-name">非银金融-证券</view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
</view>
</view>
</view>
</view>
<view class="page-footer">
<view class="btn-clear">清空</view>
<view class="btn-done">完成配置</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const input = ref("");
// 导航栏路由返回
const handleBack = () => {
uni.navigateBack({
delta: 1,
});
};
</script>
<style scoped lang="scss">
.page-container {
width: 100%;
background-color: #fff;
}
.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: #222222;
line-height: 36rpx;
}
}
.page-search {
position: relative;
margin-top: 16rpx;
margin-bottom: 20rpx;
padding: 0 30rpx;
z-index: 2;
}
.page-main {
width: 100%;
padding: 33rpx 30rpx 0;
box-sizing: border-box;
.my-industry {
margin-bottom: 80rpx;
.my-industry-top {
display: flex;
align-items: center;
margin-bottom: 32rpx;
.label {
margin-right: 13rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 30rpx;
color: #111111;
}
.label-count {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #666666;
.color {
color: #ffa800;
}
}
}
.my-industry-list {
display: flex;
gap: 20rpx;
flex-wrap: wrap;
.industry-item {
display: flex;
align-items: center;
padding: 18rpx 30rpx;
background: #FFF9EC;
border-radius: 8rpx;
.industry-name {
margin-right: 20rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #ffa800;
}
.industry-btn {
width: 20rpx;
height: 20rpx;
background: url("@/assets/images/page/icon_close@2x.png") no-repeat;
background-size: 20rpx 20rpx;
}
}
}
.my-industry-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
background: #f7f8fa;
border-radius: 8rpx;
border: 2rpx solid #e4e9f0;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #cccccc;
}
}
.recommend-industry {
.recommend-industry-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.label {
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 30rpx;
color: #111111;
}
.right {
display: flex;
align-items: center;
.icon {
width: 32rpx;
height: 32rpx;
background: url("@/assets/images/page/icon_change@2x.png") no-repeat 0 3rpx;
background-size: 32rpx 32rpx;
margin-right: 10rpx;
}
.text {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #999999;
}
}
}
.recommend-industry-list {
display: grid;
gap: 20rpx;
grid-template-columns: repeat(2, 1fr);
.industry-item {
display: flex;
justify-content: center;
align-items: center;
padding: 18rpx 0;
background-color: #f3f5f8;
border-radius: 8px;
&.active {
background-color: #fff9ec;
.industry-name {
color: #ffa800;
}
}
.industry-name {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
}
}
}
}
}
.page-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: #ffffff;
box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
.btn-clear {
display: flex;
align-items: center;
justify-content: center;
width: 239rpx;
height: 100rpx;
border-radius: 50rpx;
background: #fff;
border: 2rpx solid #979797;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 32rpx;
color: #656565;
line-height: 45rpx;
cursor: pointer;
}
.btn-done {
display: flex;
align-items: center;
justify-content: center;
width: 437rpx;
height: 100rpx;
border-radius: 50rpx;
background: #ffa800;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 32rpx;
color: #ffffff;
line-height: 45rpx;
cursor: pointer;
}
}
</style>

323
src/pages/concept/index.vue Normal file
View File

@ -0,0 +1,323 @@
<template>
<view class="page-container">
<!-- 自定义配置 start -->
<!-- <CustomView /> -->
<!-- 自定义配置 end -->
<!-- 导航栏 start -->
<view class="custom-bav-bar">
<view class="left">
<u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
</view>
<view class="center"> 风口概念 </view>
<view class="right">管理</view>
</view>
<!-- 导航栏 end -->
<!-- tabs start -->
<view class="page-nav-tabs">
<u-tabs
:list="list4"
lineWidth="28rpx"
lineColor="#222222"
:activeStyle="{
color: '#222',
fontWeight: '500',
fontFamily: 'PingFangSC, PingFang SC',
}"
:inactiveStyle="{
color: '#666',
fontWeight: '400',
fontFamily: 'PingFangSC, PingFang SC',
}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 70rpx;"
>
</u-tabs>
</view>
<!-- tabs end -->
<view class="page-main">
<view class="banner">
<view class="text-1">非银金融-证券</view>
<view class="text-2">热门行业近一个月排名第5</view>
</view>
<view class="news-list">
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CustomView from "./components/CustomView.vue";
const list4 = ref([
{ name: "非银金融-证券", id: 1 },
{ name: "电子-半导体", id: 2 },
{ name: "汽车-乘用车", id: 3 },
{ name: "汽车-乘用车", id: 4 },
{ name: "汽车-乘用车", id: 5 },
]);
// 导航栏路由返回
const handleBack = () => {
uni.navigateBack({
delta: 1,
});
};
</script>
<style scoped lang="scss">
.page-container {
width: 100%;
background-color: #fff;
}
.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: #222222;
line-height: 36rpx;
}
.right {
position: absolute;
top: 22rpx;
right: 30rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 30rpx;
color: #333333;
line-height: 42rpx;
}
}
.page-nav-tabs {
padding-top: 20rpx;
}
.page-main {
padding-top: 30rpx;
background-color: #f3f5f8;
.banner {
width: 690rpx;
height: 113rpx;
margin:0 30rpx 30rpx;
padding: 15rpx 30rpx;
border-radius: 10rpx;
background-image: url("@/assets/images/page/page_5@2x.png");
background-repeat: no-repeat;
background-size: 690rpx 113rpx;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
.text-1 {
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 30rpx;
color: #3f80fa;
line-height: 42rpx;
}
.text-2 {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 33rpx;
}
}
.news-list {
width: 100%;
padding: 30rpx 30rpx 0;
background: #fff;
border-radius: 24rpx 24rpx 0px 0px;
overflow: hidden;
box-sizing: border-box;
.news-item {
width: 100%;
margin-bottom: 30rpx;
padding-bottom: 30rpx;
border-bottom: 2rpx solid #f3f3f5;
box-sizing: border-box;
&:last-child {
border-bottom: none;
}
.title {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.name {
flex: 1;
width: 564rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-break: break-all;
}
}
.content {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 16rpx;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 33rpx;
}
.source {
display: flex;
align-items: center;
justify-content: space-between;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 30rpx;
}
}
}
}
</style>

348
src/pages/industry/components/CustomView.vue Normal file
View File

@ -0,0 +1,348 @@
<template>
<view class="page-container">
<!-- 导航栏 start -->
<view class="custom-bav-bar">
<view class="left">
<u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
</view>
<view class="center"> 添加关注申万行业 </view>
</view>
<!-- 导航栏 end -->
<!-- 搜搜 start -->
<view class="page-search">
<u-input
v-model="input"
type="text"
placeholder="输入行业查找"
prefixIcon="search"
fontSize="28rpx"
prefixIconStyle="font-size: 40rpx;color: #BDC1C7;"
:customStyle="{
borderRadius: '36rpx',
background: '#F3F5F8',
}"
/>
</view>
<!-- 搜搜 end -->
<view class="page-main">
<view class="my-industry">
<view class="my-industry-top">
<view class="label">我的行业</view>
<view class="label-count">
<text>已选</text>
<text class="color">4</text>
<text>/10</text>
</view>
</view>
<view class="my-industry-list">
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">电子-半导体</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">计算机-软件开发</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">汽车-乘用车</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
<view class="industry-btn"></view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
<view class="industry-btn"></view>
</view>
</view>
<view class="my-industry-empty"> 暂无自选，请从下方添加 </view>
</view>
<view class="recommend-industry">
<view class="recommend-industry-top">
<view class="label">推荐行业</view>
<view class="right">
<view class="icon"></view>
<view class="text">换一换</view>
</view>
</view>
<view class="recommend-industry-list">
<view class="industry-item active">
<view class="industry-name">非银金融-证券</view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
</view>
<view class="industry-item">
<view class="industry-name">非银金融-证券</view>
</view>
</view>
</view>
</view>
<view class="page-footer">
<view class="btn-clear">清空</view>
<view class="btn-done">完成配置</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const input = ref("");
// 导航栏路由返回
const handleBack = () => {
uni.navigateBack({
delta: 1,
});
};
</script>
<style scoped lang="scss">
.page-container {
width: 100%;
background-color: #fff;
}
.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: #222222;
line-height: 36rpx;
}
}
.page-search {
position: relative;
margin-top: 16rpx;
margin-bottom: 20rpx;
padding: 0 30rpx;
z-index: 2;
}
.page-main {
width: 100%;
padding: 33rpx 30rpx 0;
box-sizing: border-box;
.my-industry {
margin-bottom: 80rpx;
.my-industry-top {
display: flex;
align-items: center;
margin-bottom: 32rpx;
.label {
margin-right: 13rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 30rpx;
color: #111111;
}
.label-count {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #666666;
.color {
color: #3f80fa;
}
}
}
.my-industry-list {
display: flex;
gap: 20rpx;
flex-wrap: wrap;
.industry-item {
display: flex;
align-items: center;
padding: 18rpx 30rpx;
background: #eff7ff;
border-radius: 8rpx;
.industry-name {
margin-right: 20rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #3f80fa;
}
.industry-btn {
width: 20rpx;
height: 20rpx;
background: url("@/assets/images/page/icon_close@2x.png") no-repeat;
background-size: 20rpx 20rpx;
}
}
}
.my-industry-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
background: #f7f8fa;
border-radius: 8rpx;
border: 2rpx solid #e4e9f0;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #cccccc;
}
}
.recommend-industry {
.recommend-industry-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.label {
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 30rpx;
color: #111111;
}
.right {
display: flex;
align-items: center;
.icon {
width: 32rpx;
height: 32rpx;
background: url("@/assets/images/page/icon_change@2x.png") no-repeat 0 3rpx;
background-size: 32rpx 32rpx;
margin-right: 10rpx;
}
.text {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 26rpx;
color: #999999;
}
}
}
.recommend-industry-list {
display: grid;
gap: 20rpx;
grid-template-columns: repeat(2, 1fr);
.industry-item {
display: flex;
justify-content: center;
align-items: center;
padding: 18rpx 0;
background-color: #f3f5f8;
border-radius: 8px;
&.active {
background-image: url("@/assets/images/page/chose_icon@2x.png");
background-position: right bottom;
background-repeat: no-repeat;
background-size: 38rpx 31rpx;
}
.industry-name {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
}
}
}
}
}
.page-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
background: #ffffff;
box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
.btn-clear {
display: flex;
align-items: center;
justify-content: center;
width: 239rpx;
height: 100rpx;
border-radius: 50rpx;
background: #fff;
border: 2rpx solid #979797;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 32rpx;
color: #656565;
line-height: 45rpx;
cursor: pointer;
}
.btn-done {
display: flex;
align-items: center;
justify-content: center;
width: 437rpx;
height: 100rpx;
border-radius: 50rpx;
background: #3f80fa;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 32rpx;
color: #ffffff;
line-height: 45rpx;
cursor: pointer;
}
}
</style>

323
src/pages/industry/index.vue Normal file
View File

@ -0,0 +1,323 @@
<template>
<view class="page-container">
<!-- 自定义配置 start -->
<!-- <CustomView /> -->
<!-- 自定义配置 end -->
<!-- 导航栏 start -->
<view class="custom-bav-bar">
<view class="left">
<u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
</view>
<view class="center"> 热门行业 </view>
<view class="right">管理</view>
</view>
<!-- 导航栏 end -->
<!-- tabs start -->
<view class="page-nav-tabs">
<u-tabs
:list="list4"
lineWidth="28rpx"
lineColor="#222222"
:activeStyle="{
color: '#222',
fontWeight: '500',
fontFamily: 'PingFangSC, PingFang SC',
}"
:inactiveStyle="{
color: '#666',
fontWeight: '400',
fontFamily: 'PingFangSC, PingFang SC',
}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 70rpx;"
>
</u-tabs>
</view>
<!-- tabs end -->
<view class="page-main">
<view class="banner">
<view class="text-1">非银金融-证券</view>
<view class="text-2">热门行业近一个月排名第5</view>
</view>
<view class="news-list">
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
<view class="news-item">
<view class="title">
<view class="name">
行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
</view>
<view class="source">
<view>中国证券报</view>
<view>2025-06-23 10:00</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import CustomView from "./components/CustomView.vue";
const list4 = ref([
{ name: "非银金融-证券", id: 1 },
{ name: "电子-半导体", id: 2 },
{ name: "汽车-乘用车", id: 3 },
{ name: "汽车-乘用车", id: 4 },
{ name: "汽车-乘用车", id: 5 },
]);
// 导航栏路由返回
const handleBack = () => {
uni.navigateBack({
delta: 1,
});
};
</script>
<style scoped lang="scss">
.page-container {
width: 100%;
background-color: #fff;
}
.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: #222222;
line-height: 36rpx;
}
.right {
position: absolute;
top: 22rpx;
right: 30rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 30rpx;
color: #333333;
line-height: 42rpx;
}
}
.page-nav-tabs {
padding-top: 20rpx;
}
.page-main {
padding-top: 30rpx;
background-color: #f3f5f8;
.banner {
width: 690rpx;
height: 113rpx;
margin:0 30rpx 30rpx;
padding: 15rpx 30rpx;
border-radius: 10rpx;
background-image: url("@/assets/images/page/page_5@2x.png");
background-repeat: no-repeat;
background-size: 690rpx 113rpx;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
.text-1 {
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 30rpx;
color: #3f80fa;
line-height: 42rpx;
}
.text-2 {
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 33rpx;
}
}
.news-list {
width: 100%;
padding: 30rpx 30rpx 0;
background: #fff;
border-radius: 24rpx 24rpx 0px 0px;
overflow: hidden;
box-sizing: border-box;
.news-item {
width: 100%;
margin-bottom: 30rpx;
padding-bottom: 30rpx;
border-bottom: 2rpx solid #f3f3f5;
box-sizing: border-box;
&:last-child {
border-bottom: none;
}
.title {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.name {
flex: 1;
width: 564rpx;
font-family: "PingFangSC, PingFang SC";
font-weight: 500;
font-size: 28rpx;
color: #222222;
line-height: 40rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-break: break-all;
}
}
.content {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 16rpx;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 33rpx;
}
.source {
display: flex;
align-items: center;
justify-content: space-between;
font-family: "PingFangSC, PingFang SC";
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 30rpx;
}
}
}
}
</style>

35
src/pages/realtimeInfo/components/BannerNewsView/index.vue
View File

@ -11,7 +11,7 @@
indicator-active-color="#3F80FA"
>
<swiper-item>
<view class="swiper-item">
<view class="swiper-item" @click.stop="handlClick({ id: 1 })">
<view class="source">
<view>
<text class="label">来自</text>
@ -35,39 +35,18 @@
</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>
<text class="txt">**能源</text>
<text class="txt">**能源</text>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["onClick"]);
const handlClick = (item: any) => {
emit("onClick", item);
};
</script>
<style scoped lang="scss">

4
src/pages/realtimeInfo/components/HeaderView/index.vue
View File

@ -45,13 +45,13 @@ const menus = reactive([
name: "热门行业",
icon: MENUICON4,
auth: "menu4",
path: "/pages/foreign/index",
path: "/pages/industry/index",
},
{
name: "风口概念",
icon: MENUICON5,
auth: "menu5",
path: "/pages/foreign/index",
path: "/pages/concept/index",
},
]);
const date = computed(() => dayjs().format("YYYY-MM-DD"));

32
src/pages/realtimeInfo/index.vue
View File

@ -26,7 +26,7 @@
<!-- 今日资讯 end -->
<!-- 尾部 start -->
<FooterView />
<FooterView />
<!-- 尾部 end -->
<!-- 登录弹窗 start -->
@ -34,6 +34,7 @@
:show="LoginShow"
@onSuccess="handleLoginSuccess"
@onCancel="handleLoginCancel"
@onError="handleLoginError"
/>
<!-- 登录弹窗 end -->
</view>
@ -50,36 +51,39 @@ import TodayNewsView from "./components/TodayNewsView/index.vue";
import FooterView from "./components/FooterView/index.vue";
import LoginDialog from "./components/LoginDialog/index.vue";
import { Session } from "@/utils/storage";
import { doLogout } from "@/api";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
// 登录弹框
const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handleLoginCancel = () => {
LoginShow.value = false;
};
// 登录成功之后的回调
const handleLoginSuccess = () => {
LoginShow.value = false;
};
// 登录失败之后的回调
const handlePopupErrorCallback = () => {
const handleLoginError = () => {
console.log("登录失败");
};
function loginOut() {
doLogout({
financialAccount: Session.get("userPhone"),
});
Session.clear();
window.location.reload();
}
// 跳转详情页
const handleToDetail = (item) => {
if (userStore.isLogin) {
uni.navigateTo({
url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,
});
} else {
LoginShow.value = true;
}
};
onMounted(async () => {
if (!Session.get("token")) {
if (!userStore.isLogin) {
LoginShow.value = true;
}

2
src/stores/user/index.ts
View File

@ -71,7 +71,7 @@ const storeSetup = () => {
data: {
token: "123456",
phone: "123456",
auth: ["menu1", "menu2", "menu3"],
auth: ["menu1", "menu2", "menu3", 'menu4', 'menu5'],
role: ["role1"],
},
});