@@ -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 v-if="routeFLag" ref="drawer" class="drawer" @mouseenter="enter" @mouseleave="out"> | |||
<div class="goTop" @click="goTop"> | |||
<div class="img"> | |||
<img src="./assets/img/xf/goTop.png" /> | |||
@@ -35,7 +35,7 @@ | |||
<img src="./assets/img/qrCode/home.png" alt=""> | |||
</div> | |||
</div> | |||
<tail /> | |||
<tail v-if="routeFLag" /> | |||
</div> | |||
</template> | |||
@@ -48,14 +48,19 @@ export default { | |||
myhead, | |||
}, | |||
watch: { | |||
/* $route(to, from) { | |||
this.routeFLag = to.path !== '/login' | |||
} */ | |||
}, | |||
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 +73,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: '/C/', | |||
baseURL: 'https://www.yjyculture.com/C/', | |||
timeout: 60000 // 请求超时时间 | |||
}) | |||
@@ -1,18 +1,16 @@ | |||
<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> | |||
<img src="../../assets/img/bg/bg.jpg" class="topImg" alt=""> | |||
<div class="nav"> | |||
<el-dropdown> | |||
<span class="title" @click="goRouter('/home')"> | |||
@@ -106,6 +104,33 @@ export default { | |||
//background-attachment: fixed; | |||
background-repeat: repeat-x; | |||
background-size: 100% 160px; */ | |||
.topBar{ | |||
line-height: 40px; | |||
height: 40px; | |||
background: #409EFF; | |||
color: #fff; | |||
.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; | |||
} | |||
} | |||
} | |||
} | |||
.topImg{ | |||
width: 100%; | |||
} | |||
@@ -15,6 +15,14 @@ | |||
</div> | |||
<div class="advisoryBox"> | |||
<div class="left"> | |||
<a href="" 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> | |||
<a | |||
href="http://wpa.qq.com/msgrd?v=3&uin=30397378&site=qq&menu=yes" | |||
target="view_window" | |||
@@ -187,6 +195,22 @@ export default { | |||
float: left; | |||
width: 26%; | |||
border-top: 1px rgb(238, 238, 238) solid; | |||
.left_list{ | |||
width: 230px; | |||
height: 48px; | |||
display: block; | |||
background: rgba(75,161,107,0.9); | |||
color: #fff; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
flex-flow: column; | |||
margin: 10px auto 0; | |||
span{ | |||
display: block; | |||
line-height: 16px; | |||
} | |||
} | |||
.iconBox { | |||
overflow: hidden; | |||
margin: 10px 0; | |||
@@ -0,0 +1,133 @@ | |||
<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">1</div> | |||
</el-col> | |||
</el-row> | |||
</el-form-item> | |||
</el-form> | |||
<div class="login_btn"> | |||
<el-link size="small" type="primary">返回首页</el-link> | |||
<div class="right"> | |||
<el-link size="small" type="info">忘记密码</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> | |||
export default { | |||
data() { | |||
return { | |||
ruleForm: { | |||
userName: '', | |||
password: '', | |||
code: '' | |||
}, | |||
rules: { | |||
userName: [ | |||
{ required: true, message: '请输入用户名', trigger: 'blur' } | |||
], | |||
password: [ | |||
{ required: true, message: '请输入密码', trigger: 'blur' } | |||
], | |||
code: [ | |||
{ required: true, message: '请输入验证码', trigger: 'blur' } | |||
] | |||
} | |||
}; | |||
}, | |||
methods: { | |||
login(formName) { | |||
this.$refs[formName].validate((valid) => { | |||
if (valid) { | |||
this.$message.error('账号密码错误!'); | |||
} else { | |||
console.log('error submit!!'); | |||
return false; | |||
} | |||
}); | |||
}, | |||
register() { | |||
this.$router.push('/register'); | |||
}, | |||
resetForm(formName) { | |||
this.$refs[formName].resetFields(); | |||
} | |||
} | |||
} | |||
</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; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,247 @@ | |||
<template> | |||
<div class="login"> | |||
<div class="top_div"></div> | |||
<div class="login_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="login_btn"> | |||
<el-button class="right" size="small" type="primary" @click="login('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' } | |||
], | |||
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: { | |||
login(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"> | |||
.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; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,173 @@ | |||
<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="password2"> | |||
<el-input v-model="ruleForm.password2" type="password" placeholder="确认密码"></el-input> | |||
</el-form-item> | |||
<el-form-item prop="name"> | |||
<el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input> | |||
</el-form-item> | |||
<el-form-item prop="cardId"> | |||
<el-input v-model="ruleForm.cardId" 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">1</div> | |||
</el-col> | |||
</el-row> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-checkbox v-model="checked"></el-checkbox> | |||
<div class="login_text"> | |||
我接受 <a>《武汉壹玖之家网络科技有限公司用户注册协议》</a>及 <a>《武汉壹玖之家网络科技有限公司隐私政策》</a> | |||
</div> | |||
</el-form-item> | |||
</el-form> | |||
<div class="login_btn"> | |||
<el-link size="small" type="text" @click="goPage('/home')">返回首页</el-link> | |||
<div class="right"> | |||
<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> | |||
export default { | |||
data() { | |||
return { | |||
ruleForm: { | |||
userName: '', | |||
password: '', | |||
password2: '', | |||
name: '', | |||
cardId: '', | |||
code: '' | |||
}, | |||
rules: { | |||
userName: [ | |||
{ required: true, message: '请输入用户名', trigger: 'blur' } | |||
], | |||
password: [ | |||
{ required: true, message: '请输入密码', trigger: 'blur' } | |||
], | |||
password2: [ | |||
{ required: true, message: '请确认密码', trigger: 'blur' } | |||
], | |||
name: [ | |||
{ required: true, message: '请输入真实姓名', trigger: 'blur' } | |||
], | |||
cardId: [ | |||
{ required: true, message: '请输入身份证号', trigger: 'blur' } | |||
], | |||
code: [ | |||
{ required: true, message: '请输入验证码', trigger: 'blur' } | |||
] | |||
} | |||
}; | |||
}, | |||
methods: { | |||
login(formName) { | |||
this.$refs[formName].validate((valid) => { | |||
if (valid) { | |||
this.$message('人工审核中'); | |||
} else { | |||
console.log('error submit!!'); | |||
return false; | |||
} | |||
}); | |||
}, | |||
goPage(path) { | |||
if(path) { | |||
this.$router.push(path); | |||
} | |||
}, | |||
resetForm(formName) { | |||
this.$refs[formName].resetFields(); | |||
}, | |||
} | |||
} | |||
</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_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: 0 40px; | |||
.right{ | |||
float: right; | |||
button{ | |||
margin: 0 10px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</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', | |||