<template>
|
<el-container>
|
<el-header>
|
<home-header ref="header"></home-header>
|
</el-header>
|
<el-container class="main-wrapper">
|
<div>
|
<backdrop1>
|
<div style="margin-top:200px;width: 1200px; margin: 200px auto;">
|
<span class="stock-title">企业公告</span>
|
<span class="stock-title-en">STOCK DETAILS</span>
|
</div>
|
</backdrop1>
|
</div>
|
<el-main>
|
<div class="fat">
|
<div
|
class="table-box"
|
:style="color == 'black-bg'?'margin-top: 50px;':'margin-top: 200px;'"
|
>
|
<div class="notice">
|
<div class="table-search">
|
<el-row type="flex" justify="end">
|
<el-col :span="24">
|
<div class="test">
|
<div class="detail">
|
<div class="detail-cont">
|
<div class="detail-title">
|
<h3>{{detailsCont.title}}</h3>
|
</div>
|
<div class="detail-explain">
|
<div>
|
<span class="iconfont icon-fabuxuqiu date-icon"></span>
|
<span>来源：{{detailsCont.sourceName}}</span>
|
</div>
|
<div>
|
<span class="iconfont icon-shijian date-icon"></span>
|
<!-- <span class="iconfont icon-shijian"></span> -->
|
<span>时间：{{detailsCont.showTime}}</span>
|
</div>
|
<div>
|
<!-- <span class="iconfont icon-redu"></span> -->
|
<span class="iconfont icon-redu redu"></span>
|
|
<span>热度：{{detailsCont.views}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="detail-box">
|
<div>{{detailsCont.content}}</div>
|
<div>{{detailsCont.description}}</div>
|
<div style="display:flex;align-items: center;flex-direction: column;">
|
<img :src="detailsCont.imgurl" />
|
</div>
|
</div>
|
</div>
|
|
<!-- <el-input v-model="form.stock" placeholder="请输入股票代码和股票" class="search-public"> -->
|
<!-- <el-button @click="getList" slot="append" icon="iconfont icon-search"></el-button> -->
|
<!-- </el-input> -->
|
<!-- <span @click="getList" class="iconfont icon-search search-stock"></span> -->
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
|
</el-main>
|
</el-container>
|
<!-- <newFooter></newFooter> -->
|
</el-container>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import backdrop1 from "@/components/backdrop1.vue";
|
import newFooter from "@/components/newFooter.vue";
|
import HomeHeader from "@/components/HeaderOrder";
|
import { mapState } from "vuex";
|
export default {
|
components: {
|
HomeHeader,
|
backdrop1,
|
newFooter,
|
},
|
mounted() {
|
this.selectDetails();
|
this.detailsCont();
|
},
|
computed:{
|
...mapState({
|
color:(state)=>state.systemColor
|
})
|
},
|
data() {
|
return {
|
detailsCont: {},
|
};
|
},
|
methods: {
|
// 时间转换
|
switchData(list, time) {
|
list.forEach((item) => {
|
var tempStr = item[time] + "";
|
var timestamp = tempStr.slice(0, tempStr.length - 3);
|
var newDate = new Date();
|
newDate.setTime(timestamp * 1000);
|
item[time] = newDate.toLocaleDateString();
|
});
|
},
|
async selectDetails() {
|
// 选择详情
|
var { id } = this.$route.query;
|
this.cutIndex = 2;
|
var data = await api.getNewsDetailList({
|
id,
|
});
|
if (data.status == 0) {
|
// this.optionalIndex = item.type;
|
// this.currIndex = -1;
|
this.detailsCont = data.data;
|
// var query = {
|
// pageNum: this.pageNum,
|
// pageSize: 15,
|
// type: item.type,
|
// };
|
// this.newType = item.type;
|
// this.newsList = await this.getNewsList(query);
|
// this.switchData(this.newsList, "showTime");
|
}
|
var data = await api.updateNewsViews({
|
id: item.id,
|
});
|
if (data.status == 0) {
|
}
|
},
|
},
|
};
|
</script>
|
|
|
<style lang="less" scoped>
|
.red-bg{
|
.fat{
|
width: 100%;
|
background-color: #e9e9e9;
|
position: relative;
|
top: -36px;
|
}
|
}
|
.black-bg {
|
|
.detail-explain{
|
color: #ccc;
|
}
|
.detail-box{
|
color: #ccc;
|
}
|
.el-main {
|
color: #fff !important;
|
background-color: rgb(4, 30, 46);
|
margin: 0;
|
}
|
.fat {
|
width: 103%;
|
background-color: #041e2e;
|
position: relative;
|
left: -2%;
|
overflow: hidden;
|
margin-top: 200px;
|
}
|
.table-box {
|
// margin-bottom: 100px;
|
// padding: 50px 0;
|
width: 1200px;
|
margin: 0 auto;
|
// box-shadow: inset 20px 20px 20px -10px #000;
|
background-image: radial-gradient(#15414d 5%, #103046, #103046);
|
color: #fff;
|
.page-box {
|
background: none;
|
}
|
.cont-list {
|
cursor: pointer;
|
margin-top: 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.circle {
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
border: 2px solid rgb(133, 133, 133);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
span {
|
color: rgb(193, 24, 21);
|
font-size: 13px;
|
}
|
}
|
.circleyes {
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
// border: 2px solid #;
|
border: 2px solid rgb(193, 24, 21);
|
background-color: rgb(193, 24, 21);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
span {
|
color: #fff;
|
font-size: 13px;
|
}
|
}
|
.left {
|
display: flex;
|
width: 100%;
|
.left-date {
|
width: 130px;
|
height: 80px;
|
border: 3px solid rgba(142, 142, 142, 0.24);
|
margin-right: 20px;
|
.left-tian {
|
margin-top: 5px;
|
font-size: 38px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #fff;
|
|
text-align: center;
|
margin-bottom: 8px;
|
}
|
.left-data {
|
text-align: center;
|
margin-top: 5px;
|
}
|
}
|
.left-dateyes {
|
width: 130px;
|
height: 80px;
|
background-color: rgb(193, 24, 21);
|
border: 3px solid rgba(193, 24, 21);
|
|
margin-right: 20px;
|
color: #fff;
|
.left-tian {
|
margin-top: 5px;
|
font-size: 38px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #fff;
|
text-align: center;
|
margin-bottom: 8px;
|
}
|
.left-data {
|
text-align: center;
|
margin-top: 5px;
|
}
|
}
|
.left-cont {
|
width: 80%;
|
h3 {
|
font-weight: bold;
|
}
|
p {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
line-height: 22px;
|
font-size: 12px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #fff;
|
|
line-height: 21px;
|
opacity: 0.7;
|
margin-top: 10px;
|
}
|
.browse {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #fff;
|
}
|
}
|
}
|
}
|
.notice {
|
padding: 0 30px 40px 40px;
|
}
|
.special {
|
display: flex;
|
// border: 1px solid #ccc;
|
background-color: rgba(32, 67, 90, 0.5);
|
.left {
|
padding: 20px 10px;
|
box-sizing: border-box;
|
width: 70%;
|
.more {
|
display: flex;
|
margin-top: 20px;
|
align-items: center;
|
.browse {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #fff;
|
|
line-height: 36px;
|
}
|
.more-cont {
|
background: #c11815;
|
width: 139px;
|
height: 34px;
|
border-radius: 5px;
|
cursor: pointer;
|
font-size: 13px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 36px;
|
text-align: center;
|
margin-right: 20px;
|
}
|
}
|
h3 {
|
font-weight: bold;
|
}
|
p {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
line-height: 22px;
|
font-size: 12px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #fff;
|
|
line-height: 28px;
|
opacity: 0.7;
|
}
|
}
|
.special-cont {
|
width: 300px;
|
height: 170px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.test {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
|
.new-btn {
|
width: 189px;
|
height: 46px;
|
border-radius: 23px;
|
text-align: center;
|
line-height: 46px;
|
background: #000000;
|
|
position: relative;
|
right: 20px;
|
cursor: pointer;
|
|
span {
|
width: 64px;
|
height: 16px;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 36px;
|
text-align: center;
|
}
|
}
|
.notice-btn {
|
width: 189px;
|
height: 46px;
|
background: #000000;
|
border-radius: 23px;
|
text-align: center;
|
line-height: 46px;
|
margin-left: 50px;
|
position: relative;
|
left: 20px;
|
cursor: pointer;
|
span {
|
display: inline-flex;
|
width: 64px;
|
height: 15px;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.currIndexTitle {
|
background: #c11815;
|
}
|
}
|
}
|
}
|
</style>
|
