From e263e1100718d27815e897ab0cfc15c91dc0ff4c Mon Sep 17 00:00:00 2001
From: wzhqwq <wzhii345@outlook.com>
Date: Sun, 1 Aug 2021 13:34:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/review/review.css               |  2 +-
 src/components/UploadUnit/upload.css      |  1 -
 src/components/UserControl/UserControl.js |  6 ++--
 src/index/index.css                       | 39 +++++++++++++++++++--
 src/index/index.js                        | 42 ++++++++++++++++-------
 5 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/src/admin/review/review.css b/src/admin/review/review.css
index a1ab715..e132479 100644
--- a/src/admin/review/review.css
+++ b/src/admin/review/review.css
@@ -14,7 +14,7 @@
   cursor: zoom-in;
 }
 .review-img > img {
-  /* max-height: 300px; */
+  max-height: 300px;
   max-width: 800px;
 }
 
diff --git a/src/components/UploadUnit/upload.css b/src/components/UploadUnit/upload.css
index dbdc8c8..5f93ba0 100644
--- a/src/components/UploadUnit/upload.css
+++ b/src/components/UploadUnit/upload.css
@@ -99,5 +99,4 @@
 }
 .scaled-wrap > img {
   transition: transform .3s ease-out;
-  transform-origin: top left;
 }
\ No newline at end of file
diff --git a/src/components/UserControl/UserControl.js b/src/components/UserControl/UserControl.js
index 817409b..f6ed8dc 100644
--- a/src/components/UserControl/UserControl.js
+++ b/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>
diff --git a/src/index/index.css b/src/index/index.css
index 10db512..ec2874f 100644
--- a/src/index/index.css
+++ b/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%;
diff --git a/src/index/index.js b/src/index/index.js
index cf18a5d..2fc84f3 100644
--- a/src/index/index.js
+++ b/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>