723页面样式

src/style/index.css

@@ -68,15 +68,27 @@ img{
 
 .el-input__wrapper {
   background-color: transparent !important;
+  border: 1px solid #2CFFFF;
+  box-shadow: none;
 }
 
 .el-input .el-input__inner {
   background-color: transparent !important;
+  color: #2CFFFF;
+}
+
+
+.el-input-group__append {
+  background-color: transparent !important;
+  border: 1px solid #2CFFFF;
+  box-shadow: none;
+  color: #2CFFFF;
 }
 
 .el-select .el-select__wrapper {
   background-color: transparent !important;
   border: 1px solid #2CFFFF;
+  box-shadow: none;
   color: #2CFFFF;
 }
 
@@ -86,6 +98,10 @@ img{
 
 }
 
+.el-select__placeholder {
+  color: #2CFFFF;
+}
+
 /* 修改输入框文字颜色 */
 .el-select .el-input__inner {
   color: #2CFFFF !important;
@@ -192,12 +208,16 @@ img{
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.3); /* 滚动条滑块半透明 */
+  background: rgba(44, 255, 255, 0.1); /* 滚动条滑块半透明 */
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.4); /* 鼠标悬停时颜色加深 */
+  background: rgba(44, 255, 255, 0.3); /* 鼠标悬停时颜色加深 */
+}
+
+.el-row {
+  width: 100%;
 }
 
 .custom-card .content-container {
@@ -209,38 +229,112 @@ img{
   justify-content: center;
 
   .content-aside {
-    width: 40%;
+    width: 30%;
     height: 100%;
-
-    .content-aside-rowtop {
-      height: 70%;
-    }
-    .content-aside-rowbottom {
-      height: 30%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .content-aside-img{
+      width: 85px;
+      height: 85px;
+      position: relative;
+      
     }
   }
 
   .content-form {
-    width: 60%;
+    width: 70%;
     height: 100%;
+    padding: 5px 0px;
 
-    
+    overflow: auto;
+  }
+
+  .content-form-left {
+    padding-left: 10px;
+  }
+  .content-form-right {
+    padding-right: 10px;
   }
 }
 
-.el-form-item__label {
+.custom-form {
+  width: 100%;
+  height: 100%;
+  padding: 5px 10px;
+  overflow: auto;
+
+  background-image: url(@/assets/img/form-bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.custom-form .el-form-item {
+  margin-bottom: 0;
+}
+
+.custom-form .el-form-item__label {
   font-weight: 400;
   font-size: 12px;
   color: #FFFFFF;
 }
 
+.custom-form .el-button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+
+  .el-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    color: #2CFFFF;
+  }
+}
+
 /* 自定义开关 */
 .custom-switch {
   transform: scale(0.5);
 }
 
 .custom-switch-colors {
-  --el-switch-on-color: #E1EAFF;
-  --el-switch-off-color: #2CFFFF;
+  --el-switch-on-color: #2CFFFF;
+  --el-switch-off-color: #E1EAFF;
+}
+
+.custom-checkbox .el-checkbox__label{
+  font-size: 12px;
+  color: #FFFFFF;
 }
 
+.custom-checkbox .el-checkbox__inner{
+  width: 12px;
+  height: 12px;
+}
+
+.custom-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #2CFFFF; /* 选中时的文字颜色 */
+}
+
+.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #2CFFFF; /* 选中时的背景色 */
+  border-color: #2CFFFF; /* 选中时的边框色 */
+}
+
+/* 修改选中状态的勾选标记 */
+.el-checkbox__inner::after {
+  border-color: #000000 !important; /* 对勾颜色 */
+}
+
+
+/* 去除输入框中间的分隔线 */
+/* .noline .el-input__wrapper {
+  border-right: none !important;
+}
+
+.noline .el-input-group__append {
+  border-left: none !important;
+} */
+

src/views/mainContent/index.vue

@@ -52,7 +52,7 @@ import opProblem from './rightaside/opProblem.vue';
   .leftaside {
     width: 25%;
     height: 100%;
-    padding-left: 40px;
+    padding-left: 10px;
 
     display: flex;
     flex-direction: column;
@@ -63,7 +63,7 @@ import opProblem from './rightaside/opProblem.vue';
   .rightaside {
     width: 25%;
     height: 100%;
-    padding-right: 40px;
+    padding-right: 10px;
 
     display: flex;
     flex-direction: column;
@@ -110,7 +110,7 @@ import opProblem from './rightaside/opProblem.vue';
   width: 100%;
   height: 20%;
 
-  padding: 20px 40px;
+  padding: 20px 10px;
 
   font-size: 12px;
 }

src/views/mainContent/leftaside/agentModel.vue

@@ -5,11 +5,62 @@
       <template #header>
         <span>代理模型</span>
       </template>
-
+      <div class="content-container">
+        <!-- 左侧 -->
+        <div class="content-form content-form-left">
+          <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+            <el-form-item label="选择文件">
+              <el-input v-model="qitanAMData.fileName" class="noline"  size="small">
+                <template #append>
+                  <el-button  :icon="FolderOpened" />
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="选择模型">
+              <el-select v-model="qitanAMData.model"  size="small">
+                <el-option label="Kriging" value="1"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-checkbox v-model="qitanAMData.rmse" label="均方根误差" class="custom-checkbox"/>
+            <el-form-item label="线性代数库">
+              <el-select v-model="qitanAMData.linearAlgebraLibrary"  size="small">
+                <el-option label="gesdd" value="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!-- 右侧 -->
+        <div class="content-aside">
+          <el-row justify="center">
+            <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
+          </el-row>
+          <el-row justify="center" align="middle">
+            <el-col :span="14" :push="4">
+              <span style="font-size: 10px;">代理模型</span>
+            </el-col>
+            <el-col :span="10">
+              <el-switch v-model="qitanAMData.isAgentModel" class="custom-switch custom-switch-colors" />
+            </el-col>
+          </el-row>
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
+import { FolderOpened } from '@element-plus/icons-vue'
+
+const Labelwidth = '80px';
+
+const qitanAMData = ref({
+  isAgentModel: true,
+  fileName: '',
+  model: '1',
+  rmse: true,
+  linearAlgebraLibrary: '1',
+});
+
+
 
 </script>

src/views/mainContent/leftaside/exDesign.vue

@@ -7,25 +7,34 @@
       </template>
       <div class="content-container">
         <div class="content-aside">
-          <el-row justify="center" class="content-aside-rowtop">
-            <img src="@/assets/img/start.png" style="width: 70%;position: relative; top: 10px;" alt="Experiment Icon" />
+          <el-row justify="center">
+            <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
-          <el-row justify="center" align="middle" class="content-aside-rowbottom">
+          <el-row justify="center" align="middle" >
             <el-col :span="14" :push="4">
-              <span>代理优化</span>
+              <span style="font-size: 10px;">代理优化</span>
             </el-col>
             <el-col :span="10">
-              <el-switch v-model="isAgentModel" class="custom-switch custom-switch-colors" />
+              <el-switch v-model="qitanExdeData.isAgentModel" class="custom-switch custom-switch-colors" />
             </el-col>
           </el-row>
         </div>
-        <el-form class="content-form">
-          <el-form-item label="采样方法">
-            <el-select v-model="exdeData.samplingMethod" placeholder="请选择采样方法" size="small">
-              <el-option label="拉丁超立方" value="1"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-form>
+        <div class="content-form content-form-right">
+          <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+            <el-form-item label="采样方法">
+              <el-select v-model="qitanExdeData.samplingMethod"  size="small">
+                <el-option label="拉丁超立方" value="1"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="样本数量">
+              <el-input v-model="qitanExdeData.sampleNum"  size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="随机种子">
+              <el-input v-model="qitanExdeData.randomSeed"  size="small"></el-input>
+            </el-form-item>
+            <el-checkbox v-model="qitanExdeData.isAgentModel" label="代理优化" class="custom-checkbox"/>
+          </el-form>
+        </div>
       </div>
     </el-card>
   </div>
@@ -34,11 +43,13 @@
 <script setup>
 
 
+const Labelwidth = '70px';
 
-const isAgentModel = ref(false);
-
-const exdeData = ref({
+const qitanExdeData = ref({
+  isAgentModel: true,
   samplingMethod: '1',
+  sampleNum: 100,
+  randomSeed: 42,
 });
 
 

src/views/mainContent/rightaside/opProblem.vue

@@ -5,11 +5,73 @@
       <template #header>
         <span>优化问题</span>
       </template>
-
+      <div class="opProblem-container">
+        <div class="first-container">
+          <div class="content-container">
+            <div class="content-aside">
+              <el-row justify="center">
+                <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
+              </el-row>
+              <el-row justify="center" align="middle">
+                <el-col :span="24" :push="6">
+                  <span>设计变量</span>
+                </el-col>
+              </el-row>
+            </div>
+            <div class="content-form content-form-right">
+              <el-form class="custom-form" :label-width="Labelwidth" label-position="left">
+                <el-form-item label="扭曲分布">
+                  <el-input v-model="qitanOPData.distortion"  size="small"></el-input>
+                </el-form-item>
+                
+              </el-form>
+            </div>
+          </div>
+        </div>
+        <div class="second-container">
+          
+        </div>
+        <div class="third-container">
+        </div>
+        
+      </div>
+        
     </el-card>
   </div>
 </template>
 
 <script setup>
 
-</script>
+
+const Labelwidth = '70px';
+
+const qitanOPData = ref({
+  
+});
+
+</script>
+
+<style scoped>
+.opProblem-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .first-container {
+    width: 100%;
+    height: 40%;
+  }
+  .second-container {
+    width: 100%;
+    height: 30%;
+  }
+  .third-container {
+    width: 100%;
+    height: 30%;
+  }
+}
+
+
+
+</style>