1

src/sheep/components/user-card/user-card.vue

@@ -2,12 +2,11 @@
   <view @click="emit('click')">
     <view class="flex px-4 py-2">
       <view class="w-200rpx h-300rpx rounded-2 bg-#777 mr-3 relative">
-        <image
-          class="size-full rounded-2"
-          :src="member.memberAvatar"
+        <image class="size-full rounded-2" :src="member.memberAvatar" mode="aspectFill" />
+        <view
+          class="absolute z-10 rounded-2 inset-0 size-full bg-#00000000"
           :style="filterStyle"
-          mode="aspectFill"
-        />
+        ></view>
         <view
           v-if="data.memberPhotoTotal?.total"
           class="absolute left-0 bottom-0 bg-#22222277 rounded-rt-2 rounded-lb-2 flex-row-center px-1 line-height-28rpx"
@@ -88,15 +87,14 @@
   // @ts-ignore
   import { formatDate } from '@/sheep/util/index';
 
-  const props = defineProps<{
-    data?: any;
-    backdropFilter?: boolean;
-  }>();
+  const props = withDefaults(defineProps<{ data: any; backdropFilter?: boolean }>(), {
+    backdropFilter: false,
+  });
   const emit = defineEmits(['click']);
 
   const member = computed(() => props.data.member || {});
 
-  const filterStyle = computed(() =>
-    props.backdropFilter ? { backdropFilter: 'blur(100px)' } : {},
-  );
+  const filterStyle = computed(() => {
+    return props.backdropFilter ? { backdropFilter: 'blur(10px)' } : {};
+  });
 </script>