Browse Source

807自适应,图补充

tangjunhao 1 month ago
parent
commit
28f2eb37d5

BIN
src/assets/img/dlmx.png


BIN
src/assets/img/frame.png


BIN
src/assets/img/project-bg.png


BIN
src/assets/img/sysj.png


BIN
src/assets/img/tkb.png


BIN
src/assets/img/user.png


BIN
src/assets/img/yhsf.png


BIN
src/assets/img/yhwt.png


+ 40 - 3
src/components/layout/header.vue

@@ -4,10 +4,14 @@
       <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 class="ve_logo_projectM" @click="handleProjectManagement">
+        <el-image :src="frame" style="margin-right: 3px;"></el-image>
+        项目管理
+      </div>
       <div class="ve_logo_user">
-        <el-avatar :icon="UserFilled" :size="24" />
+        <el-avatar :src="user" :size="24" style="background-color: transparent;" />
         <el-dropdown trigger="hover" class="user-dropdown">
-          <span class="el-dropdown-link">
+          <span class="el-dropdown-link nickname">
             {{ nickName }}
           </span>
           <template #dropdown>
@@ -55,6 +59,9 @@ import { message } from "@/utils/message";
 
 import userinfo from "../user/userinfo.vue";
 
+import user from "@/assets/img/user.png";
+import frame from "@/assets/img/frame.png"
+
 const userinfoRef = ref(null)
 
 const userStore = useUserStore()
@@ -64,6 +71,10 @@ const nickName = computed(() => userStore.userInfo?.nickName || '用户登录')
 
 const { currentTime } = useCurrentTime()
 
+const handleProjectManagement = () => {
+  router.push('/project')
+}
+
 const openUserInfo = () => {
   if (userinfoRef.value) {
     userinfoRef.value.visible = true
@@ -130,6 +141,24 @@ const handleLogout = () => {
       pointer-events: none;
     }
 
+    .ve_logo_projectM {
+      position: absolute;
+      top: 40%;
+      right: 8%;
+      transform: translate(-50%, -50%);
+      font-size: 14px;
+      color: #FFFFFF;
+      font-weight: 400;
+
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        color: #41c0ff;
+        // text-decoration: underline;
+      }
+    }
+
     .ve_logo_user {
       position: absolute;
       top: 40%;
@@ -153,10 +182,18 @@ const handleLogout = () => {
   cursor: pointer;
 
   :deep(.el-dropdown-link) {
-    margin-left: 10px;
+    margin-left: 3px;
     color: #fff;
     font-size: 14px;
     font-weight: 400;
   }
 }
+
+.nickname {
+  max-width: 100px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
 </style>

+ 13 - 7
src/components/user/userinfo.vue

@@ -15,9 +15,11 @@
       <el-descriptions-item label="注册时间">{{ userInfo.regTime }}</el-descriptions-item>
     </el-descriptions>
     <template #footer>
-      <el-button @click="visible = false">关闭</el-button>
-      <el-button @click="handleEdit">编辑</el-button>
-      <el-button @click="handleChangePassword">修改密码</el-button>
+      <div class="custom-btn">
+        <el-button @click="visible = false">关闭</el-button>
+        <el-button @click="handleEdit">编辑</el-button>
+        <el-button @click="handleChangePassword">修改密码</el-button>
+      </div>
     </template>
   </el-dialog>
 
@@ -40,8 +42,10 @@
     </el-form>
     
     <template #footer>
-      <el-button @click="editVisible = false">取消</el-button>
-      <el-button @click="handleSave">保存</el-button>
+      <div class="custom-btn">
+        <el-button @click="editVisible = false">取消</el-button>
+        <el-button @click="handleSave">保存</el-button>
+      </div>
     </template>
   </el-dialog>
 
@@ -59,8 +63,10 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="changePwdVisible = false">取消</el-button>
-      <el-button type="primary" @click="ChangePassword">确定</el-button>
+      <div class="custom-btn">
+        <el-button @click="changePwdVisible = false">取消</el-button>
+        <el-button type="primary" @click="ChangePassword">确定</el-button>
+      </div>
     </template>
   </el-dialog>
 

+ 9 - 0
src/router/index.js

@@ -35,6 +35,15 @@ const router = createRouter({
           title: '登录',
         },
       },
+      {
+        path: '/project',
+        name: 'project',
+        component: () => import('@/views/project/index.vue'),
+        meta: {
+          keepAlive: false,
+          title: '项目管理',
+        },
+      },
     ],
 })
 // 修改动态网页标题 beforeEach 导航钩子,路由改变前触发

+ 37 - 1
src/style/index.css

@@ -359,12 +359,13 @@ img{
   }
 }
 
-
+/* 分隔线 */
 .el-divider {
   margin: 0;
   border-color: #0075FF;
 }
 
