开发: 添加小屏幕css[少], 聊天记录投票. 客户中心修改, 工作台支持小屏

src/pages/Workbench/index.module.scss

@@ -1,9 +1,17 @@
+.dataSumBox {
+  display: flex;
+}
+
 .dataSum {
   margin-bottom: 24px;
   padding: 24px;
   color: #000;
   background-color: #fff;
   border-radius: 8px;
+
+  &:last-child {
+    margin-bottom: 12px;
+  }
 }
 
 .dataItem {
@@ -20,6 +28,7 @@
 
 .dataIconBox {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 64px;
@@ -35,8 +44,8 @@
 }
 
 .dataCount {
-  font-size: 26px;
   font-weight: 500;
+  font-size: 26px;
 }
 
 .dataCardBox {
@@ -51,3 +60,30 @@
   border: 1px solid #ddd;
   border-radius: 12px;
 }
+
+@media only screen and (max-width: 768px) {
+  .dataSumBox,
+  .dataCardBox {
+    flex-direction: column;
+  }
+
+  .dataItem {
+    display: flex;
+    width: 100%;
+    padding-bottom: 12px;
+    border-right: none;
+
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .dataCard {
+    margin-bottom: 12px;
+  }
+
+  .dataSum {
+    margin-bottom: 16px;
+  }
+}

src/pages/Workbench/index.tsx

@@ -99,7 +99,7 @@ const Workbench: React.FC = () => {
           <span style={{ fontSize: 18 }}>数据总览</span>
           {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
         </div>
-        <div style={{ display: 'flex' }}>
+        <div className={styles.dataSumBox}>
           <DataSumItemCard
             title="客户数量"
             content="全部客户数量(含重复)"