修改报告中的头部姿态样式

frontend/src/renderer/src/views/AloneReportComparison.vue

@@ -11,8 +11,6 @@
     <div style="height: 100%; padding:0 40px; box-sizing: border-box;">
       <div class="AloneReportComparison-container-bodytitle">体态测量报告单对比</div>
       <div class="AloneReportComparison-container-display">
-        <!-- <div class="AloneReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
-        <div class="AloneReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div> -->
       </div>
       <div class="AloneReportComparison-container-userinfodisplay">
         <div class="AloneReportComparison-container-userinfotext2" style="width: 180px;">
@@ -73,12 +71,22 @@
             style="width: 99%;height: 454px; object-fit:contain; ">
           <!-- </div> -->
           <div class="AloneReportComparison-content-title">头部姿态</div>
-          <div style="width: 380px;padding:20px 0; display: flex;justify-content: space-between;">
+          <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 20px">
+            <div style="width: 380px;padding:20px 0 10px; display: flex;justify-content: space-between;">
+              <div style="width:150px;">
+                <div class="rollyawpitchtitle" style=" margin-bottom:10px">倾斜角</div>
                 <img src="@/assets/archive/roll.png">
+              </div>
+              <div style="width:150px;">
+                <div class="rollyawpitchtitle" style="margin-bottom:10px">旋转角</div>
                 <img src="@/assets/archive/yaw.png">
+              </div>
+              <div style="width:150px;">
+                <div class="rollyawpitchtitle" style="margin-bottom:10px">俯仰角</div>
                 <img src="@/assets/archive/pitch.png">
               </div>
-          <div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
+            </div>
+            <div style="width: 460px;padding:0px 0; display: flex;justify-content: space-between;">
               <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                   {{headPoseMaxValuesLeft.rotationLeftMax}}°
                 </span>
@@ -90,7 +98,7 @@
                 {{headPoseMaxValuesLeft.pitchDownMax}}°
               </span></div>
             </div>
-          <div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
+            <div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
               <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                 {{headPoseMaxValuesLeft.rotationRightMax}}°
               </span></div>
@@ -105,6 +113,7 @@
                 </span>
               </div>
             </div>
+          </div>
           <div class="AloneReportComparison-content-title">足底压力</div>
           <div style="width: 90%;height: 280px; display: flex;">
             <img  :src="BACKEND_URL+'/' +  rawOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -146,12 +155,22 @@
             <img :src="BACKEND_URL+'/' +  rawTwoData.body_image" alt="" srcset="" 
               style="width: 99%;height: 454px; object-fit:contain;">
             <div class="AloneReportComparison-content-title">头部姿态</div>
-            <div style="width:380px;padding:20px 0; display: flex;justify-content: space-between;">
+            <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 20px">
+              <div style="width: 380px;padding:20px 0 10px; display: flex;justify-content: space-between;">
+                <div style="width:150px;">
+                  <div class="rollyawpitchtitle" style=" margin-bottom:10px">倾斜角</div>
                   <img src="@/assets/archive/roll.png">
+                </div>
+                <div style="width:150px;">
+                  <div class="rollyawpitchtitle" style="margin-bottom:10px">旋转角</div>
                   <img src="@/assets/archive/yaw.png">
+                </div>
+                <div style="width:150px;">
+                  <div class="rollyawpitchtitle" style="margin-bottom:10px">俯仰角</div>
                   <img src="@/assets/archive/pitch.png">
                 </div>
-            <div style="width: 430px;padding:20px 0; display: flex;justify-content: space-between;">
+              </div>
+              <div style="width: 460px;padding:0px 0; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesRight.rotationLeftMax}}°
                   </span>
@@ -163,7 +182,7 @@
                   {{headPoseMaxValuesRight.pitchDownMax}}°
                 </span></div>
               </div>
-            <div style="width: 430px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                   {{headPoseMaxValuesRight.rotationRightMax}}°
                 </span></div>
@@ -178,6 +197,7 @@
                   </span>
                 </div>
               </div>
