fx66/src/components/loginBox.vue

<template>
    <div class="main">
        <ul class="tab-container">
          <li @click="changeTab(item.id)" v-for="item,index in tabList" :key="index" :class="{'active':item.id===selectedTab}">{{item.label}}</li>
        </ul>
        <div class="tab-item-container">
          <div
            v-if="selectedTab==='phone'"
            class="tab-item">
            <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="餐厅名" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="用户电话" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </div>
    </div>
</template>

<script>
    export default {
      name: "loginBox",
      data(){
        return{
          selectedTab:'phone',
          tabList: {
            'phone': {
              id: 'phone',
              label: '手机'
            },
            'email': {
              id: 'email',
              label: '邮箱'
            },
          }
        }
      }
      ,
      methods:{
        changeTab(id){
          this.selectedTab=id;
        }
      }

    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  .main{
    width: 100%;
    height: 100%;
    padding: 25px;
    & .tab-container{

      box-sizing: border-box;
      border-bottom: solid 2px #e5e5e5;

      display:inline-flex;
      justify-content: space-around;
      width: 100%;
      &>li{
        transition: border-bottom-color 0.25s ease;
        cursor: pointer;
        margin-bottom: -2px;
        box-sizing: border-box;

        &.active{
          border-bottom: 2px solid @primaryBlue;
        }
        padding: 0 30px 20px;
        font-size: 20px;
        color: @lightBlack;
      }
    }
    & .tab-item-container{
      margin-top: 30px;
    }
  }

</style>
<style lang="less">
  @import "../assets/less/_variable.less";
  .el-input *{
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    border-radius: 0!important;
  }
  .el-input:focus-within{
    & *{

      border-color: @primaryBlue;
    }

  }

  .el-input__inner:focus{
    /*border: 0;*/
    border-color: @primaryBlue;
  }
</style>