Sfoglia il codice sorgente

fix(App): 修复菜单样式及背景透明度问题

- 为 el-menu 添加自定义类名 meauList 并设置背景透明
- 修改 header 背景颜色为半透明白色 (rgba)
- 注释掉 footer 的背景颜色样式
- 为 BlockNote 编辑器容器添加背景色类名
- 在全局样式中添加页面背景图并移除部分冗余样式
zhangningning 2 settimane fa
parent
commit
d5e9ea498c
5 ha cambiato i file con 16 aggiunte e 18 eliminazioni
  1. 1 1
      index.html
  2. 11 3
      src/App.vue
  3. BIN
      src/assets/imgs/bg.png
  4. 1 1
      src/components/BlockNoteEditor.vue
  5. 3 13
      src/styles/index.scss

+ 1 - 1
index.html

@@ -10,4 +10,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>

+ 11 - 3
src/App.vue

@@ -5,7 +5,7 @@
       <el-header>
         <div class="header-content">
           <div class="logo" @click="$router.push('/')">{{ $t('common.title') }}</div>
-          <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false">
+          <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" class="meauList">
             <el-menu-item index="1" @click="$router.push('/')">AI工作流</el-menu-item>
             <!-- <el-menu-item index="2" @click="$router.push('/my-learning')">工作流交易</el-menu-item> -->
             <el-menu-item index="2" @click="goMyLearning">工作流交易</el-menu-item>
@@ -74,7 +74,7 @@ const activeIndex = computed(() => {
 }
 
 .el-header {
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.5);
   color: #333;
   line-height: 60px;
   border-bottom: 1px solid #eee;
@@ -91,6 +91,14 @@ const activeIndex = computed(() => {
       font-weight: bold;
       cursor: pointer;
     }
+    .meauList{
+      &.el-menu{
+        background-color: transparent;
+      }
+      .el-menu--horizontal.el-menu{
+        border-bottom: none;
+      }
+    }
     
     .header-right {
       display: flex;
@@ -100,7 +108,7 @@ const activeIndex = computed(() => {
 }
 
 .el-footer {
-  background-color: #f5f5f5;
+  // background-color: #f5f5f5;
   color: #666;
   text-align: center;
   padding: 20px 0;

BIN
src/assets/imgs/bg.png


+ 1 - 1
src/components/BlockNoteEditor.vue

@@ -3,7 +3,7 @@
     component="BlockNoteReact" 
     :props="editorProps" 
     key="blocknote-editor" 
-    class="blocknote-container"
+    class="blocknote-container bg_color_fff"
 
   />
 </template>

+ 3 - 13
src/styles/index.scss

@@ -7,7 +7,9 @@ $text-light-color: #666666; // 次要文字色
 $border-color: #eeeeee; // 边框色
 $bg-color: #f9f9f9; // 背景色
 $danger-color: #e63946; // 危险色(价格、警告等)
-
+body{
+	background: url('@/assets/imgs/bg.png') no-repeat center center fixed;
+}
 
 // 2. 全局重置样式(统一浏览器默认样式)
 * {
@@ -52,18 +54,6 @@ body ,htm{
   -webkit-user-select: none;
 }
 
-// 4. 全局组件样式覆盖(可选,如需调整 Element Plus 组件默认样式)
-// 例如:调整按钮圆角
-// .el-button {
-//   border-radius: 4px;
-// }
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #ffffff;
-}
-
 // 调整折叠面板样式
 .el-collapse-item__header {
   background-color: $bg-color;