style(PdfViewer): 优化加载进度环样式，使用锥形渐变背景

添加锥形渐变背景来显示加载进度，并调整百分比文本的层级

@@ -97,7 +97,7 @@
                 <div class="wrapper" @click.stop>
                 <div class="wrapper" @click.stop>
                     <div class="loading-content">
                     <div class="loading-content">
                         <!-- 进度环形图 -->
                         <!-- 进度环形图 -->
-                        <div class="progress-circle">
+                        <div class="progress-circle" :style="{ '--progress': loadingProgress }">
                             <div class="progress-percent">{{ loadingProgress }}%</div>
                             <div class="progress-percent">{{ loadingProgress }}%</div>
                         </div>
                         </div>
 
 
@@ -962,12 +962,32 @@ const applyPinchZoom = (newZoom, centerX, centerY, container) => {
     justify-content: center;
     justify-content: center;
     margin: 0 auto 20px;
     margin: 0 auto 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    position: relative;
+    background: conic-gradient(
+        #4caf50 0deg,
+        #4caf50 calc(var(--progress, 0) * 3.6deg),
+        #e0e0e0 calc(var(--progress, 0) * 3.6deg),
+        #e0e0e0 360deg
+    );
+}
+
+.progress-circle::before {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    bottom: 4px;
+    background-color: white;
+    border-radius: 50%;
 }
 }
 
 
 .progress-percent {
 .progress-percent {
     font-size: 18px;
     font-size: 18px;
     font-weight: bold;
     font-weight: bold;
     color: #4caf50;
     color: #4caf50;
+    position: relative;
+    z-index: 1;
 }
 }
 
 
 .loading-text {
 .loading-text {