From 64aaf44b6b2948631ebd0d9840d51e5e31ae5479 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 25 七月 2025 01:44:25 +0800
Subject: [PATCH] Merge branch 'ID1825-床旁副屏改版' into test
---
src/views/mobile/bedsideAuxiliaryScreen/components/ProgressBar.vue | 45 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 45 insertions(+), 0 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/ProgressBar.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/ProgressBar.vue
new file mode 100644
index 0000000..c92f52f
--- /dev/null
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/ProgressBar.vue
@@ -0,0 +1,45 @@
+<template>
+ <div class="progress-container" :style="{ backgroundColor: props.backgroundColor || '#d6def1' }">
+ <div
+ class="progress-bar"
+ :style="{
+ width: computedWidth,
+ backgroundColor: color,
+ borderRadius: '0 999px 999px 0',
+ }"
+ ></div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+ percent: number; // 0 ~ 100
+ color?: string;
+ backgroundColor?: string;
+ borderRadius?: string;
+}
+
+const props = defineProps<Props>();
+
+const computedWidth = computed(
+ () => Math.min(Math.max(props.percent, 0), 100) + "%"
+);
+</script>
+
+<style scoped>
+.progress-container {
+ width: 46px;
+ height: 6px;
+ background: #d6def1;
+ border-radius: 999px;
+ overflow: hidden;
+}
+
+.progress-bar {
+ height: 100%;
+ transition: width 0.3s ease;
+ border-radius: 0 999px 999px 0;
+}
+</style>
--
Gitblit v1.8.0