邓洁 : 用电量弹窗及样式修改

src/components/timeRangeBtn/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="time-range-group">
+    <div
+        class="time-range-button"
+        :class="{ 'time-range-button-active': selectButton == index }"
+        @click="select(index)"
+        v-for="(item, index) in buttonList"
+        :key="index"
+    >
+      <div class="time-range-text">{{ item }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  // 按钮列表
+  buttonList: {
+    type: Array,
+    default: () => [],
+  },
+  // 按钮选中的值
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  width: {
+    type: String,
+    default: "auto",
+  },
+});
+const emit = defineEmits(["update:modelValue", "select"]);
+
+const selectButton = ref(props.modelValue);
+
+const select = (index) => {
+  if (selectButton.value === index) return;
+  selectButton.value = index;
+  emit("update:modelValue", index);
+  emit("select", index);
+};
+
+watchEffect(() => {
+  selectButton.value = props.modelValue;
+});
+</script>
+
+<style scoped lang="scss">
+.time-range-group {
+  width: 204px;
+  height: 68px;
+  border: 2px solid #0F82AF;
+  border-radius: 10px;
+  background: #062247;
+  display: flex;
+  font-size: 28px;
+  .time-range-button {
+    cursor: pointer;
+    padding: 15px 20px;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    &.time-range-button-active {
+      background: #264A78;
+      border-radius: 10px;
+      color: #FFFFFF;
+    }
+  }
+}
+</style>