336 lines
8.5 KiB
Vue
336 lines
8.5 KiB
Vue
<template>
|
|
<section class="AppPartyHistoryEducation">
|
|
<div class="page">
|
|
<div class="title">
|
|
<div class="left">
|
|
<span class="tips"></span>党史上的今天
|
|
</div>
|
|
<div class="right" @click="handleGoto('./todayList')">
|
|
查看全部
|
|
<img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
|
|
</div>
|
|
</div>
|
|
<div class="header" v-for="(item, index) in todayList" :key="index"
|
|
@click="handleGoto(`./todayDetail?id=${item.id}`)">
|
|
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length">
|
|
<p class="text">{{ item.title }}</p>
|
|
<p class="time">{{ item.organizationName }} {{ item.publishDate || '' }}</p>
|
|
</div>
|
|
<AiEmpty v-if="todayList.length == 0"/>
|
|
<div class="line-bg"></div>
|
|
<div class="title">
|
|
<div class="left">
|
|
<span class="tips"></span>党史课堂
|
|
</div>
|
|
<div class="right" @click="handleGoto('./classroomList')">
|
|
查看全部
|
|
<img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
|
|
</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-item" v-for="(item, index) in classList" :key="index"
|
|
@click="handleGoto(`./videoDetail?id=${item.id}`)">
|
|
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length">
|
|
<p>{{ item.title }}</p>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="classList.length == 0"/>
|
|
<div class="line-bg"></div>
|
|
<div class="title">
|
|
<div class="left">
|
|
<span class="tips"></span>党史知识
|
|
</div>
|
|
<div class="right" @click="handleGoto('./knowledgeList?type=knowledge')">
|
|
查看全部
|
|
<img src="https://cdn.cunwuyun.cn/img/down.svg" class="right-icon">
|
|
</div>
|
|
</div>
|
|
<div class="new-list">
|
|
<div class="list-content">
|
|
<div class="bg-fff" v-for="(item, index) in knowledgeList" :key="index"
|
|
@click="handleGoto(`./todayDetail?type=know&id=${item.id}`)">
|
|
<div class="item">
|
|
<div class="info">
|
|
<p>{{ item.title }}</p>
|
|
<span>{{ item.organizationName }} {{ item.createDate }}</span>
|
|
</div>
|
|
<img :src="item.thumbUrl[0].url" alt="" v-if="item.thumbUrl && item.thumbUrl.length"/>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="knowledgeList.length == 0"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "AppPartyHistoryEducation",
|
|
appName: "党员学习",
|
|
computed: {
|
|
...mapState(["user", "token"]),
|
|
},
|
|
data() {
|
|
return {
|
|
todayList: [],
|
|
classList: [],
|
|
knowledgeList: []
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getTodayList()
|
|
this.getClassList()
|
|
this.getKnowledgeList()
|
|
},
|
|
methods: {
|
|
getTodayList() {
|
|
this.$http.post(`/app/apppartyeducation/list?style=2&size=1&status=1`).then((res) => {
|
|
if (res.code == 0) {
|
|
if (res.data && res.data.records) {
|
|
res.data.records.map((item) => {
|
|
if (item.thumbUrl) {
|
|
item.thumbUrl = JSON.parse(item.thumbUrl)
|
|
}
|
|
if (item.publishDate) {
|
|
item.publishDate = item.publishDate.substring(0, 10)
|
|
}
|
|
})
|
|
this.todayList = res.data.records
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getClassList() {
|
|
this.$http.post(`/app/apppartyclassroom/list?size=3&status=1`).then((res) => {
|
|
if (res.code == 0) {
|
|
if (res.data && res.data.records) {
|
|
res.data.records.map((item) => {
|
|
item.thumbUrl = JSON.parse(item.thumbUrl)
|
|
})
|
|
this.classList = res.data.records
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getKnowledgeList() {
|
|
this.$http.post(`/app/apppartyeducation/list?style=0&size=4&status=1`).then((res) => {
|
|
if (res.code == 0) {
|
|
if (res.data && res.data.records) {
|
|
res.data.records.map((item) => {
|
|
if (item.thumbUrl) {
|
|
item.thumbUrl = JSON.parse(item.thumbUrl)
|
|
}
|
|
if (item.createDate) {
|
|
item.createDate = item.createDate.substring(0, 10)
|
|
}
|
|
})
|
|
this.knowledgeList = res.data.records
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleGoto(url) {
|
|
uni.navigateTo({url});
|
|
},
|
|
toNewDetail(id) {
|
|
this.handleGoto(`/pages/party/partyHistory/detail?id=${id}`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "../../common/common.css";
|
|
|
|
.AppPartyHistoryEducation {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
background-color: #fff;
|
|
|
|
.title {
|
|
padding: 28px 16px 28px 28px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tips {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 32px;
|
|
background: #E02617;
|
|
vertical-align: middle;
|
|
margin-right: 18px;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
float: right;
|
|
vertical-align: middle;
|
|
transform: rotate(270deg);
|
|
padding: 0 8px 0 0;
|
|
}
|
|
|
|
.left {
|
|
font-size: 34px;
|
|
font-family: PingFang-SC-Heavy, PingFang-SC;
|
|
font-weight: 800;
|
|
color: #333;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.right {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
padding: 0 34px 40px 34px;
|
|
|
|
img {
|
|
width: 684px;
|
|
height: 252px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 48px;
|
|
word-break: break-all;
|
|
margin-bottom: 16px;
|
|
height: 96px;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
.line-bg {
|
|
width: 100%;
|
|
height: 12px;
|
|
background: #F2F2F2;
|
|
}
|
|
|
|
.tab-content {
|
|
padding: 0 0 40px 30px;
|
|
overflow-x: hidden;
|
|
height: 236px;
|
|
width: 800px;
|
|
|
|
.tab-item {
|
|
float: left;
|
|
width: 236px;
|
|
height: 236px;
|
|
background: #FFF;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
|
|
border-radius: 8px;
|
|
margin-right: 16px;
|
|
|
|
img {
|
|
width: 236px;
|
|
height: 160px;
|
|
}
|
|
|
|
p {
|
|
padding: 12px 8px 0;
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 36px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.new-list {
|
|
background-color: #fff;
|
|
|
|
.list-content {
|
|
.bg-fff {
|
|
padding: 0 30px;
|
|
border-top: 1px solid #ddd;
|
|
|
|
.item {
|
|
padding: 24px 0 32px 0;
|
|
border-bottom: 2px solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.info {
|
|
// width: 410px;
|
|
p {
|
|
// width: 410px;
|
|
font-size: 30px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 46px;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
margin-bottom: 52px;
|
|
}
|
|
|
|
span {
|
|
font-size: 24px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 224px;
|
|
height: 168px;
|
|
margin-left: 56px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view-more {
|
|
background-color: #fff;
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #c50000;
|
|
line-height: 40px;
|
|
padding: 30px 0 40px 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|