图片上传组件修改

one_stop_public/libs/UploadCom.js

@@ -86,20 +86,25 @@ export default class UploadCom extends React.Component {
 					{(files || []).map((f) => {
 						if ((f.path && f.path.indexOf('.png') !== -1) || f.path.indexOf('.jpg') !== -1) {
 							return (
-								<li key={f.path} className={styles.preview_img} style={{ position: 'relative' }}>
-									<img
-										style={{ width: 100, height: 100 }}
-										className={styles.img}
-										src={queryApiActionPath() + f.path}
-										onClick={() => {
-											// window.open(queryApiActionPath() + f.path);
-											this.setState({
-												previewVisible: true,
-												previewImage: queryApiActionPath() + f.path,
-											});
-										}}
-									/>
-									<Icon type="eye" className={styles.icon_eye} style={{}} />
+								<li key={f.path} className={styles.preview_img}>
+									<div className={styles.preview_div}>
+										<img
+											style={{ width: '100%', height: 100 }}
+											className={styles.img}
+											src={queryApiActionPath() + f.path}
+										/>
+										<div
+											className={styles.mask}
+											onClick={() => {
+												// window.open(queryApiActionPath() + f.path);
+												this.setState({
+													previewVisible: true,
+													previewImage: queryApiActionPath() + f.path,
+												});
+											}}>
+											<Icon type="eye" className={styles.icon_eye} />
+										</div>
+									</div>
 									{!disabled && (
 										<Icon
 											style={{ marginLeft: 10 }}

one_stop_public/libs/style.less

@@ -239,18 +239,32 @@
 }
 
 .preview_img {
-    position: relative;
-    .img {
-        &:hover + .icon_eye {
-            display: block;
+    display: flex;
+    align-items: center;
+    .preview_div {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        &:hover {
+            .mask {
+                display: block;
+            }
+        }
+        .mask {
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .5);
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: none;
+            .icon_eye {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                color: #fff;
+                transform: translate(-50%, -50%);
+            }
         }
-    }
-    .icon_eye {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        color: #fff;
-        transform: translate(-50%, -50%);
-        display: none;
     }
 }