+            </div>
             <div class="AloneReportComparison-content-title">足底压力</div>
             <div style="width: 90%;height: 280px; display: flex;">
               <img  :src="BACKEND_URL+'/' +  rawTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -506,12 +526,15 @@ function handleCancel(){
 }
 .rollyawpitchtext{
   font-style: normal;
-  color: #282828;
+  font-weight: 400;
-  font-size: 24px;
+  color: #ffff;
-  width: 170px;
+  font-size: 20px;
+  width: 135px;
+  width: 150px;
 }
 .rollyawpitchtextcolor{
-  color:#14AAFF;
+  font-weight: 700;
+  color: #3BF2C6;
 }
 .AloneReportComparison-title2{
   font-weight: 700;
@@ -694,4 +717,12 @@ function handleCancel(){
   color: rgb(40, 40, 40);
   font-size: 18px;
 }
+.rollyawpitchtitle {
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #14AAFF;
+  width: 150px;
+  text-align:center
+}
 </style>

frontend/src/renderer/src/views/GenerateReport.vue

@@ -72,12 +72,18 @@
               object-fit:contain; ">
             </div>
             <div class="generateReport-content-title">头部姿态</div>
+            <div style=" width:calc(100% - 20px); background:#1c222f;padding-left:70px">
+              <div style="width: 555px;padding-top:20px; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtitle">倾斜角</div>
+              <div class="rollyawpitchtitle">旋转角</div>
+              <div class="rollyawpitchtitle">俯仰角</div>
+            </div>
               <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
                 <img src="@/assets/archive/roll.png">
                 <img src="@/assets/archive/yaw.png">
                 <img src="@/assets/archive/pitch.png">
               </div>
-            <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 575px;padding:0px 0; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesLeft.rotationLeftMax}}°
                   </span>
@@ -104,6 +110,8 @@
                   </span>
                 </div>
               </div>
+            </div>
+           
             <div class="generateReport-content-title">足底压力</div>
             <div style="width: 600px;height: 270px; display: flex;">
               <img  :src="BACKEND_URL+'/' +  rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -139,12 +147,19 @@
               object-fit:contain; ">
             </div>
             <div class="generateReport-content-title">头部姿态</div>
+
+            <div style=" width:calc(100% - 20px); background:#1c222f;padding-left:70px">
+              <div style="width: 555px;padding-top:20px; display: flex;justify-content: space-between;">
+                <div class="rollyawpitchtitle">倾斜角</div>
+                <div class="rollyawpitchtitle">旋转角</div>
+                <div class="rollyawpitchtitle">俯仰角</div>
+              </div>
               <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
                 <img src="@/assets/archive/roll.png">
                 <img src="@/assets/archive/yaw.png">
                 <img src="@/assets/archive/pitch.png">
               </div>
-            <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 575px;padding:0px 0; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesRight.rotationLeftMax}}°
                   </span>
@@ -171,6 +186,46 @@
                   </span>
                 </div>
               </div>
