pc_shop_site/components/PcSwitch.vue

<template>
  <div
    :class="['switch', status ? 'green' : 'red']"
    @click="changeStatus">
    <div :class="['switch_inner', status ? '' : 'right']">
      {{ status ? 'Yes' : 'No' }}
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'status',
    event: 'change',
  },
  props: {
    status: Boolean
  },
  methods: {
    changeStatus() {
      this.$emit('change', !this.status)
    },
  },
}
</script>

<style lang="scss" scoped>
.switch {
  width: 70px;
  height: 28px;
  cursor: pointer;
  transition: all 0.3s;
  div {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    transition: all 0.3s;
  }
}
.green {
  border: 1px solid #13ce66;
  background-color: #13ce66;
}
.red {
  border: 1px solid #e90000;
  background-color: #e90000;
}
.right {
  transform: translate(100%, 0);
}
</style>