监控ui

heyujie

2021-10-11 ae2d855c89ca722ac7309fdf1aa6ceed370e3b95

 src/pages/settings/components/switchBar.vue

@@ -3,7 +3,8 @@
    <div class="name">{{ barName }}</div>

    <el-switch

      v-model="value"

      active-color="rgba(61, 104, 225, 1)"

      active-color="#4e94ff"

      :width="30"

      @change="switchChange"

    >

    </el-switch>

@@ -12,15 +13,10 @@


<script>

export default {

  data() {

    return {

      // value: false,

    };

  },

  props: ["barName","value"],

  props: ["barName", "value"],

  methods: {

    switchChange(val) {

      this.$emit("switchChange",val);

      this.$emit("switchChange", val);

    },

  },

};

@@ -31,12 +27,46 @@
  align-items: center;

  height: 50px;

  padding: 0 25px;

  background-color: rgba(248, 248, 248, 1);

  justify-content: space-between;

  border-radius: 12px;

border-radius: 8px;



  margin-bottom: 10px;

  .el-switch.is-checked .el-switch__core::after {

    left: 100%;

    margin-left: -12px;

  }



  .el-switch__core {

    margin: 0;

    position: relative;

    width: 40px;

    height: 14px;

    border: 1px solid #dcdfe6;

    outline: 0;

    border-radius: 10px;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    background: #dcdfe6;

    -webkit-transition: border-color 0.3s, background-color 0.3s;

    transition: border-color 0.3s, background-color 0.3s;

    vertical-align: middle;

  }

  .el-switch__core:after {

    content: "";

    position: absolute;

    top: 0px;

    left: 0px;

    border-radius: 100%;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    width: 12px;

    height: 12px;

    background-color: #fff;

  }

  .name {

    font-size: 14px;

    font-size: 12px;

    color: #4f4f4f;

    font-weight: bold;

  }

}

</style>