gypsy-crm-frontend-vu/components/cwg-progress.vue

<template>
  <u-overlay :show="visible">
    <view class="overlay-center">
      <view class="progress-box">
        <u-loading-icon :text="text" textSize="18" />
        <u-line-progress :percentage="progress" activeColor="#ea002a" inactiveColor="#ececec" :showText="false"
          height="4" />
      </view>
    </view>
  </u-overlay>
</template>


<script setup lang="ts">
import { useProgress } from '@/hooks/useProgress'

// 使用全局进度管理
const { visible, progress, text } = useProgress()
</script>

<style lang="scss" scoped>
.overlay-center {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;

  display: flex;
  align-items: center; // 垂直居中
  justify-content: center; // 水平居中
}

.progress-box {
  width: 70%;
  max-width: 600rpx;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  padding: 40px;
  background: #fff;
  border-radius: 12px;
}

:deep(.u-line-progress) {
  width: 100%;
}
</style>