Browse Source

使状态栏高度自适应;图标大小自适应;品牌区logo大小自适应;

dengdx 2 months ago
parent
commit
30b624687f
3 changed files with 19 additions and 10 deletions
  1. 14 6
      src/layouts/BasicLayout.tsx
  2. 2 2
      src/layouts/StateBar.tsx
  3. 3 2
      src/pages/patient/register.tsx

+ 14 - 6
src/layouts/BasicLayout.tsx

@@ -74,16 +74,24 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
                 // },
             }}
         >
-            <Layout style={{ minHeight: '100vh', border: '1px solid #ccc' }}>
+            <Layout style={{ minHeight: '100vh', border: '1px solid #ccc' }} className='h-[100vh] xl:text-[50px] lg:text-[40px] md:text-[30px] sm:text-[20px] xs:text-[15px]'>
                 {/* 第一行:品牌和状态区域 */}
-                <Row>
+                <Row className='xl:h-[10vh] text-[100%]'>
                     {/* 品牌区域 */}
-                    <Col xl={4} lg={4} md={5} sm={0} xs={0} className='leading-[0]'>
-                        <Image src={logo} alt="Logo" style={{ width: '100%' }} />
+                    <Col xl={4} lg={4} md={5} sm={0} xs={0} className='h-full'>
+                        <Image src={logo} alt="Logo" height={'100%'} />
                     </Col>
                     {/* 状态区域 */}
-                    <Col xl={20} lg={20} md={19} sm={0} xs={0} 
-                        className='items-center justify-end xl:flex lg:flex md:flex sm:hidden xs:hidden '>
+                    <Col xl={20} lg={20} md={19} sm={0} xs={0}  
+                        className='items-center 
+                                    justify-end 
+                                    xl:flex 
+                                    lg:flex 
+                                    md:flex 
+                                    sm:hidden 
+                                    xs:hidden 
+                                    h-full 
+                                    text-[100%]'>{/* text-[100%] 用于传导父元素的字体大小,最终影响图标大小 */}
                         <StatusBar
                             diskStatus={status.diskStatus}
                             batteryLevel={status.batteryLevel}

+ 2 - 2
src/layouts/StateBar.tsx

@@ -35,7 +35,7 @@ const DiskStatus: React.FC<{ status: StatusBarProps['diskStatus'] }> = ({ status
 
   return (
     <Tooltip title={title}>
-      <HddOutlined className={`${color}  h-full`} />
+      <HddOutlined className={`${color} text-[1em]`} />
     </Tooltip>
   );
 };
@@ -94,7 +94,7 @@ const HeatCapacityStatus: React.FC<{ capacity: number }> = ({ capacity }) => {
 const StatusBar: React.FC<StatusBarProps> = ({ diskStatus, batteryLevel, wifiStrength, heatCapacity }) => {
   return (
     // <div className="flex justify-end p-2">
-      <Space className='sm:text-[40px] xs:text-[20px] md:text-[30px] lg:text-[40px] xl:text-[50px]'>
+      <Space className='h-full'>
         <DiskStatus status={diskStatus} />
         <BatteryStatus level={batteryLevel} />
         <WifiStatus strength={wifiStrength} />

+ 3 - 2
src/pages/patient/register.tsx

@@ -3,6 +3,7 @@ import { Row, Col, Card, Collapse, Grid, Divider } from 'antd';
 import BasicInfoForm from './components/register.form';
 import ProtocolList from './components/register.protocol.list';
 import SelectedProtocolList from './components/register.selected.protocol.list';
+import { AutoCenter } from 'antd-mobile';
 
 const { useBreakpoint } = Grid;
 const { Panel } = Collapse;
@@ -19,8 +20,8 @@ const RegisterPage: React.FC = () => {
         // 大屏幕:三栏布局
         return (
             <Row  className='flex-1'>
-                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}  className='flex-1 border border-green-500 h-8'>
-                    <BasicInfoForm style={{ flex: 1 }} />
+                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}  style={{border:'4px solid green',height:'300px',display:'flex',flexDirection:'column'}}>
+                    <BasicInfoForm style={{ flex: '1 1 0%' ,overflow:'auto'}} />
                 </Col>
                 <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
                     <ProtocolList />