You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
536 lines
19 KiB
536 lines
19 KiB
<template>
|
|
<!-- <div class="bg-bottom">
|
|
<div class="bg-top"> -->
|
|
<div style="background-color:#f5f5f5;padding-bottom:100px">
|
|
<div class="content-1180">
|
|
<div class="news-box pt-4 d-flex justify-space-between">
|
|
<!-- 集团新闻 -->
|
|
<div class="flex-1 mr-4 p-4 flex-column">
|
|
<div class="new-box-title d-flex justify-space-between">
|
|
<div class="d-flex align-start">
|
|
<div class="icon-red mr-1" style="margin-top: 10px;"></div>
|
|
<div style="font-size:22px;color: #333;font-weight:600;margin-top:3px;">集团新闻</div>
|
|
</div>
|
|
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0201', '')">更多></div>
|
|
</div>
|
|
<div class="new-box-content d-flex flex-column justify-space-between pt-4">
|
|
<div class="d-flex" v-for="newContent in groupNews" :key="newContent.introId">
|
|
<div class="content-date">
|
|
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
|
|
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
|
|
</div>
|
|
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0201', newContent.introId)">{{ newContent.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 省公司新闻 -->
|
|
<div class="flex-1 mr-4 p-4 flex-column">
|
|
<div class="new-box-title d-flex justify-space-between">
|
|
<div class="d-flex align-start">
|
|
<div class="icon-red mr-1" style="margin-top: 10px;"></div>
|
|
<div style="font-size:22px;color: #333;font-weight:600;margin-top:3px;">省公司新闻</div>
|
|
</div>
|
|
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0202', '')">更多></div>
|
|
</div>
|
|
<div class="new-box-content d-flex flex-column justify-space-between pt-4">
|
|
<div class="d-flex" v-for="newContent in provincialNews" :key="newContent.introId">
|
|
<div class="content-date">
|
|
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
|
|
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
|
|
</div>
|
|
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0202', newContent.introId)">{{ newContent.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 公司新闻 -->
|
|
<div class="flex-1 p-4 flex-column">
|
|
<div class="new-box-title d-flex justify-space-between">
|
|
<div class="d-flex align-start">
|
|
<div class="icon-red mr-1" style="margin-top: 10px;"></div>
|
|
<div style="font-size:22px;color: #333;font-weight:600;margin-top:3px;">公司新闻</div>
|
|
</div>
|
|
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0203', '')">更多></div>
|
|
</div>
|
|
<div class="new-box-content d-flex flex-column justify-space-between pt-4">
|
|
<div class="d-flex" v-for="newContent in companyNews" :key="newContent.introId">
|
|
<div class="content-date">
|
|
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
|
|
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
|
|
</div>
|
|
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0203', newContent.introId)">{{ newContent.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 十六字方针 -->
|
|
<div class="mt-4 policy">
|
|
<img src="@/assets/16fangzhen.png" alt="" />
|
|
<p>
|
|
<span class="mr-4">战略引领</span>
|
|
<span class="mr-4">人才驱动</span>
|
|
<span class="mr-4">求真务实</span>
|
|
<span>开拓创新</span>
|
|
</p>
|
|
</div>
|
|
<!-- 图片新闻 -->
|
|
<div class="news-img p-4 mt-4 d-flex flex-column">
|
|
<div class="new-box-title d-flex justify-space-between">
|
|
<div class="d-flex align-start">
|
|
<div class="icon-red mr-1" style="margin-top: 10px;"></div>
|
|
<div style="font-size:22px;color: #333;font-weight:600;margin-top:3px;">图片新闻</div>
|
|
</div>
|
|
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0204', '')">更多></div>
|
|
</div>
|
|
<!-- 轮播图 -->
|
|
<el-carousel :interval="4000" type="card" class="banner" indicator-position="none">
|
|
<el-carousel-item v-for="newContent in ImgNews1" :key="newContent.introId">
|
|
<div class="rotation-box">
|
|
<img :src="newContent.titleUrl" style="height: 340px;width: 100%" alt="" />
|
|
<div class="rotation-div one-text">
|
|
{{ newContent.title }}
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<!-- <div class="flex-1 flex-column justify-space-between mt-4">
|
|
<div class="flex-1">
|
|
<div class="flex-1 mr-4">
|
|
<a-carousel style="width: 650px" autoplay>
|
|
<div class="rotation-box" v-for="newContent in ImgNews1" :key="newContent.introId">
|
|
<img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
|
|
<div class="rotation-div one-text">
|
|
{{ newContent.title }}
|
|
</div>
|
|
</div>
|
|
</a-carousel>
|
|
</div>
|
|
<div class="news-img-content d-flex flex-column justify-space-between p-4">
|
|
<div class="d-flex" v-for="newContent in ImgNews1" :key="newContent.introId">
|
|
<div class="content-date">
|
|
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
|
|
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
|
|
</div>
|
|
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0201', newContent.introId)">{{ newContent.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 mt-4">
|
|
<div class="news-img-content d-flex flex-column justify-space-between p-4">
|
|
<div class="d-flex" v-for="newContent in ImgNews2" :key="newContent.introId">
|
|
<div class="content-date">
|
|
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
|
|
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
|
|
</div>
|
|
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0202', newContent.introId)">{{ newContent.title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 ml-4">
|
|
<a-carousel style="width: 650px" autoplay>
|
|
<div class="rotation-box" v-for="newContent in ImgNews2" :key="newContent.introId">
|
|
<img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
|
|
<div class="rotation-div one-text">
|
|
{{ newContent.title }}
|
|
</div>
|
|
</div>
|
|
</a-carousel>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 mt-4">
|
|
<div class="flex-1 mr-4">
|
|
<a-carousel style="width: 650px" autoplay>
|
|
<div class="rotation-box" v-for="newContent in ImgNews3" :key="newContent.introId">
|
|
<img :src="newContent.titleUrl" style="height: 369.5px;width: 100%" alt="" />
|
|
<div class="rotation-div one-text">
|
|
{{ newContent.title }}
|
|
</div>
|
|
</div>
|
|
</a-carousel>
|
|
</div>
|
|
<div class="news-img-content d-flex flex-column justify-space-between p-4">
|
|
<div class="d-flex" v-for="newContent in ImgNews3" :key="newContent.introId">
|
|
<div class="content-date">
|
|
<div class="content-date-day">{{ $moment(+newContent.publishTime).format('DD') }}</div>
|
|
<div class="content-date-year">{{ $moment(+newContent.publishTime).format('YYYY-MM') }}</div>
|
|
</div>
|
|
<div class="flex-1 new-box-content-jj" @click="openPage('news', '0203', newContent.introId)">{{ newContent.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- 专题报道 光荣榜 今天我出镜 -->
|
|
<div class="honor-box mt-4 d-flex justify-space-between">
|
|
<div class="flex-1 flex-column content-honor mr-4 p-4">
|
|
<div class="honor-title d-flex justify-space-between">
|
|
<div style="font-size:22px">
|
|
<img style="height:26px" src="@/assets/honor-title.png" alt="" />
|
|
专题报道
|
|
</div>
|
|
<div class="d-flex align-center" style="cursor: pointer;" @click="jumpPage('news', '0205')">
|
|
更多>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex-column justify-space-between pt-4">
|
|
<div v-for="item in specialList" :key="item.introId" class="d-flex justify-space-between">
|
|
<div class="one-text" style="cursor: pointer;" @click="jumpDetail('news', '0205', item.introId)">{{ item.title }}</div>
|
|
<div class="ml-4">{{ $moment(item.publishTime).format('MM/DD') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex-column content-honor mr-4 p-4">
|
|
<div class="honor-title d-flex justify-space-between">
|
|
<div style="font-size:22px">
|
|
<img style="height:26px" src="@/assets/honor-title.png" alt="" />
|
|
光荣榜
|
|
</div>
|
|
<div class="d-flex align-center" style="cursor: pointer;" @click="jumpPage('pile', '9902')">
|
|
更多>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex-column justify-space-between pt-4">
|
|
<div v-for="item in gloryList" :key="item.introId" class="d-flex justify-space-between">
|
|
<div class="one-text" style="cursor: pointer;" @click="jumpDetail('pile', '9902', item.introId)">{{ item.title }}</div>
|
|
<div class="ml-4">{{ $moment(item.publishTime).format('MM/DD') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex-column content-honor p-4">
|
|
<div class="honor-title d-flex justify-space-between">
|
|
<div style="font-size:22px">
|
|
<img style="height:26px" src="@/assets/honor-title.png" alt="" />
|
|
今天我出镜
|
|
</div>
|
|
<div class="d-flex align-center" style="cursor: pointer;" @click="jumpPage('pile', '9903')">
|
|
更多>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex-column justify-space-between pt-4">
|
|
<div v-for="item in exitList" :key="item.introId" class="d-flex justify-space-between">
|
|
<div class="one-text" style="cursor: pointer;" @click="jumpDetail('pile', '9903', item.introId)">{{ item.title }}</div>
|
|
<div class="ml-4">{{ $moment(item.publishTime).format('MM/DD') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 职工风采 -->
|
|
<div class="news-demeanor mt-4 p-4 d-flex flex-column">
|
|
<div class="new-box-title d-flex justify-space-between">
|
|
<div class="d-flex align-start">
|
|
<div class="icon-red mr-1" style="margin-top: 10px;"></div>
|
|
<div style="font-size:22px;color: #333;font-weight:600;margin-top:3px;">职工风采</div>
|
|
</div>
|
|
<div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0210', '')">更多></div>
|
|
</div>
|
|
<div class="mt-4" style="overflow: hidden;">
|
|
<div class="demeanor-content-box">
|
|
<div
|
|
class="demeanor-content mr-4"
|
|
v-for="item in sceneStyle"
|
|
:key="item.introId"
|
|
@click="openPage('news', '0210', item.introId)"
|
|
>
|
|
<img :src="item.titleUrl" style="height:260px;width:100%;cursor: pointer;" :title="item.title" />
|
|
<div class="one-text-1">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="demeanor-content mr-4"
|
|
v-for="item in sceneStyle"
|
|
:key="item.introId + '1'"
|
|
@click="openPage('news', '0210', item.introId)"
|
|
>
|
|
<img :src="item.titleUrl" style="height:260px;width:100%;cursor: pointer;" :title="item.title" />
|
|
<div class="one-text-1">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<BayWindow v-if="content && content.title" :content="content" @closeBay="closeBay" />
|
|
</div>
|
|
</div>
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|
|
<script>
|
|
import { mapActions } from 'vuex';
|
|
import BayWindow from '@/components/BayWindow/BayWindow.vue';
|
|
import { getBay } from 'config/api';
|
|
|
|
export default {
|
|
components: { BayWindow },
|
|
data() {
|
|
return {
|
|
groupNews: [],
|
|
companyNews: [],
|
|
provincialNews: [],
|
|
ImgNews1: [],
|
|
ImgNews2: [],
|
|
ImgNews3: [],
|
|
sceneStyle: [],
|
|
specialList: [], // 专题报道
|
|
gloryList: [], // 光荣榜
|
|
exitList: [], // 今天我出镜
|
|
content: {},
|
|
};
|
|
},
|
|
created() {
|
|
this.getData('0201', 'groupNews', '0');
|
|
this.getData('0202', 'provincialNews', '0');
|
|
this.getData('0203', 'companyNews', '0');
|
|
this.getData('0204', 'ImgNews1', '1');
|
|
this.getData('0202', 'ImgNews2', '1');
|
|
this.getData('0203', 'ImgNews3', '1');
|
|
this.getData('0210', 'sceneStyle', '1');
|
|
this.getData('0205', 'specialList', '0');
|
|
this.getData('9902', 'gloryList', '0');
|
|
this.getData('9903', 'exitList', '0');
|
|
this.getBayData();
|
|
},
|
|
methods: {
|
|
...mapActions('home', ['getContent']),
|
|
async getData(showPage, list, showType) {
|
|
try {
|
|
const param = {
|
|
showPage,
|
|
year: '',
|
|
showType,
|
|
pageNum: 1,
|
|
pageSize: 5,
|
|
};
|
|
const res = await this.getContent(param);
|
|
this[list] = res.list;
|
|
} catch (error) {
|
|
console.log('error: ', error);
|
|
}
|
|
},
|
|
// 打开文章详情
|
|
openPage(path, code, id) {
|
|
window.open(`${window.location.href}${path}?code=${code}&introId=${id}`);
|
|
},
|
|
// 获取飘窗详情
|
|
async getBayData() {
|
|
try {
|
|
const res = await getBay();
|
|
const { code, msg, data } = res.data;
|
|
if (code === 200) {
|
|
const obj = {
|
|
title: data.code,
|
|
content: JSON.parse(data.value),
|
|
contentValue: JSON.parse(data.value).source.split(''),
|
|
};
|
|
this.content = obj;
|
|
} else {
|
|
console.error(msg);
|
|
}
|
|
} catch (error) {}
|
|
},
|
|
// 关闭飘窗
|
|
closeBay() {
|
|
this.content = null;
|
|
},
|
|
// 跳转其它
|
|
jumpPage(url, code) {
|
|
// this.$router.push({
|
|
// path: url,
|
|
// query: { code },
|
|
// });
|
|
window.open(`${window.location.href}${url}?code=${code}`);
|
|
},
|
|
// 跳转文章详情
|
|
jumpDetail(url, code, introId) {
|
|
// this.$router.push({
|
|
// path: url,
|
|
// query: { code, introId },
|
|
// });
|
|
window.open(`${window.location.href}${url}?code=${code}&introId=${introId}`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.banner{
|
|
padding: 20px 0 15px;
|
|
}
|
|
.banner >>> .el-carousel__container{
|
|
height: 340px;
|
|
}
|
|
.banner >>> .el-carousel__item--card{
|
|
height: 340px;
|
|
/* width: 520px; */
|
|
}
|
|
.content-honor {
|
|
/* box-shadow: 0 0 10px 1px rgba(33, 79, 159, 0.15); */
|
|
flex: 1;
|
|
width: 340px;
|
|
background-color: #fff;
|
|
/* padding: 16px 0 0 0; */
|
|
}
|
|
.honor-box {
|
|
height: 320px;
|
|
/* background-color: #fff; */
|
|
}
|
|
.honor-title {
|
|
height: 46px;
|
|
border-bottom: 1px solid rgb(51, 51, 51);
|
|
}
|
|
.policy {
|
|
position: relative;
|
|
color: rgba(210, 15, 16, 0.85);
|
|
font-size: 50px;
|
|
}
|
|
.policy >>> p {
|
|
font-weight: bold;
|
|
height: 40px;
|
|
width: 850px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -425px;
|
|
top: 50%;
|
|
margin-top: -20px;
|
|
}
|
|
.demeanor-content-box {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
height: 308px;
|
|
animation: 20s move infinite linear;
|
|
}
|
|
.demeanor-content-box:hover {
|
|
animation-play-state: paused; /*动画暂停播放*/
|
|
}
|
|
@-webkit-keyframes move {
|
|
0% {
|
|
margin-left: 0;
|
|
}
|
|
100% {
|
|
margin-left: -1940px;
|
|
}
|
|
}
|
|
@keyframes move {
|
|
0% {
|
|
margin-left: 0;
|
|
}
|
|
100% {
|
|
margin-left: -1940px;
|
|
}
|
|
}
|
|
.one-text-1 {
|
|
width: 100%;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
color: rgb(51, 51, 51);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
transition: all 0.5s;
|
|
}
|
|
.one-text-1:hover {
|
|
color: #b61412;
|
|
}
|
|
.rotation-box {
|
|
position: relative;
|
|
/* width: 520px; */
|
|
height: 340px;
|
|
}
|
|
.rotation-div {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
background-color: #b61412;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
padding: 0 16px;
|
|
z-index: 10;
|
|
}
|
|
.banner .rotation-div {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
.demeanor-content {
|
|
display: inline-block;
|
|
width: 372px;
|
|
height: 100%;
|
|
}
|
|
.news-img-content {
|
|
width: 482px;
|
|
height: 100%;
|
|
background: rgb(245, 245, 245);
|
|
}
|
|
/deep/.ant-carousel .slick-dots li button {
|
|
height: 10px !important;
|
|
width: 10px !important;
|
|
border-radius: 50%;
|
|
}
|
|
.ant-carousel >>> .slick-slide {
|
|
text-align: center;
|
|
height: 369.5px;
|
|
/* line-height: 428px; */
|
|
overflow: hidden;
|
|
}
|
|
.new-box-content-jj {
|
|
font-size: 14px;
|
|
margin-left: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.content-date {
|
|
height: 56px;
|
|
width: 56px;
|
|
background-color: #b61412;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
}
|
|
.content-date-day {
|
|
height: 50%;
|
|
border-bottom: 1px solid #fff;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.content-date-year {
|
|
height: 50%;
|
|
font-size: 12px;
|
|
line-height: 28px;
|
|
text-align: center;
|
|
color: rgba(232, 232, 232, 0.8);
|
|
}
|
|
.new-box-content {
|
|
height: 100%;
|
|
}
|
|
.icon-red {
|
|
width: 4px;
|
|
height: 22px;
|
|
background: #b61412;
|
|
}
|
|
|
|
.new-box-title {
|
|
height: 46px;
|
|
width: 100%;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
.news-box {
|
|
height: 518px;
|
|
}
|
|
.news-box > div {
|
|
background-color: #fff;
|
|
}
|
|
.news-img {
|
|
/* height: 1240px; */
|
|
background-color: #fff;
|
|
}
|
|
.news-demeanor {
|
|
height: 402px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|
|
|