This commit is contained in:
dong_bo0602 2021-09-06 18:23:42 +08:00
parent 4604ea3579
commit f25c7d5d2c
4 changed files with 53 additions and 21 deletions

View File

@ -1,4 +1,4 @@
.header{width:100%;height:550px;min-width:1200px;position:relative;background:url(../images/header-bg-2.png) no-repeat center;background-size:100% 100%}
.header{width:100%;height:550px;min-width:1200px;position:relative;background:url(../images/header-bg-2.png) no-repeat center;background-size:1920px 100%}
.date{overflow:hidden;width:1200px;margin:0 auto;height:40px;line-height:40px;font-size:12px;color:#000}
.date span{color:#b09158}
.day{float:left;}
@ -93,29 +93,45 @@
/*-------二级页面--------*/
.child-header{background:url(../images/child-header.jpg) no-repeat center;background-size:100% 100%}
.child-header{background:url(../images/child-header.jpg) no-repeat center;background-size:1920px 100%}
.child-header .date{color:#fff}
.page-container{width:1200px;margin:20px auto;box-shadow:0 0 10px #ddd;padding:15px;box-sizing:border-box}
.page-container{width:1200px;margin:20px auto;}
.page-container:after{content:'';display:block;clear:both}
.page-left{width:220px;padding-right:25px;box-sizing:border-box;float:left}
.page-left-title{padding-bottom:10px;border-bottom:1px solid #ddd;font-size:18px;color:#585858}
.page-left{padding: 65px 0 15px;background:url('../images/tab-bg.png') no-repeat center;background-size:100% 100%;width:220px;box-sizing:border-box;float:left}
.page-left-title{padding-bottom:20px;padding-left:25px;font-weight:bold;border-bottom:2px solid #fff;font-size:22px;color:#fff}
.page-left-tab{padding:0 15px;margin-top:10px}
.page-left-tab li{line-height:30px;padding-left:20px;position:relative;font-size:18px;color:#000;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-left-tab li.active{color:#bb1511}
.page-left-tab li:after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#000;position:absolute;top:50%;left:0;margin-top:-3px}
.page-left-tab li.active:after{background:#bb1511}
.page-right{float:right;width:950px;padding-left:20px;border-left:1px solid #ddd;box-sizing:border-box}
.page-right-title{padding-bottom:10px;border-bottom:1px solid #ddd;font-size:18px;color:#bb1511}
.page-left-tab li{line-height:30px;padding: 10px 0 10px 20px;border-bottom:1px solid #6FC2E9;position:relative;font-size:18px;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-left-tab li:last-child{border:none;}
.page-left-tab li.active{color:#FFF94F}
.page-left-tab li:after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#fff;position:absolute;top:50%;left:0;margin-top:-3px}
.page-left-tab li.active:after{background:#FFF94F}
.page-right{float:right;width:950px;padding-left:20px;}
.page-right-title{margin-bottom:40px;position:relative;font-size: 28px;color: #333;text-align: center}
.page-list>ul{min-height:500px}
.page-list>ul>li{height:45px;line-height:45px;font-size:18px}
.page-list>ul>li a{display:inline-block;max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#000}
.page-list>ul>li{overflow: hidden;padding: 20px 0;border-bottom: 1px solid #eee;font-weight: bold;margin-bottom: 20px;}
.page-list>ul>li a{margin-bottom:10px;font-size:22px;color:#333;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.page-list>ul>li p{font-weight:normal;color: #808080;font-size: 14px;line-height: 25px;}
.page-list>ul>li span{color: #D60000;display: block;margin-top: 10px;font-weight: normal;}
.page-list>ul>li a:hover{color:#bb1511}
.page-list>ul>li span{float:right;color:#666}
.pager{width:100%;margin:20px auto;text-align:center;font-size:0}
.pager span{display:inline-block;padding:0 15px;line-height:25px;color:#676767;border:1px solid #d2d2d2;font-size:18px;margin:0 5px;vertical-align:middle;cursor:pointer}
.pager ul{display:inline-block;overflow:hidden;vertical-align:middle}
.pager>ul>li{width:45px;line-height:25px;float:left;margin-right:10px;border:1px solid #d2d2d2;cursor:pointer;text-align:center;font-size:18px;color:#676767}
.pager>ul>li.active{background:#bb1511;color:#fff;border:1px solid #bb1511}
.loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.6);padding:30px;border-radius:10px;box-shadow:0 0 17px #dedede}
.page-right-full{width:100%;border:none}
.page-right-full{width:100%;border:none;padding-left: 0}
.location{width:1200px;margin:20px auto 0}
.page-right-title:before,.page-news-title:before{content: '';display: block;width:500px;height: 1px;background: #DCDCDC;position: absolute;top:50%;left:0;}
.page-right-title:after,.page-news-title:after{content: '';display: block;width:500px;height: 1px;background: #DCDCDC;position: absolute;top:50%;right:0;}
.news-date{width:90px;float:left;text-align: center;padding: 15px 0;border: 1px solid #e5e5e5;}
.news-date p{font-size: 16px;color: #7C8392}
.news-date span{font-size: 36px;color: #7C8392}
.news-right-info{float:right;width:1080px;}
.news-right-info a{font-size: 20px;font-weight: bold;color: #333;display: block;margin-bottom: 10px;}
.news-right-info p{font-size: 14px;color: #808080;line-height: 25px;}
.news-right-info a.link-btn{width: 110px;height: 34px;background: #D60000;border-radius: 2px;font-size: 14px;color: #fff;text-align: center;line-height: 34px;margin-bottom: 0;margin-top: 10px}
.news-right-info a.link-btn:hover{color: #fff}
.page-news-title{position:relative;font-size:28px;color: #333;font-weight:bold;width: 1200px;margin: 20px auto 40px;text-align: center;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -70,11 +70,15 @@
<span v-if="page.articleTypeId == '79da7965-1bff-4471-babe-7874474cb418'">学习园地</span>
</div>
<div class="page-news-title" v-if="page.articleTypeId == '04988903-8948-4645-9024-6c97f770c8d7'">党纪法规</div>
<div class="page-news-title" v-if="page.articleTypeId == '68167be6-3dbd-49d3-a956-d07e3e4384e5'">警示教育</div>
<div class="page-news-title" v-if="page.articleTypeId == '79da7965-1bff-4471-babe-7874474cb418'">学习园地</div>
<div class="page-container">
<div class="page-left">
<div class="page-left-title" v-if="page.articleTypeId == '04988903-8948-4645-9024-6c97f770c8d7'">党纪法规</div>
<div class="page-left-title" v-if="page.articleTypeId == '68167be6-3dbd-49d3-a956-d07e3e4384e5'">警示教育</div>
<div class="page-left-title" v-if="page.articleTypeId == '79da7965-1bff-4471-babe-7874474cb418'">学习园地</div>
<div class="page-left-title" v-if="page.articleTypeId == '04988903-8948-4645-9024-6c97f770c8d7'">党纪法规分类</div>
<div class="page-left-title" v-if="page.articleTypeId == '68167be6-3dbd-49d3-a956-d07e3e4384e5'">警示教育分类</div>
<div class="page-left-title" v-if="page.articleTypeId == '79da7965-1bff-4471-babe-7874474cb418'">学习园地分类</div>
<div class="page-left-tab">
<ul v-cloak>
<li v-for="tab in tabList" :class="{active: page.articleClassifyId == tab.dataId}" @click="changeTab(tab.dataId,tab.dataName)">{{tab.dataName}}</li>
@ -82,11 +86,11 @@
</div>
</div>
<div class="page-right" v-cloak>
<div class="page-right-title">{{pageTitle}}</div>
<div class="page-list" v-cloak>
<ul v-cloak>
<li v-for="news in newsList">
<a :href="'route/web/detail.html?contentId=' + news.articleContentId" :title="news.articleContentTitle">{{news.articleContentTitle}}</a>
<p>{{news.articleContentSubTitle}}</p>
<span>{{news.articleContentPublishTime}}</span>
</li>
</ul>

View File

@ -78,8 +78,15 @@
<div class="page-list" v-cloak>
<ul v-cloak>
<li v-for="news in newsList">
<div class="news-date">
<p>{{news.articleContentPublishTime}}</p>
<span style="margin:0">{{news.articleContentPublishDate}}</span>
</div>
<div class="news-right-info">
<a :href="'route/web/detail.html?contentId=' + news.articleContentId" :title="news.articleContentTitle">{{news.articleContentTitle}}</a>
<span>{{news.articleContentPublishTime}}</span>
<p>{{news.articleContentSubTitle}}</p>
<a :href="'route/web/detail.html?contentId=' + news.articleContentId" class="link-btn">查看详情</a>
</div>
</li>
</ul>
<div class="pager" v-if="page.totalPage > 1">
@ -154,6 +161,11 @@
var self = this
self.isLoading = true
top.restAjax.get(top.restAjax.path('api/articlecontent/listpage-publish', []), self.page, null, function(code, data) {
for (let i = 0; i < data.rows.length; i++) {
var splitResult = data.rows[i].articleContentPublishTime.split('-')
data.rows[i].articleContentPublishTime = splitResult[0] + '-' + splitResult[1]
data.rows[i]['articleContentPublishDate'] = splitResult[2]
}
console.log(data)
self.newsList = data.rows
self.page.page = data.page