内容修改

whychdw

2021-06-03 2baa58f9515a661d53118344e237e3441300b24f

 src/components/smallModule/mwThermometer.vue

@@ -1,52 +1,52 @@
<template>
  <div class="thermometer" :class="{ active: state}">
    <div class="line"></div>
    <div class="arc"></div>
  </div>
    <div class="thermometer" :class="{ active: state}">
        <div class="line"></div>
        <div class="arc"></div>
    </div>
</template>

<script>
  export default {
export default {
    props: ['switch'],
    data() {
      return {
        state: false
      }
        return {
            state: false
        }
    },
    watch: {
      'switch': {
        handler(val) {
          this.state = val
        'switch': {
            handler(val) {
                this.state = val
            },
            deep: true
        },
        deep: true
      },
    },
    mounted() {
      this.state = this.switch
        this.state = this.switch
    }
  }
}
</script>

<style scoped>
  .thermometer {
.thermometer {
    width: 16px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

  .line {
.line {
    width: 8px;
    height: 54px;
    background-color: #ffffff;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    position: relative;
  }
}

  .thermometer.active .line::before {
.thermometer.active .line::before {
    content: "";
    display: block;
    width: 6px;
@@ -55,9 +55,9 @@
    bottom: 0;
    left: 1px;
    background: -webkit-linear-gradient(top, #ffffff, #318bf1);
  }
}

  .arc {
.arc {
    width: 18px;
    height: 18px;
    border-radius: 50%;
@@ -65,9 +65,9 @@
    margin-top: -1px;
    overflow: hidden;
    position: relative;
  }
}

  .thermometer.active .arc::before {
.thermometer.active .arc::before {
    content: "";
    display: block;
    width: 20px;
@@ -77,5 +77,5 @@
    position: absolute;
    bottom: -1px;
    left: -1px;
  }
}
</style>