+/* 下拉菜单 */
 .el-dropdown-menu {
   background-color: #2A3248 !important;
 }
@@ -375,4 +376,39 @@ img{
 
 .el-dropdown-menu__item:hover {
   background-color: #3A4258 !important;
+}
+
+/* 弹窗对话框 */
+.el-dialog {
+  background-image: url(@/assets/img/tkb.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+}
+
+.el-dialog .el-dialog__header {
+  background-color: transparent;
+  color: #FFFFFF !important;
+}
+
+/* 描述列表 */
+.el-descriptions__body {
+  background-color: transparent;
+}
+
+.el-descriptions__label {
+  background-color: transparent !important;
+  color: #FFFFFF !important;
+}
+
+.el-descriptions__content {
+  color: #2CFFFF !important;
+}
+
+/* 按钮 */
+.custom-btn .el-button {
+  background-color: rgba(61, 219, 252, 0.20) !important;
+  color: #FFFFFF;
+  /* border: 1px solid rgba(61, 219, 252, 1); */
+  border: none;
 }

+ 1 - 1
src/views/mainContent/leftaside/agentModel.vue

@@ -32,7 +32,7 @@
         <!-- 右侧 -->
         <div class="content-aside">
           <el-row justify="center">
-            <img src="@/assets/img/start.png" class="content-aside-img" alt="Experiment Icon" />
+            <img src="@/assets/img/dlmx.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
           <el-row justify="center" align="middle">
             <el-col :span="14" :push="4">

+ 1 - 1
src/views/mainContent/leftaside/exDesign.vue

@@ -8,7 +8,7 @@
       <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" />
+            <img src="@/assets/img/sysj.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
           <el-row justify="center" align="middle" >
             <el-col :span="14" :push="4">

+ 1 - 1
src/views/mainContent/leftaside/opAlgorithm.vue

@@ -8,7 +8,7 @@
       <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" />
+            <img src="@/assets/img/yhsf.png" class="content-aside-img" alt="Experiment Icon" />
           </el-row>
           <el-row justify="center" align="middle" >
             <el-col :span="14" :push="4">

+ 1 - 1
src/views/mainContent/rightaside/analyzeWork.vue

@@ -57,7 +57,7 @@ const handleWorkClick = (name) => {
   align-items: center;
   justify-content: center;
 
-  background-color: transparent;
+  background-color: transparent !important;
   border: none;
 }
 

+ 6 - 6
src/views/mainContent/rightaside/opProblem.vue

@@ -10,10 +10,10 @@
           <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" />
+                <img src="@/assets/img/yhwt.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle">
-                <el-col :span="24" :push="8">
+                <el-col style="text-align: center;line-height: 32px;">
                   <span style="font-size: 10px;">设计变量</span>
                 </el-col>
               </el-row>
@@ -53,7 +53,7 @@
           <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" />
+                <img src="@/assets/img/yhwt.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle" >
                 <el-col :span="14" :push="4">
@@ -83,10 +83,10 @@
           <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" />
+                <img src="@/assets/img/yhwt.png" class="content-aside-img" alt="Experiment Icon" />
               </el-row>
               <el-row justify="center" align="middle">
-                <el-col :span="24" :push="8">
+                <el-col style="text-align: center;line-height: 32px;">
                   <span style="font-size: 10px;">优化目标</span>
                 </el-col>
               </el-row>
@@ -142,7 +142,7 @@ const qitanOPData2 = ref({
 
   .first-container {
     width: 100%;
-    height: 50%;
+    height: 48%;
   }
   .second-container {
     width: 100%;

+ 53 - 0
src/views/project/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="home-page">
+    <img class="background-image" :src="bgback" alt="背景图">
+    <el-header>
+        <myheader />
+    </el-header>
+    <el-main>
+      
+    </el-main>
+  </div>
+</template>
+<script setup>
+import myheader from '@/components/layout/header.vue'
+
+import { RouterView, RouterLink,useRouter, useRoute } from "vue-router"
+import { request, enPassword } from "@/utils/request";
+import { ElMessage } from 'element-plus'
+
+import bgback from "@/assets/img/project-bg.png"
+
+const router = useRouter();
+// 获取路由实例
+const route = useRoute()
+
+
+
+
+
+
+</script>
+<style scoped>
+.home-page {
+  width: 100%;
+  min-width: 1400px;
+  min-height: 700px;
+  height: 100vh;
+  overflow: hidden;
+
+  position: relative; /* 关键:为子元素绝对定位提供参照 */
+}
+
+
+.background-image {
+  position: absolute; /* 脱离文档流 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill; /* 或 contain,根据需求选择 */
+  object-position: center;
+  z-index: 0; /* 置于底层 */
+}
+</style>