Bläddra i källkod

修改首页

version2.0
chutingting 4 år sedan
förälder
incheckning
70d5a974a5
6 ändrade filer med 363 tillägg och 370 borttagningar
  1. +30
    -0
      src/components/headTail/head.vue
  2. +11
    -7
      src/components/headTail/tail.vue
  3. +23
    -6
      src/page/cultivate/particulars.vue
  4. +293
    -353
      src/page/home/home.vue
  5. +5
    -4
      src/page/journalism/journalism.vue
  6. +1
    -0
      src/router/index.js

+ 30
- 0
src/components/headTail/head.vue Visa fil

@@ -10,7 +10,11 @@
</p>
</div>
</div>
<div class="topImgBox">
<img src="../../assets/img/bg/bg.jpg" class="topImg" alt="">
<el-input placeholder="搜索" v-model="search" class="searchIpt" @keyup.enter.native="searchFn">
</el-input>
</div>
<div class="nav">
<el-dropdown>
<span class="title" @click="goRouter('/home')">
@@ -81,6 +85,7 @@ export default {
data() {
return {
activeIndex: "1",
search: ''
};
},
methods: {
@@ -91,6 +96,10 @@ export default {
if(url) {
this.$router.push(url);
}
},
searchFn() {
this.$router.push('/home')
this.search = ''
}
},
};
@@ -131,6 +140,16 @@ export default {
}
}
.topImgBox{
position: relative;
.searchIpt{
position: absolute;
right: 20%;
top: 5%;
width: 200px;
border: none;
}
}
.topImg{
width: 100%;
}
@@ -213,3 +232,14 @@ export default {
width: 100%;
}
</style>
<style lang="scss">
.searchIpt{
input{
border: none;
width: 150px;
height: 30px;
border-radius: 30px;
}
}
</style>

+ 11
- 7
src/components/headTail/tail.vue Visa fil

