图片加立体感阴影

src/views/badge/orderDetail.vue

@@ -6,6 +6,7 @@
     <div class="order-status">
       <div class="avatar-wrapper">
         <img class="avatar-img" :src="order.path" :alt="order.kind_name" />
+        <div class="progress-image-item-shadow"></div>
       </div>
     </div>
     <div class="status-info">
@@ -129,12 +130,23 @@ function getStatus(status: number) {
     width: 85vw;
     height: 85vw;
     border-radius: 50%;
-    box-shadow: 2px 2px 4px  #00000042,inset -2px -2px 4px  #00000048,inset 2px 2px 4px  #ffffffb4;
     margin-bottom: 24px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+  }
+  
+  .progress-image-item-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    box-shadow: inset 2px 2px 4px  rgba(255, 255, 255, 0.5),inset -2px -2px 4px  rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
   }
   .avatar-img {
     width: 100%;

src/views/badge/preview.vue

@@ -31,6 +31,7 @@
       <van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false">
         <van-swipe-item v-for="item in imageList" :key="item.id">
           <img class="progress-section-img" :src="item.origin_url" alt="">
+          <div class="progress-image-item-shadow"></div>
         </van-swipe-item>
       </van-swipe>
     </div>
@@ -838,4 +839,14 @@ onUnmounted(() => {
   font-size: 16px;
   text-align: center;
 } 
+.progress-image-item-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  box-shadow: inset 2px 2px 4px  rgba(255, 255, 255, 0.5),inset -2px -2px 4px  rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+}
 </style>