下拉样式

src/assets/stylus/button.styl

@@ -1,42 +1,39 @@
-#app {
+.el-button {
-  .el-button {
+  /*--el-button-text-color oklch(72% .19 231.6) !important;
-    /*--el-button-text-color oklch(72% .19 231.6) !important;
+  --el-button-bg-color oklch(0.96 0.03 224.26) !important;
-    --el-button-bg-color oklch(0.96 0.03 224.26) !important;
+  --el-button-border-color: oklch(0.96 0.03 224.26) !important;
-    --el-button-border-color: oklch(0.96 0.03 224.26) !important;
-
-    --el-button-hover-text-color: oklch(72% .19 231.6) !important;
-    --el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important;
-    --el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/
-  }
-
-  .el-button--default {
-    --el-button-text-color #5D87FF !important;
-    --el-button-bg-color #FFFFFF !important;
-    --el-button-border-color: #5D87FF !important;
-
-    --el-button-hover-text-color #5D87FF !important;
-    --el-button-hover-bg-color #EEF3FF !important;
-    --el-button-hover-border-color: #5D87FF !important;
-  }
-
-  .el-button--primary {
-    --el-button-text-color #FFFFFF !important;
-    --el-button-bg-color #5D87FF !important;
-    --el-button-border-color: #5D87FF !important;
-
-    --el-button-hover-text-color: #FFFFFF !important;
-    --el-button-hover-bg-color: #8DABFF !important;
-    --el-button-hover-border-color: #8DABFF !important;
-  }
-
-  .el-button--danger {
-    --el-button-text-color #FFFFFF !important;
-    --el-button-bg-color rgb(255, 130, 132) !important;
-    --el-button-border-color: rgb(255, 130, 132) !important;
-
-    --el-button-hover-text-color: #FFFFFF !important;
-    --el-button-hover-bg-color: rgb(255, 130, 132) !important;
-    --el-button-hover-border-color: rgb(255, 130, 132) !important;
-  }
 
+  --el-button-hover-text-color: oklch(72% .19 231.6) !important;
+  --el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important;
+  --el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/
+}
+
+.el-button--default {
+  --el-button-text-color #5D87FF !important;
+  --el-button-bg-color #FFFFFF !important;
+  --el-button-border-color: #5D87FF !important;
+
+  --el-button-hover-text-color #5D87FF !important;
+  --el-button-hover-bg-color #EEF3FF !important;
+  --el-button-hover-border-color: #5D87FF !important;
+}
+
+.el-button--primary {
+  --el-button-text-color #FFFFFF !important;
+  --el-button-bg-color #5D87FF !important;
+  --el-button-border-color: #5D87FF !important;
+
+  --el-button-hover-text-color: #FFFFFF !important;
+  --el-button-hover-bg-color: #8DABFF !important;
+  --el-button-hover-border-color: #8DABFF !important;
+}
+
+.el-button--danger {
+  --el-button-text-color #FFFFFF !important;
+  --el-button-bg-color rgb(255, 130, 132) !important;
+  --el-button-border-color: rgb(255, 130, 132) !important;
+
+  --el-button-hover-text-color: #FFFFFF !important;
+  --el-button-hover-bg-color: rgb(255, 130, 132) !important;
+  --el-button-hover-border-color: rgb(255, 130, 132) !important;
 }

src/assets/stylus/dropdownmenu.styl

@@ -0,0 +1,15 @@
+.el-dropdown-menu {
+  padding 5px !important
+  box-sizing border-box
+
+  .el-dropdown-menu__item {
+    border-radius var(--el-border-radius-base)
+  }
+
+  .el-dropdown-menu__item:not(.is-disabled):focus,
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    --el-dropdown-menuItem-hover-fill: #F2F4F5 !important;
+    --el-dropdown-menuItem-hover-color: #323251 !important;
+  }
+}
+

src/assets/stylus/index.styl

@@ -1,6 +1,7 @@
 @import "root.styl"
 @import "button.styl"
 @import "menu.styl"
+@import "dropdownmenu.styl"
 // 优化 Element Plus 组件库默认样式
 
 // -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
@@ -10,11 +11,6 @@
 }
 
 
-.el-button:focus-visible {
-  outline none !important
-  outline-offset unset !important
-  transition none !important
-}
 
 // circle 按钮宽度优化
 .el-button--default.is-circle {

src/assets/stylus/menu.styl

@@ -1,40 +1,38 @@
-#app {
+.el-menu-item.is-active {
-  .el-menu-item.is-active {
+  background-color #EEF3FF !important
-    background-color #EEF3FF !important
+  color #5D87FF !important
-    color #5D87FF !important
 
-    &::after {
+  &::after {
-      height: 100%;
+    height: 100%;
-    }
   }
-
-  .el-menu-item {
-    position relative !important
-    transition: background-color, color .3s ease-in-out !important;
-    border-radius 4px !important
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 4px;
-      height: 0;
-      background-color: #1C6EFF;
-      transition height 0.3s ease-in-out
-    }
-  }
-
-  .el-sub-menu__title,
-  .el-menu-item {
-    height: 42px !important;
-    line-height: 42px !important;
-    margin-left: 8px !important;
-    margin-right: 8px !important;
-
-    &:hover {
-      background-color: #F2F4F5 !important;
-    }
-  }
-
 }
+
+.el-menu-item {
+  position relative !important
+  transition: background-color, color .3s ease-in-out !important;
+  border-radius 4px !important
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 4px;
+    height: 0;
+    background-color: #1C6EFF;
+    transition height 0.3s ease-in-out
+  }
+}
+
+.el-sub-menu__title,
+.el-menu-item {
+  height: 42px !important;
+  line-height: 42px !important;
+  margin-left: 8px !important;
+  margin-right: 8px !important;
+
+  &:hover {
+    background-color: #F2F4F5 !important;
+  }
+}
+

src/assets/stylus/root.styl

@@ -1,4 +1,4 @@
-#app {
+body {
   --custom-radius: 9px;
   --main-color: #5D87FF;
   --el-color-primary: #5D87FF !important;
@@ -14,8 +14,15 @@
   --el-border-radius-base: 4px !important;
 
   --el-messagebox-border-radius: 8px !important;
+  --el-border-color-light #EAEBF1 !important;
 
   .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
     color: var(--theme-color) !important;
   }
 }
+
+:focus-visible {
+  outline none !important
+  outline-offset unset !important
+  transition none !important
+}

src/pages/a-frame/AAvatar.vue

@@ -36,7 +36,7 @@ function logoutHandler() {
 </script>
 
 <template>
-  <ElDropdown trigger="click" @visible-change="dropdownChangeHandler">
+  <ElDropdown placement="bottom-end" trigger="click" @visible-change="dropdownChangeHandler">
     <div class="user-info-container">
       <div>
         <div style="font-size: 16px">{{ appUserStore.nickname }}</div>
@@ -83,8 +83,7 @@ function logoutHandler() {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    border-bottom: 1px solid #D3D7DE;
+    border-bottom: 1px solid #EAEBF1;
-    background-color: #002E460A;
     padding: 12px;
     font-size: 1rem;
   }

src/pages/a-frame/AFrame.vue

@@ -81,10 +81,11 @@ onUnmounted(() => {
 
   & > section {
     height 100%
+    //padding-right 20px
 
     .a-frame-header {
       height 110px
-      padding 0
+      padding 0 10px 0 0
       background-color: #FAFBFC;
 
       & > div:nth-child(1) {
@@ -138,7 +139,7 @@ onUnmounted(() => {
     .a-frame-main {
       height calc(100% - 60px)
       width 100%;
-      padding 0
+      padding 0 10px 0 0
       overflow hidden
       background-color rgb(250, 251, 252)
     }

src/pages/a-frame/ATabbar.vue

@@ -20,7 +20,7 @@
         </div>
       </div>
     </ElScrollbar>
-    <ElDropdown placement="bottom" @command="handleCommand">
+    <ElDropdown placement="bottom-end" @command="handleCommand">
       <ElButton :icon="elIcons.More" text/>
       <template #dropdown>
         <ElDropdownMenu>

src/pages/a-frame/UserInfoPanel.vue

@@ -91,12 +91,7 @@ defineExpose({
     <ElFormItem prop="avatar">
       <Uploader
         v-model:file="userInfoForm.avatar"
-        :upload-props="{
+      />
-          accept: 'image/*',
-          listType:'picture'
-        }">
-        <ElButton>点击上传头像</ElButton>
-      </Uploader>
     </ElFormItem>
     <ElFormItem class="submit-btn">
       <ElButton :loading="loading" native-type="submit" type="primary">提交</ElButton>
@@ -106,6 +101,13 @@ defineExpose({
 
 <style lang="stylus" scoped>
 .user-info-form {
+  :deep(.el-form-item):nth-child(3) {
+    .el-form-item__content {
+      width 100%;
+      justify-content center
+    }
+  }
+
   .submit-btn {
     :deep(.el-form-item__content) {
       & > button {
@@ -114,18 +116,4 @@ defineExpose({
     }
   }
 }
-
-
-:deep(.a-uploader) {
-  width 100%;
-
-  .el-upload {
-    width 100%;
-
-    & > button {
-      width 100%;
-    }
-  }
-}
-
 </style>