Browse Source

图片上传适配移动端: 调整popover size;调整title

Evo 4 years ago
parent
commit
e963be4624
2 changed files with 28 additions and 9 deletions
  1. 25
    0
      src/components/Editor/index.css
  2. 3
    9
      src/components/Editor/index.js

+ 25
- 0
src/components/Editor/index.css View File

@@ -130,3 +130,28 @@
130 130
     height: 28px;
131 131
   }
132 132
 }
133
+
134
+.comment-img-popover {
135
+  /* 一行显示3张图 */
136
+  width: 336px;
137
+  min-height: 100px;
138
+  margin: 0 auto;
139
+}
140
+
141
+.comment-img-title {
142
+  margin: 5px auto;
143
+}
144
+.comment-img-title-counter {
145
+  color: #666;
146
+  font-weight: 400;
147
+}
148
+
149
+@media (max-width: 575px) {
150
+  .comment-img-popover {
151
+    /* 一行显示2张图 */
152
+    width: 224px;
153
+  }
154
+  .comment-img-title-counter {
155
+    display: none;
156
+  }
157
+}

+ 3
- 9
src/components/Editor/index.js View File

@@ -411,13 +411,7 @@ class Editor extends React.Component {
411 411
                         });
412 412
                       }}
413 413
                       content={
414
-                        <div
415
-                          style={{
416
-                            width: 336, // 一行显示3张
417
-                            minHeight: 100,
418
-                            margin: "0 auto"
419
-                          }}
420
-                        >
414
+                        <div className="comment-img-popover">
421 415
                           <Upload
422 416
                             onRef={node => (this.uploadRef = node)}
423 417
                             multiple={multiple}
@@ -432,11 +426,11 @@ class Editor extends React.Component {
432 426
                         </div>
433 427
                       }
434 428
                       title={
435
-                        <div style={{ margin: "5px auto" }}>
429
+                        <div className="comment-img-title">
436 430
                           <span>
437 431
                             {intl.get("editor.uploadTip")}
438 432
                             {maxUpload >= 2 ? (
439
-                              <span style={{ color: "#666", fontWeight: 400 }}>
433
+                              <span className="comment-img-title-counter">
440 434
                                 {intl.get("editor.uploadCount", {
441 435
                                   count: maxUpload - uploadFileList.length
442 436
                                 })}