压力配置参数对其

frontend/src/performance/components/testPlan/components/PressureConfig.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="pressure-config-container">
-    <el-row type="flex">
+    <el-row>
-      <div class="small-input">
+      <el-col :span="10">
-        <span>并发用户数：</span>
+        <el-form :inline="true">
+          <el-col :span="12">
+            <el-form-item>
+              <div class="config-form-label">并发用户数：</div>
+            </el-form-item>
+            <el-form-item>
               <el-input
                 type="number"
                 placeholder="请输入线程数"
@@ -11,9 +16,13 @@
                 show-word-limit
               >
               </el-input>
-      </div>
+            </el-form-item>
-      <div class="small-input">
+          </el-col>
-        <span>压测时长（分钟）：</span>
+          <el-col :span="12">
+            <el-form-item>
+              <div class="config-form-label">压测时长（分钟）：</div>
+            </el-form-item>
+            <el-form-item>
               <el-input
                 type="number"
                 placeholder="请输入时长"
@@ -22,30 +31,15 @@
                 show-word-limit
               >
               </el-input>
-      </div>
+            </el-form-item>
-      <div class="small-input">
+          </el-col>
-        <span>在</span>
+          <el-row>
-        <el-input
+            <el-form-item>
-          type="number"
+              <el-col>
-          placeholder=""
+                <el-form-item>
-          v-model="rampUpTime"
+                  <div class="config-form-label">RPS上限：</div>
-          @click="convertProperty"
+                </el-form-item>
-          show-word-limit
+                <el-form-item>
-        >
-        </el-input>
-        <span>分钟内，分</span>
-        <el-input
-          type="number"
-          placeholder=""
-          v-model="step"
-          @click="convertProperty"
-          show-word-limit
-        >
-        </el-input>
-        <span>次增加并发用户</span>
-      </div>
-      <div class="small-input">
-        <span>RPS上限：</span>
                   <el-input
                     type="number"
                     placeholder="请输入限制"
@@ -54,7 +48,44 @@
                     show-word-limit
                   >
                   </el-input>
-      </div>
+                </el-form-item>
+              </el-col>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-form :inline="true" class="input-bottom-border">
+          <el-form-item>
+            <div>在</div>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              type="number"
+              placeholder=""
+              v-model="rampUpTime"
+              @click="convertProperty"
+              show-word-limit
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <div>分钟内，分</div>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              type="number"
+              placeholder=""
+              v-model="step"
+              @click="convertProperty"
+              show-word-limit
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <div>次增加并发用户</div>
+          </el-form-item>
+        </el-form>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -92,7 +123,16 @@
 </script>
 
 <style>
-  .pressure-config-container .small-input {
+  .pressure-config-container .el-input {
-    width: 150px;
+    width: 130px;
+  }
+
+  .pressure-config-container .config-form-label {
+    width: 130px;
+  }
+
+  .pressure-config-container .input-bottom-border input {
+    border: 0;
+    border-bottom: 1px solid #DCDFE6;
   }
 </style>