@@ -49,9 +49,11 @@ export default { | |||
}, | |||
watch: { | |||
/* $route(to, from) { | |||
this.routeFLag = to.path !== '/login' | |||
} */ | |||
$route(to, from) { | |||
if(to.path == '/login' || to.path == '/register') { | |||
this.routeFLag = false | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
@@ -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,5 +1,5 @@ | |||
<template> | |||
<div class="sidebarBox"> | |||
<div class="sidebarBox" v-if="false"> | |||
<div class="listBox"> | |||
<div class="course">课程中心</div> | |||
<ul class="column"> | |||
@@ -2,8 +2,44 @@ | |||
<div class="Box"> | |||
<slideshow :list="slideList" /> | |||
<div class="textBox"> | |||
<div class="textLogo"></div> | |||
<div class="headline"> | |||
<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 | |||
@@ -11,19 +47,47 @@ | |||
>  北京瑜璟缘国际文化发展有限公司是一所集形象管理培训(设计)、礼仪文化培训及策划运营管理为一体的专注于孕育及培养提升人才素养的专业培训机构。在全国拥有近200人的专业的签约礼仪咨询顾问和专家队伍,专注于为企业提供系统礼仪管理咨询与业务解决方案,为企业搭建高素质人才培养平台,为企业形象及人素养教育提升开辟有效途径,帮助企业完善礼仪文化建设,是国内多家企事业单位背后最有效的形象生产及教育培训基地。公司以“不学礼,无以立。”的宗旨,秉承“无问题,不培训”的运营理念,致力于打造新经济下交流分享、提升自我,创新升级,共享共赢生态圈的高端商业精英交流平台。专注于为企业家、创业者、企业高管提供创新升级的商业课程,高效落地的企业内训,垂直定向的主题沙龙,拓展视野的海外游学以及资源整合等培训咨询共享共赢服务解决方案。</div> | |||
<img src="../../assets/img/home/textImg.png" /> | |||
</div> | |||
</div> | |||
</div> --> | |||
</div> | |||
<div class="advisoryBox"> | |||
<div class="left"> | |||
<a href="" class="left_list"> | |||
<a href="javascript:void(0);" class="left_list"> | |||
<span>生活服务</span> | |||
<span class="des">Life service</span> | |||
</a> | |||
<a href="" class="left_list"> | |||
<span>生活服务</span> | |||
<span class="des">Life service</span> | |||
<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 | |||
<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> | |||
<!-- <a | |||
href="http://wpa.qq.com/msgrd?v=3&uin=30397378&site=qq&menu=yes" | |||
target="view_window" | |||
class="iconBox" | |||
@@ -42,7 +106,7 @@ | |||
<div class="iconBox" @click="go('excellent')"> | |||
<div class="iconLeft icon4"></div> | |||
<div class="textLeft">企业培训优秀案例</div> | |||
</div> | |||
</div> --> | |||
<div class="partnerBox"> | |||
<div class="title">合作伙伴</div> | |||
<div class="partner" v-for="(item, index) in partnersList" :key="index"> | |||
@@ -154,9 +218,29 @@ export default { | |||
overflow: hidden; | |||
.textBox { | |||
margin: 10px 0; | |||
height: 386px; | |||
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; | |||
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; | |||
} | |||
} | |||
.textLogo { | |||
height: 70px; | |||
width: 70px; | |||
@@ -196,8 +280,8 @@ export default { | |||
width: 26%; | |||
border-top: 1px rgb(238, 238, 238) solid; | |||
.left_list{ | |||
width: 230px; | |||
height: 48px; | |||
width: 250px; | |||
height: 56px; | |||
display: block; | |||
background: rgba(75,161,107,0.9); | |||
color: #fff; | |||
@@ -205,7 +289,9 @@ export default { | |||
align-items: center; | |||
justify-content: center; | |||
flex-flow: column; | |||
margin: 10px auto 0; | |||
// margin: 10px auto 0; | |||
margin: 10px 0; | |||
border-radius: 6px; | |||
span{ | |||
display: block; | |||
line-height: 16px; | |||
@@ -16,15 +16,15 @@ | |||
<el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input> | |||
</el-col> | |||
<el-col :span="8"> | |||
<div class="code">1</div> | |||
<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">返回首页</el-link> | |||
<el-link size="small" type="primary" @click="goHome">返回首页</el-link> | |||
<div class="right"> | |||
<el-link size="small" type="info">忘记密码</el-link> | |||
<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> | |||
@@ -33,13 +33,15 @@ | |||
</div> | |||
</template> | |||
<script> | |||
import tools from '../../api/tools' | |||
export default { | |||
data() { | |||
return { | |||
random: tools.getCode(), | |||
ruleForm: { | |||
userName: '', | |||
password: '', | |||
code: '' | |||
code: '', | |||
}, | |||
rules: { | |||
userName: [ | |||
@@ -53,11 +55,19 @@ | |||
] | |||
} | |||
}; | |||
}, | |||
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!!'); | |||
@@ -65,11 +75,17 @@ | |||
} | |||
}); | |||
}, | |||
goHome() { | |||
this.$router.push('/home'); | |||
}, | |||
register() { | |||
this.$router.push('/register'); | |||
}, | |||
resetForm(formName) { | |||
this.$refs[formName].resetFields(); | |||
}, | |||
resetCode(){ | |||
this.random = tools.getCode() | |||
} | |||
} | |||
} | |||
@@ -125,8 +141,14 @@ | |||
.right{ | |||
float: right; | |||
margin: 0 10px; | |||
margin: 0 10px; | |||
} | |||
.right :nth-child(2) { | |||
margin: 0 10px; | |||
} | |||
// .right > *{ | |||
// padding: 0 5px; | |||
// } | |||
} | |||
} | |||
} | |||
@@ -1,7 +1,6 @@ | |||
<template> | |||
<div class="login"> | |||
<div class="top_div"></div> | |||
<div class="login_ct"> | |||
<div class="publish"> | |||
<div class="publish_ct"> | |||
<el-alert | |||
title="严禁发布低价欺诈以及图片虚假的信息诱导买家,价格严重偏离正常水平的及图片虚假的信息将被删除" | |||
type="warning" | |||
@@ -50,8 +49,8 @@ | |||
<el-input v-model="ruleForm.email" placeholder="请输入E-mail"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
<div class="login_btn"> | |||
<el-button class="right" size="small" type="primary" @click="login('ruleForm')">发布信息</el-button> | |||
<div class="publish_btn"> | |||
<el-button class="right" size="small" type="success" @click="publish('ruleForm')">发布信息</el-button> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -88,7 +87,15 @@ | |||
{ required: true, message: '请输入信息详情', trigger: 'blur' } | |||
], | |||
phone: [ | |||
{ required: true, message: '请输入联系人电话', trigger: 'blur' } | |||
{ 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' } | |||
@@ -151,7 +158,7 @@ | |||
}; | |||
}, | |||
methods: { | |||
login(formName) { | |||
publish(formName) { | |||
this.$refs[formName].validate((valid) => { | |||
if (valid) { | |||
this.$message({ | |||
@@ -185,63 +192,12 @@ | |||
} | |||
</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: 600px; | |||
margin: -100px auto 0; | |||
background: #fff; | |||
padding: 40px 0 0; | |||
border: 1px solid #e7e7e7; | |||
position: relative; | |||
.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_text{ | |||
font-size: 12px; | |||
line-height: 20px; | |||
display: inline-block; | |||
a{ | |||
color: #409EFF; | |||
font-size: 12px; | |||
cursor: pointer; | |||
} | |||
} | |||
} | |||
.login_btn { | |||
height: 50px; | |||
margin-top: 40px; | |||
border-top: 1px solid #e7e7e7; | |||
line-height: 50px; | |||
padding: 10px 40px 0; | |||
.right{ | |||
float: right; | |||
button{ | |||
margin: 0 10px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.publish_ct{ | |||
width: 600px; | |||
margin: 0 auto; | |||
.publish_btn{ | |||
text-align: right; | |||
} | |||
} | |||
</style> |