718补充

src/components/layout/home.vue

@@ -33,8 +33,9 @@ const route = useRoute()
 <style scoped>
 .home-page {
   width: 100%;
+  min-width: 1400px;
   height: 100vh;
-  overflow: auto;
+  overflow: hidden;
 
   position: relative; /* 关键：为子元素绝对定位提供参照 */
 }

src/style/index.css

@@ -57,17 +57,31 @@ img{
 /* 文本区域 */
 .el-textarea__inner {
   height: 100%;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
 
-.custom-card {
+.el-input__wrapper {
+  background-color: transparent !important;
+}
+
+.el-input .el-input__inner {
+  background-color: transparent !important;
+}
+
+.custom-card-infoLog {
+  width: 100%;
+  height: 100%;
+
   background-color: transparent;
   color: #FFFFFF;
   border: none;
   border-radius: 0px 0px 0px 0px;
 }
 
-.custom-card .el-card__header {
+.custom-card-infoLog .el-card__header {
   display: flex;
   align-items: center; /* 垂直居中 */
 
@@ -81,8 +95,47 @@ img{
   border-image: linear-gradient(180deg, rgba(61, 115, 255, 0), rgba(61, 115, 255, 1)) 1 1;
 }
 
+.custom-card-infoLog .el-card__body {
+  width: 100%;
+  height: calc(100% - 40px);
+  padding: 5px 5px;
+  background: linear-gradient(to top, #173B77 0%, #132440 100%);
+  border-radius: 0px 0px 0px 0px;
+  border: 2px solid rgba(61,115,255,0.3);
+
+  overflow: auto;
+}
+
+.custom-card {
+  width: 100%;
+  height: 100%;
+
+  background-color: transparent;
+  color: #FFFFFF;
+  border: none;
+  border-radius: 0px 0px 0px 0px;
+}
+
+.custom-card .el-card__header {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+
+  border-bottom: none;
+  padding: 0 35px;
+  
+  height: 40px;
+  background-image: url(@/assets/img/card-header.png);
+  border-radius: 0px 0px 0px 0px;
+  
+}
+
 .custom-card .el-card__body {
+  width: 100%;
+  height: calc(100% - 40px);
+  padding: 5px 5px;
   background: linear-gradient(to top, #173B77 0%, #132440 100%);
   border-radius: 0px 0px 0px 0px;
   border: 2px solid rgba(61,115,255,0.3);
+
+  overflow: auto;
 }

src/views/mainContent/footer/infoLog.vue

@@ -1,10 +1,12 @@
 <template>
-  <div>
-    <el-card class="custom-card">
+  <div style="width: 100%;height: 100%;">
+    <el-card class="custom-card-infoLog">
       <template #header>
-        <span>信息日志</span>
+        <span>信息</span>
       </template>
-      
+      <el-input v-model="logContent" type="textarea" id="textarea_id" 
+        spellcheck="false" :autosize="false"
+        resize="none" />
     </el-card>
   </div>
 </template>
@@ -12,9 +14,8 @@
 <script setup>
 
 
-</script>
-
-<style scoped>
+const logContent = ref("")
 
+</script>
 
-</style>
+<style scoped></style>

src/views/mainContent/index.vue

@@ -1,13 +1,29 @@
 <template>
   <div style="width: 100%;height: 100%;">
     <div class="content">
-      <el-container>
+      <el-container style="height: 100%;">
         <el-aside class="leftaside">
-          Aside
+          <div class="left-1">
+            <ex-design />
+          </div>
+          <div class="left-2">
+            <agent-model />
+          </div>
+          <div class="left-3">
+            <op-algorithm />
+          </div>
+          <div class="left-4">
+            <op-run />
+          </div>
         </el-aside>
         <el-main></el-main>
         <el-aside class="rightaside">
-          Aside
+          <div class="right-1">
+            <op-problem />
+          </div>
+          <div class="right-2">
+            <analyze-work />
+          </div>
         </el-aside>
       </el-container>
     </div>
@@ -19,6 +35,12 @@
 
 <script setup>
 import infoLog from './footer/infoLog.vue';
+import exDesign from './leftaside/exDesign.vue';
+import agentModel from './leftaside/agentModel.vue';
+import opAlgorithm from './leftaside/opAlgorithm.vue';
+import opRun from './leftaside/opRun.vue';
+import analyzeWork from './rightaside/analyzeWork.vue';
+import opProblem from './rightaside/opProblem.vue';
 
 </script>
 
@@ -29,12 +51,58 @@ import infoLog from './footer/infoLog.vue';
 
   .leftaside {
     width: 25%;
+    height: 100%;
     padding-left: 40px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    overflow: auto;
   }
 
   .rightaside {
     width: 25%;
+    height: 100%;
     padding-right: 40px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    overflow: auto;
+  }
+}
+
+.leftaside {
+  .left-1 {
+    width: 100%;
+    height: 25%;
+  }
+
+  .left-2 {
+    width: 100%;
+    height: 25%;
+  }
+
+  .left-3 {
+    width: 100%;
+    height: 30%;
+  }
+
+  .left-4 {
+    width: 100%;
+    height: 20%;
+  }
+}
+
+.rightaside {
+  .right-1 {
+    width: 100%;
+    height: 60%;
+  }
+
+  .right-2 {
+    width: 100%;
+    height: 40%;
   }
 }
 
@@ -42,7 +110,7 @@ import infoLog from './footer/infoLog.vue';
   width: 100%;
   height: 20%;
 
-  padding: 0 40px;
+  padding: 20px 40px;
 }
 
 </style>

src/views/mainContent/leftaside/agentModel.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <!-- 代理模型 -->
+  <div style="height: 100%;">
+    <el-card class="custom-card">
+      <template #header>
+        <span>代理模型</span>
+      </template>
 
+    </el-card>
   </div>
 </template>
 

src/views/mainContent/leftaside/exDesign.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <!-- 试验设计 -->
+  <div style="height: 100%;">
+    <el-card class="custom-card">
+      <template #header>
+        <span>试验设计</span>
+      </template>
 
+    </el-card>
   </div>
 </template>
 

src/views/mainContent/leftaside/opAlgorithm.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <!-- 优化算法 -->
+  <div style="height: 100%;">
+    <el-card class="custom-card">
+      <template #header>
+        <span>优化算法</span>
+      </template>
 
+    </el-card>
   </div>
 </template>
 

src/views/mainContent/leftaside/opRun.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <!-- 优化运行 -->
+  <div style="height: 100%;">
+    <el-card class="custom-card">
+      <template #header>
+        <span>优化运行</span>
+      </template>
 
+    </el-card>
   </div>
 </template>
 

src/views/mainContent/rightaside/analyzeWork.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <!-- 分析工况 -->
+  <div style="height: 100%;">
+    <el-card class="custom-card">
+      <template #header>
+        <span>分析工况</span>
+      </template>
 
+    </el-card>
   </div>
 </template>
 

src/views/mainContent/rightaside/opProblem.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <!-- 优化问题 -->
+  <div style="height: 100%;">
+    <el-card class="custom-card">
+      <template #header>
+        <span>优化问题</span>
+      </template>
 
+    </el-card>
   </div>
 </template>