图片上传组件修改

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' }}>
+								<li key={f.path} className={styles.preview_img}>
+									<div className={styles.preview_div}>
 										<img
-										style={{ width: 100, height: 100 }}
+											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} style={{}} />
+											}}>
+											<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 {
+    display: flex;
+    align-items: center;
+    .preview_div {
         position: relative;
-    .img {
-        &:hover + .icon_eye {
+        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%);
-        display: none;
+            }
+        }
     }
 }