🎈 perf(页面优化完成):

src/components/LabAndImg/index.module.scss

@@ -1,16 +1,35 @@
 .labAndImg_main {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  position: relative;
+  // border: 1px #eee solid;
+  display: flex;
+  justify-content: center;
   .boxColor {
     width: 100%;
     height: 100%;
     border-radius: 20px;
-    border: 1px solid #818181;
+    // border: 1px solid #818181;
     box-sizing: border-box;
   }
   .labAndImg_image {
     width: 100%;
     height: 100%;
-    border-radius: 20px !important;
+    border-radius: 20px;
+  }
+  .labAndImg_name {
+    position: absolute;
+    margin: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 80%;
+    text-align: center;
+    font-size: 24px;
+    border-radius: 50px;
+    padding: 7px;
+    background-color: #fff;
+    @include common_ellipsis;
   }
 }

src/components/LabAndImg/index.tsx

@@ -15,8 +15,10 @@ type Param = {
   }
   showStatus?: true | false
   onClick?: (val: Param['value']) => void
+  round?: boolean
+  name?: string
 }
-export default memo(({ value, onClick, showStatus = false }: Param) => {
+export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => {
   const [imgs, setImgs] = useState<string[]>([])
 
   //lab是否都是0
@@ -50,10 +52,13 @@ export default memo(({ value, onClick, showStatus = false }: Param) => {
 
   return (
     <>
-      <View className={styles.labAndImg_main} onClick={() => onShowLabAndImg()}>
-        {value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image}></Image>}
-        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle }}></View>}
-        {!value.texture_url && !rgbStyle && <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image}></Image>}
+      <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={() => onShowLabAndImg()}>
+        {value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>}
+        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
+        {!value.texture_url && !rgbStyle && (
+          <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>
+        )}
+        {name && <View className={styles.labAndImg_name}>{name}</View>}
       </View>
       <LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
     </>