Ver código fonte

修改详情页

version2.0
chutingting 4 anos atrás
pai
commit
b16f7a6c8a
5 arquivos alterados com 132 adições e 54 exclusões
  1. +1
    -0
      package.json
  2. +3
    -3
      public/index.html
  3. +104
    -23
      src/page/cultivate/particulars.vue
  4. +18
    -22
      src/page/home/home.vue
  5. +6
    -6
      src/router/index.js

+ 1
- 0
package.json Ver arquivo

@@ -13,6 +13,7 @@
"element-ui": "^2.13.2",
"moment": "^2.28.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},


+ 3
- 3
public/index.html Ver arquivo

@@ -4,10 +4,10 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="礼仪培训师资格证,线上礼仪培训班,礼仪培训网课,形象礼仪培训师在线考证" />
<meta name="description" content="瑜璟缘国际形象礼仪主营:礼仪培训,礼仪培训师,商务礼仪培训,社交礼仪培训,服务礼仪培训,企业礼仪培训,职场礼仪培训,礼仪培训班,政务礼仪培训的培训团队。电话:13121112777欢迎您来电咨询!" />
<!-- <meta name="keywords" content="武汉富茂链客科技有限公司" />
<meta name="description" content="武汉富茂链客科技有限公司" /> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>瑜璟缘国际形象礼仪,国际礼仪培训机构,企业培训机构,形象礼仪,形象礼仪培训师</title>
<title>武汉富茂链客科技有限公司</title>
<!-- <script>
var _hmt = _hmt || [];
(function() {


+ 104
- 23
src/page/cultivate/particulars.vue Ver arquivo

@@ -1,14 +1,45 @@
<template>
<div class="Box">
<!-- <div class="leftBox"> -->
<textTitle :text="textTop" />
<div>
<h1 class="title">{{data.title}}</h1>
<p >{{data.publishDate}}</p>
<div v-html="data.content"></div>
<div class="info">
<div class="info_img">
<img :src="data.mainPicRealPath" alt="">
</div>
<div class="info_list">
<p>标题:<span>{{data.title}}</span></p>
<p>日期:<span>{{data.publishDate}}</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>{{data.address}}</span></p>
</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> -->
<!-- <sidebar /> -->
<div class="detail_info">
<h1 class="title">信息详情</h1>
<div class="detail_img">
<el-carousel type="card" >
<el-carousel-item v-for="(item, index) in data.detailPicture" :key="index">
<img :src="item.url" alt="">
</el-carousel-item>
</el-carousel>
</div>
<div class="detail_ct" v-html="data.content"></div>
</div>
<el-dialog
title="联系方式"
:visible.sync="dialogVisible"
width="30%">
<h3>{{data.phone}}</h3>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
@@ -19,20 +50,27 @@ import { homeService } from "@/api"
export default {
components: {
textTitle,
sidebar,
sidebar
},
data() {
return {
textTop :"优秀案例",
ifjournalism: this.$route.params.ifjournalism ,//1 => 优秀案例 2 =>新闻详情 3 =>学员风采,
id: this.$route.params.id.split('.')[0], // 截取 .html之前数据
data: {}
data: {},
dialogVisible: false
}
},
methods: {
setPhone(num) {
if(num) {
return num.replace(num.substr(3,4), '*'.repeat(4));
}
},
getDetail() {
return homeService.getNewsDetail(this.id).then(res => {
res.publishDate = moment(res.publishDate).format("YYYY-MM-DD")
res.detailPicture = JSON.parse(res.detailPicture)
this.data = res
})
},
@@ -67,7 +105,7 @@ export default {
this.getTitle()
this.getDetail()
},
}
};
</script>
<style scoped lang="scss">
@@ -78,23 +116,66 @@ export default {
margin: 0 auto;
box-shadow: 0 0 10px #f3f3f3;
background: #fff;
.title {
padding: 10px 0;
font-size: 18px;
text-align: center;
.info {
margin: 20px 40px;
.info_img{
float: left;
img{
width: 300px;
}
}
.info_list{
float: left;
margin-left: 30px;
p{
line-height: 40px;
color: #444;
font-size: 14px;
span{
margin-left: 10px;
}
}
}
.info_right{
width: 320px;
float: right;
p{
line-height: 40px;
font-size: 14px;
color: #333;
a{
color: rgb(64, 158, 255);
}
}
}
}
p {
text-align: center;
padding: 10px;
.detail_info{
clear: both;
padding-top: 20px;
.title {
padding: 10px 0;
font-size: 18px;
border-bottom: 1px solid #efefef;
line-height: 40px;
padding: 10px;
}
.detail_img{
width: 80%;
margin: 10px auto;
.el-carousel__item{
background: none;
}
img{
width: 100%;
}
}
.detail_ct{
padding: 30px;
}
}
}
.Box >>> img{
width: 600px;
}
.particularsBox {
width: 90%;
margin: 0 5%;
height: 300px;
background-color: bisque;
}
</style>

+ 18
- 22
src/page/home/home.vue Ver arquivo

@@ -9,11 +9,11 @@
<div class="con_txt fr">
<div class="headline" @click="goparticulars(busOneData)">
<h6>{{busOneData.title}}</h6>
<p v-html="busOneData.content"></p>
<p v-html="removeImg(busOneData.content)"></p>
<!-- <a href="#">[详细]</a> -->
</div>
<ul class="list">
<li v-for="(bus, index) in busList" :key="index">
<li v-for="(bus, index) in busList.slice(0,5)" :key="index">
<a @click="goparticulars(bus)"> {{bus.title}} </a>
</li>
</ul>
@@ -24,7 +24,7 @@
<div class="life col">
<h1><span>生活服务</span><a @click="more(4)">MORE+</a></h1>
<ul class="list">
<li v-for="(item, index) in lifeList" :key="index">
<li v-for="(item, index) in lifeList.slice(0,8)" :key="index">
<a @click="goparticulars(item)"> {{item.title}} </a>
</li>
</ul>
@@ -75,7 +75,7 @@
<div class="col" v-for="(item, index) in cateList" :key="index">
<h1><span>{{item.title}}</span><a @click="more(item.type)">MORE+</a></h1>
<ul class="list">
<li v-for="(con, idx) in item.list" :key="idx">
<li v-for="(con, idx) in item.list.slice(0,6)" :key="idx">
<a @click="goparticulars(con)"> {{con.title}} </a>
</li>
</ul>
@@ -86,7 +86,7 @@
<div class="col">
<h1><span>生活服务</span><a @click="more(4)">MORE+</a></h1>
<div class="imgList">
<a v-for="(item, index) in lifeList" :key="index" @click="goparticulars(item)">
<a v-for="(item, index) in lifeList.slice(0,10)" :key="index" @click="goparticulars(item)">
<img :src="item.mainPicRealPath" alt="">
<span>{{item.title}}</span>
</a>
@@ -112,7 +112,6 @@ export default {
data() {
return {
slideList: [],
partnersList: [],
newsList: [],
busOneData: {},
busList: [],
@@ -162,22 +161,12 @@ export default {
this.slideList = res.list
})
},
/* 左侧合作伙伴 */
getPartnersList() {
let data = {
pageNum: 1,
pageSize: 5
}
homeService.getPartnersList(data).then(res => {
this.partnersList = res.list
})
},
/* 新闻列表 */
getNewsList() {
let data = {
// type: 1,
pageNum: 1,
pageSize: 10
pageSize: 90
}
homeService.getNewsList(data).then(res => {
res.list.forEach(ele => {
@@ -206,11 +195,14 @@ export default {
go(path) {
this.$router.push(`/${path}`);
},
removeImg(con) {
if(con) {
return con.replace(/<img.*?>/g ,'');
}
}
},
created() {
this.getSlideList()
this.getPartnersList()
this.getSlideList()
this.getNewsList()
}
};
@@ -288,13 +280,16 @@ export default {
.con_txt{
width: 352px;
ul{
height: 172px;
height: 158px;
overflow: hidden;
padding-top: 6px;
}
.headline{
border-bottom: 1px dashed #dadada;
padding-bottom: 10px;
padding-bottom: 15px;
cursor: pointer;
height: 80px;
overflow: hidden;
h6{
font-size: 16px;
font-weight: bold;
@@ -404,6 +399,7 @@ export default {
display: block;
color: #333;
margin-top: 20px;
max-width: 198px;
}
margin: 20px;
}


+ 6
- 6
src/router/index.js Ver arquivo

@@ -211,12 +211,12 @@ const router = new VueRouter({
router.beforeEach((to, from, next) => {
document.documentElement.scrollTop = 0
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
document.querySelector('meta[name="keywords"]').setAttribute('content', '礼仪培训师资格证,线上礼仪培训班,礼仪培训网课,形象礼仪培训师在线考证')
document.querySelector('meta[name="description"]').setAttribute('content', '瑜璟缘国际形象礼仪主营:礼仪培训,礼仪培训师,商务礼仪培训,社交礼仪培训,服务礼仪培训,企业礼仪培训,职场礼仪培训,礼仪培训班,政务礼仪培训的培训团队。电话:13121112777欢迎您来电咨询!')
head[0].appendChild(meta)
document.title = '瑜璟缘国际形象礼仪,国际礼仪培训机构,企业培训机构,形象礼仪,形象礼仪培训师'
// let head = document.getElementsByTagName('head');
// let meta = document.createElement('meta');
// document.querySelector('meta[name="keywords"]').setAttribute('content', '礼仪培训师资格证,线上礼仪培训班,礼仪培训网课,形象礼仪培训师在线考证')
// document.querySelector('meta[name="description"]').setAttribute('content', '瑜璟缘国际形象礼仪主营:礼仪培训,礼仪培训师,商务礼仪培训,社交礼仪培训,服务礼仪培训,企业礼仪培训,职场礼仪培训,礼仪培训班,政务礼仪培训的培训团队。电话:13121112777欢迎您来电咨询!')
// head[0].appendChild(meta)
document.title = '武汉富茂链客科技有限公司'
next()
})
export default router

Carregando…
Cancelar
Salvar