+            </div>
+
+
+            <!-- <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtitle">倾斜角</div>
+              <div class="rollyawpitchtitle">旋转角</div>
+              <div class="rollyawpitchtitle">俯仰角</div>
+            </div>
+            <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              <img src="@/assets/archive/roll.png">
+              <img src="@/assets/archive/yaw.png">
+              <img src="@/assets/archive/pitch.png">
+            </div>
+            <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.rotationLeftMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.tiltLeftMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.pitchDownMax}}°
+              </span></div>
+            </div>
+            <div style="width: 575px;padding:0px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.rotationRightMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">右：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.tiltRightMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">仰：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.pitchUpMax}}°
+                </span>
+              </div>
+            </div> -->
             <div class="generateReport-content-title">足底压力</div>
             <div style="width: 600px;height: 270px; display: flex;">
               <img  :src="BACKEND_URL+'/' +  calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -500,7 +555,7 @@ function closePopUpOnlyReport(e) {
 .generateReport-container-rightbox{
   width: 50%;
   box-sizing: border-box;
-  padding-left: 80px;
+  margin-left: 80px;
 }
 .displayflex{
   display: flex;
@@ -546,14 +601,24 @@ function closePopUpOnlyReport(e) {
   padding-top:30px;
   padding-bottom: 15px;
 }
-.rollyawpitchtext{
+.rollyawpitchtitle {
+  font-weight: 400;
   font-style: normal;
-  color: #282828;
+  font-size: 16px;
-  font-size: 24px;
+  color: #14AAFF;
-  width: 170px;
+  width: 127px;
+  text-align:center
+}
+.rollyawpitchtext {
+  font-style: normal;
+  font-weight: 400;
+  color: #ffff;
+  font-size: 20px;
+  width: 135px;
 }
 .rollyawpitchtextcolor{
-  color:#14AAFF;
+  font-weight: 700;
+  color: #3BF2C6;
 }
 .generateReport-title2{
   font-weight: 700;

frontend/src/renderer/src/views/ImageDetails.vue

@@ -17,42 +17,8 @@
           style="max-width: 100%;max-height: 100%;object-fit:contain;">
         </div>
         <div class="ImageDetails-content-imgbox" v-if="indexActive == 2">
-          <div style="background: #fff; padding-left: 80px;">
+          <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.head_data_image" alt="" 
-            <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+            style="max-width: 100%;max-height: 100%;object-fit:contain;">
-              <img src="@/assets/archive/roll.png">
-              <img src="@/assets/archive/yaw.png">
-              <img src="@/assets/archive/pitch.png">
-            </div>
-            <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
-              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesRight.rotationLeftMax}}°
-                </span>
-              </div>
-              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
-                {{headPoseMaxValuesRight.tiltLeftMax}}°
-              </span></div>
-              <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
-                {{headPoseMaxValuesRight.pitchDownMax}}°
-              </span></div>
-            </div>
-            <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
-              <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
-                {{headPoseMaxValuesRight.rotationRightMax}}°
-              </span></div>
-              <div class="rollyawpitchtext">右：
-                <span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesRight.tiltRightMax}}°
-                </span>
-              </div>
-              <div class="rollyawpitchtext">仰：
-                <span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesRight.pitchUpMax}}°
-                </span>
-              </div>
-            </div>
-          </div>
-         
-          <!-- <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.screen_image" alt="" style="width: 100%;height: 100%;object-fit:contain;"> -->
         </div>
         <div class="ImageDetails-content-imgbox" v-if="indexActive == 3">
           <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.foot_data_image" alt="" 

frontend/src/renderer/src/views/ImageDetailsCompare.vue

@@ -19,93 +19,29 @@
           </div>
         </div>
         <div class="ImageDetailsCompare-display"  v-if="indexActive == 1">
-          <div class="ImageDetailsCompare-content-imgbox"  style="width: 300px;height: 100%;">
+          <div class="ImageDetailsCompare-content-imgbox"  style="max-width: 450px;height: 100%;">
             <div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoLeft.id }}</div>
             <img  :src="BACKEND_URL+'/' +  ImageDetailsInfoLeft.body_image" alt="" 
-            style="width: 300px;height:600px;">
+            style="max-width: 450px;max-height:100%">
           </div>
           <div class="ImageDetailsCompare-content-imgbox" 
-            style="width: 300px;height: 100%;margin-left: 50px;">
+            style="max-width: 450px;height: 100%;margin-left: 50px;">
             <div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoRight.id }}</div>
             <img  :src="BACKEND_URL+'/' +  ImageDetailsInfoRight.body_image" alt="" 
-            style="width: 300px;height:600px;">
+            style="max-width: 450px;max-height:100%;">
           </div>
         </div>
         <div class="ImageDetailsCompare-display"  v-if="indexActive == 2">
           <div class="ImageDetailsCompare-content-imgbox"  style="width: 740px;height: 100%;">
             <div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoLeft.id }}</div>
-            <div style="width: 700px;height:361px;background: #fff;  padding-left: 80px;">
+            <img  :src="BACKEND_URL+'/' +  ImageDetailsInfoLeft.head_data_image" alt="" 
-              <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              style="max-width: 100%;max-height: 100%;object-fit:contain;">
-                <img src="@/assets/archive/roll.png">
-                <img src="@/assets/archive/yaw.png">
-                <img src="@/assets/archive/pitch.png">
-              </div>
-              <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
-                <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
-                    {{headPoseMaxValuesLeft.rotationLeftMax}}°
-                  </span>
-                </div>
-                <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesLeft.tiltLeftMax}}°
-                </span></div>
-                <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesLeft.pitchDownMax}}°
-                </span></div>
-              </div>
-              <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
-                <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesLeft.rotationRightMax}}°
-                </span></div>
-                <div class="rollyawpitchtext">右：
-                  <span class="rollyawpitchtextcolor">
-                    {{headPoseMaxValuesLeft.tiltRightMax}}°
-                  </span>
-                </div>
-                <div class="rollyawpitchtext">仰：
-                  <span class="rollyawpitchtextcolor">
-                    {{headPoseMaxValuesLeft.pitchUpMax}}°
-                  </span>
-                </div>
-              </div>
-            </div>
           </div>
           <div class="ImageDetailsCompare-content-imgbox" 
             style="width: 630px;height: 100%;margin-left: 50px;">
             <div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoRight.id }}</div>
