优化开始测试样式

components.d.ts

@@ -10,17 +10,13 @@ declare module 'vue' {
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     ConfirmModal: typeof import('./src/components/ConfirmModal.vue')['default']
     DialogModal: typeof import('./src/components/dialogs/DialogModal.vue')['default']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElFooter: typeof import('element-plus/es')['ElFooter']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']

src/pages/Index/History.vue

@@ -39,7 +39,7 @@
       </el-table>
     </div>
     <div class="history-table-footer">
-      <el-button type="danger" size="large" :disabled="!selectedItems.length" @click="showActionConfirm('delete')">删除</el-button>
+      <el-button type="danger" size="large" class="history-btn" :disabled="!selectedItems.length" @click="showActionConfirm('delete')">删除</el-button>
       <el-button type="primary" size="large" :disabled="!selectedItems.length" @click="showActionConfirm('print')">打印</el-button>
       <el-button type="primary" size="large" :disabled="!selectedItems.length" @click="showActionConfirm('export')">导出LIS</el-button>
     </div>
@@ -419,19 +419,20 @@ const handleExport = async () => {
   padding: 20px 20px 0 20px;
   box-sizing: border-box;
   .table-box {
-    height: calc(100% - 80px);
+    height: calc(100% - 7rem);
     .el-table {
       font-size: 18px;
     }
   }
   .history-table-footer {
-    height: 80px;
+    height: 7rem;
     display: flex;
     align-items: center;
     justify-content: space-around;
     .el-button {
-      width: 100px;
-      font-size: 18px;
+      width: 150px;
+      height: 50px;
+      font-size: 24px;
     }
   }
 }

src/pages/Index/Index.vue

@@ -56,7 +56,7 @@
         class="test-control"
       >
         <!-- 显示开始测试按钮 -->
-        <el-button type="primary" style="border:0px solid" class="start-test" @click="startTest"
+        <el-button type="primary" class="start-test" @click="startTest"
           >开始测试</el-button
         >
       </div>
@@ -1006,7 +1006,7 @@ watch(
 
   .nav-bar {
     width: 100%;
-    height: 60px;
+    height: 7rem;
     margin-bottom: 2px;
     display: flex;
     justify-content: space-between;
@@ -1048,6 +1048,9 @@ watch(
         height: 48px;
         background-color: #73bc54;
         font-size: 20px;
+        border: 0px solid;
+        height: 4.75rem;
+        font-size: 2rem;
       }
 
       .pause-test,
@@ -1311,8 +1314,7 @@ watch(
 }
 
 .logo-img{
-  width: 130px;
-  height: 3.75rem;
+  width: 11rem;
   padding-top: 5px;
 }
   

src/pages/Index/Regular/Running.vue

@@ -259,14 +259,14 @@ watch(
   justify-content: space-around;
   align-items: center;
   background-color: #f9fafb;
-  height: 88vh;
+  height: 85vh;
 
   /* 更柔和的背景色 */
   // 孵育盘
   .circular-loader {
     position: relative;
-    width: 900px;
-    height: 900px;
+    width: 54.25rem;
+    height: 54.25rem;
     border-radius: 50%;
     background-color: #f0f2f5;
     display: flex;
@@ -515,7 +515,7 @@ watch(
 
 .plate-temp {
   position: fixed;
-  top: 11.75rem;
+  top: 12.75rem;
   right: 0.575rem;
   padding: 10px;
   background-color: rgb(209, 229, 255);

src/pages/Index/Regular/TestTube.vue

@@ -321,11 +321,11 @@ const updateTubeSettings = async (rackIdx: number, tubeIdx: number) => {
     box-sizing: border-box;
   }
   @active-color: rgb(82, 140, 254);
-  @setting-panel-height: 185px;
+  @setting-panel-height: 13.5625rem;
 
   box-sizing: border-box;
   position: relative;
-  height: calc(100vh - 180px);
+  height: calc(100vh - @setting-panel-height);
 
   .el-message {
     width: 200px;

src/pages/Index/components/Consumables/MoveLiquidArea.vue

@@ -376,7 +376,7 @@ const changePlate = (index: number) => {
 
       .controller {
         width: 136px;
-        height: 130px;
+        height: 6rem;
         color: #54a4e8;
         border: 3px solid #54a4e8;
         border-radius: 10px;
@@ -437,6 +437,9 @@ const changePlate = (index: number) => {
       font-size: 26px;
       font-weight: 500;
     }
+    .content{
+      font-size: 1.36rem;
+    }
 
     .controller-button,
     .id-button,

src/pages/Index/components/Consumables/SpttingPlates.vue

@@ -180,7 +180,7 @@ const updateSliderEndVal = async (plateNum, order) => {
 
     .card {
       width: 355px;
-      height: 95px;
+      height: 5.5rem;
       padding: 0px;
 
       border: 1px solid black;
@@ -199,7 +199,7 @@ const updateSliderEndVal = async (plateNum, order) => {
           display: flex;
           justify-content: center;
           align-items: center;
-          transform: translateY(8px);
+          transform: translateY(.2rem);
         }
 
         .slider-area {

src/pages/Index/components/Consumables/TabBar.vue

@@ -67,7 +67,7 @@ const onTabClick = (index: any) => {
 
 <style scoped lang="less">
 .tab-bar {
-  height: 85px;
+  height: 4.5rem;
   display: flex;
   justify-content: space-around;
   background-color: #fff;

src/pages/Index/components/Running/SubTank.vue

@@ -39,7 +39,7 @@
   top: 38rem; // 将所有矩形的起始位置设置在圆心
   width: 75px;
   height: 170px;
-  transform-origin: center -70px; // 调整旋转中心点
+  transform-origin: center -5.375rem; // 调整旋转中心点
   border-radius: 12px;
   background-color: #dbdbdb;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
@@ -196,3 +196,8 @@ const getItemStyle = (item: SubTank) => {
   }
 }
 </script>
+<style lang="less" scoped>
+  .placeholder-text{
+    color:#bfbfbf
+  }
+</style>