作者 | SHA1 | 备注 | 提交日期 |
---|---|---|---|
|
9b9b2a4f18 | 增加文档 | 3 年前 |
|
397af04114 | 修改公司名称 | 4 年前 |
|
0a7360a862 | 修改车辆服务 | 4 年前 |
|
855bb647a5 | 修改首页 | 4 年前 |
|
9ef30b4be9 | 修改首页 | 4 年前 |
|
b16f7a6c8a | 修改详情页 | 4 年前 |
|
137e95a292 | edit home | 4 年前 |
|
393c2dfa29 | 修改请求地址 | 4 年前 |
|
5d4ef285eb | 修改导航 | 4 年前 |
|
70d5a974a5 | 修改首页 | 4 年前 |
|
6b8669a471 | 修改首页分类 | 4 年前 |
|
5704c45c69 | 增加登录注册 | 4 年前 |
@@ -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" | |||
}, | |||
@@ -4,11 +4,11 @@ | |||
<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> | |||
<script> | |||
<title>武汉富茂链客科技有限公司</title> | |||
<!-- <script> | |||
var _hmt = _hmt || []; | |||
(function() { | |||
var hm = document.createElement("script"); | |||
@@ -16,7 +16,7 @@ | |||
var s = document.getElementsByTagName("script")[0]; | |||
s.parentNode.insertBefore(hm, s); | |||
})(); | |||
</script> | |||
</script> --> | |||
</head> | |||
<body> | |||
<noscript> | |||
@@ -1,8 +1,8 @@ | |||
<template> | |||
<div> | |||
<myhead /> | |||
<myhead v-if="routeFLag" /> | |||
<router-view></router-view> | |||
<div ref="drawer" class="drawer" @mouseenter="enter" @mouseleave="out"> | |||
<!-- <div ref="drawer" class="drawer" @mouseenter="enter" @mouseleave="out"> | |||
<div class="goTop" @click="goTop"> | |||
<div class="img"> | |||
<img src="./assets/img/xf/goTop.png" /> | |||
@@ -34,8 +34,8 @@ | |||
<div class="rqCode" v-if="rQCodeShow"> | |||
<img src="./assets/img/qrCode/home.png" alt=""> | |||
</div> | |||
</div> | |||
<tail /> | |||
</div> --> | |||
<tail v-if="routeFLag" /> | |||
</div> | |||
</template> | |||
@@ -48,14 +48,23 @@ export default { | |||
myhead, | |||
}, | |||
watch: { | |||
$route(to, from) { | |||
if(to.path == '/login' || to.path == '/register') { | |||
this.routeFLag = false | |||
} else { | |||
this.routeFLag = true | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
rQCodeShow:false, | |||
routeFLag: true | |||
} | |||
}, | |||
methods: { | |||
enter() { | |||
console.log(1); | |||
this.rQCodeShow = true | |||
const drawer = this.$refs.drawer; | |||
drawer.style.right = 0; | |||
@@ -68,7 +77,7 @@ export default { | |||
goTop(){ | |||
window.scroll(0, 0) //滚动条返回顶部 | |||
} | |||
}, | |||
} | |||
}; | |||
</script> | |||
@@ -3,8 +3,8 @@ import { Message } from "element-ui" | |||
const service = axios.create({ | |||
baseURL: '/C/', | |||
//baseURL: 'https://www.yjyculture.com/C/', | |||
// baseURL: '/api/', | |||
baseURL: 'http://www.iformall.cn/api/', | |||
timeout: 60000 // 请求超时时间 | |||
}) | |||
@@ -0,0 +1,23 @@ | |||
module.exports = { | |||
getRandom(min, max) { | |||
return Math.round(Math.random() * (max - min) + min); | |||
}, | |||
getCode() { | |||
let code = ''; | |||
for (var i = 0; i < 6; i++) { | |||
var type = this.getRandom(1, 3); | |||
switch (type) { | |||
case 1: | |||
code += String.fromCharCode(this.getRandom(48, 57));//数字 | |||
break; | |||
case 2: | |||
code += String.fromCharCode(this.getRandom(65, 90));//大写字母 | |||
break; | |||
case 3: | |||
code += String.fromCharCode(this.getRandom(97, 122));//小写字母 | |||
break; | |||
} | |||
} | |||
return code; | |||
} | |||
} |
@@ -1,80 +1,36 @@ | |||
<template> | |||
<div class="bgBox"> | |||
<img src="../../assets/img/bg/bg.jpg" class="topImg" alt=""> | |||
<!-- <div class="Box"> | |||
<div class="backImg"> | |||
<div class="logoBox"> | |||
<div class="logo_img"> | |||
<img src="../../assets/img/logo/logo1.png" alt /> | |||
</div> | |||
<div class="title_Box"> | |||
<p>瑜璟缘国际文化礼仪培训</p> | |||
</div> | |||
</div> | |||
</div> --> | |||
<div class="topBar"> | |||
<div class="topBar_ct"> | |||
<p class="left">欢迎来到 武汉富茂链客科技有限公司 !</p> | |||
<p class="right"> | |||
<span @click="goRouter('/publish')">发布信息</span> | |||
<span @click="goRouter('/login')">登录</span> | |||
<span @click="goRouter('/register')">注册</span> | |||
</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')"> | |||
首页 | |||
</span> | |||
<el-dropdown-menu style="opacity: 0" slot="dropdown"></el-dropdown-menu> | |||
</el-dropdown> | |||
<el-dropdown> | |||
<span @click="goRouter('/IBIE')">IBIE国际测评与认证</span> | |||
<el-dropdown-menu style="opacity: 0" slot="dropdown"></el-dropdown-menu> | |||
</el-dropdown> | |||
<el-dropdown @command='goRouter'> | |||
<span>企业礼仪培训<i class="el-icon-arrow-down el-icon--right"></i> </span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<!-- <el-dropdown-item command="/attestation">培训课程</el-dropdown-item> --> | |||
<el-dropdown-item command="/etiquetteTraining?tag=swly">商务礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=jdly">接待礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=fwly">服务礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=wyly">物业礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=ylly">医疗礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=ymly">医美礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=dcly">地产礼仪</el-dropdown-item> | |||
<el-dropdown-item command="/etiquetteTraining?tag=zwly">政务礼仪</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
<el-dropdown @command='goRouter'> | |||
<span @click="goRouter('/course')">精品课程<i class="el-icon-arrow-down el-icon--right"></i> </span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<!-- <el-dropdown-item command="/teaching?tag=gjxx">国际礼仪班</el-dropdown-item> | |||
<el-dropdown-item command="/teaching?tag=swly">商务礼仪班</el-dropdown-item> --> | |||
<el-dropdown-item command="/course/detail?tag=gjxxlys">国际形象礼仪师培训</el-dropdown-item> | |||
<el-dropdown-item command="/course/detail?tag=gjxxgw">国际形象顾问培训</el-dropdown-item> | |||
<el-dropdown-item command="/course/detail?tag=gjlys">国际礼仪师培训</el-dropdown-item> | |||
<el-dropdown-item command="/course/detail?tag=cslm">城市联盟机构培训</el-dropdown-item> | |||
<el-dropdown-item command="/course/detail?tag=gjsw">国际商务礼仪精英认证(线上)</el-dropdown-item> | |||
<el-dropdown-item command="/course/detail?tag=grly">个人礼仪培训</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
<el-dropdown @command='goRouter'> | |||
<span @click="goRouter('')">名师授课<i class="el-icon-arrow-down el-icon--right"></i> </span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<el-dropdown-item command="">创始人介绍</el-dropdown-item> | |||
<el-dropdown-item command="/famousTeacher?tag=zj">专家讲师介绍</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
<el-dropdown @command='goRouter'> | |||
<span @click="goRouter('/journalism')">新闻动态<i class="el-icon-arrow-down el-icon--right"></i> </span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<el-dropdown-item command="/journalism">行业新闻</el-dropdown-item> | |||
<el-dropdown-item command="/excellent?type=3">学员风采</el-dropdown-item> | |||
<el-dropdown-item command="/excellent?type=2">企业培训案例</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
<el-dropdown @command='goRouter'> | |||
<span @click="goRouter('')">关于我们<i class="el-icon-arrow-down el-icon--right"></i> </span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<el-dropdown-item command="/companySynopsis">企业简介</el-dropdown-item> | |||
<el-dropdown-item command="/invite">人才招聘</el-dropdown-item> | |||
<el-dropdown-item command="">积分查询</el-dropdown-item> | |||
<el-dropdown-item command="/my">联系我们</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
<el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" | |||
background-color="#409EFF" | |||
text-color="#fff" | |||
active-text-color="#ffd04b" | |||
> | |||
<el-menu-item index="1">首页</el-menu-item> | |||
<el-menu-item index="4">生活服务</el-menu-item> | |||
<el-menu-item index="5">房屋租赁</el-menu-item> | |||
<el-menu-item index="6">宠物市场</el-menu-item> | |||
<el-menu-item index="7">餐饮美食</el-menu-item> | |||
<el-menu-item index="8">票务卡券</el-menu-item> | |||
<el-menu-item index="9">车辆服务</el-menu-item> | |||
<el-menu-item index="10">企业招聘</el-menu-item> | |||
<el-menu-item index="11">商务服务</el-menu-item> | |||
</el-menu> | |||
</div> | |||
</div> | |||
</template> | |||
@@ -82,19 +38,33 @@ | |||
export default { | |||
data() { | |||
return { | |||
activeIndex: "1", | |||
search: '', | |||
menuActiveIndex: '1' | |||
}; | |||
}, | |||
watch: { | |||
$route() { | |||
this.menuActiveIndex = this.$route.query.tag ? this.$route.query.tag : '1' | |||
} | |||
}, | |||
methods: { | |||
handleSelect(key, keyPath) { | |||
// console.log(key, keyPath); | |||
if(key === '1') { | |||
this.$router.push('/home'); | |||
} else { | |||
this.$router.push({path: "/journalism",query:{tag: key}}); | |||
} | |||
}, | |||
goRouter(url) { | |||
if(url) { | |||
this.$router.push(url); | |||
} | |||
}, | |||
searchFn() { | |||
this.$router.push('/home') | |||
this.search = '' | |||
} | |||
}, | |||
} | |||
}; | |||
</script> | |||
@@ -106,26 +76,65 @@ export default { | |||
//background-attachment: fixed; | |||
background-repeat: repeat-x; | |||
background-size: 100% 160px; */ | |||
.topBar{ | |||
line-height: 40px; | |||
height: 40px; | |||
height: 40px; | |||
background: rgb(228 242 253 / 70%); | |||
color: #444; | |||
.topBar_ct{ | |||
width: 1200px; | |||
margin: 0 auto; | |||
.left{ | |||
float: left; | |||
} | |||
.right{ | |||
float: right; | |||
span{ | |||
padding: 0 15px; | |||
cursor: pointer; | |||
} | |||
span:nth-of-type(2){ | |||
border-right: 1px solid #ccc; | |||
} | |||
span:hover{ | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
} | |||
.topImgBox{ | |||
position: relative; | |||
height: 130px; | |||
background: #E4F2FD; | |||
width: 100%; | |||
.searchIpt{ | |||
position: absolute; | |||
right: 20%; | |||
top: 5%; | |||
width: 200px; | |||
border: none; | |||
} | |||
} | |||
.topImg{ | |||
width: 100%; | |||
} | |||
.nav { | |||
width: 1200px; | |||
margin: 20px auto; | |||
margin: -64px auto 20px; | |||
display: flex; | |||
height: 60px; | |||
line-height: 60px; | |||
/* height: 60px; | |||
line-height: 60px; */ | |||
background: #606266; | |||
.el-dropdown{ | |||
flex: 1; | |||
text-align: center; | |||
color: #fff; | |||
cursor: pointer; | |||
.title{ | |||
width: 100%; | |||
display: inline-block; | |||
} | |||
.el-menu--horizontal { | |||
width: 100%; | |||
} | |||
.el-menu--horizontal>.el-menu-item { | |||
height: 50px; | |||
line-height: 50px; | |||
} | |||
} | |||
} | |||
.Box { | |||
@@ -173,18 +182,29 @@ export default { | |||
margin-top: 20px; | |||
background-color: cornflowerblue; | |||
} | |||
.el-menu-demo { | |||
.el-menu-demo { | |||
display: flex; | |||
.el-menu-item { | |||
width: 14.2%; | |||
/* width: 10%; */ | |||
text-align: center; | |||
flex: 1; | |||
} | |||
} | |||
.el-submenu { | |||
/*.el-submenu { | |||
text-align: center; | |||
width: 14.2%; | |||
} | |||
.el-menu--horizontal { | |||
width: 100%; | |||
} | |||
} */ | |||
</style> | |||
<style lang="scss"> | |||
.searchIpt{ | |||
input{ | |||
border: none; | |||
width: 150px; | |||
height: 30px; | |||
border-radius: 30px; | |||
} | |||
} | |||
</style> |
@@ -16,16 +16,15 @@ | |||
<style lang="scss" scoped> | |||
.textTitle { | |||
margin-top: 50px; | |||
overflow: hidden; | |||
p { | |||
font-size: 24px; | |||
font-size: 22px; | |||
font-weight: bold; | |||
} | |||
.w_line { | |||
width: 60px; | |||
height: 2px; | |||
background-color: #000; | |||
width: 90px; | |||
height: 4px; | |||
background-color: #2979d0; | |||
margin: 20px 0; | |||
} | |||
} |
@@ -1,5 +1,5 @@ | |||
<template> | |||
<div class="sidebarBox"> | |||
<div class="sidebarBox" v-if="false"> | |||
<div class="listBox"> | |||
<div class="course">课程中心</div> | |||
<ul class="column"> | |||
@@ -1,96 +1,486 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="leftBox"> | |||
<textTitle :text="textTop" /> | |||
<div> | |||
<h1 class="titels">{{data.title}}</h1> | |||
<p >{{data.publishDate}}</p> | |||
<div v-html="data.content"></div> | |||
<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"> | |||
<img :src="data.mainPicRealPath" alt=""> | |||
</el-card> | |||
<div class="info_list"> | |||
<!-- <p>标题:<span>{{data.title}}</span></p> --> | |||
<p>日期:<span>{{data.publishDate}} </span></p> | |||
<p>姓名:<span>{{data.author}}</span></p> | |||
<p>电话:<span class="phone">{{setPhone(data.phone)}} </span> <el-button type="primary" size="mini" plain @click="dialogVisible = true">获取联系方式</el-button></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> | |||
<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> | |||
<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> | |||
<sidebar /> | |||
<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 | |||
title="联系方式" | |||
:visible.sync="dialogVisible" | |||
width="30%"> | |||
<h3>{{data.phone}}</h3> | |||
<p class="dialog_des"> | |||
联系时请说是在武汉富茂链客科技有限公司看到的, 谢谢 | |||
</p> | |||
<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> | |||
import textTitle from "@/components/headTail/textTitle"; | |||
import sidebar from "@/components/sidebar/sidebar"; | |||
import moment from "moment" | |||
import authorImg from "@/assets/img/author.png" | |||
import { homeService } from "@/api" | |||
export default { | |||
components: { | |||
textTitle, | |||
sidebar, | |||
sidebar | |||
}, | |||
data() { | |||
return { | |||
textTop :"优秀案例", | |||
ifjournalism:1 ,//1 => 优秀案例 2 =>新闻详情 3 =>学员风采, | |||
ifjournalism: this.$route.params.ifjournalism ,//1 => 优秀案例 2 =>新闻详情 3 =>学员风采, | |||
id: this.$route.params.id.split('.')[0], // 截取 .html之前数据 | |||
data: {} | |||
data: {}, | |||
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: { | |||
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 = res.detailPicture ? JSON.parse(res.detailPicture) : [] | |||
this.data = res | |||
}) | |||
}, | |||
/* getView() { | |||
let data = { | |||
tag: this.$route.query.ifjournalism === "2" ? 'news' : '', | |||
id: this.id | |||
/* 底部列表 */ | |||
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() { | |||
switch(Number(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; | |||
} | |||
homeService.getView(data).then(res => {}) | |||
} */ | |||
}, | |||
async created() { | |||
if (this.$route.params.ifjournalism) { | |||
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= "学员风采" | |||
}, | |||
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}}) | |||
} | |||
await this.getDetail() | |||
if (this.data) { | |||
/* let head = document.getElementsByTagName('head'); | |||
let meta = document.createElement('meta'); | |||
document.querySelector('meta[name="keywords"]').setAttribute('content', this.data.seoKeywords) | |||
document.querySelector('meta[name="description"]').setAttribute('content', this.data.seoDescription) | |||
head[0].appendChild(meta) | |||
document.title = this.data.seoTitle */ | |||
} | |||
}, | |||
async created() { | |||
this.getTitle() | |||
this.getDetail() | |||
this.getList() | |||
} | |||
}; | |||
</script> | |||
<style scoped> | |||
.titels { | |||
padding: 10px 0; | |||
font-size: 18px; | |||
text-align: center; | |||
} | |||
.leftBox { | |||
width: 75%; | |||
} | |||
.leftBox p { | |||
text-align: center; | |||
<style scoped lang="scss"> | |||
.Box { | |||
width: 1100px; | |||
padding: 36px 40px; | |||
margin: 0 auto; | |||
box-shadow: 0 0 10px #f3f3f3; | |||
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 { | |||
margin: 20px 40px; | |||
.info_img{ | |||
float: left; | |||
margin-bottom: 30px; | |||
img{ | |||
width: 300px; | |||
} | |||
} | |||
.info_list{ | |||
float: left; | |||
margin-left: 40px; | |||
p{ | |||
line-height: 26px; | |||
color: #444; | |||
font-size: 14px; | |||
span{ | |||
margin-left: 10px; | |||
display: inline-block; | |||
width: 260px; | |||
vertical-align: top; | |||
} | |||
span.phone{ | |||
width: auto; | |||
} | |||
a{ | |||
color: rgb(64, 158, 255); | |||
} | |||
} | |||
} | |||
.info_right{ | |||
width: 322px; | |||
margin-top: 10px; | |||
p{ | |||
line-height: 28px; | |||
font-size: 14px; | |||
color: #333; | |||
a{ | |||
color: rgb(64, 158, 255); | |||
} | |||
} | |||
} | |||
} | |||
.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; | |||
} | |||
} | |||
.leftBox >>> img{ | |||
.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{ | |||
width: 600px; | |||
} | |||
.particularsBox { | |||
width: 90%; | |||
margin: 0 5%; | |||
height: 300px; | |||
background-color: bisque; | |||
.dialog_des{ | |||
margin-top: 10px; | |||
} | |||
</style> | |||
<style scoped> | |||
.Box .breadcrumb .el-breadcrumb{ | |||
float: left; | |||
margin-top: 2px; | |||
} | |||
.Box .breadcrumb >>> .el-breadcrumb__inner{ | |||
font-size: 16px; | |||
} | |||
</style> |
@@ -1,64 +1,96 @@ | |||
<template> | |||
<div class="Box"> | |||
<slideshow :list="slideList" /> | |||
<div class="textBox"> | |||
<div class="textLogo"></div> | |||
<div class="headline"> | |||
<textTitle text="瑜璟缘国际文化礼仪介绍" /> | |||
<div class="article"> | |||
<div | |||
class="text" | |||
>  北京瑜璟缘国际文化发展有限公司是一所集形象管理培训(设计)、礼仪文化培训及策划运营管理为一体的专注于孕育及培养提升人才素养的专业培训机构。在全国拥有近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="removeImg(busOneData.content)"></p> | |||
<!-- <a href="#">[详细]</a> --> | |||
</div> | |||
<ul class="list"> | |||
<li v-for="(bus, index) in busList.slice(0,5)" :key="index"> | |||
<a @click="goparticulars(bus)"> {{bus.title}} </a> | |||
</li> | |||
</ul> | |||
</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.slice(0,8)" :key="index"> | |||
<a @click="goparticulars(item)"> {{item.title}} </a> | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<div class="advisoryBox"> | |||
<div class="left"> | |||
<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> | |||
<div class="cls_list"> | |||
<a href="javascript:void(0);"> | |||
<span>生活服务</span> | |||
<span class="des">Life service</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> | |||
<a href="javascript:void(0);"> | |||
<span>房屋租赁</span> | |||
<span class="des">Housing rental and sale</span> | |||
</a> | |||
<a href="javascript:void(0);"> | |||
<span>宠物市场</span> | |||
<span class="des">Pet market</span> | |||
</a> | |||
<a href="javascript:void(0);"> | |||
<span>餐饮美食</span> | |||
<span class="des">Food and beverage</span> | |||
</a> | |||
<a href="javascript:void(0);"> | |||
<span>票务卡券</span> | |||
<span class="des">Ticket card</span> | |||
</a> | |||
<a href="javascript:void(0);"> | |||
<span>车辆服务</span> | |||
<span class="des">Education and training</span> | |||
</a> | |||
<a href="javascript:void(0);"> | |||
<span>名企招聘</span> | |||
<span class="des">Recruitment of famous enterprises</span> | |||
</a> | |||
<a href="javascript:void(0);"> | |||
<span>商品服务</span> | |||
<span class="des">Business services</span> | |||
</a> | |||
</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.slice(0,6)" :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.slice(0,10)" :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> | |||
@@ -75,13 +107,47 @@ 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: { | |||
@@ -95,46 +161,49 @@ export default { | |||
this.slideList = res.list | |||
}) | |||
}, | |||
/* 左侧合作伙伴 */ | |||
getPartnersList() { | |||
let data = { | |||
pageNum: 1, | |||
pageSize: 5 | |||
} | |||
homeService.getPartnersList(data).then(res => { | |||
this.partnersList = res.list | |||
}) | |||
}, | |||
/* 新闻列表 */ | |||
getNewsList() { | |||
getData() { | |||
let data = { | |||
type: 1, | |||
// type: 1, | |||
pageNum: 1, | |||
pageSize: 3 | |||
pageSize: 100 | |||
} | |||
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}`); | |||
}, | |||
removeImg(con) { | |||
if(con) { | |||
return con.replace(/<img.*?>/g ,''); | |||
} | |||
} | |||
}, | |||
created() { | |||
this.getSlideList() | |||
this.getPartnersList() | |||
this.getNewsList() | |||
this.getSlideList() | |||
this.getData() | |||
} | |||
}; | |||
</script> | |||
@@ -144,223 +213,201 @@ export default { | |||
width: 1200px; | |||
margin: 0 auto; | |||
overflow: hidden; | |||
.textBox { | |||
margin: 10px 0; | |||
height: 386px; | |||
border: 1px rgb(238, 238, 238) solid; | |||
position: relative; | |||
.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; | |||
} | |||
img { | |||
width: 150px; | |||
height: 150px; | |||
border-radius: 50%; | |||
background-color: cyan; | |||
float: right; | |||
margin-right: 50px; | |||
.fl { | |||
float: left; | |||
} | |||
.fr { | |||
float: right; | |||
} | |||
.row{ | |||
.col{ | |||
float: left; | |||
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; | |||
white-space: nowrap; | |||
a{ | |||
color: #333; | |||
} | |||
a:hover{ | |||
color: #2979d0 | |||
} | |||
} | |||
} | |||
} | |||
.advisoryBox { | |||
overflow: hidden; | |||
.left { | |||
float: left; | |||
width: 26%; | |||
border-top: 1px rgb(238, 238, 238) solid; | |||
.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; | |||
} | |||
.icon3 { | |||
background-image: url("../../assets/img/home/icon-3.png"); | |||
background-repeat: no-repeat; | |||
background-size: 30px; | |||
background-position: center center; | |||
} | |||
.icon4 { | |||
background-image: url("../../assets/img/home/icon-4.png"); | |||
background-repeat: no-repeat; | |||
background-size: 30px; | |||
background-position: center center; | |||
} | |||
.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; | |||
} | |||
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; | |||
} | |||
.partnerBox { | |||
width: 80%; | |||
overflow: hidden; | |||
.title { | |||
font-size: 14px; | |||
background-color: #eee; | |||
font-weight: bolder; | |||
height: 40px; | |||
text-indent: 50px; | |||
line-height: 40px; | |||
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: 368px; | |||
height: 238px; | |||
} | |||
.partner{ | |||
width: 80%; | |||
margin: 0 10%; | |||
.con_txt{ | |||
width: 352px; | |||
ul{ | |||
height: 158px; | |||
overflow: hidden; | |||
padding-top: 6px; | |||
} | |||
.headline{ | |||
border-bottom: 1px dashed #dadada; | |||
padding-bottom: 15px; | |||
cursor: pointer; | |||
height: 80px; | |||
overflow: hidden; | |||
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; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.right { | |||
width: 70%; | |||
float: right; | |||
.life{ | |||
width: 380px; | |||
height: 100%; | |||
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; | |||
ul{ | |||
padding: 10px 20px; | |||
} | |||
} | |||
} | |||
.service{ | |||
height: 330px; | |||
margin-bottom: 20px; | |||
a{ | |||
cursor: pointer; | |||
} | |||
} | |||
.cls_list{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
width: 100%; | |||
flex-wrap: wrap; | |||
a{ | |||
width: 23%; | |||
height: 66px; | |||
display: block; | |||
background: rgb(135 175 218 / 90%); | |||
color: #fff; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
flex-flow: column; | |||
margin: 10px; | |||
border-radius: 4px; | |||
} | |||
span { | |||
height: 45px; | |||
line-height: 45px; | |||
text-indent: 30px; | |||
float: right; | |||
margin-right: 20px; | |||
cursor: pointer; | |||
a:nth-of-type(odd){ | |||
background: rgb(135 175 218 / 90%); | |||
} | |||
} | |||
.journalismBox { | |||
overflow: hidden; | |||
border-bottom: rgb(232, 232, 232) 1px solid; | |||
margin: 5px 0; | |||
a:nth-of-type(even){ | |||
background: #d2cd8f; | |||
} | |||
} | |||
.cate{ | |||
display: flex; | |||
justify-content: space-between; | |||
width: 100%; | |||
flex-wrap: wrap; | |||
.col{ | |||
width: 380px; | |||
height: 268px; | |||
margin: 10px; | |||
overflow: hidden; | |||
a{ | |||
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; | |||
} | |||
} | |||
.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; | |||
} | |||
.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; | |||
} | |||
} | |||
img:hover{ | |||
transform: scale(1.2);/*鼠标放上之后元素变成1.4倍大小*/ | |||
} | |||
span{ | |||
display: block; | |||
color: #333; | |||
margin-top: 20px; | |||
max-width: 198px; | |||
} | |||
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); | |||
} | |||
} | |||
} | |||
} | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<div class="Box"> | |||
<div class="leftBox"> | |||
<textTitle text="行业新闻" /> | |||
<div class="Box journalism"> | |||
<!-- <div class="leftBox"> --> | |||
<textTitle :text="textTop" /> | |||
<!-- <div @click="goparticulars"> | |||
<detail v-for="(item, index) in newsList" :key="index" /> | |||
</div> --> | |||
@@ -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> | |||
@@ -22,8 +22,8 @@ | |||
:total="paging.total"> | |||
</el-pagination> | |||
</div> | |||
</div> | |||
<sidebar /> | |||
<!-- </div> --> | |||
<!-- <sidebar /> --> | |||
</div> | |||
</template> | |||
<script> | |||
@@ -44,18 +44,27 @@ export default { | |||
pageNum: 1, | |||
pageSize: 4, | |||
total: 4 | |||
} | |||
}, | |||
tag: this.$route.query.tag, | |||
textTop: '' | |||
} | |||
}, | |||
watch: { | |||
$route() { | |||
this.tag = this.$route.query.tag | |||
this.getTitle() | |||
this.getNewsList() | |||
} | |||
}, | |||
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 | |||
} | |||
@@ -72,8 +81,35 @@ export default { | |||
handleCurrentChange(val) { | |||
this.getNewsList() | |||
}, | |||
getTitle() { | |||
switch(Number(this.tag)) { | |||
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; | |||
} | |||
} | |||
}, | |||
created() { | |||
this.getTitle() | |||
this.getNewsList() | |||
} | |||
}; | |||
@@ -92,6 +128,13 @@ export default { | |||
bottom: 0; | |||
left: 40%; | |||
} | |||
.journalism{ | |||
width: 1100px; | |||
padding: 50px 40px; | |||
margin: 0 auto; | |||
box-shadow: 0 0 10px #f3f3f3; | |||
background: #fff; | |||
} | |||
.detailBox { | |||
margin-top: 30px; | |||
margin-left: 20px; | |||
@@ -0,0 +1,155 @@ | |||
<template> | |||
<div class="login"> | |||
<div class="top_div"></div> | |||
<div class="login_ct"> | |||
<div class="topImg"></div> | |||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm"> | |||
<el-form-item prop="userName"> | |||
<el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input> | |||
</el-form-item> | |||
<el-form-item prop="password"> | |||
<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input> | |||
</el-form-item> | |||
<el-form-item prop="code"> | |||
<el-row> | |||
<el-col :span="16"> | |||
<el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input> | |||
</el-col> | |||
<el-col :span="8"> | |||
<div class="code" @click="resetCode">{{random}}</div> | |||
</el-col> | |||
</el-row> | |||
</el-form-item> | |||
</el-form> | |||
<div class="login_btn"> | |||
<el-link size="small" type="primary" @click="goHome">返回首页</el-link> | |||
<div class="right"> | |||
<el-link size="small" type="info" @click="">忘记密码</el-link> | |||
<el-link size="small" type="info" @click="register">注册</el-link> | |||
<el-button size="small" type="primary" @click="login('ruleForm')">登录</el-button> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import tools from '../../api/tools' | |||
export default { | |||
data() { | |||
return { | |||
random: tools.getCode(), | |||
ruleForm: { | |||
userName: '', | |||
password: '', | |||
code: '', | |||
}, | |||
rules: { | |||
userName: [ | |||
{ required: true, message: '请输入用户名', trigger: 'blur' } | |||
], | |||
password: [ | |||
{ required: true, message: '请输入密码', trigger: 'blur' } | |||
], | |||
code: [ | |||
{ required: true, message: '请输入验证码', trigger: 'blur' } | |||
] | |||
} | |||
}; | |||
}, | |||
mounted() { | |||
}, | |||
methods: { | |||
login(formName) { | |||
var that = this | |||
this.$refs[formName].validate((valid) => { | |||
if (valid) { | |||
if(that.random != that.ruleForm.code) { | |||
this.$message.error('验证码错误!'); | |||
return | |||
} | |||
this.$message.error('账号密码错误!'); | |||
} else { | |||
console.log('error submit!!'); | |||
return false; | |||
} | |||
}); | |||
}, | |||
goHome() { | |||
this.$router.push('/home'); | |||
}, | |||
register() { | |||
this.$router.push('/register'); | |||
}, | |||
resetForm(formName) { | |||
this.$refs[formName].resetFields(); | |||
}, | |||
resetCode(){ | |||
this.random = tools.getCode() | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.login { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
.top_div{ | |||
height: 50%; | |||
width: 100%; | |||
background: #008ead; | |||
} | |||
.login_ct{ | |||
width: 400px; | |||
margin: -100px auto 0; | |||
background: #fff; | |||
padding: 40px 0 0; | |||
border: 1px solid #e7e7e7; | |||
position: relative; | |||
.topImg{ | |||
width: 92px; | |||
height: 97px; | |||
background: url('../../assets/img/login.png'); | |||
position: absolute; | |||
top: -85px; | |||
margin-left: 152.5px; | |||
} | |||
.el-form{ | |||
padding: 0 40px; | |||
.code{ | |||
width: 90%; | |||
float: right; | |||
height: 30px; | |||
vertical-align: middle; | |||
border-radius: 5px; | |||
border: 1px solid #d3d3d3; | |||
background: #F2FBFE; | |||
text-align: center; | |||
line-height: 30px; | |||
font-weight: bold; | |||
} | |||
} | |||
.login_btn { | |||
height: 50px; | |||
margin-top: 40px; | |||
border-top: 1px solid #e7e7e7; | |||
line-height: 50px; | |||
padding: 0 40px; | |||
.right{ | |||
float: right; | |||
margin: 0 10px; | |||
} | |||
.right :nth-child(2) { | |||
margin: 0 10px; | |||
} | |||
// .right > *{ | |||
// padding: 0 5px; | |||
// } | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,203 @@ | |||
<template> | |||
<div class="publish"> | |||
<div class="publish_ct"> | |||
<el-alert | |||
title="严禁发布低价欺诈以及图片虚假的信息诱导买家,价格严重偏离正常水平的及图片虚假的信息将被删除" | |||
type="warning" | |||
show-icon | |||
:closable="false"> | |||
</el-alert> | |||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small"> | |||
<p>基础信息</p> | |||
<el-form-item label="标题" prop="name"> | |||
<el-input v-model="ruleForm.name" placeholder="请输入标题"></el-input> | |||
</el-form-item> | |||
<el-form-item label="类别" prop="category"> | |||
<el-select v-model="ruleForm.category" placeholder="请选择活动区域"> | |||
<el-option v-for="(item, index) in categoryList" :key="index" :label="item.label" :value="item.value"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="上传图片" prop="fileList"> | |||
<el-upload | |||
class="upload-demo" | |||
ref="upload" | |||
action="#" | |||
:show-file-list="true" | |||
:on-change="fileChange" | |||
:file-list="ruleForm.fileList" | |||
:on-remove="fileRemove" | |||
accept="image/*" | |||
:auto-upload="false" | |||
> | |||
<el-button type="primary">请选择图片</el-button> | |||
</el-upload> | |||
</el-form-item> | |||
<el-form-item label="信息详情" prop="detail"> | |||
<el-input type="textarea" v-model="ruleForm.detail" placeholder="请输入信息详情介绍"></el-input> | |||
</el-form-item> | |||
<p>联系方式</p> | |||
<el-form-item label="联系电话" prop="phone"> | |||
<el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input> | |||
</el-form-item> | |||
<el-form-item label="联系人" prop="contact"> | |||
<el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input> | |||
</el-form-item> | |||
<el-form-item label="QQ"> | |||
<el-input v-model="ruleForm.qq" placeholder="请输入QQ"></el-input> | |||
</el-form-item> | |||
<el-form-item label="E-mail"> | |||
<el-input v-model="ruleForm.email" placeholder="请输入E-mail"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
<div class="publish_btn"> | |||
<el-button class="right" size="small" type="success" @click="publish('ruleForm')">发布信息</el-button> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
var checkIdCard = (rule, value, cb) => { | |||
if (value.length > 0) { | |||
return cb(); | |||
} | |||
cb(new Error("请选择图片")); | |||
}; | |||
return { | |||
ruleForm: { | |||
name: '', | |||
category: 1, | |||
detail: '', | |||
phone: '', | |||
contact: '', | |||
qq: '', | |||
email: '', | |||
imageUrl: '', | |||
fileList: [], | |||
}, | |||
rules: { | |||
name: [ | |||
{ required: true, message: '请输入标题', trigger: 'blur' } | |||
], | |||
category: [ | |||
{ required: true, message: '请选择类别', trigger: 'change' } | |||
], | |||
detail: [ | |||
{ required: true, message: '请输入信息详情', trigger: 'blur' } | |||
], | |||
phone: [ | |||
{ required: true, message: '请输入联系人电话', trigger: 'blur' }, | |||
{ validator:function(rule,value,callback){ | |||
if(/^1[34578]\d{9}$/.test(value) == false){ | |||
callback(new Error("请输入正确的电话")); | |||
}else{ | |||
callback(); | |||
} | |||
}, trigger: 'blur' | |||
} | |||
], | |||
contact: [ | |||
{ required: true, message: '请输入联系人', trigger: 'blur' } | |||
], | |||
fileList: [ | |||
{ required: true, message: "请选择图片", trigger: ['blur', 'change'] }, | |||
{ validator: checkIdCard, trigger: ['blur', 'change'] } | |||
] | |||
}, | |||
categoryList: [ | |||
{ | |||
label: '生活服务', | |||
value: 1 | |||
}, | |||
{ | |||
label: '同城活动', | |||
value: 2 | |||
}, | |||
{ | |||
label: '商务服务', | |||
value: 3 | |||
}, | |||
{ | |||
label: '宠物市场', | |||
value: 4 | |||
}, | |||
{ | |||
label: '行业市场', | |||
value: 5 | |||
}, | |||
{ | |||
label: '车辆服务', | |||
value: 6 | |||
}, | |||
{ | |||
label: '跳蚤市场', | |||
value: 7 | |||
}, | |||
{ | |||
label: '车辆相关', | |||
value: 8 | |||
}, | |||
{ | |||
label: '房产出售', | |||
value: 9 | |||
}, | |||
{ | |||
label: '餐饮美食', | |||
value: 10 | |||
}, | |||
{ | |||
label: '票务卡券', | |||
value: 11 | |||
}, | |||
{ | |||
label: '宠物市场', | |||
value: 12 | |||
} | |||
] | |||
}; | |||
}, | |||
methods: { | |||
publish(formName) { | |||
this.$refs[formName].validate((valid) => { | |||
if (valid) { | |||
this.$message({ | |||
message: '人工审核中', | |||
type: 'success' | |||
}); | |||
} else { | |||
console.log('error submit!!'); | |||
return false; | |||
} | |||
}); | |||
}, | |||
goPage(path) { | |||
if(path) { | |||
this.$router.push(path); | |||
} | |||
}, | |||
resetForm(formName) { | |||
this.$refs[formName].resetFields(); | |||
}, | |||
/* 只保留最后一次上传的文件 */ | |||
fileChange (file, fileList) { | |||
if (fileList.length > 0) { | |||
this.ruleForm.fileList = [fileList[fileList.length - 1]] | |||
} | |||
}, | |||
fileRemove(file) { | |||
this.ruleForm.fileList = [] | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.publish_ct{ | |||
width: 600px; | |||
margin: 0 auto; | |||
.publish_btn{ | |||
text-align: right; | |||
} | |||
} | |||
</style> |
@@ -12,6 +12,30 @@ const routes = [ | |||
}, | |||
component: r => require.ensure([], () => r(require('@/page/home/home.vue')), 'pointzujinListEdit') | |||
}, | |||
//登录 | |||
{ | |||
path: '/login', | |||
meta:{ | |||
title:"登录" | |||
}, | |||
component: r => require.ensure([], () => r(require('@/page/login/login.vue')), 'login') | |||
}, | |||
//注册 | |||
{ | |||
path: '/register', | |||
meta:{ | |||
title:"注册" | |||
}, | |||
component: r => require.ensure([], () => r(require('@/page/register/register.vue')), 'register') | |||
}, | |||
//注册 | |||
{ | |||
path: '/publish', | |||
meta:{ | |||
title:"注册" | |||
}, | |||
component: r => require.ensure([], () => r(require('@/page/publish/publish.vue')), 'publish') | |||
}, | |||
//公司简介 | |||
{ | |||
path: '/companySynopsis', | |||
@@ -140,6 +164,7 @@ const routes = [ | |||
//新闻咨询 | |||
{ | |||
path: '/journalism', | |||
name: 'journalism', | |||
meta:{ | |||
title:"新闻咨询" | |||
}, | |||
@@ -184,16 +209,14 @@ const router = new VueRouter({ | |||
}) | |||
router.beforeEach((to, from, next) => { | |||
/* 路由发生变化修改页面title */ | |||
/* if (to.meta.title) { | |||
document.title = to.meta.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 = '瑜璟缘国际形象礼仪,国际礼仪培训机构,企业培训机构,形象礼仪,形象礼仪培训师' | |||
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 = '武汉富茂链客科技有限公司' | |||
next() | |||
}) | |||
export default router |