测量详情页面滚动

src/pages/MeasureRecord.tsx

@@ -80,7 +80,7 @@ export default function MeasureRecord() {
       <NavBar className="bg-white" onBack={back}>
         测量详情
       </NavBar>
-      <div className="main-page-content overflow-x-hidden overflow-y-auto">
+      <div className="main-page-content ">
         <div className="relative h-0 p-0 pb-[70%] border-y border-[#dedede]">
           <div className="absolute left-0 right-0 top-0 bottom-0 bg-title">
             <MeasurementCanvas
@@ -104,48 +104,52 @@ export default function MeasureRecord() {
         <section>
           <h1 className="h-10 px-4 text-base font-medium leading-10">详细信息</h1>
           {measure && (
-            <div className="grid grid-cols-[auto_1fr] bg-white px-5 py-3 gap-x-5 gap-y-4 text-sm">
-              <p className="text-[#818181]">创建时间</p>
-              <span className="text-text">{measure.createTime}</span>
+            <div
+              className="overflow-x-hidden overflow-y-auto"
+              style={{
+                height: 'calc(100vh - var(--navBarHeight) - (100vw * 0.7) - 50px)',
+              }}
+            >
+              <div className="grid grid-cols-[auto_1fr] bg-white px-5 py-3 gap-x-5 gap-y-4 text-sm ">
+                <p className="text-[#818181]">创建时间</p>
+                <span className="text-text">{measure.createTime}</span>
 
-              <p className="text-[#818181]">测量名称</p>
-              <span className="text-text">{measure.name}</span>
+                <p className="text-[#818181]">测量名称</p>
+                <span className="text-text">{measure.name}</span>
 
-              <p className="text-[#818181]">批次</p>
-              <span className="text-text">{measure.batch}</span>
+                <p className="text-[#818181]">批次</p>
+                <span className="text-text">{measure.batch}</span>
 
-              <p className="text-[#818181]">轨型</p>
-              <span className="text-text">{measure.extraDescObj?.railSize}</span>
+                <p className="text-[#818181]">数据来源</p>
+                <span className="text-text">{measure.extraDescObj?.dataSource}</span>
 
-              <p className="text-[#818181]">数据来源</p>
-              <span className="text-text">{measure.extraDescObj?.dataSource}</span>
+                <p className="text-[#818181]">线路分类</p>
+                <span className="text-text">{measure.extraDescObj?.lineClassify}</span>
 
-              <p className="text-[#818181]">线路分类</p>
-              <span className="text-text">{measure.extraDescObj?.lineClassify}</span>
+                <p className="text-[#818181]">轨型</p>
+                <span className="text-text">{measure.extraDescObj?.railSize}</span>
 
-              <p className="text-[#818181]">轨型</p>
-              <span className="text-text">{measure.extraDescObj?.railSize}</span>
+                <p className="text-[#818181]">铁路局名称</p>
+                <span className="text-text">{measure.extraDescObj?.tljCode}</span>
 
-              <p className="text-[#818181]">铁路局名称</p>
-              <span className="text-text">{measure.extraDescObj?.tljCode}</span>
+                <p className="text-[#818181]">路段名称</p>
+                <span className="text-text">{measure.extraDescObj?.gwdCode}</span>
 
-              <p className="text-[#818181]">路段名称</p>
-              <span className="text-text">{measure.extraDescObj?.gwdCode}</span>
+                <p className="text-[#818181]">线路名称</p>
+                <span className="text-text">{measure.extraDescObj?.xmCode}</span>
 
-              <p className="text-[#818181]">线路名称</p>
-              <span className="text-text">{measure.extraDescObj?.xmCode}</span>
+                <p className="text-[#818181]">车站</p>
+                <span className="text-text">{measure.extraDescObj?.stationCode}</span>
 
-              <p className="text-[#818181]">车站</p>
-              <span className="text-text">{measure.extraDescObj?.stationCode}</span>
+                <p className="text-[#818181]">方向</p>
+                <span className="text-text">{measure.extraDescObj?.xbCode}</span>
 
-              <p className="text-[#818181]">方向</p>
-              <span className="text-text">{measure.extraDescObj?.xbCode}</span>
+                <p className="text-[#818181]">股别</p>
+                <span className="text-text">{measure.extraDescObj?.unitType}</span>
 
-              <p className="text-[#818181]">股别</p>
-              <span className="text-text">{measure.extraDescObj?.unitType}</span>
-
-              <p className="text-[#818181]">里程</p>
-              <span className="text-text">{`${measure.extraDescObj?.mile}公里+${measure.extraDescObj?.meter}米`}</span>
+                <p className="text-[#818181]">里程</p>
+                <span className="text-text">{`${measure.extraDescObj?.mile}公里+${measure.extraDescObj?.meter}米`}</span>
+              </div>
             </div>
           )}
         </section>