-            <div style="width: 700px;height:361px;background: #fff;  padding-left: 80px;">
+            <img  :src="BACKEND_URL+'/' +  ImageDetailsInfoRight.head_data_image" alt="" 
-              <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              style="max-width: 100%;max-height: 100%;object-fit:contain;">
-                <img src="@/assets/archive/roll.png">
-                <img src="@/assets/archive/yaw.png">
-                <img src="@/assets/archive/pitch.png">
-              </div>
-              <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
-                <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
-                    {{headPoseMaxValuesRight.rotationLeftMax}}°
-                  </span>
-                </div>
-                <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesRight.tiltLeftMax}}°
-                </span></div>
-                <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesRight.pitchDownMax}}°
-                </span></div>
-              </div>
-              <div style="width: 575px;padding:20px 0; display: flex;justify-content: space-between;">
-                <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
-                  {{headPoseMaxValuesRight.rotationRightMax}}°
-                </span></div>
-                <div class="rollyawpitchtext">右：
-                  <span class="rollyawpitchtextcolor">
-                    {{headPoseMaxValuesRight.tiltRightMax}}°
-                  </span>
-                </div>
-                <div class="rollyawpitchtext">仰：
-                  <span class="rollyawpitchtextcolor">
-                    {{headPoseMaxValuesRight.pitchUpMax}}°
-                  </span>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
         <div class="ImageDetailsCompare-display"  v-if="indexActive == 3">

frontend/src/renderer/src/views/PatientProfile.vue

@@ -1773,4 +1773,20 @@ historyAPI.VideoDelById(ids).then((response)=>{
   background-image: url(@/assets/process/del-active.png);
 }
 
+
+
+.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td{
+  background-color: #194764 !important;
+  border-top:1px solid rgba(38, 111, 255, 1);
+  border-bottom:1px solid rgba(38, 111, 255, 1)
+}
+.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td:last-child{
+  border-right:1px solid rgba(38, 111, 255, 1);
+}
+.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td:first-child{
+  border-left:1px solid rgba(38, 111, 255, 1);
+}
+.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row:last-child td{
+  border-bottom:1px solid rgba(38, 111, 255, 1)
+}
 </style>

frontend/src/renderer/src/views/PopUpOnlyReport.vue

@@ -68,12 +68,22 @@
                 <img :src="BACKEND_URL+'/' +  rawData.body_image" alt="" srcset="" 
                 style="width: 99%;height: 454px;  object-fit:contain; ">
               <div class="PopUpOnlyReport-content-title">头部姿态</div>
-              <div style="width: 630px;padding:20px 0; margin: auto; display: flex;justify-content: space-between;">
+              <div style=" width:630px; background:#1c222f;margin: auto;padding-left:50px">
+                <div style="width: 555px;padding:20px 0;  display: flex;justify-content: space-between;">
+                  <div style="width: 170px;">
+                    <div class="rollyawpitchtitle" style="width:137px; margin-bottom:10px">倾斜角</div>
                     <img src="@/assets/archive/roll.png">
-                <img src="@/assets/archive/yaw.png">
-                <img src="@/assets/archive/pitch.png" style="margin-right: 100px;">
                   </div>
-              <div style="width: 630px;padding:20px 0; margin: auto; display: flex;justify-content: space-between;">
+                  <div style="width: 170px;">
+                    <div class="rollyawpitchtitle" style="width:137px; margin-bottom:10px">旋转角</div>
+                    <img src="@/assets/archive/yaw.png">
+                  </div>
+                  <div style="width: 170px;">
+                    <div class="rollyawpitchtitle" style="width:137px; margin-bottom:10px">俯仰角</div>
+                    <img src="@/assets/archive/pitch.png">
+                  </div>
+                </div>
+                <div style="width: 555px;padding:20px 0;  display: flex;justify-content: space-between;">
                   <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                       {{headPoseMaxValuesLeft.rotationLeftMax}}°
                     </span>
@@ -85,7 +95,7 @@
                     {{headPoseMaxValuesLeft.pitchDownMax}}°
                   </span></div>
                 </div>
-              <div style="width: 630px;padding:20px 0;  margin: auto; display: flex;justify-content: space-between;">
+                <div style="width: 555px;padding:20px 0;   display: flex;justify-content: space-between;">
                   <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesLeft.rotationRightMax}}°
                   </span></div>
