移动端更新

src/pages/A2layout/components/Appreciate/index.module.scss

@@ -475,6 +475,7 @@
             width: 15px;
             height: 15px;
             margin-left: 10px;
+
             cursor: pointer;
           }
         }
@@ -521,7 +522,7 @@
       }
       .content {
         width: 100%;
-        height: calc(100% - 100px);
+        height: calc(100% - 180px);
         overflow: auto;
         &::-webkit-scrollbar {
           width: 0;
@@ -556,7 +557,7 @@
               border-radius: 10px;
               width: 100%;
               height: 100%;
-              object-fit: contain;
+              object-fit: cover;
             }
           }
           .txt {
@@ -673,6 +674,80 @@
           display: none;
         }
       }
+
+      .detail2 {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: rgba(255, 251, 244, 1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .swiper_container {
+          width: 90%;
+          height: 60%;
+        }
+        .detail2Info {
+          width: 90%;
+          height: 20%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 10px;
+          & > div {
+            width: 100%;
+            font-size: 17px;
+            color: rgba(159, 91, 44, 1);
+            letter-spacing: 1px;
+          }
+          .title {
+            text-align: center;
+            width: fit-content;
+            height: 20px;
+            font-size: 20px;
+            font-weight: bold;
+            color: rgba(159, 91, 44, 1);
+            &::after {
+              content: '';
+              position: relative;
+              bottom: 8px;
+              left: -10%;
+              display: block;
+              width: 120%;
+              height: 10px;
+              background-color: rgba(159, 91, 44, 0.5);
+            }
+          }
+          .texture {
+            margin-top: 20px;
+          }
+          .size {
+            height: 80px;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+          }
+        }
+        .close {
+          position: absolute;
+          top: 30px;
+          right: 30px;
+          width: 35px;
+          height: 35px;
+          background: url('../../../../assets/img/close.png') no-repeat center center;
+          background-size: 100% 100%;
+          cursor: pointer;
+          & > img {
+            width: 100%;
+            object-fit: contain;
+          }
+        }
+      }
     }
   }
 }

src/pages/A2layout/index.tsx

@@ -35,7 +35,7 @@ function A2layout() {
 
       </div>
 
-      <div className={`sider ${isHideSider ? 'hide' : 'show'}`} style={{ display: hidenComplete ? 'none' : 'flex' }}>
+      <div className={`sider ${isHideSider ? 'hide' : 'show'}`}>
         <div className='logo'>
           <img src={require('@/assets/img/smallLogo.png')} alt='' />
           <div className="name">伊犁林则徐纪念馆<br />红色基因库</div>