<template>
|
<div class="main">
|
<div class="banner">
|
<img src="../../img/partner.jpg" alt="" class="m_hide">
|
<img src="../../img/huo0.jpg" alt="" class="p_hide">
|
</div>
|
<div class="wrapper">
|
<div class="content_title"><span>合作伙伴</span></div>
|
<h2><i></i> <span>partner</span></h2>
|
<div class="content">
|
<ul class="partner_ul">
|
<li @click="point('实施伙伴','Implementing partners')">
|
<a href="#id1">
|
<h3><img src="../../img/icon.jpg" alt=""></h3>
|
<p>成为实施伙伴</p>
|
</a>
|
</li>
|
<li @click="point('营销伙伴','The marketing partner')">
|
<a href="#id1">
|
<h3><img src="../../img/tu2.jpg" alt=""></h3>
|
<p>成为营销伙伴</p>
|
</a>
|
</li>
|
<li @click="point('推广伙伴','partner')">
|
<a href="#id1">
|
<h3><img src="../../img/tu3.jpg" alt=""></h3>
|
<p>成为推广伙伴</p>
|
</a>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div id="id1" class="p_hide" style="height: 1rem;margin-top: -1rem;"></div>
|
<div class="partner_info">
|
<div class="wrapper">
|
<h2><i></i><span>{{p_txt}}</span></h2>
|
<h1>{{p_txt}}</h1>
|
<h3>{{e_txt}}</h3>
|
<el-form class="ruleForm">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item style="position: relative;">
|
<img src="../../img/huo5.png" alt="" class="left_img p_hide">
|
<el-input placeholder="公司名称" v-model="input1"></el-input>
|
<img src="../../img/huo1.png" class="right_img p_hide" alt="">
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item style="position: relative;">
|
<img src="../../img/huo5.png" alt="" class="left_img p_hide">
|
<el-input placeholder="您的职位" v-model="input2"></el-input>
|
<img src="../../img/huo2.png" class="right_img p_hide" alt="" style="right: 0.4rem;">
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item style="position: relative;">
|
<img src="../../img/huo5.png" alt="" class="left_img p_hide">
|
<el-input placeholder="您的姓名" v-model="input3"></el-input>
|
<img src="../../img/huo3.png" class="right_img p_hide" alt="">
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item style="position: relative;">
|
<img src="../../img/huo5.png" alt="" class="left_img p_hide">
|
<el-input placeholder="您的电话" v-model="input4"></el-input>
|
<img src="../../img/huo4.png" class="right_img p_hide" alt="">
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item>
|
<img src="../../img/huo5.png" alt="" class="left_img p_hide">
|
<el-input type="textarea" placeholder="咨询内容" v-model="input5"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row style="text-align:center">
|
<el-col>
|
<el-form-item>
|
<el-button type="primary" style="margin: 0.47rem 0 0.3rem;" @click="refer">提交</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
input1: '',
|
input2: '',
|
input3: '',
|
input4: '',
|
input5: '',
|
isPhone: true,//手机 PC
|
p_txt: '实施伙伴',
|
e_txt: 'Implementing partners'
|
}
|
},
|
methods: {
|
point (t,e) {
|
this.p_txt = t
|
this.e_txt = e
|
},
|
refer () {
|
if(!this.input1){
|
this.err_msg('公司名称不能为空');
|
return false;
|
}
|
|
if(!this.input2){
|
this.err_msg('您的职位不能为空');
|
return false;
|
}
|
|
if(!this.input3){
|
this.err_msg('您的姓名不能为空');
|
return false;
|
}
|
|
if(!this.input4){
|
this.err_msg('您的电话不能为空');
|
return false;
|
}
|
|
if(!this.input5){
|
this.err_msg('咨询内容不能为空');
|
return false;
|
}
|
},
|
//错误提示（区分手机 PC）
|
err_msg (err) {
|
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
|
alert(err)
|
}else{
|
this.$message.error(err);
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@media (max-width: 750px) and (min-width: 0) {
|
h2 {
|
display: none;
|
}
|
.content_title {
|
margin: 0.99rem 0 0.5rem;
|
}
|
.partner_ul {
|
width: 100%;
|
height: auto;
|
li {
|
width: 70%;
|
margin: .4rem auto;
|
text-align: center;
|
h3 {
|
width: 3rem;
|
height: 2.8rem;
|
margin: 0 auto;
|
}
|
p {
|
margin: .3rem 0 .5rem;
|
}
|
}
|
}
|
.partner_info {
|
padding: .5rem .9rem;
|
background: #303940;
|
h2 {
|
text-align: center;
|
position: absolute;
|
}
|
h1 {
|
color:#fff;
|
font-size: .26rem;
|
text-align: center;
|
}
|
h3 {
|
color:#fff;
|
font-size: .2rem;
|
text-align: center;
|
margin-bottom: .4rem;
|
}
|
}
|
.el-col-12 {
|
width: 100%;
|
}
|
.partner_info .ruleForm[data-v-238abfa1] {
|
padding: 0;
|
}
|
.ruleForm {
|
.left_img {
|
width: 0.15rem;
|
height: 0.15rem;
|
position: absolute;
|
left: -0.4rem;
|
top: 0.3rem;
|
}
|
.right_img {
|
height: 0.29rem;
|
position: absolute;
|
right: 0.35rem;
|
top: 0.25rem;
|
}
|
}
|
.el-input, .el-textarea {
|
background: #303940;
|
}
|
.element.style {
|
margin: 0;
|
}
|
.el-button--primary {
|
width: 100%;
|
background: #00A1E1;
|
}
|
}
|
@media (min-width: 751px) {
|
h1 {
|
display: none;
|
}
|
.partner_ul {
|
// padding:0 1.92rem;
|
li {
|
float: left;
|
width: 33%;
|
text-align: center;
|
border-right: 0.01rem solid #D8D8D8;
|
cursor: pointer;
|
h3 {
|
img {
|
width: 1.52rem;
|
height: 1.4rem;
|
display: inline-block;
|
}
|
}
|
p {
|
font-size:0.2rem;
|
color:#3B3B3C;
|
margin-top: 0.16rem;
|
}
|
}
|
li:last-child {
|
border-right:0;
|
}
|
}
|
.partner_info {
|
background: url(../../img/formBanner.jpg) no-repeat;
|
padding-top: 0.51rem;
|
margin-bottom: 2.64rem;
|
background-size: cover;
|
h2 {
|
margin-bottom: 0;
|
}
|
h3 {
|
color: #4E6C8D;
|
font-size: 0.12rem;
|
padding-left: 0.1rem;
|
}
|
.ruleForm {
|
margin-top: 0.28rem;
|
padding: 0 1.32rem;
|
}
|
}
|
.el-input--mini .el-input__inner {
|
height: 47px;
|
line-height: 47px;
|
}
|
.el-button--primary {
|
padding: 0.13rem 1.70rem;
|
}
|
.el-form-item__content {
|
line-height: 40px;
|
position: relative;
|
font-size: 14px;
|
padding: 0 .4rem;
|
margin: 0;
|
}
|
.el-input, .el-textarea {
|
padding: 0 .4rem;
|
}
|
}
|
.wrapper,.partner_info {
|
.content_title:first-child {
|
margin: 0.99rem 0 0.95rem;
|
}
|
h2 {
|
i {
|
display: inline-block;
|
height: 0.2rem;
|
width: 0.03rem;
|
background: #00A1E1;
|
vertical-align: middle;
|
// float: left;
|
float: none;
|
margin-top: 0.04rem;
|
}
|
span {
|
margin-left: 0.06rem;
|
}
|
}
|
}
|
.content:nth-child(3) {
|
margin-bottom: 0.82rem;
|
}
|
</style>
|
<style>
|
.el-textarea__inner {
|
height: 1rem;
|
}
|
.el-message--error {
|
z-index: 9999 !important;
|
}
|
@media (max-width: 750px) and (min-width: 0) {
|
.el-textarea__inner {
|
line-height: 1;
|
}
|
.el-message--error {
|
min-width: 2rem;
|
padding: 0.2rem;
|
}
|
.el-input__inner {
|
color: #fff !important;
|
background-color: #303940 !important;
|
}
|
.el-textarea__inner {
|
background-color: #303940 !important;
|
}
|
}
|
</style>
|