@@ -100,6 +110,8 @@
                     </span>
                   </div>
                 </div>
+              </div>
+             
               <div class="PopUpOnlyReport-content-title">足底压力</div>
               <div style="width: 600px;height: 370px; margin: auto; display: flex;margin-bottom: 100px;">
                 <img  :src="BACKEND_URL+'/' +  rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -472,14 +484,24 @@ function handleCancel(){
   padding-top:30px;
   padding-bottom: 15px;
 }
-.rollyawpitchtext{
+.rollyawpitchtitle {
+  font-weight: 400;
   font-style: normal;
-  color: #282828;
+  font-size: 16px;
-  font-size: 24px;
+  color: #14AAFF;
+  width: 170px;
+  text-align:center
+}
+.rollyawpitchtext {
+  font-style: normal;
+  font-weight: 400;
+  color: #ffff;
+  font-size: 20px;
   width: 170px;
 }
 .rollyawpitchtextcolor{
-  color:#14AAFF;
+  font-weight: 700;
+  color: #3BF2C6;
 }
 .PopUpOnlyReport-title2{
   font-weight: 700;

frontend/src/renderer/src/views/PopUpReport.vue

@@ -69,12 +69,18 @@
               <img :src="BACKEND_URL+'/' +  rawData.body_image" alt="" srcset="" 
               style="width: 99%;height: 454px; object-fit:contain; ">
             <div class="PopUpReport-content-title">头部姿态</div>
-            <div style="width:380px;padding:20px 0; display: flex;justify-content: space-between;">
+            <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
+              <div style="width: 100%;padding-top:10px; display: flex;justify-content: space-between;">
+                <div class="rollyawpitchtitle">倾斜角</div>
+                <div class="rollyawpitchtitle">旋转角</div>
+                <div class="rollyawpitchtitle">俯仰角</div>
+              </div>
+              <div style="width:100%;padding:10px 0; display: flex;justify-content: space-between;">
                 <img src="@/assets/archive/roll.png">
                 <img src="@/assets/archive/yaw.png">
                 <img src="@/assets/archive/pitch.png">
               </div>
-            <div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 460px;padding:10px 0; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesLeft.rotationLeftMax}}°
                   </span>
@@ -86,7 +92,7 @@
                   {{headPoseMaxValuesLeft.pitchDownMax}}°
                 </span></div>
               </div>
-            <div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                   {{headPoseMaxValuesLeft.rotationRightMax}}°
                 </span></div>
@@ -101,6 +107,8 @@
                   </span>
                 </div>
               </div>
+            </div>
+            
             <div class="PopUpReport-content-title">足底压力</div>
             <div style="width: 90%;height: 280px; display: flex;">
               <img  :src="BACKEND_URL+'/' +  rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -134,12 +142,18 @@
             <img :src="BACKEND_URL+'/' +  calibrationData.body_image" alt="" srcset="" 
             style="width: 99%;height: 454px; object-fit:contain; ">
             <div class="PopUpReport-content-title">头部姿态</div>
-            <div style="width: 380px;padding:20px 0; display: flex;justify-content: space-between;">
+            <div style=" width:calc(100% - 10px); background:#1c222f;padding:0 10px">
+              <div style="width: 100%;padding-top:20px; display: flex;justify-content: space-between;">
+                <div class="rollyawpitchtitle">倾斜角</div>
+                <div class="rollyawpitchtitle">旋转角</div>
+                <div class="rollyawpitchtitle">俯仰角</div>
+              </div>
+              <div style="width:100%;padding:10px 0; display: flex;justify-content: space-between;">
                 <img src="@/assets/archive/roll.png">
                 <img src="@/assets/archive/yaw.png">
                 <img src="@/assets/archive/pitch.png">
               </div>
