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
     height: 28px;
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
                         });
411
                         });
412
                       }}
412
                       }}
413
                       content={
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
                           <Upload
415
                           <Upload
422
                             onRef={node => (this.uploadRef = node)}
416
                             onRef={node => (this.uploadRef = node)}
423
                             multiple={multiple}
417
                             multiple={multiple}
432
                         </div>
426
                         </div>
433
                       }
427
                       }
434
                       title={
428
                       title={
435
-                        <div style={{ margin: "5px auto" }}>
429
+                        <div className="comment-img-title">
436
                           <span>
430
                           <span>
437
                             {intl.get("editor.uploadTip")}
431
                             {intl.get("editor.uploadTip")}
438
                             {maxUpload >= 2 ? (
432
                             {maxUpload >= 2 ? (
439
-                              <span style={{ color: "#666", fontWeight: 400 }}>
433
+                              <span className="comment-img-title-counter">
440
                                 {intl.get("editor.uploadCount", {
434
                                 {intl.get("editor.uploadCount", {
441
                                   count: maxUpload - uploadFileList.length
435
                                   count: maxUpload - uploadFileList.length
442
                                 })}
436
                                 })}