|
@@ -1,7 +1,34 @@ |
|
|
<template>
|
|
|
<template>
|
|
|
<div class="Box">
|
|
|
<div class="Box">
|
|
|
<textTitle :text="textTop" />
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
|
|
|
<div class="box_left">
|
|
|
|
|
|
<!-- <textTitle :text="textTop" /> -->
|
|
|
|
|
|
<div class="breadcrumb">
|
|
|
|
|
|
<span class="loc"><i class="el-icon-s-home"></i>当前位置:</span>
|
|
|
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
|
|
|
<el-breadcrumb-item>武汉富茂链客科技有限公司</el-breadcrumb-item>
|
|
|
|
|
|
<el-breadcrumb-item>{{textTop}}</el-breadcrumb-item>
|
|
|
|
|
|
</el-breadcrumb>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top_title">
|
|
|
|
|
|
<h6>{{data.title}}</h6>
|
|
|
|
|
|
<div class="des">
|
|
|
|
|
|
<div class="fl">
|
|
|
|
|
|
<span>{{data.publishDate}} 发布</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="fr">
|
|
|
|
|
|
<span @click="goLogin">举报</span>
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
<span @click="goLogin">修改</span>
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
<span @click="goLogin">删除</span>
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
<span @click="goLogin">收藏</span>
|
|
|
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
|
|
|
<span @click="goLogin">置顶</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info">
|
|
|
<el-card class="info_img">
|
|
|
<el-card class="info_img">
|
|
|
<img :src="data.mainPicRealPath" alt="">
|
|
|
<img :src="data.mainPicRealPath" alt="">
|
|
|
</el-card>
|
|
|
</el-card>
|
|
@@ -10,14 +37,21 @@ |
|
|
<p>日期:<span>{{data.publishDate}}</span></p>
|
|
|
<p>日期:<span>{{data.publishDate}}</span></p>
|
|
|
<p>姓名:<span>{{data.author}}</span></p>
|
|
|
<p>姓名:<span>{{data.author}}</span></p>
|
|
|
<p>电话:<span>{{setPhone(data.phone)}} </span> <el-button type="primary" size="mini" plain @click="dialogVisible = true">获取联系方式</el-button></p>
|
|
|
<p>电话:<span>{{setPhone(data.phone)}} </span> <el-button type="primary" size="mini" plain @click="dialogVisible = true">获取联系方式</el-button></p>
|
|
|
<p>地址:<span>{{data.address}}</span></p>
|
|
|
|
|
|
|
|
|
<p>地址:<span>{{data.address}}</span></p>
|
|
|
|
|
|
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<p>虚假信息,检举举报. <a href="http://service@iformall.com" target="_blank">service@iformall.com</a></p>
|
|
|
|
|
|
<p>如有违法违规行为,依法处理</p>
|
|
|
|
|
|
<p>提防诈骗,本站不提供线上线下交易。</p>
|
|
|
|
|
|
<p>商务合作,请联系 <a href="http://service@iformall.com" target="_blank">service@iformall.com</a></p>
|
|
|
|
|
|
<!-- <el-card class="info_right">
|
|
|
|
|
|
<p>虚假信息,检举举报. <a href="http://service@iformall.com" target="_blank">service@iformall.com</a></p>
|
|
|
|
|
|
<p>如有违法违规行为,依法处理</p>
|
|
|
|
|
|
<p>提防诈骗,本站不提供线上线下交易。</p>
|
|
|
|
|
|
<p>商务合作,请联系 <a href="http://service@iformall.com" target="_blank">service@iformall.com</a></p>
|
|
|
|
|
|
</el-card> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-card class="info_right">
|
|
|
|
|
|
<p>虚假信息,检举举报. <a href="http://service@iformall.com" target="_blank">service@iformall.com</a></p>
|
|
|
|
|
|
<p>如有违法违规行为,依法处理</p>
|
|
|
|
|
|
<p>提防诈骗,本站不提供线上线下交易。</p>
|
|
|
|
|
|
<p>商务合作,请联系 <a href="http://service@iformall.com" target="_blank">service@iformall.com</a></p>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="detail_info">
|
|
|
<div class="detail_info">
|
|
|
<h1 class="title">信息详情</h1>
|
|
|
<h1 class="title">信息详情</h1>
|
|
@@ -30,6 +64,37 @@ |
|
|
</div>
|
|
|
</div>
|
|
|
<div class="detail_ct" v-html="data.content"></div>
|
|
|
<div class="detail_ct" v-html="data.content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail_list">
|
|
|
|
|
|
<h1 class="title">您可能感兴趣</h1>
|
|
|
|
|
|
<div class="detailBox" v-for="(item, index) in list.slice(0,5)" :key="index" @click="goTop(item)">
|
|
|
|
|
|
<div class="imgBox">
|
|
|
|
|
|
<img class="img" :src="item.mainPicRealPath" />
|
|
|
|
|
|
<div class="text">
|
|
|
|
|
|
<h3>{{item.title}}</h3>
|
|
|
|
|
|
<p v-html="item.content"></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-card class="box_right">
|
|
|
|
|
|
<div class="author">
|
|
|
|
|
|
<img :src="authorImg" alt="">
|
|
|
|
|
|
<p>{{data.author}}</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-tabs v-model="activeName">
|
|
|
|
|
|
<el-tab-pane label="相关分类" name="first">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li v-for="(item, index) in cateList" :key="index" @click="goCateDetail(item.type)">{{item.title}}</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="detailBox" v-for="(item, index) in list" :key="index" @click="goTop(item)">
|
|
|
|
|
|
<h3>{{item.title}}</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
</el-card>
|
|
|
<el-dialog
|
|
|
<el-dialog
|
|
|
title="联系方式"
|
|
|
title="联系方式"
|
|
|
:visible.sync="dialogVisible"
|
|
|
:visible.sync="dialogVisible"
|
|
@@ -46,6 +111,7 @@ |
|
|
import textTitle from "@/components/headTail/textTitle";
|
|
|
import textTitle from "@/components/headTail/textTitle";
|
|
|
import sidebar from "@/components/sidebar/sidebar";
|
|
|
import sidebar from "@/components/sidebar/sidebar";
|
|
|
import moment from "moment"
|
|
|
import moment from "moment"
|
|
|
|
|
|
import authorImg from "@/assets/img/author.png"
|
|
|
import { homeService } from "@/api"
|
|
|
import { homeService } from "@/api"
|
|
|
export default {
|
|
|
export default {
|
|
|
components: {
|
|
|
components: {
|
|
@@ -58,8 +124,50 @@ export default { |
|
|
ifjournalism: this.$route.params.ifjournalism ,//1 => 优秀案例 2 =>新闻详情 3 =>学员风采,
|
|
|
ifjournalism: this.$route.params.ifjournalism ,//1 => 优秀案例 2 =>新闻详情 3 =>学员风采,
|
|
|
id: this.$route.params.id.split('.')[0], // 截取 .html之前数据
|
|
|
id: this.$route.params.id.split('.')[0], // 截取 .html之前数据
|
|
|
data: {},
|
|
|
data: {},
|
|
|
dialogVisible: false
|
|
|
|
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
|
activeName: 'first',
|
|
|
|
|
|
cateList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '生活服务',
|
|
|
|
|
|
type: 4
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '房屋租赁',
|
|
|
|
|
|
type: 5
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '宠物市场',
|
|
|
|
|
|
type: 6
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '餐饮美食',
|
|
|
|
|
|
type: 7
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '票务卡券',
|
|
|
|
|
|
type: 8
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '教育培训',
|
|
|
|
|
|
type: 9
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '企业招聘',
|
|
|
|
|
|
type: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '商务服务',
|
|
|
|
|
|
type: 11
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
list: [],
|
|
|
|
|
|
authorImg
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
$route() {
|
|
|
|
|
|
this.getDetail()
|
|
|
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
methods: {
|
|
|
setPhone(num) {
|
|
|
setPhone(num) {
|
|
@@ -70,10 +178,26 @@ export default { |
|
|
getDetail() {
|
|
|
getDetail() {
|
|
|
return homeService.getNewsDetail(this.id).then(res => {
|
|
|
return homeService.getNewsDetail(this.id).then(res => {
|
|
|
res.publishDate = moment(res.publishDate).format("YYYY-MM-DD")
|
|
|
res.publishDate = moment(res.publishDate).format("YYYY-MM-DD")
|
|
|
res.detailPicture = JSON.parse(res.detailPicture)
|
|
|
|
|
|
|
|
|
res.detailPicture = res.detailPicture ? JSON.parse(res.detailPicture) : []
|
|
|
this.data = res
|
|
|
this.data = res
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
|
|
|
/* 底部列表 */
|
|
|
|
|
|
getList() {
|
|
|
|
|
|
let d = {
|
|
|
|
|
|
type: this.ifjournalism ? this.ifjournalism : 1,
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
pageSize: 8
|
|
|
|
|
|
}
|
|
|
|
|
|
homeService.getNewsList(d).then(res => {
|
|
|
|
|
|
res.list.forEach(ele => {
|
|
|
|
|
|
ele.publishDate = moment(ele.publishDate).format("YYYY-MM-DD")
|
|
|
|
|
|
ele.content = ele.content.replace(/<img\b[^>]*>/, "");
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
this.list = res.list
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
getTitle() {
|
|
|
getTitle() {
|
|
|
switch(Number(this.ifjournalism)) {
|
|
|
switch(Number(this.ifjournalism)) {
|
|
|
case 1: this.textTop = '行业新闻'
|
|
|
case 1: this.textTop = '行业新闻'
|
|
@@ -99,12 +223,24 @@ export default { |
|
|
case 11: this.textTop = '商务服务'
|
|
|
case 11: this.textTop = '商务服务'
|
|
|
break;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
goCateDetail (type) {
|
|
|
|
|
|
this.$router.push({path: "/journalism",query:{tag: type}});
|
|
|
|
|
|
},
|
|
|
|
|
|
goLogin() {
|
|
|
|
|
|
this.$router.push({path: "/login"});
|
|
|
|
|
|
},
|
|
|
|
|
|
goTop(item) {
|
|
|
|
|
|
document.documentElement.scrollTop = 0
|
|
|
|
|
|
let detailId= item.id + ".html"
|
|
|
|
|
|
this.id = item.id
|
|
|
|
|
|
this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: this.ifjournalism}})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
async created() {
|
|
|
async created() {
|
|
|
this.getTitle()
|
|
|
this.getTitle()
|
|
|
this.getDetail()
|
|
|
this.getDetail()
|
|
|
|
|
|
|
|
|
|
|
|
this.getList()
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
</script>
|
|
|
</script>
|
|
@@ -112,14 +248,56 @@ export default { |
|
|
|
|
|
|
|
|
.Box {
|
|
|
.Box {
|
|
|
width: 1100px;
|
|
|
width: 1100px;
|
|
|
padding: 50px 40px;
|
|
|
|
|
|
|
|
|
padding: 36px 40px;
|
|
|
margin: 0 auto;
|
|
|
margin: 0 auto;
|
|
|
box-shadow: 0 0 10px #f3f3f3;
|
|
|
box-shadow: 0 0 10px #f3f3f3;
|
|
|
background: #fff;
|
|
|
background: #fff;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.breadcrumb{
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
.loc{
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
span{
|
|
|
|
|
|
i{
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
margin-right: 10px;;
|
|
|
|
|
|
color: #606266;
|
|
|
|
|
|
}
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: #606266;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.top_title {
|
|
|
|
|
|
border-bottom: 1px #e6e6e6 solid;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
h6{
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.des{
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
.fl{
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
span{
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.fr{
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
span{
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
.info {
|
|
|
.info {
|
|
|
margin: 20px 40px;
|
|
|
margin: 20px 40px;
|
|
|
.info_img{
|
|
|
.info_img{
|
|
|
float: left;
|
|
|
float: left;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
img{
|
|
|
img{
|
|
|
width: 300px;
|
|
|
width: 300px;
|
|
|
}
|
|
|
}
|
|
@@ -128,19 +306,22 @@ export default { |
|
|
float: left;
|
|
|
float: left;
|
|
|
margin-left: 40px;
|
|
|
margin-left: 40px;
|
|
|
p{
|
|
|
p{
|
|
|
line-height: 40px;
|
|
|
|
|
|
|
|
|
line-height: 26px;
|
|
|
color: #444;
|
|
|
color: #444;
|
|
|
font-size: 14px;
|
|
|
font-size: 14px;
|
|
|
span{
|
|
|
span{
|
|
|
margin-left: 10px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
a{
|
|
|
|
|
|
color: rgb(64, 158, 255);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.info_right{
|
|
|
.info_right{
|
|
|
width: 320px;
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
|
width: 322px;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
p{
|
|
|
p{
|
|
|
line-height: 40px;
|
|
|
|
|
|
|
|
|
line-height: 28px;
|
|
|
font-size: 14px;
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
color: #333;
|
|
|
a{
|
|
|
a{
|
|
@@ -173,9 +354,121 @@ export default { |
|
|
padding: 30px;
|
|
|
padding: 30px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail_list{
|
|
|
|
|
|
h1{
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
border-bottom: 1px solid #efefef;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.detailBox {
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
border-bottom: 1px #ddd dashed;
|
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
|
h3 {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
padding-bottom: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.imgBox {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
.img {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
width: 598px;
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
p {
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.time {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
span{
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.box_left{
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
width: 795px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box_right{
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
width: 300px;
|
|
|
|
|
|
// height: 300px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
.author{
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin: 20px;
|
|
|
|
|
|
img{
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
}
|
|
|
|
|
|
p{
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
ul {
|
|
|
|
|
|
li{
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 130px;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
li:before {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
width: 4px;
|
|
|
|
|
|
height: 4px;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #4F8EFF;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.detailBox{
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
border-bottom: 1px #ddd dashed;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
h3 {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.Box >>> img{
|
|
|
.Box >>> img{
|
|
|
width: 600px;
|
|
|
width: 600px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.Box .breadcrumb .el-breadcrumb{
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.Box .breadcrumb >>> .el-breadcrumb__inner{
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
</style> |
|
|
</style> |