surveyMaker/src/components/footTemplate.vue

<template>
  <div class="tel-sec" :style="`background-color:${bgc}`">
    <div class="fix">
      <!--<img src="../../static/previewModel/more.png" alt=""  class="icon" :style="`${containFlag?'transform:rotateX(180deg)':''}`">-->
      <!--<span>了解更多项目信息</span>-->
      <ul :style="`color:${btnColor}`">
        <li class="dianhua" @click="containFlag=containFlag==1?0:1">
          <img src="https://dm.static.elab-plus.com/tfb_icon_foot/dianhua-2.png" alt="" v-show="containFlag!=1">
          <img src="https://dm.static.elab-plus.com/tfb_icon_foot/dianhua-2_sel.png" alt="" v-show="containFlag==1">
          <p :style="`color:${containFlag==1?'#fff':''}`">电话咨询/留电</p>
        </li>
        <li class="kefu">
          <div :style="`background-color:${btnColor}`" ></div>
          <p>在线咨询</p>
        </li>
        <li class="xiaochengxu">
          <img src="https://dm.static.elab-plus.com/tfb_icon_foot/xiaochengxu.png" alt="" v-show="containFlag!=2">
          <img src="https://dm.static.elab-plus.com/tfb_icon_foot/xiaochengxu_sel.png" alt="" v-show="containFlag==2">
          <p :style="`color:${containFlag==2?'#fff':''}`">进入小程序</p>
        </li>
      </ul>
    </div>
    <div class="contain" v-show="containFlag">
      <div v-show="containFlag==1">
        <ul :style="`color:#333`">
          <li class="saveTel"><i></i>留电</li>
          <li class="phone">
            <a :style="`color:#333`">
              <i></i>电话咨询
            </a>
          </li>
        </ul>
        <div class="saveTelContain">
          <div class="tel-sec1">
            <input type="tel" placeholder="您的手机号" maxlength="11"/>
            <div class="btn text-center">获取验证码</div>
          </div>
          <div class="tel-sec1 verify">
            <input type="tel" placeholder="填写验证码" maxlength="6"/>
            <div class="btn text-center">提交</div>
          </div>
        </div>
        <div class="tel-bot">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    props:{
      bgc:{//背景色
        type:String,
        default:'#B1C096'
      },
      btnColor:{//IM按钮底色和‘留点/电话咨询/查看二维码’文字颜色
        type:String,
        default:'#5f8a61'
      }
    },
    data(){
      return{
        containFlag:0,
      }
    }
  }
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
    border: none;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
  }
  .tel-sec{
    width: 100%;
    position: absolute;
    z-index: 999;
    bottom: 2px;
    .contain{
      padding:0 60px 20px 60px;
      border-top: 1px solid #000;
    }
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    .topTitle{
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #216857;
      text-align: center;
      line-height: 30px;
      padding-bottom: 30px;
    }
    .tel-btn{
      margin: 0 auto;
      line-height: 90px;
      border-radius: 45px;
      font-size: 36px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      p{
        font-size:30px;
        font-family: PingFangSC-Medium;
        color: #FFFFFF;
        text-align: left;
        line-height: 100px;
        width: calc(50% - 3px);
      }
      p:nth-child(1){
        padding-left: 110px;
        background: url("http://skyforest.static.elab-plus.com/temp/chat.png") no-repeat 45px center/42px 41px;
        border-radius: 100px 0 0 100px;

      }
      p:nth-child(2){
        padding-left: 90px;
        background: url("https://dm.static.elab-plus.com/wuXiW3/%E4%BA%8C%E7%BB%B4%E7%A0%81.png") no-repeat 35px center/42px 41px;
        border-radius: 0px 100px 100px 0;
      }
    }
    .line{
      opacity: 0.32;
      border: 1px solid #1C1C1C;
      height: 1px;
      margin-top: 38px;
    }
    .contain ul{
      display: flex;
      margin-top: 30px;
      margin-bottom: 10px;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
      li{
        font-family: PingFangSC-Regular;
        font-size: 24px;
        text-align: center;
        line-height: 30px;
        margin: 0 30px;
        a{
          text-decoration: none;
          display: flex;
          align-items: center;
        }
        display: flex;
        align-items: center;
      }
      li i{
        display: block;
        margin: 0 auto;
        width: 70px;
        height: 70px;
        margin-right: 20px;
      }
      .saveTel i{
        background: url("http://skyforest.static.elab-plus.com/temp/liudian2.png") no-repeat top center/70px 70px;
      }
      .phone i{
        background: url("http://skyforest.static.elab-plus.com/temp/tel.png") no-repeat top center/70px 70px;
      }
      .qrcode i{
        background: url("http://skyforest.static.elab-plus.com/temp/code.png") no-repeat top center/70px 70px;
      }
    }
    .saveTelContain{
      padding: 33px 20px 20px 20px;
      width: 630px;
      height: 230px;
      background: url("http://skyforest.static.elab-plus.com/temp/input box.png") no-repeat center center/100% 100%;
      .tel-sec1{
        display: flex;
        input{
          width: 420px;
          height: 80px;
          line-height: 80px;
          border-radius: 8px;
          font-family: PingFangSC-Medium;
          font-size: 30px;
          /*color: #FFFFFF;*/
          text-align: justify;
          background: transparent;
          padding-left: 30px;
        }

        input::placeholder{
          width: 420px;
          height: 80px;
          line-height: 80px;
          border-radius: 8px;
          font-family: PingFangSC-Medium;
          font-size: 30px;
          color: #FFFFFF;
          text-align: justify;
        }
        div{
          width: 165px;
          height: 80px;
          font-family: PingFangSC-Semibold;
          font-size: 28px;
          color: #fff;
          text-align: center;
          line-height: 80px;
        }
      }

      .verify{
        margin-top: 15px;
      }
    }
    .tel-bot{
      margin-top: 35px;
      p{
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #666666;
        text-align: center;
      }
    }
  }
  .fix{
    /*overflow: hidden;*/
    width: 100%;
    height: 100px;
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    /*.icon{*/
    /*display: block;*/
    /*width: .24rem;*/
    /*height: 0.24rem;*/
    /*margin: 0.07rem auto;*/
    /*}*/
    ul{
      display: flex;
      justify-content: space-around;
      margin: 0;
      li{
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: space-around;*/
        margin: 0;
        height: 100px;
        p{
          font-family: PingFangSC-Regular;
          font-size: 20px;
          text-align: center;
          line-height: 1.5;
        }
      }
      .dianhua{
        padding-top: 10px;
        img{
          width: 40px;
        }
      }
      .kefu{
        transform: translateY(-48px);
        div{
          width: 100px;
          height: 100px;
          border-radius: 100%;
          background:#0f2d52 url("https://dm.static.elab-plus.com/tfb_icon_foot/kefu.png")no-repeat center center /56px 44px;
        }

      }
      .xiaochengxu{
        padding-top: 10px;
        img{
          width: 36px;
        }
      }
    }
  }
</style>