722header时间、选择样式

package-lock.json

@@ -20,6 +20,7 @@
         "axios": "^1.5.0",
         "canvg": "^4.0.2",
         "crypto-js": "^4.2.0",
+        "dayjs": "^1.11.13",
         "echarts": "^5.4.3",
         "element-plus": "^2.10.0",
         "h5wasm": "^0.8.1",

package.json

@@ -22,6 +22,7 @@
     "axios": "^1.5.0",
     "canvg": "^4.0.2",
     "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
     "echarts": "^5.4.3",
     "element-plus": "^2.10.0",
     "h5wasm": "^0.8.1",

src/components/layout/header.vue

@@ -2,6 +2,7 @@
   <div class="ve_menu_logo">
     <div class="ve_logo_img">
       <el-image style="width: 100%;height: 100%" :src="logo" fit="fill"></el-image>
+      <div class="ve_logo_time">{{ currentTime }}</div>
       <div class="ve_logo_text">数据驱动飞行器智能优化设计平台</div>
     </div>
 
@@ -11,7 +12,10 @@
 <script setup>
 import { ref, onMounted, reactive, } from "vue";
 import logo from "@/assets/img/bgheader.png";
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+
+import useCurrentTime from "@/utils/useCurrentTime";
+
+const { currentTime } = useCurrentTime()
 
 </script>
 <style lang="scss" scoped>
@@ -28,6 +32,18 @@ import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 
     position: relative;
 
+    .ve_logo_time {
+      position: absolute;
+      top: 40%;
+      left: 10%;
+      transform: translate(-50%, -50%);
+      font-size: 18px;
+      letter-spacing: 2px;
+      color: #fff;
+      font-weight: 400;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    }
+
 
     .ve_logo_text {
       position: absolute;

src/components/layout/home.vue

@@ -34,6 +34,7 @@ const route = useRoute()
 .home-page {
   width: 100%;
   min-width: 1400px;
+  min-height: 700px;
   height: 100vh;
   overflow: hidden;
 
@@ -63,5 +64,6 @@ const route = useRoute()
   display: flex;
   width: 100%;
   height: calc(100vh - 70px);
+  min-height: 630px;
 }
 </style>

src/style/index.css

@@ -74,6 +74,38 @@ img{
   background-color: transparent !important;
 }
 
+.el-select .el-select__wrapper {
+  background-color: transparent !important;
+  border: 1px solid #2CFFFF;
+  color: #2CFFFF;
+}
+
+.el-select-dropdown {
+  background-color: #2A3248 !important;
+  border: 1px solid #2CFFFF;
+
+}
+
+/* 修改输入框文字颜色 */
+.el-select .el-input__inner {
+  color: #2CFFFF !important;
+}
+
+/* 修改下拉选项 */
+.el-select-dropdown__item {
+  background-color: #2A3248 !important;
+  color: #ffffff !important;
+
+  height: 40px !important;
+  line-height: 40px !important;
+  font-size: 12px !important;
+}
+
+/* 修改选中项文字颜色 */
+.el-select-dropdown__item.is-selected {
+  color: #2CFFFF !important;
+}
+
 .custom-card-infoLog {
   width: 100%;
   height: 100%;
@@ -91,7 +123,7 @@ img{
   border-bottom: none;
   padding: 0 40px;
 
-  height: 40px;
+  height: 30px;
   background-image: url(@/assets/img/cardinfo-header.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -100,7 +132,7 @@ img{
 
 .custom-card-infoLog .el-card__body {
   width: 100%;
-  height: calc(100% - 40px);
+  height: calc(100% - 30px);
   padding: 5px 5px;
   background: linear-gradient(to top, #173B77 0%, #132440 100%);
   border-radius: 0px 0px 0px 0px;
@@ -128,7 +160,7 @@ img{
   border-bottom: none;
   padding: 0 35px;
   
-  height: 40px;
+  height: 30px;
   background-image: url(@/assets/img/card-header.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -138,7 +170,7 @@ img{
 
 .custom-card .el-card__body {
   width: 100%;
-  height: calc(100% - 40px);
+  height: calc(100% - 30px);
   padding: 5px 5px;
   background-image: url(@/assets/img/card-body.png);
   background-size: 100% 100%;
@@ -170,6 +202,7 @@ img{
 
 .custom-card .content-container {
   width: 100%;
+  height: 100%;
 
   display: flex;
   align-items: center;
@@ -177,13 +210,31 @@ img{
 
   .content-aside {
     width: 40%;
+    height: 100%;
+
+    .content-aside-rowtop {
+      height: 70%;
+    }
+    .content-aside-rowbottom {
+      height: 30%;
+    }
   }
 
   .content-form {
     width: 60%;
+    height: 100%;
+
+    
   }
 }
 
+.el-form-item__label {
+  font-weight: 400;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+
+/* 自定义开关 */
 .custom-switch {
   transform: scale(0.5);
 }

src/utils/useCurrentTime.js

@@ -0,0 +1,39 @@
+// 显示当前时间
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import dayjs from 'dayjs'
+
+export default function useCurrentTime(format = 'YYYY-MM-DD HH:mm:ss') {
+  const currentTime = ref(dayjs().format(format))
+  let timer = null
+
+  const updateTime = () => {
+    currentTime.value = dayjs().format(format)
+  }
+
+  onMounted(() => {
+    updateTime()
+    timer = setInterval(updateTime, 1000)
+  })
+
+  onBeforeUnmount(() => {
+    clearInterval(timer)
+  })
+
+  return { currentTime }
+}
+
+
+
+
+// 使用
+/*
+<template>
+  <div>当前时间：{{ currentTime }}</div>
+</template>
+
+<script setup>
+import useCurrentTime from './useCurrentTime'
+
+const { currentTime } = useCurrentTime('YYYY年MM月DD日 HH:mm:ss')
+</script>
+*/

src/views/mainContent/index.vue

@@ -111,6 +111,8 @@ import opProblem from './rightaside/opProblem.vue';
   height: 20%;
 
   padding: 20px 40px;
+
+  font-size: 12px;
 }
 
 </style>

src/views/mainContent/leftaside/exDesign.vue

@@ -7,20 +7,24 @@
       </template>
       <div class="content-container">
         <div class="content-aside">
-          <el-row justify="center">
-            <img src="@/assets/img/start.png" style="width: 70%;" alt="Experiment Icon" />
+          <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>
-          <el-row justify="center" align="middle">
+          <el-row justify="center" align="middle" class="content-aside-rowbottom">
             <el-col :span="14" :push="4">
               <span>代理优化</span>
             </el-col>
             <el-col :span="10">
-              <el-switch v-model="isAgentModel" class="custom-switch custom-switch-colors"  />
+              <el-switch v-model="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>
     </el-card>
@@ -33,10 +37,11 @@
 
 const isAgentModel = ref(false);
 
+const exdeData = ref({
+  samplingMethod: '1',
+});
 
-</script>
-
-<style scoped>
 
+</script>
 
-</style>
+<style scoped></style>