Skip to content

C
court-inner
Commit ecd0c97f by 李耀琨
Options

更新代码

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