基本完成首页部分

src/admin/review/review.css

@@ -14,7 +14,7 @@
   cursor: zoom-in;
 }
 .review-img > img {
-  /* max-height: 300px; */
+  max-height: 300px;
   max-width: 800px;
 }
 

src/components/UploadUnit/upload.css

@@ -99,5 +99,4 @@
 }
 .scaled-wrap > img {
   transition: transform .3s ease-out;
-  transform-origin: top left;
 }

src/components/UserControl/UserControl.js

@@ -23,13 +23,15 @@ export default function UserControl(props) {
               }}
             >退出审核</button>
           </div>
-        ) : (
+        )
+        : (
           <div className="user">
             {
               userData.role === -1
               ? (
                 <Spinner />
-              ) : (
+              )
+              : (
                 <div className="user-avatar">
                   <img src={images.avatar} alt="user avatar" />
                 </div>

src/index/index.css

@@ -22,12 +22,12 @@
   margin: 0 5px;
 }
 .card-header {
-  padding: .75em .5em;
-  font-size: 18px;
+  padding: .5em;
+  font-size: 20px;
   border-bottom: 1px solid #e6e6e6;
 }
 .card-body {
-  padding: 10px;
+  padding: 10px 5px;
 }
 
 .split-lg {
@@ -36,6 +36,39 @@
   flex-wrap: wrap;
 }
 
+.img-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin: -3px -5px;
+  align-items: flex-start;
+}
+.img-list > img {
+  width: 200px;
+  margin: 3px 5px;
+}
+
+.message-list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+.message-list > li {
+  line-height: 20px;
+  padding: 8px 0;
+  position: relative;
+}
+/* list disk */
+.message-list > li::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background-color: #DADADA;
+  margin-right: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
 @media (max-width: 980px) {
   .split-lg > .card {
     width: 100%;

src/index/index.js

@@ -48,14 +48,21 @@ export class AppContainer extends Component {
             <div className="card-body">
               {
                 this.state.fetchingEssential
-                ? <div className="col-center"><Spinner isGray /></div>
-                : (this.state.essentialMessages.length === 0
-                  ? (<div className="col-center">暂时没有精选留言</div>)
+                ? (
+                  <div className="col-center"><Spinner isGray /></div>
+                )
+                : (
+                  this.state.essentialMessages.length === 0
+                  ? (
+                    <div className="col-center">暂时没有精选留言</div>
+                  )
                   : (
                     <ul className="message-list">
-                    {this.state.essentialMessages.map(msg => (
-                      <li dangerouslySetInnerHTML={{ __html: msg }}></li>
-                    ))}
+                      {
+                        this.state.essentialMessages.map((msg, i) => (
+                          <li dangerouslySetInnerHTML={{ __html: msg }} key={i}></li>
+                        ))
+                      }
                     </ul>
                   )
                 )
@@ -69,12 +76,23 @@ export class AppContainer extends Component {
             <div className="card-body">
               {
                 this.state.fetchingEssential
-                ? <div className="col-center"><Spinner isGray /></div>
-                : (this.state.essentialImages.length === 0
-                  ? (<div className="col-center">暂时没有精选图片</div>)
-                  : this.state.essentialImages.map(src => (
-                    <img src={src} alt="精选图片" />
-                  ))
+                ? (
+                  <div className="col-center"><Spinner isGray /></div>
+                )
+                : (
+                  this.state.essentialImages.length === 0
+                  ? (
+                    <div className="col-center">暂时没有精选图片</div>
+                  )
+                  : (
+                    <div className="img-list">
+                      {
+                        this.state.essentialImages.map((src, i) => (
+                          <img src={src} key={i} alt="精选图片" />
+                        ))
+                      }
+                    </div>
+                  )
                 )
               }
             </div>