-            <div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 460px;padding-top:10px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesRight.rotationLeftMax}}°
                   </span>
@@ -151,7 +165,7 @@
                   {{headPoseMaxValuesRight.pitchDownMax}}°
                 </span></div>
               </div>
-            <div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 460px;padding:10px 0  20px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                   {{headPoseMaxValuesRight.rotationRightMax}}°
                 </span></div>
@@ -166,6 +180,7 @@
                   </span>
                 </div>
               </div>
+            </div>
             <div class="PopUpReport-content-title">足底压力</div>
             <div style="width: 90%;height: 280px; display: flex;">
               <img  :src="BACKEND_URL+'/' +  calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -492,12 +507,14 @@ function getFormattedTime() {
 }
 .rollyawpitchtext{
   font-style: normal;
-  color: #282828;
+  font-weight: 400;
-  font-size: 24px;
+  color: #ffff;
-  width: 170px;
+  font-size: 20px;
+  width: 135px;
 }
 .rollyawpitchtextcolor{
-  color:#14AAFF;
+  font-weight: 700;
+  color: #3BF2C6;
 }
 .PopUpReport-title2{
   font-weight: 700;
@@ -683,5 +700,12 @@ function getFormattedTime() {
   color: rgb(40, 40, 40);
   font-size: 18px;
 }
-
+.rollyawpitchtitle {
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #14AAFF;
+  width: 127px;
+  text-align:center
+}
 </style>

frontend/src/renderer/src/views/ReportComparison.vue

@@ -10,8 +10,6 @@
     <div style="height: 100%; padding:0 40px; box-sizing: border-box;">
       <div class="ReportComparison-container-bodytitle">体态测量报告单对比</div>
       <div class="ReportComparison-container-display">
-        <!-- <div class="ReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
-        <div class="ReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div> -->
       </div>
       <div class="ReportComparison-container-userinfodisplay">
         <div class="ReportComparison-container-userinfotext2" style="width: 180px;">
@@ -55,8 +53,10 @@
       <div class="ReportComparison-container-testdatatitle">【检测数据】</div>
       <div style="display: flex;">
         <div class="ReportComparison-containerdisplay">
+          <div class="displayflextext1" style="padding-bottom:10px">报告时间: {{ leftInfo.start_time }}</div>
           <div style="display: flex;">
             <div class="ReportComparison-container-leftbox">
+              
               <div class="displayflex">
                 <div class="displayflextext1">原始数据：</div>
                 <div class="displayflextext1">
@@ -76,12 +76,22 @@
                 object-fit:contain; ">
               </div>
               <div class="ReportComparison-content-title">头部姿态</div>
-              <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
+                <div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
+                  <div style="width:66px;">
+                    <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
                     <img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
+                  </div>
+                  <div style="width:66px;">
+                    <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
                     <img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
+                  </div>
+                  <div style="width:66px;">
+                    <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
                     <img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
                   </div>
-              <div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
+                </div>
+                <div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
                   <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                       {{headPoseMaxValuesLeft.rotationLeftMax}}°
                     </span>
@@ -93,7 +103,7 @@
                     {{headPoseMaxValuesLeft.pitchDownMax}}°
                   </span></div>
                 </div>
-              <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+                <div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
                   <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesLeft.rotationRightMax}}°
                   </span></div>
@@ -108,6 +118,7 @@
                     </span>
                   </div>
                 </div>
+              </div>
               <div class="ReportComparison-content-title">足底压力</div>
               <div style="width: 90%;height:200px;display: flex;">
                 <img  :src="BACKEND_URL+'/' +  rawOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -143,12 +154,22 @@
                 object-fit:contain; ">
               </div>
               <div class="ReportComparison-content-title">头部姿态</div>
-              <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
+                <div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
+                  <div style="width:66px;">
+                    <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
                     <img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
+                  </div>
+                  <div style="width:66px;">
+                    <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
                     <img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
