首页

src/layout/index.vue

@@ -3,13 +3,27 @@
         <el-header>
             <div class="layout_header">
                 <div class="header_left">
-                    <div class="header_info">111</div>
+                    <div class="header_info">
+                        <el-select v-model="projectId">
+                            <el-option label="项目名称1" value="1"/>
+                            <el-option label="项目名称2" value="2"/>
+                        </el-select>
+                    </div>
                 </div>
                 <div class="header_center">
                     <span>数据可视化展示平台</span>
                 </div>
                 <div class="header_right">
-                    <div class="header_actions">222</div>
+                    <div class="header_actions">
+                        <el-dropdown>
+                            <span>用户名</span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>退出登录</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
                 </div>
             </div>
         </el-header>
@@ -20,6 +34,9 @@
 </template>
 
 <script setup>
+import {ref} from "vue";
+
+const projectId = ref('1')
 
 </script>
 

src/layout/layout.scss

@@ -19,6 +19,13 @@
                     display: flex;
                     align-items: center;
                     justify-content: flex-start;
+                    .el-select {
+                        position: relative;
+                        top: 5px;
+                        --el-border-color: rgba(0,255,252,.5);
+                        --el-select-border-color-hover: #23b1d9;
+                        --el-select-input-focus-border-color: #23b1d9;
+                    }
                 }
             }
             .header_center {
@@ -42,6 +49,10 @@
                     position: absolute;
                     bottom: 10px;
                     right: 16px;
+                    .el-dropdown {
+                        position: relative;
+                        top: 5px;
+                    }
                 }
             }
         }

src/styles/index.scss

@@ -12,8 +12,26 @@ html, body, #app {
     color: rgba(0,0,0,.85);
 }
 html.dark {
+    --el-color-primary: #147484;
     #app {
         background-color: #20213D;
         color: #fff;
     }
+    .el-popper {
+        border: none;
+        --el-bg-color-overlay: #1d3850;
+        --el-box-shadow-light: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
+    }
+    .el-popper .el-popper__arrow::before {
+        border: none;
+    }
+    .el-select-dropdown__item.hover,
+    .el-select-dropdown__item:hover {
+        background: #0b5461;
+    }
+    .el-select-dropdown__item.selected {
+        background: var(--el-color-primary);
+        font-weight: initial;
+        color: white;
+    }
 }