format-code

king

2019-07-16 ed58afaaa564c54d22a42593265addce08bd5850

 src/views/contactInformation/index.vue

@@ -1,214 +1,211 @@
<template>
    <div class="content1">
        <div class="wrapper mainContact">
            <h2>联系方式</h2>
            <ul class="contact_ul">
                <li>
                    <h3><img src="../../img/call.png" alt=""></h3>
                    <p style="margin-top: 0.2rem;">400-189-1819</p>
                    <p>周一到周五</p>
                </li>
            <li>
                <h3><img src="../../img/email.png" style="margin-top: 0.1rem;" alt=""></h3>
                <p style="margin-top: 0.28rem;">service@minkesoft.com</p>
            </li>
            <li>
                <h3><img src="../../img/di.png" alt=""></h3>
                <p style="margin-top: 0.2rem;">北京市朝阳区建国路88号</p>
                <p>SOHO现代城2号楼29层</p>
            </li>
            </ul>
            <h2>留下您的联系方式，我们将尽快和您联系</h2>
            <el-form class="ruleForm" label-width="50px" :rules="rules" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item>
                            <el-input class="color" placeholder="手机号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item >
                            <el-input class="color" placeholder="称呼"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item style="background:#fff">
                            <el-input class="color" placeholder="邮箱" style="background:#fff"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item >
                            <el-input class="color" placeholder="公司"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item >
                            <el-input class="color"  type="textarea" placeholder="简单描述您的需求" style="height: 1rem;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="text-align:center;margin-top: 0.3rem;">
                    <el-col>
                        <el-form-item >
                            <el-button type="primary" >提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
  <div class="content1">
    <div class="wrapper mainContact">
      <h2>联系方式</h2>
      <ul class="contact_ul">
        <li>
          <h3><img src="../../img/call.png" alt=""></h3>
          <p style="margin-top: 0.2rem;">400-189-1819</p>
          <p>周一到周五</p>
        </li>
        <li>
          <h3><img src="../../img/email.png" style="margin-top: 0.1rem;" alt=""></h3>
          <p style="margin-top: 0.28rem;">service@minkesoft.com</p>
        </li>
        <li>
          <h3><img src="../../img/di.png" alt=""></h3>
          <p style="margin-top: 0.2rem;">北京市朝阳区建国路88号</p>
          <p>SOHO现代城2号楼29层</p>
        </li>
      </ul>
      <h2>留下您的联系方式，我们将尽快和您联系</h2>
      <el-form class="ruleForm" label-width="50px" :rules="rules" >
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-input class="color" placeholder="手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item >
              <el-input class="color" placeholder="称呼"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="background:#fff">
              <el-input class="color" placeholder="邮箱" style="background:#fff"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item >
              <el-input class="color" placeholder="公司"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item >
              <el-input class="color"  type="textarea" placeholder="简单描述您的需求" style="height: 1rem;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align:center;margin-top: 0.3rem;">
          <el-col>
            <el-form-item >
              <el-button type="primary" >提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            rules:{
  data () {
    return {
      rules: {

            }
        }
    },

      }
    }
  }
}
</script>

