271 lines
6.9 KiB
Vue
271 lines
6.9 KiB
Vue
<template>
|
|
<div class="party_building_activities" v-bind:style="{backgroundImage:'url('+bgc+')'}">
|
|
<!--title-->
|
|
|
|
<div class="headline">
|
|
<div class="hr_div">
|
|
<div class="hr_line_left">
|
|
</div>
|
|
<div class="hr_dot_left">
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
{{ $t('message.party') }}
|
|
<!--党群工作-->
|
|
</div>
|
|
<div class="hr_div">
|
|
<div class="hr_line_right">
|
|
</div>
|
|
<div class="hr_dot_right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<el-row>-->
|
|
<!-- <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
|
|
<!-- <div class="grid-content"></div>-->
|
|
<!-- </el-col>-->
|
|
<!-- -->
|
|
<!-- <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
|
|
<!-- <div class="title">-->
|
|
<!-- <!– {{ $t('message.news_center') }}–>-->
|
|
<!-- 党群工作-->
|
|
<!-- </div>-->
|
|
<!-- <el-row>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <hr class="hr">-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <div class="divider_text">Party Building Activities</div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <hr class="hr">-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<!-- </el-col>-->
|
|
<!--</el-row>-->
|
|
<!--轮播图-->
|
|
|
|
<el-row>
|
|
<el-col :xs="1" :sm="1" hidden-md-only :lg="2" :xl="3">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="22" :md="24" :lg="20" :xl="18">
|
|
<SlideshowCard/>
|
|
</el-col>
|
|
</el-row>
|
|
<!--更多-->
|
|
|
|
|
|
<div class="headline">
|
|
<!-- <div style="background: #DA2D2D;color: #E6E6E6;" class="more">-->
|
|
<!-- {{ $t('message.more') }}-->
|
|
<!-- </div>-->
|
|
<!--<div class="more_img">-->
|
|
<!-- <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">-->
|
|
<!--</div>-->
|
|
<div class="hr_div">
|
|
<div class="hr_line_left">
|
|
</div>
|
|
<div class="hr_dot_left">
|
|
</div>
|
|
</div>
|
|
<div class="hr_text" style="color:#DA2D2D;">
|
|
{{ $t('message.party_education') }}
|
|
<!--党史教育-->
|
|
</div>
|
|
<div class="hr_div">
|
|
<div class="hr_line_right">
|
|
</div>
|
|
<div class="hr_dot_right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--党史教育内容-->
|
|
<el-row>
|
|
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
|
|
<div class="phe_row" v-for="(item,index) in listData" :key="index">
|
|
<el-row>
|
|
<el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
|
|
<div class="phe_img">
|
|
<img :src="item.imgurl" alt="">
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
|
|
<div class="phe_context" @click="getArticle(item)">
|
|
<div class="phe_context_title">{{ item.title }}</div>
|
|
<div class="phe_context_text" v-html="item.content">
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="22" :sm="22" :md="22" :lg="3" :xl="3">
|
|
<div class="phe_time">{{ getTime(item.publishTime) }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
<hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
|
|
</div>
|
|
</el-col>
|
|
</el-row> <!--更多-->
|
|
<el-row>
|
|
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
|
|
<div style="background: #DA2D2D;color: #E6E6E6;" class="more" @click="lookMore(listData[0])">
|
|
{{ $t('message.more') }}
|
|
</div>
|
|
<!-- <div class="more_img">-->
|
|
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
|
|
<!-- </div>-->
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SlideshowCard from '../components/slideshow_card'
|
|
import {getArticleList} from "@/api";
|
|
import {toArticle, lookMoreComment} from "@/utils/sist";
|
|
import {lookMoreFixedComment} from "../../../utils/sist";
|
|
|
|
export default {
|
|
name: "party_building_activities",
|
|
components: {
|
|
SlideshowCard
|
|
},
|
|
data() {
|
|
return {
|
|
width: document.documentElement.clientWidth > 992,
|
|
listData: [],
|
|
bgc: require("../../../assets/index/party_building_activities/sy_bj3.png")
|
|
}
|
|
},
|
|
created() {
|
|
this.getListData()
|
|
},
|
|
methods: {
|
|
getArticle(item) {
|
|
toArticle(item, this.width)
|
|
},
|
|
lookMore(item) {
|
|
// lookMoreComment(item,this.width)
|
|
lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width)
|
|
},
|
|
|
|
getListData() {
|
|
getArticleList({
|
|
type: "N6CfFGz2UWpQ9Uhk3uwiJAQ",
|
|
pageNum: 1,
|
|
pageSize: 6
|
|
}).then(res => {
|
|
this.listData = res.rows
|
|
})
|
|
},
|
|
getTime(date) {
|
|
let time = new Date(date);
|
|
let year = time.getFullYear();
|
|
let month = time.getMonth() + 1
|
|
let day = time.getDate();
|
|
return year + "-" + month + "-" + day;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.party_building_activities {
|
|
background-image: url("../../../assets/index/party_building_activities/sy_bj3.png");
|
|
padding-top: 4rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.headline {
|
|
|
|
.hr_line_left, .hr_line_right {
|
|
border-color: #DA2D2D !important;
|
|
}
|
|
|
|
.hr_dot_left, .hr_dot_right {
|
|
background-color: #DA2D2D !important;
|
|
}
|
|
|
|
.title {
|
|
background: #DA2D2D;
|
|
}
|
|
|
|
.divider_text {
|
|
color: #DA2D2D;
|
|
}
|
|
|
|
}
|
|
|
|
.hr {
|
|
border: .1rem solid #D13C3C;
|
|
}
|
|
|
|
.phe_row {
|
|
margin: 4rem 0;
|
|
}
|
|
|
|
.phe {
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
|
|
.phe_img {
|
|
img {
|
|
height: 10rem;
|
|
}
|
|
}
|
|
|
|
|
|
.phe_context {
|
|
.phe_context_title {
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
cursor: pointer;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: #161616;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.phe_context_title:hover {
|
|
color: #DA2D2D;
|
|
}
|
|
|
|
.phe_context_text {
|
|
margin-top: 0.8rem;
|
|
font-size: 1.6rem;
|
|
height: 6rem;
|
|
color: #565656;
|
|
letter-spacing: 1px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
|
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
-webkit-line-clamp: 3; //显示的行
|
|
span {
|
|
color: #565656 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.phe_time {
|
|
text-align: right;
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
color: #565656;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|