szfh_one/src/components/select.vue

<template>
  <ul class="selectcon">
    <li :class="{ active: active==2 }" @click="active=2,$emit('select',2)">
      <span class="txt">L2</span>
      <span class="line"></span>
      <span class="round"></span>
    </li>
    <span class="v-line" :style="{top:active==1?'30px': (active==2?'36px':'32px')}"></span>
    <li :class="{ active: active==1 }" @click="active=1,$emit('select',1)">
      <span class="txt">L1</span>
      <span class="line"></span>
      <span class="round"></span>
    </li>
    <span class="v-line" :style="{top:active=='b1'?'118px':'126px'}"></span>
    <li :class="{ active: active=='b1' }" @click="active='b1',$emit('select','b1')">
      <span class="txt">B1</span>
      <span class="line"></span>
      <span class="round"></span>
    </li>
  </ul>
</template>

<script>
export default {
  props:['select'],
  data(){
    return {
      active:this.select
    }
  },
  watch:{
    '$route':{
      deep:true,
      handler:function (newVal) {
        console.log(newVal);
        if (newVal != 'Home') {
          this.showselect = true
        }
        
      }
    }
  }
};
</script>

<style lang="less" scoped>
.selectcon {
  position: fixed;
  top: 40px;
  right: 10px;
  color: #fff;
  > li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 52px;

    &:first-of-type{
      margin-top: 0;
    }
    .txt {
      width: 80px;
      display: inline-block;
      height: 34px;
      line-height: 34px;
      text-align: right;
    }
    .line {
      display: inline-block;
      background: #fff;
      width: 24px;
      height: 1px;
    }
    .round {
      width: 32px;
      height: 32px;
      background: #fff;
      border-radius: 50%;
    }
  }
  .v-line{
    height: 60px;
    top: 36px;
    display: inline-block;
    background: #fff;
    width: 2px;
    position: absolute;
    right: 20px;
  }
  .active {
    margin-right: 0;
    .txt {
      width: 80px;
      display: inline-block;
      height: 34px;
      line-height: 34px;
      border-radius: 60px;
      background: linear-gradient(270deg, #00cfff 0%, #00aaff 100%);
      border: 4px solid #fff;
      box-sizing: content-box;
      text-align: center;
    }
    .line {
      display: inline-block;
      background: #fff;
      width: 24px;
      height: 2px;
    }
    .round {
      width: 42px;
      height: 42px;
      background: linear-gradient(270deg, #00cfff 0%, #00aaff 100%);
      border-radius: 50%;
      border: 8px solid #fff;
    }
  }
}
</style>