@@ -2,9 +2,11 @@
<div class="Box">
<div class="tailBox">
<div class="tail">
<p class="text">
© 2019 | International Business Image Etiquette Standards Evaluation..All rights reserved. 京ICP备20027204号
</p>
<p>平台监管措施</p>
<p>Copyright © 武汉壹玖之家网络科技有限公司 版权所有 鄂ICP备2021000773号-1</p>
<p>电话:16619913757 邮箱:502229673@qq.com</p>
<p>地址:武汉市黄陂区湖北省武汉市黄陂区天河街道天安道202号三层、四层</p>
<p>免责声明:本站信息均经过管理员审核,本站对信息的真实性负责。如有纠纷,请联系下方邮箱反馈,本站会介入处理,涉及违法犯罪行为移交第三方公安机关处理。</p>
</div>
</div>
</div>
@@ -15,14 +17,16 @@
width: 100%;
margin-top: 50px;
.tailBox {
width: 1000px;
height: 188px;
margin: 0 auto;
.tail {
display: flex;
justify-items: center;
align-items: center;
text-align: center;
.tail {
overflow: hidden;
margin: 0 auto;
p{
margin-top: 20px;
line-height: 30px;
}
}
}


+ 23
- 6
src/page/cultivate/particulars.vue Visa fil

@@ -49,12 +49,29 @@ export default {
this.ifjournalism = this.$route.params.ifjournalism
console.log(this.ifjournalism);
}
if (this.ifjournalism == 1) {
this.textTop= "优秀案例"
}else if(this.ifjournalism == 2){
this.textTop= "新闻资讯"
}else{
this.textTop= "学员风采"
switch(this.ifjournalism) {
case 1: this.textTop = '行业新闻'
break;
case 2: this.textTop = '企业培训优秀案例'
break;
case 3: this.textTop = '学员风采'
break;
case 4: this.textTop = '生活服务'
break;
case 5: this.textTop = '房屋租赁'
break;
case 6: this.textTop = '宠物市场'
break;
case 7: this.textTop = '餐饮美食'
break;
case 8: this.textTop = '票务卡券'
break;
case 9: this.textTop = '教育培训'
break;
case 10: this.textTop = '企业招聘'
break;
case 11: this.textTop = '商务服务'
break;
}
await this.getDetail()


+ 293
- 353
src/page/home/home.vue Visa fil

@@ -1,136 +1,96 @@
<template>
<div class="Box">
<slideshow :list="slideList" />
<div class="textBox">
<a href="javascript:void(0);" class="left_list">
<span>生活服务</span>
<span class="des">Life service</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>商品服务</span>
<span class="des">Business services</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>房屋租售</span>
<span class="des">Housing rental and sale</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>车辆相关</span>
<span class="des">Vehicle related</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>宠物市场</span>
<span class="des">Pet market</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>餐饮美食</span>
<span class="des">Food and beverage</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>名企招聘</span>
<span class="des">Recruitment of famous enterprises</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>教育培训</span>
<span class="des">Education and training</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>票务卡券</span>
<span class="des">Ticket card</span>
</a>
<!-- <div class="textLogo"></div>
<div class="headline">
<textTitle text="瑜璟缘国际文化礼仪介绍" />
<div class="article">
<div
class="text"
>&#160; 北京瑜璟缘国际文化发展有限公司是一所集形象管理培训(设计)、礼仪文化培训及策划运营管理为一体的专注于孕育及培养提升人才素养的专业培训机构。在全国拥有近200人的专业的签约礼仪咨询顾问和专家队伍,专注于为企业提供系统礼仪管理咨询与业务解决方案,为企业搭建高素质人才培养平台,为企业形象及人素养教育提升开辟有效途径,帮助企业完善礼仪文化建设,是国内多家企事业单位背后最有效的形象生产及教育培训基地。公司以“不学礼,无以立。”的宗旨,秉承“无问题,不培训”的运营理念,致力于打造新经济下交流分享、提升自我,创新升级,共享共赢生态圈的高端商业精英交流平台。专注于为企业家、创业者、企业高管提供创新升级的商业课程,高效落地的企业内训,垂直定向的主题沙龙,拓展视野的海外游学以及资源整合等培训咨询共享共赢服务解决方案。</div>
<img src="../../assets/img/home/textImg.png" />
<div class="row service">
<div class="bus col">
<h1><span>商务服务</span><a @click="more(11)">MORE+</a></h1>
<div class="bus_con">
<img :src="busOneData.mainPicRealPath" alt="" class="fl">
<div class="con_txt fr">
<div class="headline" @click="goparticulars(busOneData)">
<h6>{{busOneData.title}}</h6>
<p v-html="busOneData.content"></p>
<!-- <a href="#">[详细]</a> -->
</div>
<ul class="list">
<li v-for="(bus, index) in busList" :key="index">
<a @click="goparticulars(bus)"> {{bus.title}} </a>
</li>
</ul>
</div>
</div>
</div> -->
</div>
<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">
<a @click="goparticulars(item)"> {{item.title}} </a>
</li>
</ul>
</div>
</div>
<div class="advisoryBox">
<div class="left">
<a href="javascript:void(0);" class="left_list">
<div class="cls_list">
<a href="javascript:void(0);">
<span>生活服务</span>
<span class="des">Life service</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>商品服务</span>
<span class="des">Business services</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>房屋租售</span>
<a href="javascript:void(0);">
<span>房屋租赁</span>
<span class="des">Housing rental and sale</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>车辆相关</span>
<span class="des">Vehicle related</span>
</a>
<a href="javascript:void(0);" class="left_list">
<a href="javascript:void(0);">
<span>宠物市场</span>
<span class="des">Pet market</span>
</a>
<a href="javascript:void(0);" class="left_list">
<a href="javascript:void(0);">
<span>餐饮美食</span>
<span class="des">Food and beverage</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>名企招聘</span>
<span class="des">Recruitment of famous enterprises</span>
<a href="javascript:void(0);">
<span>票务卡券</span>
<span class="des">Ticket card</span>
</a>
<a href="javascript:void(0);" class="left_list">
<a href="javascript:void(0);">
<span>教育培训</span>
<span class="des">Education and training</span>
</a>
<a href="javascript:void(0);" class="left_list">
<span>票务卡券</span>
<span class="des">Ticket card</span>
<a href="javascript:void(0);">
<span>名企招聘</span>
<span class="des">Recruitment of famous enterprises</span>
</a>
<!-- <a
href="http://wpa.qq.com/msgrd?v=3&uin=30397378&site=qq&menu=yes"
target="view_window"
class="iconBox"
>
<div class="icon icon1"></div>
<div class="text">免费质询</div>
<a href="javascript:void(0);">
<span>商品服务</span>
<span class="des">Business services</span>
</a>
<div class="iconBox" @click="go('famousTeacher?tag=zj')">
<div class="iconLeft icon2"></div>
<div class="textLeft">授课名师</div>
</div>
<div class="iconBox" @click="go('course')">
<div class="icon icon3"></div>
<div class="text">热门课程</div>
</div>
<div class="iconBox" @click="go('excellent')">
<div class="iconLeft icon4"></div>
<div class="textLeft">企业培训优秀案例</div>
</div> -->
<div class="partnerBox">
<div class="title">合作伙伴</div>
<div class="partner" v-for="(item, index) in partnersList" :key="index">
<partnerBox :url="item.mainPicRealPath" :link="item.linkUrl" />
</div>
</div>
</div>
<div class="cate row">
<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">
<a @click="goparticulars(con)"> {{con.title}} </a>
</li>
</ul>
</div>
<div class="right">
<div class="journalismTitle">
<p>新闻中心</p>
<span @click="moreNews">MORE</span>
</div>
</div>
<div class="journalismBox" v-for="(item, index) in newsList" :key="index" @click="goparticulars(item)">
<img class="logo" :src="item.mainPicRealPath" alt />
<div class="journalismText">
<h3>{{item.title}}</h3>
<span class="journalismText-content" v-html="item.content"></span>
<div class="time">{{item.publishDate}} <span class="el-icon-view"> {{item.view}}</span></div>
</div>
<div class="row lifeSer">
<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)">
<img :src="item.mainPicRealPath" alt="">
<span>{{item.title}}</span>
</a>
</div>
<div class="attention">IBIE全球杂志</div>
<consult />
</div>
</div>
</div>
@@ -147,13 +107,48 @@ export default {
slideshow,
consult,
textTitle,
partnerBox,
partnerBox
},
data() {
return {
slideList: [],
partnersList: [],
newsList: []
newsList: [],
busOneData: {},
busList: [],
cateList: [
{
title: '房屋租赁',
type: 5,
list: []
},
{
title: '宠物市场',
type: 6,
list: []
},
{
title: '餐饮美食',
type: 7,
list: []
},
{
title: '票务卡券',
type: 8,
list: []
},
{
title: '教育培训',
type: 9,
list: []
},
{
title: '企业招聘',
type: 10,
list: []
}
],
lifeList: [], // 生活服务
};
},
methods: {
@@ -180,24 +175,33 @@ export default {
/* 新闻列表 */
getNewsList() {
let data = {
type: 1,
// type: 1,
pageNum: 1,
pageSize: 3
pageSize: 10
}
homeService.getNewsList(data).then(res => {
res.list.forEach(ele => {
ele.publishDate = moment(ele.publishDate).format("YYYY-MM-DD")
ele.content = ele.content.replace(/<img\b[^>]*>/, "");
if (ele.type == 4) { // 生活服务
this.lifeList.push(ele)
} else if (ele.type == 11) {
this.busList.push(ele)
this.busOneData = this.busList[0]
} else {
this.cateList.forEach(cate => {
if(ele.type == cate.type) {
cate.list.push(ele)
}
})
}
});
this.newsList = res.list
})
},
moreNews() {
this.$router.push('/journalism');
},
goparticulars(item) {
let detailId= item.id + ".html"
this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: 2}})
this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: item.type}})
},
more(tag) {
this.$router.push({path: "/journalism",query:{tag: tag}});
},
go(path) {
this.$router.push(`/${path}`);
@@ -206,6 +210,7 @@ export default {
created() {
this.getSlideList()
this.getPartnersList()
this.getNewsList()
}
};
@@ -216,261 +221,196 @@ export default {
width: 1200px;
margin: 0 auto;
overflow: hidden;
.textBox {
margin: 10px 0;
height: 286px;
border: 1px rgb(238, 238, 238) solid;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.left_list{
width: 30%;
height: 66px;
.fl {
float: left;
}
.fr {
float: right;
}
.row{
.col{
float: left;
background: rgba(75,161,107,0.9);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin: 10px;
border-radius: 6px;
span{
display: block;
line-height: 16px;
margin: 0 10px;
box-shadow: 0 0 10px #f3f3f3;
background: #fff;
a{
cursor: pointer;
}
}
ul.list{
li {
width: 288px;
overflow: hidden;
line-height: 22px;
padding: 4px 0;
height: 22px;
a{
color: #333;
}
a:hover{
color: #2979d0
}
}
.textLogo {
height: 70px;
width: 70px;
// background-color: cornsilk;
background-image: url("../../assets/img/home/angleTop.png");
top: 0;
left: 0;
position: absolute;
}
.headline {
color: #1e1f4c;
margin-left: 150px;
.article {
overflow: hidden;
.text {
float: left;
width: 700px;
font-size: 14px;
line-height: 25px;
}
h1{
height: 48px;
border-bottom: 1px solid #dfe2e7;
line-height: 48px;
font-weight: normal;
padding: 0 20px;
span{
float: left;
height: 47px;
line-height: 47px;
border-bottom: 2px solid #137ccd;
font-size: 16px;
font-weight: bold;
}
a{
float: right;
color: #137ccd;
font-style: italic;
font-size: 12px;
line-height: 48px;
transition: 0.3s;
}
}
.bus{
width: 780px;
height: 100%;
display: inline-block;
.bus_con {
padding: 20px;
img {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: cyan;
float: right;
margin-right: 50px;
width: 368px;
height: 238px;
}
.con_txt{
width: 352px;
ul{
height: 172px;
overflow: hidden;
}
.headline{
border-bottom: 1px dashed #dadada;
padding-bottom: 10px;
cursor: pointer;
h6{
font-size: 16px;
font-weight: bold;
line-height: 24px;
}
p{
line-height: 22px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
a{
color: #2979d0 !important;
}
}
}
}
}
}
.life{
width: 380px;
height: 100%;
overflow: hidden;
ul{
padding: 10px 20px;
}
}
}
.advisoryBox {
overflow: hidden;
.left {
float: left;
width: 26%;
border-top: 1px rgb(238, 238, 238) solid;
.left_list{
width: 250px;
height: 56px;
display: block;
background: rgba(75,161,107,0.9);
color: #fff;
.service{
height: 330px;
margin-bottom: 20px;
a{
cursor: pointer;
}
}
.cls_list{
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
// margin: 10px auto 0;
margin: 10px 0;
border-radius: 6px;
span{
display: block;
line-height: 16px;
}
}
.iconBox {
overflow: hidden;
margin: 10px 0;
position: relative;
height: 80px;
display: block;
color: #000;
cursor: pointer;
.icon {
width: 75px;
height: 75px;
background-color: #999999;
border-radius: 50%;
position: absolute;
left: 20px;
top: 5px;
}
.icon1 {
background-image: url("../../assets/img/home/icon-1.png");
background-repeat: no-repeat;
background-size: 30px;
background-position: center center;
}
.icon2 {
background-image: url("../../assets/img/home/icon-2.png");
background-repeat: no-repeat;
background-size: 30px;
background-position: center center;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
a{
width: 23%;
height: 66px;
display: block;
background: rgba(75,161,107,0.9);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin: 10px;
border-radius: 4px;
}
.icon3 {
background-image: url("../../assets/img/home/icon-3.png");
background-repeat: no-repeat;
background-size: 30px;
background-position: center center;
a:nth-of-type(odd){
background: rgba(75,161,107,0.9);
}
.icon4 {
background-image: url("../../assets/img/home/icon-4.png");
background-repeat: no-repeat;
background-size: 30px;
background-position: center center;
a:nth-of-type(even){
background: #CCA140;
}
.text {
width: 230px;
height: 45px;
background-color: #eeeeee;
border-radius: 50px;
line-height: 45px;
margin-top: 20px;
margin-left: 20px;
text-indent: 100px;
border: #cccccc 1px solid;
font-size: 14px;
}
.iconLeft {
width: 75px;
height: 75px;
background-color: #999999;
border-radius: 50%;
position: absolute;
left: 180px;
top: 5px;
}
.textLeft {
width: 230px;
height: 45px;
background-color: #eeeeee;
border-radius: 50px;
line-height: 45px;
margin-top: 20px;
margin-left: 20px;
text-indent: 40px;
border: #cccccc 1px solid;
font-size: 14px;
}
}
.partnerBox {
width: 80%;
overflow: hidden;
.title {
font-size: 14px;
background-color: #eee;
font-weight: bolder;
height: 40px;
text-indent: 50px;
line-height: 40px;
}
.partner{
width: 80%;
margin: 0 10%;
}
}
.cate{
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
.col{
width: 380px;
height: 268px;
margin: 10px;
overflow: hidden;
a{
cursor: pointer;
}
}
.right {
width: 70%;
float: right;
overflow: hidden;
.journalismTitle {
margin: 10px 0;
background-color: rgb(232, 232, 232);
overflow: hidden;
font-size: 14px;
p {
width: 200px;
height: 45px;
line-height: 45px;
text-indent: 30px;
float: left;
}
span {
height: 45px;
line-height: 45px;
text-indent: 30px;
float: right;
margin-right: 20px;
cursor: pointer;
.list {
padding: 10px 20px;
}
}
.lifeSer{
width: 1182px;
min-height: 300px;
.col{
width: 100%;
}
}
.lifeSer{
.imgList{
display: flex;
/* align-items: center;
justify-content: space-between; */
width: 100%;
flex-wrap: wrap;
text-align: center;
a{
img{
width: 198px;
height: 150px;
transition: 0.4s;
}
}
.journalismBox {
overflow: hidden;
border-bottom: rgb(232, 232, 232) 1px solid;
margin: 5px 0;
cursor: pointer;
.logo {
background-color: rosybrown;
height: 110px;
width: 140px;
float: left;
margin-bottom: 10px;
margin-right: 20px;
background-image: url(/img/on1.688f88b1.png);
margin-top: 10px;
img:hover{
transform: scale(1.2);/*鼠标放上之后元素变成1.4倍大小*/
}
.journalismText {
float: left;
width: 660px;
h3 {
width: 90%;
margin: 5px 0;
font-size: 16px;
}
span.journalismText-content {
min-height: 60px;
overflow: hidden;
line-height: 19px;
color: #999;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 14px;
}
.time {
line-height: 19px;
color: rgb(214, 214, 206);
padding: 10px 0;
span{
float: right;
}
}
span{
display: block;
color: #333;
margin-top: 20px;
}
margin: 20px;
}
.attention {
margin: 20px 0;
background-color: rgb(153, 153, 153);
overflow: hidden;
font-size: 14px;
height: 45px;
line-height: 45px;
text-indent: 30px;
color: rgb(241, 255, 255);
a:not(:nth-child(4n)) {
margin-right: calc(4% / 3);
}
}
}
}


+ 5
- 4
src/page/journalism/journalism.vue Visa fil

@@ -12,7 +12,7 @@
<div class="text">
<h3>{{item.title}}</h3>
<p v-html="item.content"></p>
<span class="time">{{item.publishDate}} <span class="el-icon-view"> {{item.view}}</span></span>
<!-- <span class="time">{{item.publishDate}} <span class="el-icon-view"> {{item.view}}</span></span> -->
</div>
</div>
</div>
@@ -44,18 +44,19 @@ export default {
pageNum: 1,
pageSize: 4,
total: 4
}
},
tag: this.$route.query.tag
}
},
methods: {
goparticulars(item) {
let detailId= item.id + ".html"
this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: 2}})
this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: this.tag}})
},
/* 新闻列表 */
getNewsList() {
let d = {
type: 1,
type: this.tag ? this.tag : 1,
pageNum: this.paging.pageNum,
pageSize: this.paging.pageSize
}


+ 1
- 0
src/router/index.js Visa fil

@@ -164,6 +164,7 @@ const routes = [
//新闻咨询
{
path: '/journalism',
name: 'journalism',
meta:{
title:"新闻咨询"
},


Laddar…
Avbryt
Spara