系统控制台

src/views/systemConfig/SystemConsole/index.vue

@@ -41,26 +41,77 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="app-container scroller">
-    <PageTitle>
-      <template #title>系统控制台</template>
-    </PageTitle>
     <div class="app-container__body">
-      <el-form-item label="" prop="">
-        <div style="display: flex;width: 100%;">
-          <el-input v-model="enterValue" placeholder="请输入命令"></el-input>
-         <el-button type="primary" style="width: 120px; margin-left: 10px;" @click="handelExecute()">执行</el-button>
+      <div class="pageTitle">
+        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
+        <span>系统控制台</span>
+      </div>
+      <div class="box">
+        <div class="line"></div>
+        <div class="content">
+          <el-form-item label="请输入命令" label-position="right" label-width="100" prop="">
+            <div style="display: flex;width: 100%;">
+              <el-input v-model="enterValue" placeholder="请输入命令"></el-input>
+            <el-button type="primary" style="width: 60px; margin-left: 10px;border-radius: 0;" @click="handelExecute()">执行</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="执行结果" label-position="right" label-width="100" prop="">
+            <div style="display: flex;width: 100%;">{{ requestOptions }}</div>
+          </el-form-item>
         </div>
-      </el-form-item>
-      <el-input type="textarea" v-model="requestOptions" rows="20" placeholder="返回结果..." disabled></el-input>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .app-container__body {
-  :deep(.el-input__wrapper){
-    background: #f3f5fa;
+  .pageTitle {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    line-height: 22px;
+    color: rgba(53, 64, 79, 1);
+
+    .icon {
+      margin-right: 6px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    background: #fff;
+
+    .line {
+      width: 100%;
+      height: 2px;
+      border-radius: 5px 5px 0px 0px;
+      background: linear-gradient(90deg,
+          rgba(33, 103, 217, 1) 0%,
+          rgba(17, 200, 250, 1) 34.03%,
+          rgba(33, 103, 217, 1) 64.58%,
+          rgba(48, 128, 255, 1) 100%);
+    }
+
+    .content {
+      padding: 52px 280px;
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      :deep(.el-form-item__label){
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(148, 148, 148, 1);
+      }
+    }
   }
-  
 }
 </style>
\ No newline at end of file