<template>
  <div class="quality-page">
    <ul>
      <li>
        <p>亮度</p>
        <el-slider v-model="value1"></el-slider>
        <p>{{ value1 }}</p>
      </li>
      <li>
        <p>对比度</p>
        <el-slider v-model="value2"></el-slider>
        <p>{{ value2 }}</p>
      </li>
      <li>
        <p>色度</p>
        <el-slider v-model="value3"></el-slider>
        <p>{{ value3 }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'quality',
  data() {
    return {
      value1: 50,
      value2: 50,
      value3: 50,
    }
  },
  mounted() {},
  methods: {},
}
</script>

<style scoped>
.quality-page {
  height: 100%;
}
.quality-page ul {
  margin: 20px 0;
}
.quality-page ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.quality-page ul li .el-slider {
  width: 230px;
}
</style>
