优化移动端的响应式样式

LeafYeeXYZ · Apr 14, 2024 · d5a1c25 · d5a1c25
1 parent 9db2f9c
commit d5a1c25
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/src/components/Images.jsx b/src/components/Images.jsx
@@ -97,20 +97,18 @@ function Images({ images, setImages, zhMode, dialogAction }) {
           <img src={imgurl} className='image-loading image-item' /> :
           <img src={image.url} className='image-item' />
         }
-        <div className='image-funcs'>
         { 
           image.type === 'loading' ||
-          <a href={image.url} className='image-marker' onClick={handleStar}>{ image.star === 'stared' ? <StarFilled /> : <StarOutlined /> }</a>
+          <div className='image-funcs'>
+            <div className='image-funcs-left'>
+              <a href={image.url} className='image-marker' onClick={handleStar}>{ image.star === 'stared' ? <StarFilled /> : <StarOutlined /> }</a>
+            </div>
+            <div className='image-funcs-right'>
+              <a href={image.url} download className='image-downloader'><DownloadOutlined /></a>
+              <a href={image.url} className='image-deleter' onClick={handleDelete}><DeleteOutlined /></a>
+            </div>
+          </div>
         }
-        { 
-          image.type === 'loading' ||
-          <a href={image.url} download className='image-downloader'><DownloadOutlined /></a>
-        }
-        { 
-          image.type === 'loading' ||
-          <a href={image.url} className='image-deleter' onClick={handleDelete}><DeleteOutlined /></a>
-        }
-        </div>
       </SwiperSlide>
     )
   })

diff --git a/src/styles/Images.css b/src/styles/Images.css
@@ -51,13 +51,22 @@
   top: 0;
   right: 0;
   width: 100%;
-  padding: 0.65rem 0.6rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  & .image-funcs-left {
+    padding: 0.65rem 0.6rem;
+    display: flex;
+    justify-content: flex-start;
+  }
+  & .image-funcs-right {
+    padding: 0.65rem 0.6rem;
+    display: flex;
+    justify-content: flex-end;
+  }
 
   & .image-downloader,
   & .image-deleter,
   & .image-marker {
-    vertical-align: middle;
-    float: right;
     margin-left: 0.6rem;
     padding: 0.5rem 1rem;
     border-radius: 3rem;
@@ -73,7 +82,6 @@
     }
   }
   & .image-marker {
-    float: left;
     margin-left: 0;
     transition: all 0.3s ease;
     &::after {
@@ -111,18 +119,10 @@
 }
 
 @media screen and (max-width: 512px) {
-  .image-funcs {
-    padding: 0.35rem 0.3rem;
-    transform: scale(0.85) translateX(7.5%);
+  .image-funcs-left {
+    transform: scale(0.85) translate(-7.5%, -7.5%);
   }
-  .image-downloader,
-  .image-deleter {
-    margin-left: 0.3rem;
-  }  
-  .image-marker {
-    transform: translateX(-106%);
-    &:hover {
-      transform: translateX(-64%);
-    }
+  .image-funcs-right {
+    transform: scale(0.85) translate(7.5%, -7.5%);
   }
 }