guowenhao/weilaizhixing_official_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交投资者新闻

Browse Source
This commit is contained in:
wangchengming 2024-12-02 15:03:39 +08:00
parent 6bbd973147
commit 71678610a2
3 changed files with 719 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/router/index.js
View File

@ -193,6 +193,11 @@ const routes = [
component: (resolve) =>
require(['../views/Invest/Investor/Index.vue'], resolve),
},
{
path: '/investor/detail/:newsId',
component: (resolve) =>
require(['../views/Invest/Investor/NewsDetail.vue'], resolve),
},
{
path: '/cooperationOffer',
component: (resolve) =>

462
src/views/Invest/Investor/Index.vue
View File

@ -9,11 +9,257 @@
/>
</div>
<div class="screen2">
<img
:src="tempImg"
alt=""
style="width: 100%"
/>
<div class="wrapper1680">
<el-tabs
tab-position="left"
v-model="activeName"
@tab-click="handleChosePane"
>
<el-tab-pane
label="投资者新闻"
name="first"
>
<div class="news-wrapper">
<div class="news-item">
<ul>
<li
v-for="item in investorNews.actionOne"
:key="item.id"
@click="() => $router.push('/investor/detail/' + item.id)"
>
<el-row class="itemRow">
<el-col
:span="8"
class="imgCol"
>
<div class="list-img">
<img
:src="item.cover"
style="width:100%;height:100%;object-fit:cover;"
alt=""
>
</div>
</el-col>
<el-col
:span="16"
class="listContent"
>
<div class="list-title">
{{ item.captionName }}<span class="deailTitle">[详细]</span>
</div>
</el-col>
</el-row>
</li>
</ul>
</div>
<div class="news-item">
<div class="contentTitle">
<ul>
<li
v-for="item in investorNews.actionTwo"
:key="item.id"
class="itemDisc"
@click="() => $router.push('/investor/detail/' + item.id)"
>
{{ item.captionName }}
</li>
</ul>
</div>
</div>
<div class="news-item">
<div class="contentThree">
<ul>
<li
v-for="(item, index) in investorNews.actionThree"
:key="item.id"
class="itemNomal"
@click="() => $router.push('/investor/detail/' + item.id)"
>
<template v-if="index == 0">
<div class="imgList">
<img
:src="item.cover"
style="width:100%;height:100%;object-fit:cover;"
alt=""
>
<div class="imgMask">
{{ item.captionName }}
</div>
</div>
</template>
<template v-else>
{{ item.captionName }}
</template>
</li>
</ul>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane
label="公司治理"
name="second"
>
<div class="news-wrapper">
<div class="news-item">
<ul>
<li
v-for="item in corporateGovernance.actionOne"
:key="item.id"
@click="() => $router.push('/investor/detail/' + item.id)"
>
<el-row class="itemRow">
<el-col
:span="8"
class="imgCol"
>
<div class="list-img">
<img
:src="item.cover"
style="width:100%;height:100%;object-fit:cover;"
alt=""
>
</div>
</el-col>
<el-col
:span="16"
class="listContent"
>
<div class="list-title">
{{ item.captionName }}<span class="deailTitle">[详细]</span>
</div>
</el-col>
</el-row>
</li>
</ul>
</div>
<div class="news-item">
<div class="contentTitle">
<ul>
<li
v-for="item in corporateGovernance.actionTwo"
:key="item.id"
class="itemDisc"
@click="() => $router.push('/investor/detail/' + item.id)"
>
{{ item.captionName }}
</li>
</ul>
</div>
</div>
<div class="news-item">
<div class="contentThree">
<ul>
<li
v-for="(item, index) in corporateGovernance.actionThree"
:key="item.id"
class="itemNomal"
@click="() => $router.push('/investor/detail/' + item.id)"
>
<template v-if="index == 0">
<div class="imgList">
<img
:src="item.cover"
style="width:100%;height:100%;object-fit:cover;"
alt=""
>
<div class="imgMask">
{{ item.captionName }}
</div>
</div>
</template>
<template v-else>
{{ item.captionName }}
</template>
</li>
</ul>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane
label="投资者关系"
name="third"
>
<div class="news-wrapper">
<div class="news-item">
<ul>
<li
v-for="item in investorRelations.actionOne"
:key="item.id"
@click="() => $router.push('/investor/detail/' + item.id)"
>
<el-row class="itemRow">
<el-col
:span="8"
class="imgCol"
>
<div class="list-img">
<img
:src="item.cover"
style="width:100%;height:100%;object-fit:cover;"
alt=""
>
</div>
</el-col>
<el-col
:span="16"
class="listContent"
>
<div class="list-title">
{{ item.captionName }}<span class="deailTitle">[详细]</span>
</div>
</el-col>
</el-row>
</li>
</ul>
</div>
<div class="news-item">
<div class="contentTitle">
<ul>
<li
v-for="item in investorRelations.actionTwo"
:key="item.id"
class="itemDisc"
@click="() => $router.push('/investor/detail/' + item.id)"
>
{{ item.captionName }}
</li>
</ul>
</div>
</div>
<div class="news-item">
<div class="contentThree">
<ul>
<li
v-for="(item, index) in investorRelations.actionThree"
:key="item.id"
class="itemNomal"
@click="() => $router.push('/investor/detail/' + item.id)"
>
<template v-if="index == 0">
<div class="imgList">
<img
:src="item.cover"
style="width:100%;height:100%;object-fit:cover;"
alt=""
>
<div class="imgMask">
{{ item.captionName }}
</div>
</div>
</template>
<template v-else>
{{ item.captionName }}
</template>
</li>
</ul>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<FootBar theme="dark"></FootBar>
</div>
@ -37,6 +283,22 @@ export default {
titleChinese: '',
},
},
activeName: 'first',
investorNews: {
actionOne: [],
actionTwo: [],
actionThree: [],
},
corporateGovernance: {
actionOne: [],
actionTwo: [],
actionThree: [],
},
investorRelations: {
actionOne: [],
actionTwo: [],
actionThree: [],
},
tempImg: '/static/img/tempNews.png',
};
},
@ -48,6 +310,9 @@ export default {
created () {
this.$event.$emit('nav-theme', 'light');
this.getScreen1Banner();
this.getInvestorNewsData();
this.getCorporateGovernanceData();
this.getInvestorRelationsData();
},
mounted () {
if (this.$route.hash) {
@ -68,6 +333,36 @@ export default {
this.screen1.imageurl = res.rows[0].imageurl;
} catch (error) {}
},
handleChosePane (tab, event) {
this.activeName = tab.name;
},
// 获取投资者新闻
async getInvestorNewsData () {
try {
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 22, type: '4' } });
this.investorNews.actionOne = res.rows.slice(0, 4);
this.investorNews.actionTwo = res.rows.slice(4, 18);
this.investorNews.actionThree = res.rows.slice(18, 22);
} catch (error) {}
},
// 获取公司治理新闻
async getCorporateGovernanceData () {
try {
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 22, type: '5' } });
this.corporateGovernance.actionOne = res.rows.slice(0, 4);
this.corporateGovernance.actionTwo = res.rows.slice(4, 18);
this.corporateGovernance.actionThree = res.rows.slice(18, 22);
} catch (error) {}
},
// 获取投资者关系新闻
async getInvestorRelationsData () {
try {
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 22, type: '6' } });
this.investorRelations.actionOne = res.rows.slice(0, 4);
this.investorRelations.actionTwo = res.rows.slice(4, 18);
this.investorRelations.actionThree = res.rows.slice(18, 22);
} catch (error) {}
},
},
};
</script>
@ -78,7 +373,162 @@ export default {
}
.screen2 {
padding: 90rem 130rem;
padding: 90rem 120rem 60rem;
background: #FFFFFF;
}
/deep/.el-tabs__item {
padding: 0rem;
height: 56rem;
margin-bottom: 62rem;
box-sizing: border-box;
display: inline-block;
list-style: none;
font-weight: 500;
position: relative;
font-family: MicrosoftYaHei;
font-size: 28rem;
color: #808080;
line-height: 64rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
}
/deep/.el-tabs__nav-wrap::after {
background-color: transparent;
}
/deep/.el-tabs__active-bar {
background-color: transparent;
}
/deep/.el-tabs__item.is-active {
font-family: MicrosoftYaHeiSemibold;
font-size: 28rem;
color: #111111;
line-height: 64rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
border-bottom: 2rem solid #F0D145;;
}
/deep/.el-tabs--left .el-tabs__item.is-left {
text-align: left;
}
/deep/.el-tabs--left .el-tabs__header.is-left {
margin-right: 120rem;
}
.news-wrapper {
display: flex;
flex-wrap: wrap;
}
.news-item {
width: 432rem;
/* background-color: #864e4e; */
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 1;
}
.news-item:not(:nth-of-type(3n)) {
margin-right: calc((1416rem - 436rem * 3) / 2);
}
.news-item:hover {
z-index: 10;
}
.itemRow {
margin-bottom: 30rem;
}
.imgCol {
width: 162rem;
height: 122rem;
padding: 0rem;
}
.list-img {
width: 162rem;
height: 122rem;
}
.list-img img {
border-radius: 10rem;
}
.listContent {
width: calc(100% - 162rem);
padding: 13rem 15rem;
}
.list-title{
font-family: MicrosoftYaHei;
font-size: 16rem;
color: #777777;
line-height: 30rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
}
.deailTitle {
font-family: MicrosoftYaHei;
font-size: 16rem;
color: #0045A2;
line-height: 30rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
}
.itemDisc {
list-style-type: disc;
list-style-position:inside;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
.itemDisc::marker{
color: #F0D145;
}
.contentTitle{
font-family: MicrosoftYaHei;
font-size: 18rem;
color: #333333;
line-height: 40rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
}
.contentThree {
font-family: MicrosoftYaHei;
font-size: 16rem;
color: #777777;
line-height: 30rem;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
}
.itemNomal {
margin-bottom: 30rem;
}
.imgList {
width: 432rem;
height: 246rem;
position: relative;
}
.imgMask{
position: absolute;
bottom: 0rem;
width: 370rem;
height: 46rem;
background: #000000;
border-radius: 0rem 0rem 10rem 10rem;
opacity: 0.7;
font-family: MicrosoftYaHei;
font-size: 20rem;
color: #FFFFFF;
line-height: 40rem;
text-align: center;
font-style: normal;
text-transform: none;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
padding: 0 30rem;
}
.imgList img {
border-radius: 10rem;
}
</style>

258
src/views/Invest/Investor/NewsDetail.vue Normal file
View File

@ -0,0 +1,258 @@
<template>
<div class="page-news-detail">
<div style="height:104rem;"></div>
<div class="screen1">
<img
:src="screen1.bannerUrl"
alt=""
style="width:100%;"
/>
</div>
<div class="screen2">
<div class="wrapper1400">
<div class="news-title">
{{ newsDetail.captionName }}
</div>
<div class="news-info">
<span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
<span>{{ newsDetail.groupName }}</span>
</div>
<div
class="news-content ql-editor"
v-html="newsDetail.newsContent"
>
</div>
</div>
</div>
<!-- <div class="screen3">
<div class="wrapper1400">
<div class="title">
更多推荐
</div>
<div class="news-wrapper">
<div
v-for="item in recommendData"
:key="item.id"
class="news-item"
@click="() => $router.push('/newsTrend/detail/' + item.id)"
>
<div class="news-cover">
<img
:src="item.cover"
alt=""
style="width:100%;height:100%;object-fit:cover;"
>
</div>
<div class="news-info">
<div class="title">
{{ item.captionName }}
</div>
<div class="abstracts">
{{ item.abstracts }}
</div>
<div class="date">
{{ item.releaseTime.slice(0, 10) }}
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script>
export default {
data () {
return {
screen1: {
bannerUrl: '',
},
currentNewsId: '',
prevNewsId: '',
nextNewsId: '',
newsDetail: {
releaseTime: '',
},
};
},
computed: {
currentId () {
return this.$route.params.newsId;
},
recommendData () {
return [].concat(
this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
[this.newsDetail],
this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
);
},
},
watch: {
currentId: {
handler (v) {
document.getElementById('app').scrollTop = 0;
this.getNewsDetail(v);
},
immediate: true,
},
},
created () {
this.$event.$emit('nav-theme', 'light');
this.getScreen1Banner();
},
methods: {
async getScreen1Banner () {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/投资者/详情banner' } },
);
this.screen1.bannerUrl = res.rows[0].imageurl;
} catch (error) {}
},
async getNewsDetail (currentNewsId) {
try {
const res = await this.$request.get('/official/slideshow/' + currentNewsId);
this.newsDetail = res.data;
this.prevNewsId = res.data.slideshowMap.previous?.id || '';
this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
} catch (error) {}
},
},
};
</script>
<style scoped>
.page-news-detail{
width: 100%;
overflow-x: hidden;
}
.screen1 {
min-height: 600rem;
}
.screen2 {
background-color: #ffffff;
padding-top: 135rem;
padding-bottom: 90rem;
}
.screen2 .news-title {
text-align: center;
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 30rem;
color: #111111;
line-height: 36rem;
}
.screen2 .news-info {
height: 58rem;
padding-top: 50rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rem solid #999999;
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 16rem;
color: #999999;
line-height: 36rem;
}
.screen2 .news-content {
font-family: MicrosoftYaHeiLight;
font-weight: 400;
font-size: 18rem;
color: #111111;
line-height: 36rem;
margin-top: 30rem;
}
.screen2 .news-content >>> p {
margin-bottom: 10rem;
}
.screen3 {
height: auto;
display: flex;
padding: 10rem;
background-color: #f5f5f5;
}
.screen3 .title {
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 24rem;
line-height: 88rem;
color: #141414;
}
.screen3 .news-wrapper {
display: flex;
flex-wrap: wrap;
}
.screen3 .news-item {
width: 430rem;
height: 505rem;
border-radius: 10rem;
background-color: #ffffff;
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
overflow: hidden;
margin-bottom: 60rem;
cursor: pointer;
position: relative;
z-index: 1;
}
.screen3 .news-item:not(:nth-of-type(3n)) {
margin-right: calc((1400rem - 430rem * 3) / 2);
}
.screen3 .news-item:hover {
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
z-index: 10;
}
.screen3 .news-cover {
width: 510rem;
height: 302rem;
overflow: hidden;
}
.screen3 .news-cover img {
transition: transform 0.4s;
width: 100%;
}
.screen3 .news-cover:hover img {
transform: scale(1.1, 1.1);
}
.screen3 .news-info {
padding: 55rem 35rem 0;
}
.screen3 .news-info .title {
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 16rem;
line-height: 16rem;
color: #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 16rem;
}
.screen3 .news-info .abstracts {
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 12rem;
line-height: 14rem;
color: #666666;
margin-bottom: 20rem;
}
.screen3 .news-info .date {
font-family: MicrosoftYaHeiLight;
font-weight: 400;
font-size: 12rem;
line-height: 12rem;
color: #666666;
}
.ql-editor {
padding-left: 0;
padding-right: 0;
}
.news-content >>> .ql-align-center {
width: 100%;
}
.news-content >>> .ql-align-center img {
width: 100%!important;
}
</style>