Commit 0e1aa75a by 莫晓莉
parents 7aaf15a0 c3e9eaa1
...@@ -36,3 +36,13 @@ export function newsFromBoard(data) { ...@@ -36,3 +36,13 @@ export function newsFromBoard(data) {
method: 'post' method: 'post'
}) })
} }
// 文章详情
export function newsDetail(data) {
return request({
url: `websiteCluster/website/newsDetail`,
data,
method: 'post'
})
}
\ No newline at end of file
<template> <template>
<div > <div>
<el-row > <el-row>
<el-col :span="18" :offset="3"> <el-col :span="18" :offset="3">
<el-row class="mt-20" :gutter="20"> <el-row class="mt-20" :gutter="20">
<el-col :span="16"> <el-col :span="16">
<div class="zone-style"> <div class="zone-style">
<div style="min-height:76vh;"> <div style="min-height: 76vh">
<div style=""> <div style="">
<span>当前位置:</span> <span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right"> <el-breadcrumb
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> style="display: inline-block"
separator-class="el-icon-arrow-right"
>
<el-breadcrumb-item :to="{ path: '/' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item>活动管理</el-breadcrumb-item> <el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<!-- 文章内容 -->
<div>
<h2 style=" text-align: center;">{{article.subject}}</h2>
<div style="color: #999999; font-size: 12px;text-align:right">发布时间:{{article.newsTime.substring(0,10)}}</div>
<div v-html="article.content"></div>
</div>
</div> </div>
<!--下载附件--> <!--下载附件-->
<el-row class="mt-15" :gutter="20" style="border-top:1px solid #ccc;padding:35px 0;"> <el-row
<el-col > class="mt-15"
:gutter="20"
style="border-top: 1px solid #ccc; padding: 35px 0"
>
<el-col>
<el-row :gutter="40"> <el-row :gutter="40">
<el-col class="mb-10" :span="12"> <el-col class="mb-10" :span="12">
<div class="k-flex k-align-center"> <div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img> <img
<div class="file-name">namehghjsd结果来看和可管理回馈老顾客</div> class="mr-5 gong-icon"
style=""
src="../../assets/home/gonggao.png"
/>
<div class="file-name">
namehghjsd结果来看和可管理回馈老顾客
</div>
</div> </div>
</el-col> </el-col>
<el-col class="mb-10" :span="12"> <el-col class="mb-10" :span="12">
<div class="k-flex k-align-center"> <div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img> <img
<div class="file-name">namehghjsd结果来看和可管理回馈老顾客</div> class="mr-5 gong-icon"
style=""
src="../../assets/home/gonggao.png"
/>
<div class="file-name">
namehghjsd结果来看和可管理回馈老顾客
</div>
</div> </div>
</el-col> </el-col>
<el-col class="mb-10" :span="12"> <el-col class="mb-10" :span="12">
<div class="k-flex k-align-center"> <div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img> <img
<div class="file-name">namehghjsd结果来看和可管理回馈老顾客</div> class="mr-5 gong-icon"
style=""
src="../../assets/home/gonggao.png"
/>
<div class="file-name">
namehghjsd结果来看和可管理回馈老顾客
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -43,68 +75,98 @@ ...@@ -43,68 +75,98 @@
</el-row> </el-row>
<!--评论--> <!--评论-->
<el-row> <el-row>
<h5 style="text-align:center;">暂无评论</h5> <h5 style="text-align: center">暂无评论</h5>
<el-input type="textarea" :rows="10" placeholder="发表评论"></el-input> <el-input
<div style="text-align:center;font-size:14px;margin-top:15px;"> type="textarea"
您必须先的<span style="color:#D33237;">登录</span>才能发表评论 :rows="10"
placeholder="发表评论"
></el-input>
<div
style="text-align: center; font-size: 14px; margin-top: 15px"
>
您必须先的<span style="color: #d33237">登录</span>才能发表评论
</div> </div>
</el-row> </el-row>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="zone-style"> <div class="zone-style">
<div class="k-flex-between-center"> <div class="k-flex-between-center">
<div class="k-flex k-align-center"> <div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img> <img
class="mr-5 gong-icon"
style=""
src="../../assets/home/gonggao.png"
/>
<div>精彩回顾</div> <div>精彩回顾</div>
</div> </div>
<div style="font-size:12px;color: #999999;"> <div style="font-size: 12px; color: #999999">
<span>MORE></span> <span>MORE></span>
</div> </div>
</div> </div>
<div class="mt-10 mb-5 k-flex k-align-center"> <div class="mt-10 mb-5 k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img> <img
class="mr-5 gong-icon"
style=""
src="../../assets/home/gonggao.png"
/>
<div class="gonggao-text"> <div class="gonggao-text">
<span >教育整顿进行时</span> <span>教育整顿进行时</span>
<span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span> <span
>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span
>
</div> </div>
</div> </div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list"> <div
v-for="(item, index) in topList"
:key="index"
class="k-flex k-space-between top-list"
>
<div class="article-name"> <div class="article-name">
<span class="right-line"> <span class="right-line">
我为群众办实事 我为群众办实事
<span class="line-div"></span> <span class="line-div"></span>
</span> </span>
<span >{{item.name}}</span> <span>{{ item.name }}</span>
</div> </div>
<div>{{item.date}}</div> <div>{{ item.date }}</div>
</div> </div>
</div> </div>
<div class="mt-15 zone-style"> <div class="mt-15 zone-style">
<div class="mb-15 btns-switch"> <div class="mb-15 btns-switch">
<el-button @click.native="switchBtn(0)" :class="['btn-item',{'sanjiao':activeItem==0}]">本月阅读排行</el-button> <el-button
<el-button @click.native="switchBtn(1)" :class="['btn-item',{'sanjiao':activeItem==1}]">评论排行</el-button> @click.native="switchBtn(0)"
:class="['btn-item', { sanjiao: activeItem == 0 }]"
>本月阅读排行</el-button
>
<el-button
@click.native="switchBtn(1)"
:class="['btn-item', { sanjiao: activeItem == 1 }]"
>评论排行</el-button
>
</div> </div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list"> <div
v-for="(item, index) in topList"
:key="index"
class="k-flex k-space-between top-list"
>
<div class="article-name"> <div class="article-name">
<span class="num" style="">{{index+1}}</span> <span class="num" style="">{{ index + 1 }}</span>
<span class="right-line"> <span class="right-line">
我为群众办实事 我为群众办实事
<span class="line-div"></span> <span class="line-div"></span>
</span> </span>
<span >{{item.name}}</span> <span>{{ item.name }}</span>
</div> </div>
<!--<div>{{item.date}}</div>--> <!--<div>{{item.date}}</div>-->
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!--<el-row class="top-info" style=""> <!--<el-row class="top-info" style="">
<span class="fist-text" style=""></span> <span class="fist-text" style=""></span>
<span>作信息</span> <span>作信息</span>
...@@ -179,204 +241,218 @@ ...@@ -179,204 +241,218 @@
</div> </div>
</el-col> </el-col>
</el-row>--> </el-row>-->
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import {newsDetail} from "@/api/homePage.js"
export default { export default {
name: "show", name: "show",
data() { data() {
return { return {
activeItem:0, activeItem: 0,
topList:[ topList: [
{ {
name:'开展司法教助全集中发放活动尽量克服冠军费德勒冠军费德勒空军航空发货过来会考虑好看', name: "开展司法教助全集中发放活动尽量克服冠军费德勒冠军费德勒空军航空发货过来会考虑好看",
date:'09-23' date: "09-23",
}, },
{ {
name:'开展司法教助全集中发放活动', name: "开展司法教助全集中发放活动",
date:'09-23' date: "09-23",
}, },
{ {
name:'开展司法教助全集中发放活动', name: "开展司法教助全集中发放活动",
date:'09-23' date: "09-23",
}, },
{ {
name:'开展司法教助全集中发放活动', name: "开展司法教助全集中发放活动",
date:'09-23' date: "09-23",
}, },
{ {
name:'开展司法教助全集中发放活动', name: "开展司法教助全集中发放活动",
date:'09-23' date: "09-23",
}, },
{ {
name:'开展司法教助全集中发放活动', name: "开展司法教助全集中发放活动",
date:'09-23' date: "09-23",
}, },
{ {
name:'开展司法教助全集中发放活动', name: "开展司法教助全集中发放活动",
date:'09-23' date: "09-23",
}, },
], ],
tableData: [{ tableData: [
date: '2016-05-02 12:00:00', {
name: '24', date: "2016-05-02 12:00:00",
address: '【广西高院队...】广西高院队伍整顿简报' name: "24",
}, { address: "【广西高院队...】广西高院队伍整顿简报",
date: '2016-05-04 12:00:00', },
name: '45', {
address: '上海市普陀区金沙江路 1517 弄' date: "2016-05-04 12:00:00",
}, { name: "45",
date: '2016-05-01 12:00:00', address: "上海市普陀区金沙江路 1517 弄",
name: '67', },
address: '上海市普陀区金沙江路 1519 弄' {
}, { date: "2016-05-01 12:00:00",
date: '2016-05-03 12:00:00', name: "67",
name: '89', address: "上海市普陀区金沙江路 1519 弄",
address: '上海市普陀区金沙江路 1516 弄' },
}], {
date: "2016-05-03 12:00:00",
} name: "89",
address: "上海市普陀区金沙江路 1516 弄",
},
],
article:{},
};
},
created() {
var self = this;
self.getParams();
},
methods: {
getParams(){//接收函数
console.log(this.$router.history.current.query.newsId)
// this.msg = this.$router.history.current.query.name;
this.newsDetailFun(this.$router.history.current.query.newsId)
},
newsDetailFun(val){
newsDetail({newsId:val}).then(res=>{
this.article = res.data.newsDetail
})
}, },
created() { switchBtn(i) {
console.log("111===", i);
this.activeItem = i;
}, },
methods:{ },
switchBtn(i){ };
console.log('111===', i)
this.activeItem=i;
},
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 切换气泡按钮 // 切换气泡按钮
.btns-switch .btn-item{ .btns-switch .btn-item {
display:inline-block; display: inline-block;
text-align:center; text-align: center;
border: 1px solid #ff756d; border: 1px solid #ff756d;
border-radius: 5px; border-radius: 5px;
color:#ff756d; color: #ff756d;
} }
.btns-switch .sanjiao{ .btns-switch .sanjiao {
background:#D33237; background: #d33237;
color:#fff; color: #fff;
position:relative; position: relative;
} }
.sanjiao:after { .sanjiao:after {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid #D33237; border-top: 8px solid #d33237;
left:30px; left: 30px;
bottom: -8px; bottom: -8px;
content: ''; content: "";
} }
.zone-style{ .zone-style {
background-color:#fff; background-color: #fff;
padding:15px 15px; padding: 15px 15px;
border-radius:5px; border-radius: 5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05); box-shadow: -5px 0px 20px 5px rgba(0, 0, 0, 0.05);
} }
.top-list{ .top-list {
padding:5px 0; padding: 5px 0;
font-size:10px; font-size: 10px;
// color:#999999; // color:#999999;
color:black; color: black;
} }
.top-list .article-name{ .top-list .article-name {
width:85%; width: 85%;
white-space:nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
color:#999999; color: #999999;
} }
.file-name{ .file-name {
font-size:14px; font-size: 14px;
} }
.top-list:hover{ .top-list:hover {
color:red; color: red;
} }
.top-list:hover .article-name{ .top-list:hover .article-name {
color:red; color: red;
} }
.top-list .num{ .top-list .num {
// background:#D33237; // background:#D33237;
background:#CCCCCC; background: #cccccc;
color:#fff; color: #fff;
padding:0 5px; padding: 0 5px;
border-radius:2px; border-radius: 2px;
} }
.top-list:hover .num{ .top-list:hover .num {
background:#D33237; background: #d33237;
} }
.top-list .article-name .right-line{ .top-list .article-name .right-line {
padding-right:2px; padding-right: 2px;
// border-right:2px solid black; // border-right:2px solid black;
margin-right:5px; margin-right: 5px;
position:relative; position: relative;
color:black; color: black;
} }
.top-list:hover .right-line{ .top-list:hover .right-line {
color:red ; color: red;
} }
.line-div{ .line-div {
position:absolute; position: absolute;
right:0; right: 0;
top:0; top: 0;
height:30px; height: 30px;
width:2px; width: 2px;
background:black; background: black;
} }
// 公告 // 公告
.gong-icon{ .gong-icon {
width:13px; width: 13px;
height:13px; height: 13px;
} }
.gonggao-text{ .gonggao-text {
white-space:nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
color:#FF756D; color: #ff756d;
font-family: PingFang SC, PingFang SC-Medium; font-family: PingFang SC, PingFang SC-Medium;
font-size:13px; font-size: 13px;
} }
.top-info{ .top-info {
margin:15px 0; margin: 15px 0;
border-bottom:2px solid #34bab2; border-bottom: 2px solid #34bab2;
padding-bottom:15px; padding-bottom: 15px;
} }
.fist-text{ .fist-text {
display:inline-block; display: inline-block;
width:26px; width: 26px;
height:26px; height: 26px;
line-height:26px; line-height: 26px;
text-align:center; text-align: center;
font-size:15px; font-size: 15px;
color:#fff; color: #fff;
border-radius:50%; border-radius: 50%;
background:#1a3784; background: #1a3784;
margin-right:3px; margin-right: 3px;
} }
.list-container{ .list-container {
border:2px solid #34bab2; border: 2px solid #34bab2;
padding:15px 15px; padding: 15px 15px;
margin-top:40px; margin-top: 40px;
} }
.list-title{ .list-title {
border-bottom:1px dashed #ccc; border-bottom: 1px dashed #ccc;
line-height: 35px; line-height: 35px;
} }
// 列表start // 列表start
.type-list li{ .type-list li {
list-style-type: square; list-style-type: square;
// color: #0099ff; // color: #0099ff;
color: blue; color: blue;
...@@ -384,29 +460,27 @@ export default { ...@@ -384,29 +460,27 @@ export default {
line-height: 35px; line-height: 35px;
border-bottom: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
} }
.type-list li a{ .type-list li a {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
text-decoration:none; text-decoration: none;
} }
.type-list li:hover{ .type-list li:hover {
// color: #ff6900; // color: #ff6900;
color: red; color: red;
} }
.type-list li:hover a{ .type-list li:hover a {
// color: #ff6900 // color: #ff6900
color:red; color: red;
}
.type-list li:last-of-type {
border-bottom: none;
} }
.type-list li:last-of-type{border-bottom:none;}
// 列表end // 列表end
ul{ ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
padding-left: 15px; padding-left: 15px;
} }
</style> </style>
\ No newline at end of file
...@@ -42,12 +42,12 @@ ...@@ -42,12 +42,12 @@
<span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span> <span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span>
</div> </div>
</div> </div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list"> <div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list" @click="setParams(item)">
<div class="article-name"> <div class="article-name">
<span class="right-line">我为群众办实事</span> <span class="right-line">{{item.boardName}}</span>
<span >{{item.subject}}</span> <span >{{item.subject}}</span>
</div> </div>
<div>{{item.newsTime}}</div> <div>{{item.newsTime.substring(5,10)}}</div>
</div> </div>
</div> </div>
<!--今日头条结束--> <!--今日头条结束-->
...@@ -55,33 +55,19 @@ ...@@ -55,33 +55,19 @@
<div v-if="activeItem==1" class="mt-15"> <div v-if="activeItem==1" class="mt-15">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8" style=""> <el-col :span="8" style="">
<div class="work-tab-list"> <div class="work-tab-list" v-for="(item,index) in WorkButton" :key="index" >
<div class="tab-item"> <div class="tab-item" @click="informationSelection(item)">
&ensp;&ensp;&ensp;&ensp; {{item.boardName}}
</div>
<div class="tab-item">
桂高法通报
</div> </div>
<div class="tab-item">
最高人民法院简报
</div>
<div class="tab-item">
广西高院简报<br/>信息专报
</div>
<div class="tab-item">
广西高院队伍<br/>教育整顿简报和动态
</div>
<div class="tab-item">
最高人民法院队伍<br/>教育整顿工作简报
</div>
</div> </div>
</el-col > </el-col >
<el-col :span="16" style=""> <el-col :span="16" style="">
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between work-top-list"> <div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between work-top-list" @click="setParams(item)">
<div class="article-name" style=""> <div class="article-name" style="">
<span >{{item.subject}}</span> <span >{{item.subject}}</span>
</div> </div>
<div>{{item.newsTime}}</div> <div>{{item.newsTime.substring(5,10)}}</div>
</div> </div>
</el-col > </el-col >
</el-row> </el-row>
...@@ -364,7 +350,7 @@ ...@@ -364,7 +350,7 @@
</div> </div>
<el-row class="mt-10" :gutter="20"> <el-row class="mt-10" :gutter="20">
<el-col :span="7" style="background: #fafafa;padding:15px;"> <el-col :span="10" style="background: #fafafa;padding:15px;">
<div style="height:250px;overflow-y:auto;"> <div style="height:250px;overflow-y:auto;">
<div class="tree-search mb-15"> <div class="tree-search mb-15">
<el-input <el-input
...@@ -452,14 +438,16 @@ ...@@ -452,14 +438,16 @@
<!--结束--> <!--结束-->
</div> </div>
</el-col> </el-col>
<el-col :span="17"> <el-col :span="14">
<ul class="business-ul"> <ul class="business-ul">
<li v-for="(item,index) in tableData" :key="index"> <li v-for="(item,index) in tableData" :key="index" class="k-flex k-space-between " @click="setParams(item)" >
<div class="article-name">
<span></span> <span></span>
<span>过分过分的话</span> <span>{{item.boardName}}</span>
<span></span> <span></span>
<span>{{item.subject}}</span> <span>{{item.subject}}</span></div>
<div>
<span class="">{{item.newsTime.substring(5,10)}}</span></div>
</li> </li>
</ul> </ul>
</el-col> </el-col>
...@@ -1161,7 +1149,11 @@ export default { ...@@ -1161,7 +1149,11 @@ export default {
{name:'新疆'}, {name:'新疆'},
{name:'新疆兵团'}, {name:'新疆兵团'},
] ],
WorkButton:[{
boardName:'全部',
boardId:'',
}],
} }
...@@ -1169,10 +1161,34 @@ export default { ...@@ -1169,10 +1161,34 @@ export default {
created(){ created(){
this.getBoardTreeFun() this.getBoardTreeFun()
this.topListFun() this.topListFun()
this.initializationList()
}, },
methods: { methods: {
setParams(val){
this.$router.push({
path:'/detail',//跳转路由
query:{//参数对象
newsId:val.newsId
}
});
},
initializationList(){
newsFromBoard({boardId:'129',page:1,size:5}).then(res=>{
this.tableData = res.data.top.records
})
},
newsFromBoard(val){
newsFromBoard({boardId:val.boardId,page:1,size:5}).then(res=>{
this.topList = res.data.records
})
},
informationSelection(val){
console.log(val);
this.newsFromBoard(val)
},
topListFun(){ topListFun(){
topList({fyId:32}).then(res=>{ topList({fyId:32,page:1,size:5}).then(res=>{
this.topList = res.data.records this.topList = res.data.records
}) })
}, },
...@@ -1193,13 +1209,17 @@ export default { ...@@ -1193,13 +1209,17 @@ export default {
console.log('111===', i) console.log('111===', i)
this.activeItem=i; this.activeItem=i;
if (i==0) { if (i==0) {
topList({fyId:32}).then(res=>{ this.topListFun()
this.topList = res.data.records
})
}else{ }else{
getSubLevelBoard({boardId:32}).then(res=>{ getSubLevelBoard({boardId:1929,}).then(res=>{
this.WorkButton = [{ boardName:'全部'}]
res.data.forEach(item => {
this.WorkButton.push(item)
});
}) })
let val = {boardId:''}
this.newsFromBoard(val)
} }
}, },
switchBtnPolice(i){ switchBtnPolice(i){
...@@ -1209,7 +1229,9 @@ export default { ...@@ -1209,7 +1229,9 @@ export default {
searchEvent(){}, searchEvent(){},
handleNodeClick(data,node,obj){ handleNodeClick(data,node,obj){
console.log(data,node,obj); console.log(data,node,obj);
newsFromBoard({boardId:data.boardId}).then(res=>{
this.tableData = res.data.top.records
})
}, },
}, },
...@@ -1217,6 +1239,7 @@ export default { ...@@ -1217,6 +1239,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-col { .el-col {
border-radius: 4px; border-radius: 4px;
} }
...@@ -1418,6 +1441,7 @@ color:#fff; ...@@ -1418,6 +1441,7 @@ color:#fff;
.tab-item{ .tab-item{
// height:45px; // height:45px;
// line-height:45px; // line-height:45px;
margin: 10px 0;
padding:10px 0; padding:10px 0;
text-align:center; text-align:center;
background:#ccc; background:#ccc;
...@@ -1456,7 +1480,7 @@ cursor: pointer; ...@@ -1456,7 +1480,7 @@ cursor: pointer;
.business-ul{ .business-ul{
margin:0; margin:0;
margin-top:10px; margin-top:10px;
width:80%; width:100%;
// white-space:nowrap; // white-space:nowrap;
// overflow:hidden; // overflow:hidden;
// text-overflow:ellipsis; // text-overflow:ellipsis;
...@@ -1537,6 +1561,7 @@ padding:0; ...@@ -1537,6 +1561,7 @@ padding:0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-left: 1px dashed #6e6e6e; border-left: 1px dashed #6e6e6e;
} }
&-title { &-title {
width: 90%; width: 90%;
......
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