+                  </div>
+                  <div style="width:66px;">
+                    <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
                     <img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
                   </div>
-              <div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
+                </div>
+                <div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
                   <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                       {{headPoseMaxValuesRight.rotationLeftMax}}°
                     </span>
@@ -160,7 +181,7 @@
                     {{headPoseMaxValuesRight.pitchDownMax}}°
                   </span></div>
                 </div>
-              <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+                <div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
                   <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesRight.rotationRightMax}}°
                   </span></div>
@@ -175,6 +196,7 @@
                     </span>
                   </div>
                 </div>
+              </div>
               <div class="ReportComparison-content-title">足底压力</div>
               <div style="width: 90%;height:200px;display: flex;">
                 <img  :src="BACKEND_URL+'/' +  calibrationOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -199,6 +221,7 @@
           <div class="ReportComparison-border3">{{ leftInfo.suggestion_info }}</div>
         </div>
         <div class="ReportComparison-containerdisplay">
+          <div class="displayflextext1" style="padding-bottom:10px">报告时间: {{ rightInfo.start_time }}</div>
         <div style="display: flex;">
           <div class="ReportComparison-container-leftbox">
             <div class="displayflex">
@@ -220,12 +243,22 @@
               object-fit:contain; ">
             </div>
             <div class="ReportComparison-content-title">头部姿态</div>
-            <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+            <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
+              <div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
+                <div style="width:66px;">
+                  <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
                   <img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
+                </div>
+                <div style="width:66px;">
+                  <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
                   <img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
+                </div>
+                <div style="width:66px;">
+                  <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
                   <img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
                 </div>
-            <div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
+              </div>
+              <div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesTwoLeft.rotationLeftMax}}°
                   </span>
@@ -237,7 +270,7 @@
                   {{headPoseMaxValuesTwoLeft.pitchDownMax}}°
                 </span></div>
               </div>
-            <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                   {{headPoseMaxValuesTwoLeft.rotationRightMax}}°
                 </span></div>
@@ -252,6 +285,9 @@
                   </span>
                 </div>
               </div>
+            </div>
+
+      
             <div class="ReportComparison-content-title">足底压力</div>
             <div style="width: 90%;height:200px;display: flex;">
               <img  :src="BACKEND_URL+'/' +  rawTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -287,12 +323,22 @@
               object-fit:contain; ">
             </div>
             <div class="ReportComparison-content-title">头部姿态</div>
-            <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+            <div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
+              <div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
+                <div style="width:66px;">
+                  <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
                   <img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
+                </div>
+                <div style="width:66px;">
+                  <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
                   <img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
+                </div>
+                <div style="width:66px;">
+                  <div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
                   <img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
                 </div>
-            <div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
+              </div>
+              <div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
                     {{headPoseMaxValuesTwoRight.rotationLeftMax}}°
                   </span>
@@ -304,7 +350,7 @@
                   {{headPoseMaxValuesTwoRight.pitchDownMax}}°
                 </span></div>
               </div>
-            <div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
+              <div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
                 <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
                   {{headPoseMaxValuesTwoRight.rotationRightMax}}°
                 </span></div>
@@ -319,6 +365,7 @@
                   </span>
                 </div>
               </div>
+            </div>
             <div class="ReportComparison-content-title">足底压力</div>
             <div style="width: 90%;height:200px;display: flex;">
               <img  :src="BACKEND_URL+'/' +  calibrationTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@@ -706,12 +753,14 @@ function handleCancel(){
 }
 .ReportComparison-container .rollyawpitchtext{
   font-style: normal;
-  color: #282828;
+  font-weight: 400;
-  font-size: 14px;
+  color: #ffff;
+  font-size: 12px;
   width: 66px;
 }
 .rollyawpitchtextcolor{
-  color:#14AAFF;
+  font-weight: 700;
+  color: #3BF2C6;
 }
 .ReportComparison-title2{
   font-weight: 700;
@@ -917,4 +966,10 @@ function handleCancel(){
 .ReportComparison-zitaiimg{
   width: 66px;
 }
+.rollyawpitchtitle {
+  font-weight: 400;
+  font-style: normal;
+  color: #14AAFF;
+  text-align:center
+}
 </style>