<style lang="less" >
@media (max-width: 750px) and (min-width: 0){
    .content1{
        background: url(../../img/contactBanner.png) no-repeat;
        background-size: 100% 100%;
        background-size: cover;
        padding: 1.3rem 0;
  @media (max-width: 750px) and (min-width: 0){
    .content1 {
      background: url(../../img/contactBanner.png) no-repeat;
      background-size: 100% 100%;
      background-size: cover;
      padding: 1.3rem 0;
    }
    .el-form-item__content{
        margin: 0
    .el-form-item__content {
      margin: 0
    }
    .mainContact{
        margin-top: 1.27rem;
        >h2{
            font-size: 0.26rem;
            color: #3B3B3C;
            margin:0.6rem 0 0.17rem;
        }
        ul{
            width: 100%;
            height: auto;
            padding: .4rem;
            li{
                width: 80%;
                display: flex;
                align-items: center;
                margin: .2rem auto;
                padding:  .2rem .4rem;
                p{
                    display: none
                }
                h3{
                    display: block;
                    width: .38rem;
                    height: 80%;
                    margin-right: .2rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                h2{
                    color:#fff;
                }
    .mainContact {
      margin-top: 1.27rem;
      > h2 {
        font-size: 0.26rem;
        color: #3B3B3C;
        margin:0.6rem 0 0.17rem;
      }
      ul {
        width: 100%;
        height: auto;
        padding: .4rem;
        li {
          width: 80%;
          display: flex;
          align-items: center;
          margin: .2rem auto;
          padding:  .2rem .4rem;
          p {
            display: none
          }
          h3 {
            display: block;
            width: .38rem;
            height: 80%;
            margin-right: .2rem;
            img {
              width: 100%;
              height: 100%;
            }
            li:first-child{
                background: #1DA1F2;
            }
            li:nth-child(2){
                background: #3B5998;
            }
            li:nth-child(3){
                 background: #4285F4;
            }
          }
          h2 {
            color:#fff;
          }
        }
        .el-col-12 {
            width: 84%;
        li:first-child {
          background: #1DA1F2;
        }
        .partner_info .ruleForm[data-v-238abfa1] {
            padding: 0;       
        li:nth-child(2) {
          background: #3B5998;
        }
        .element .style {
            margin: 0;
        li:nth-child(3) {
          background: #4285F4;
        }
        .el-button--primary{
            width: 40%;
            background: #00A1E1;
        }
        .color>.el-input__inne{
            background: #fff;
        }
        .el-textarea {
            width: 82%;
            background: #fff;
        }
      }
      .el-col-12 {
        width: 84%;
      }
      .partner_info .ruleForm[data-v-238abfa1] {
        padding: 0;       
      }
      .element .style {
        margin: 0;
      }
      .el-button--primary {
        width: 40%;
        background: #00A1E1;
      }
      .color > .el-input__inne {
        background: #fff;
      }
      .el-textarea {
        width: 82%;
        background: #fff;
      }
    }
}
@media (min-width: 751px) {
    .content1{
        padding: 1.3rem 0;
        background: url(../../img/contactBanner.png) no-repeat;
        min-height: 14.42rem;
        background-size: cover;
  }
  @media (min-width: 751px) {
    .content1 {
      padding: 1.3rem 0;
      background: url(../../img/contactBanner.png) no-repeat;
      min-height: 14.42rem;
      background-size: cover;
    }
    .contact_ul{
        display: flex;
        padding-bottom: 0.72rem;
        margin-top: 0.85rem;
        border-bottom: 1px solid #EBECF0;
    .contact_ul {
      display: flex;
      padding-bottom: 0.72rem;
      margin-top: 0.85rem;
      border-bottom: 1px solid #EBECF0;

        li{
            float: left;
            flex: 1;
            text-align: center;
            h2{
                font-size: 0.3rem;
                color: #3B3B3C;
                margin:0.24rem 0 0.17rem;
            }
            p{
                font-size: 0.16rem;
                color: #4E6C8D;
            }
      li {
        float: left;
        flex: 1;
        text-align: center;
        h2 {
          font-size: 0.3rem;
          color: #3B3B3C;
          margin:0.24rem 0 0.17rem;
        }
    }
    .el-button--primary{
        background: #5E8EEB;
        border-color: #5E8EEB;
        padding: 0.13rem 0.79rem;
    }
    .mainContact{
        margin: 2.17rem auto 1.84rem;
        padding:0.72rem 1.65rem 0.69rem;
    }
}
.mainContact{
        background: rgba(255,255,255,1);
        box-shadow: 0px 0px 29px 0px rgba(34,62,114,0.29);
        border-radius: 0.3rem;
        h2{
            text-align: center;
            font-size: 0.3rem;
            color:#3B3B3C;
        p {
          font-size: 0.16rem;
          color: #4E6C8D;
        }
        h2:nth-child(3){
            margin: 0.85rem 0 0.91rem;
        }
      }
    }
    .el-button--primary {
      background: #5E8EEB;
      border-color: #5E8EEB;
      padding: 0.13rem 0.79rem;
    }
    .mainContact {
      margin: 2.17rem auto 1.84rem;
      padding:0.72rem 1.65rem 0.69rem;
    }
  }
  .mainContact {
    background: rgba(255,255,255,1);
    box-shadow: 0px 0px 29px 0px rgba(34,62,114,0.29);
    border-radius: 0.3rem;
    h2 {
      text-align: center;
      font-size: 0.3rem;
      color:#3B3B3C;
    }
    h2:nth-child(3) {
      margin: 0.85rem 0 0.91rem;
    }
  }
</style>
<style>
   .el-textarea__inner{
   .el-textarea__inner {
      height: 1rem;
   }
</style>