Skip to content

T
techbook
Commit 4b6a0b5c authored by zhangyanni's avatar zhangyanni
Browse files
Options

文章列表页面

parent 6b7fa7df
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 22 additions and 182 deletions
src/router.js
View file @ 4b6a0b5c
......@@ -93,7 +93,6 @@ const mineIndex = () => import('views/mobile/mine');//我的
const minePublished = () => import('views/mobile/published');//已发布
const subjectStage =()=> import("views/mobile/proFeedback/stagerouter");//某个阶段
const articleList = ()=> import("views/mobile/article/articlelist");//文章列表
const articleDetail = ()=> import("views/mobile/article/articledetail");//文章详情
const articleColletcion = ()=> import("views/mobile/collection/articleColl");//我的收藏（文章）
const mobileSearch = ()=> import("views/mobile/search/search");//搜索中转页面
Vue.use(Router)
......@@ -1153,7 +1152,7 @@ export default new Router({
path:"/articleList",
components:{
default:resolve => require(['views/mobile/article/list.vue'], resolve),
other:resolve=>require(['views/mobile/article/articledetail.vue'],resolve)
other:resolve=>require(['views/mobile/article/detail.vue'],resolve)
}
}
......@@ -1169,7 +1168,7 @@ export default new Router({
path:"/articleFlagList",
components:{
default:resolve => require(['views/mobile/article/list.vue'], resolve),
other:resolve=>require(['views/mobile/article/articledetail.vue'],resolve)
other:resolve=>require(['views/mobile/article/detail.vue'],resolve)
}
}
......@@ -1178,13 +1177,13 @@ export default new Router({
{
path:'/articleDetail',
name:"articleDetail",
component:articleDetail,
component:articleList,
children:[
{
name:"articleDetail",
path:"/articleDetail",
components:{
default:resolve => require(['views/mobile/article/articledetail.vue'], resolve),
default:resolve => require(['views/mobile/article/detail.vue'], resolve),
other:resolve=>require(['views/mobile/article/list.vue'],resolve)
}
}
......
src/views/mobile/article/api.js
View file @ 4b6a0b5c
import api from '../../../api/api';
import Qs from 'qs';
export default {
//获取文章列表
getArticleListAxios(params){
return api.fetchLoadingLogin("/business/content/selectContentList",params);
},
//获取频道列表
getChannelListAxios(){
return api.fetchLoadingLogin("/business/content/selectContentChannelList");
},
//获取分类文章列表
getArticleFlagListAxios(params){
return api.fetchLoadingLogin("/business/content/selectContentListByClassifyId",params);
}
},
//获取文章详情
getArticleDetailById(params,params1){
return api.fetchLogin('/business/content/selectContentById?contentId='+params+"&isAddBrowse="+params1);
},
}
\ No newline at end of file
src/views/mobile/article/articlelist.vue
View file @ 4b6a0b5c
<template>
<div>
<div class="overfolowWrapper">
<router-view v-if="isMobile==1"></router-view>
<router-view name="other" v-else></router-view>
</div>
......@@ -24,172 +24,5 @@
</script>
<style scoped lang="scss">
.activity_top {
padding: 0 .2rem;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: .28rem;
color: #1A1A1E;
/*width: auto;*/
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-overflow-scrolling: touch;
text-align: justify;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
border-bottom: 1px solid #E9EAF3;
/*margin-right: .5rem;*/
/*&::after {*/
/*width: auto;*/
/*content: "";*/
/*position: absolute;*/
/*bottom: 0;*/
/*left: 0;*/
/*right: 0;*/
/*border-bottom: 1px solid #E9EAF3;*/
/*-webkit-transform: scaleY(0.5);*/
/*transform: scaleY(0.5);*/
/*-webkit-transform-origin: 0 0;*/
/*transform-origin: 0 0;*/
/*}*/
> div {
font-size: .28rem;
color: #1A1A1E;
height: 100%;
padding: .35rem 0;
border-bottom-color: transparent;
> span {
padding: 0 .15rem;
}
&:last-child{
>span{
padding-right: .3rem;
}
}
}
i {
font-size: .3rem;
color: #aaa;
}
.activeChannel {
z-index: 10;
border-bottom: .04rem solid #5d78ff;
transition: border-bottom-color .2s;
span {
color: #5d78ff;
font-weight: bold;
transition: all .4s;
}
}
}
.content_data {
width: 95%;
height: calc(100vh - 2.3rem);
-webkit-overflow-scrolling: touch;
overflow: auto;
margin: 0 auto;
ul{
margin: 0;
}
li{
position: relative;
&:first-of-type{
padding-top: .4rem;
}
.rightInfo{
height:1.6rem;
}
&:last-of-type{
border-bottom: 1px solid #E8EAF3;
}
.itemButton{
font-size: .22rem;
display: flex;
align-items: center;
>span{
display: inline-block;
padding-right: .25rem;
color: #AAAAAA;
&:first-child{
color: #FF5D5D;
}
&:last-child{
background: #F8F8F8;
padding: .05rem .1rem;
max-width: 1.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.articleHasImg{
.itemButton{
position: absolute;
bottom: .3rem;
left: 0;
}
}
.articleNoImg,.articleHasImgList,.articleHasImgPoster{
.itemButton{
margin-top: .4rem;
}
}
.hasReadTitle{
color: #999999;
}
.articleHasImgList{
.imgList{
width: 100%;
display: flex;
justify-content: center;
padding-top: .3rem;
>div{
height: 1.6rem;
flex: 1;
margin: 0 .035rem;
background-repeat: no-repeat;
background-size: cover;
}
}
}
.articleHasImgPoster{
.imgPoster{
margin-top: .3rem;
height: 4rem;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
}
}
}
.more {
isplay: inline-block;
width: .3rem;
height: .7rem;
background-color: #fff;
opacity: .6;
position: absolute;
right: .2rem;
top: .42rem;
}
.bottomLine{
margin: .4rem 0;
color: #C8CBE0;
font-size: .24rem;
/*padding-bottom: 1.3rem;*/
text-align: center;
}
</style>
\ No newline at end of file
src/views/mobile/article/list.vue
View file @ 4b6a0b5c
......@@ -14,7 +14,7 @@
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" :bottom-all-loaded="allLoaded" ref="loadmore">
<div class="articleContent">
<ul>
<li @click.self="handleToDetail(item)" v-for="(item,index) in tableData" :key="item.contentId">
<li @click="handleToDetail(item)" v-for="(item,index) in tableData" :key="item.contentId">
<div v-if="item.isCover==0&&item.contentUrlList.length==0">
<div class="articleNoImg">
<div>
......@@ -25,12 +25,12 @@
<span :class="$route.query.id?'isOriginal':''" v-if="item.contentSourceType==0">原创</span>
<span class="readCount" v-if="item.contentBrowseStr!=0">{{item.contentBrowseStr}} 阅读</span>
<span class="publishDate" v-if="(item.codeList.indexOf('CT001')==-1||item.codeList.indexOf('CT001')!=-1&&index>2)||$route.query.id">{{item.publishDateStr}}</span>
<span class="flagTitle" @click.stop.prevent="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
<span class="flagTitle" @click.stop="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
</p>
</div>
</div>
<div v-if="item.isCover==0&&item.contentUrlList.length==1">
<div v-if="item.isCover==0&&item.contentUrlList.length>0&&item.contentUrlList.length<3">
<div class="articleHasImg">
<div class="leftInfo">
<div>
......@@ -41,7 +41,7 @@
<span :class="$route.query.id?'isOriginal':''" v-if="item.contentSourceType==0">原创</span>
<span class="readCount" v-if="item.contentBrowseStr!=0">{{item.contentBrowseStr}} 阅读</span>
<span class="publishDate" v-if="(item.codeList.indexOf('CT001')==-1||item.codeList.indexOf('CT001')!=-1&&index>2)||$route.query.id">{{item.publishDateStr}}</span>
<span class="flagTitle" @click="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
<span class="flagTitle" @click.stop="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
</p>
</div>
<!--<div class="rightInfo" :style="{backgroundImage:'url('+item.subjectBackground+')'}">-->
......@@ -52,7 +52,7 @@
</div>
</div>
</div>
<div v-if="item.isCover==0&&item.contentUrlList.length>1">
<div v-if="item.isCover==0&&item.contentUrlList.length>=3">
<div class="articleHasImgList">
<div class="articleTitle" :class="item.read?'hasReadTitle':''">{{item.contentTitle}}</div>
<div class="imgList">
......@@ -63,7 +63,7 @@
<span :class="$route.query.id?'isOriginal':''" v-if="item.contentSourceType==0">原创</span>
<span class="readCount" v-if="item.contentBrowseStr!=0">{{item.contentBrowseStr}} 阅读</span>
<span class="publishDate" v-if="(item.codeList.indexOf('CT001')==-1||item.codeList.indexOf('CT001')!=-1&&index>2)||$route.query.id">{{item.publishDateStr}}</span>
<span class="flagTitle" @click="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
<span class="flagTitle" @click.stop="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
</p>
</div>
</div>
......@@ -78,7 +78,7 @@
<span :class="$route.query.id?'isOriginal':''" v-if="item.contentSourceType==0">原创</span>
<span class="readCount" v-if="item.contentBrowseStr!=0">{{item.contentBrowseStr}} 阅读</span>
<span class="publishDate" v-if="(item.codeList.indexOf('CT001')==-1||item.codeList.indexOf('CT001')!=-1&&index>2)||$route.query.id">{{item.publishDateStr}}</span>
<span class="flagTitle" @click="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
<span class="flagTitle" @click.stop="handleToFlag(item)" v-if="item.classifyList&&item.classifyList.length>0">{{item.classifyList[0].classifyName}}</span>
</p>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment