format-code

king

2019-07-16 ed58afaaa564c54d22a42593265addce08bd5850

 src/views/partner/index.vue

@@ -1,346 +1,338 @@
<template>
    <div class="main">
        <div class="banner">
            <img src="../../img/partner.png" alt="" class="m_hide">
            <img src="../../img/huo0.png" 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.png" alt=""></h3>
                     <p>成为实施伙伴</p>
                  </a>
                    </li>
               <li @click="point('营销伙伴','The marketing partner')">
                  <a href="#id1">
                     <h3><img src="../../img/tu2.png" alt=""></h3>
                     <p>成为营销伙伴</p>
                  </a>
               </li>
               <li @click="point('推广伙伴','partner')">
                  <a href="#id1">
                     <h3><img src="../../img/tu3.png" 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 class="main">
    <div class="banner">
      <img src="../../img/partner.png" alt="" class="m_hide">
      <img src="../../img/huo0.png" 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.png" alt=""></h3>
              <p>成为实施伙伴</p>
            </a>
          </li>
          <li @click="point('营销伙伴','The marketing partner')">
            <a href="#id1">
              <h3><img src="../../img/tu2.png" alt=""></h3>
              <p>成为营销伙伴</p>
            </a>
          </li>
          <li @click="point('推广伙伴','partner')">
            <a href="#id1">
              <h3><img src="../../img/tu3.png" 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){
  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(){
      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){
      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)
           alert(err)
         }else{
            this.$message.error(err);
        this.$message.error(err);
         }
      }
   },

   }
}
</script>

<style lang="less" scoped>
@media (max-width: 750px) and (min-width: 0){
    h2{
        display: none;
  @media (max-width: 750px) and (min-width: 0) {
    h2 {
      display: none;
    }
    .content_title{
        margin: 0.99rem 0 0.5rem;
    .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_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;
        }
    .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%;
      width: 100%;
    }
    .partner_info .ruleForm[data-v-238abfa1] {
        padding: 0;       
      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;
   }
    .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;
      margin: 0;
    }
    .el-button--primary{
        width: 100%;
        background: #00A1E1;
    .el-button--primary {
      width: 100%;
      background: #00A1E1;
    }
    
}
@media (min-width: 751px) {
    h1{
        display: none;
  }
  @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;
            }
    .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;
          }
        }
      li:last-child{
         border-right:0;
      }
    }
    .partner_info{
        background: url(../../img/formBanner.png) no-repeat;
        padding-top: 0.51rem;
        margin-bottom: 2.64rem;
        background-size: cover;
        h2{
            margin-bottom: 0;
        p {
          font-size:0.2rem;
          color:#3B3B3C;
          margin-top: 0.16rem;
        }
        h3{
            color:#4E6C8D;
            font-size:0.12rem;
            padding-left:0.1rem;
        }
        .ruleForm{
            margin-top: 0.28rem;
            padding:0 1.32rem;
        }

      }
      li:last-child {
        border-right:0;
      }
    }
    .el-input--mini .el-input__inner{
        height: 47px;
        line-height: 47px;
    .partner_info {
      background: url(../../img/formBanner.png) 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-button--primary{
        padding: 0.13rem 1.70rem;
    .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;
      line-height: 40px;
      position: relative;
      font-size: 14px;
      padding: 0 .4rem;
      margin: 0;
    }
    .el-input, .el-textarea{
        padding: 0 .4rem;
    .el-input, .el-textarea {
      padding: 0 .4rem;
    }
}

.wrapper,.partner_info{
    .content_title:first-child{
        margin: 0.99rem 0 0.95rem;
  }
  .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;
         margin-top: 0.04rem;
        }
        span{
            margin-left: 0.06rem;
        }
    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){
  }
  .content:nth-child(3) {
    margin-bottom: 0.82rem;
}
  }
</style>
<style>
   .el-textarea__inner{
   .el-textarea__inner {
      height: 1rem;
   }
   .el-message--error{
   .el-message--error {
      z-index: 9999 !important;
   }
	
   @media (max-width: 750px) and (min-width: 0){
      .el-textarea__inner{
          line-height: 1;
   @media (max-width: 750px) and (min-width: 0) {
      .el-textarea__inner {
      line-height: 1;
      }
      .el-message--error{
      .el-message--error {
         min-width: 2rem;
         padding: 0.2rem;
      }
      .el-input__inner{
      .el-input__inner {
         color: #fff !important;
         background-color: #303940 !important;
      }
      .el-textarea__inner{
      .el-textarea__inner {
         background-color: #303940 !important;
      }
   }
	
</style>