feat: 重建 Bell GoAdmin 产品骨架 (#62)

2026-08-27 18:20:40 +08:00
parent b37c350096
commit f5a3dd796b
715 changed files with 75278 additions and 0 deletions
@@ -0,0 +1,66 @@
+<template>
+  <div class="chart-mini-progress">
+    <div class="target" :style="{ left: target + '%'}">
+      <span :style="{ backgroundColor: indicatorColor }" />
+      <span :style="{ backgroundColor: indicatorColor }" />
+    </div>
+    <div class="progress-wrapper">
+      <div class="progress" :style="{ background: color, width: percentage + '%', height: height }" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  props: {
+    target: { type: Number, default: 0 },
+    height: { type: String, default: '10px' },
+    color: { type: String, default: 'linear-gradient(90deg, #40a9ff, #1677ff)' },
+    indicatorColor: { type: String, default: '#1677ff' },
+    percentage: { type: Number, default: 0 }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-mini-progress {
+  padding: 5px 0;
+  position: relative;
+  width: 100%;
+
+  .target {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    span {
+      border-radius: 100px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 4px;
+      width: 2px;
+
+      &:last-child {
+        top: auto;
+        bottom: 0;
+      }
+    }
+  }
+
+  .progress-wrapper {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+
+    .progress {
+      transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
+      border-radius: 4px;
+      width: 0;
+      height: 100%;
+    }
+  }
+}
+</style>