fix(pages): adjust RoomDetailPage & userSettingPage styles (#548)

netless-io · Apr 16, 2021 · 2365212 · 2365212
1 parent e09113b
commit 2365212
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 48 deletions.
diff --git a/desktop/renderer-app/src/pages/DeviceCheckPages/SystemCheckPage/index.less b/desktop/renderer-app/src/pages/DeviceCheckPages/SystemCheckPage/index.less
@@ -1,23 +1,20 @@
 .system-check-container {
     display: flex;
+    flex-direction: column;
+    width: 100%;
     min-width: 360px;
     margin-bottom: 36px;
 
-    span {
-        margin-bottom: 8px;
-    }
-}
+    .system-check-item {
+        margin-bottom: 16px;
 
-.system-check-inner-left {
-    display: flex;
-    margin-right: 24px;
-    flex-direction: column;
-    color: #7a7b7c;
-}
+        .system-check-item-name {
+            margin-right: 24px;
+            color: #7a7b7c;
+        }
 
-.system-check-inner-right {
-    display: flex;
-    flex-direction: column;
-    color: #444e60;
-    align-items: flex-end;
+        > span {
+            color: #444e60;
+        }
+    }
 }
diff --git a/desktop/renderer-app/src/pages/DeviceCheckPages/SystemCheckPage/index.tsx b/desktop/renderer-app/src/pages/DeviceCheckPages/SystemCheckPage/index.tsx
@@ -80,14 +80,16 @@ export const SystemCheckPage = (): React.ReactElement => {
     return (
         <DeviceCheckLayoutContainer>
             <div className="system-check-container">
-                <div className="system-check-inner-left">
-                    <span>处理器 (CPU)</span>
-                    <span>缓存可用空间</span>
-                    <span>网络质量情况</span>
-                </div>
-                <div className="system-check-inner-right">
+                <div className="system-check-item">
+                    <span className="system-check-item-name">处理器 (CPU)</span>
                     <span>{cpuModel}</span>
+                </div>
+                <div className="system-check-item">
+                    <span className="system-check-item-name">缓存可用空间</span>
                     <span>{freeMemory} MB</span>
+                </div>
+                <div className="system-check-item">
+                    <span className="system-check-item-name">网络质量情况</span>
                     <span>{networkDescription[networkSituation]}</span>
                 </div>
             </div>

diff --git a/desktop/renderer-app/src/pages/RoomDetailPage/RoomDetailPage.less b/desktop/renderer-app/src/pages/RoomDetailPage/RoomDetailPage.less
@@ -128,19 +128,12 @@
 }
 
 .user-periodic-room {
-    flex: 1;
-    text-align: right;
+    margin-left: auto;
     a:link {
         color: #3381ff;
     }
 }
 
-.user-room-detail-cut-line {
-    width: 1022px;
-    height: 1px;
-    background-color: #dbe1ea;
-}
-
 .user-room-detail-back {
     color: #3381ff;
 }
@@ -155,11 +148,11 @@
 }
 
 .user-room-detail-nav {
-    width: 1022px;
+    width: 100%;
     position: absolute;
     background-color: white;
     z-index: 1;
-    margin-left: 24px;
+    padding: 0 24px;
 }
 
 .user-room-detail-head {

diff --git a/desktop/renderer-app/src/pages/RoomDetailPage/index.tsx b/desktop/renderer-app/src/pages/RoomDetailPage/index.tsx
@@ -61,7 +61,6 @@ export const RoomDetailPage = observer<RoomDetailPageProps>(function RoomDetailP
                                 <span>返回</span>
                             </div>
                         </Link>
-                        <div className="user-segmentation" />
                         {roomInfo.title && (
                             <>
                                 <Divider type="vertical" />
@@ -90,7 +89,6 @@ export const RoomDetailPage = observer<RoomDetailPageProps>(function RoomDetailP
                             </>
                         )}
                     </div>
-                    <div className="user-room-detail-cut-line" />
                 </div>
                 <div className="user-room-detail-body">
                     <div className="user-room-detail-mid">

diff --git a/desktop/renderer-app/src/pages/ScheduleRoomPage/ScheduleRoomPage.less b/desktop/renderer-app/src/pages/ScheduleRoomPage/ScheduleRoomPage.less
@@ -1,19 +1,15 @@
 .schedule-btn-list {
     display: flex;
     flex-direction: row-reverse;
+    margin-bottom: 30px;
+
     .ant-btn {
         width: 128px;
         height: 32px;
         margin-right: 8px;
     }
 }
 
-.schedule-room-list-month {
-    height: 450px;
-    overflow-y: auto;
-    margin-top: 30px;
-}
-
 .table-line {
     border-bottom: solid 1px #dbe1ea;
     width: 100%;
@@ -43,21 +39,20 @@
 }
 
 .schedule-room-box {
+    height: 100%;
     position: relative;
-    width: 1070px;
-    height: 615px;
     background-color: white;
-    margin: 24px auto 0;
+    margin: 0 auto;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
 
 .schedule-room-nav {
-    width: 1022px;
+    width: 100%;
     position: absolute;
     background-color: white;
     z-index: 1;
-    margin-left: 24px;
+    padding: 0 24px;
 }
 
 .schedule-room-head {
@@ -78,8 +73,8 @@
 
 .schedule-room-body {
     width: 100%;
-    margin-top: 65px;
-    height: 551px;
+    height: 100%;
+    padding-top: 65px;
     overflow-y: auto;
 }
 

diff --git a/desktop/renderer-app/src/pages/ScheduleRoomPage/index.tsx b/desktop/renderer-app/src/pages/ScheduleRoomPage/index.tsx
@@ -183,9 +183,8 @@ export const ScheduleRoomDetailPage = observer<{}>(function ScheduleRoomDetailPa
                         <Divider type="vertical" />
                         <div className="schedule-room-title">{periodicInfo.periodic.title}</div>
                     </div>
-                    <div className="schedule-room-cut-line" />
                 </div>
-                <div className="schedule-room-body">
+                <div className="schedule-room-body fancy-scrollbar">
                     <div className="schedule-room-mid">
                         <div className="schedule-room-tips">
                             <div className="schedule-room-tips-title">

diff --git a/packages/flat-components/src/components/MainPageLayout/style.less b/packages/flat-components/src/components/MainPageLayout/style.less
@@ -19,6 +19,10 @@
         border: 1px solid white;
     }
 
+    > span {
+        border: 0.5px solid #fff;
+    }
+
     & > .ant-avatar {
         cursor: pointer;
     }