'menu颜色调整、tag样式跳转'

src/api/area/index.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+export function getAreaList(data: any): AxiosPromise<any> {
+    return request({
+        url: '/api/area',
+        method: 'post',
+        data
+    });
+}

src/layout/components/AppMain.vue

@@ -20,26 +20,28 @@ const cachedViews = computed(() => tagsView.cachedViews);
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
+$fixed-header-offset: $navbarHeight + $tagsBarHeight;
+
 .app-main {
-  /* 50= navbar  50  */
+  min-height: calc(100vh - #{$navbarHeight});
-  min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: $navbarHeight;
 }
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - #{$fixed-header-offset});
-    min-height: calc(100vh - 84px);
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: $fixed-header-offset;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -132,6 +132,8 @@ function logout() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
 ul {
   list-style: none;
   margin: 0;
@@ -141,8 +143,9 @@ ul {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: $headerBarBg;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  border-bottom: 1px solid #c5ced9;
+  box-shadow: none;
 
   .hamburger-container {
     line-height: 46px;
@@ -153,7 +156,7 @@ ul {
     -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.025);
+      background: rgba(64, 158, 255, 0.08);
     }
   }
 
@@ -183,7 +186,7 @@ ul {
         transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+          background: rgba(64, 158, 255, 0.08);
         }
       }
     }

src/layout/components/Sidebar/Logo.vue

@@ -51,7 +51,7 @@ const { logo } = toRefs(state);
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #ebf1f6;
   text-align: center;
   overflow: hidden;
 
@@ -68,7 +68,7 @@ const { logo } = toRefs(state);
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      color: #303133;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;

src/layout/components/TagsView/ScrollPane.vue

@@ -116,13 +116,22 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
 .scroll-container {
+  height: 100%;
+
   .el-scrollbar__bar {
     bottom: 0px;
   }
 
   .el-scrollbar__wrap {
-    height: 49px;
+    height: $tagsBarHeight;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-end;
+    white-space: nowrap;
+    box-sizing: border-box;
   }
 }
 

src/layout/components/TagsView/index.vue

@@ -299,34 +299,52 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+
+$tag-border: #c5ced9;
+$tag-inactive-bg: #dfe5ec;
+$tag-item-height: 40px;
+
 .tags-view__container {
-  height: 34px;
+  height: $tagsBarHeight;
   width: 100%;
-  background: #fff;
+  background: $headerBarBg;
-  border-bottom: 1px solid #d8dce5;
+  border-bottom: 1px solid $tag-border;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
+  box-sizing: border-box;
 
   .tags-view__wrapper {
+    height: 100%;
+
+    :deep(.scroll-container) {
+      height: 100%;
+    }
+
     .tags-view__item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       position: relative;
+      z-index: 0;
       cursor: pointer;
-      height: 26px;
+      min-height: $tag-item-height;
-      line-height: 26px;
+      height: $tag-item-height;
-      border: 1px solid #d8dce5;
+      line-height: 1.25;
-      color: #495060;
+      border: 1px solid $tag-border;
-      background: #fff;
+      color: #606266;
-      padding: 0 8px;
+      background: $tag-inactive-bg;
-      font-size: 12px;
+      padding: 0 18px;
-      margin-left: 5px;
+      font-size: 14px;
-      margin-top: 4px;
+      margin-left: -1px;
+      text-decoration: none;
+      vertical-align: bottom;
+      box-sizing: border-box;
 
       &:first-of-type {
-        margin-left: 15px;
+        margin-left: 16px;
       }
 
       &:last-of-type {
-        margin-right: 15px;
+        margin-right: 16px;
       }
 
       &:hover {
@@ -334,30 +352,52 @@ onMounted(() => {
       }
 
       &.active {
-        background-color: var(--el-color-primary);
+        z-index: 1;
-        color: var(--el-color-primary-light-9);
+        background: #fff;
-        border-color: var(--el-color-primary);
+        color: var(--el-color-primary);
+        border-color: $tag-border;
+        border-bottom-color: #fff;
+        margin-bottom: -1px;
+        padding-bottom: 1px;
+        font-weight: 600;
+        box-shadow: 0 -1px 0 rgba(64, 158, 255, 0.2);
+
         &::before {
           content: '';
-          background: #fff;
+          flex-shrink: 0;
-          display: inline-block;
           width: 8px;
           height: 8px;
           border-radius: 50%;
-          position: relative;
+          background: var(--el-color-primary);
-          margin-right: 5px;
+          margin-right: 8px;
         }
       }
 
       .icon-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+        width: 18px;
+        height: 18px;
         border-radius: 50%;
-        text-align: center;
+        color: inherit;
+        font-size: 12px;
+
+        :deep(.svg-icon) {
+          vertical-align: middle;
+        }
 
         &:hover {
-          background-color: #ccc;
+          background-color: rgba(0, 0, 0, 0.08);
-          color: #fff;
+          color: var(--el-color-primary);
         }
       }
+
+      &.active .icon-close:hover {
+        background-color: rgba(64, 158, 255, 0.15);
+        color: var(--el-color-primary);
+      }
     }
   }
 

src/styles/variables.module.scss

@@ -1,16 +1,21 @@
-// sidebar
+// sidebar（浅色侧栏）
-$menuText: #bfcbd9;
+$menuText: #606266;
 $menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText: #409eff;
 
-$menuBg: #304156;
+$menuBg: #ebf1f6;
-$menuHover: #263445;
+$menuHover: #dce8f2;
 
-$subMenuBg: #1f2d3d;
+$subMenuBg: #e4edf5;
-$subMenuHover: #001528;
+$subMenuHover: #d5e3ef;
 
 $sideBarWidth: 210px;
 
+// 顶栏 / 多页签区域（与侧栏统一浅蓝底）
+$headerBarBg: #ebf1f6;
+$navbarHeight: 50px;
+$tagsBarHeight: 52px;
+
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
@@ -22,4 +27,5 @@ $sideBarWidth: 210px;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
+  headerBarBg: $headerBarBg;
 }

src/views/user/userDetection.vue

@@ -20,7 +20,7 @@
                 </el-table-column>
                 <el-table-column prop="nickname" label="昵称" align="center" />
                 <el-table-column prop="mobile" label="手机号" align="center" />
-                <el-table-column prop="district" label="地区" align="center" />
+                <!-- <el-table-column prop="district" label="地区" align="center" /> -->
                 <el-table-column prop="gender_text" label="性别" align="center" />
                 <el-table-column prop="birthday_text" label="年龄" align="center" />
                 <el-table-column prop="created_at" label="创建时间" align="center" />
@@ -42,6 +42,7 @@
 import { reactive, ref } from 'vue';
 import { getUserDetectionList } from '@/api/user';
 import { ElMessage } from 'element-plus';
+import { getAreaList } from '@/api/area'
 import { Search, Refresh } from '@element-plus/icons-vue';
 
 const statusData: Record<number, string> = {
@@ -51,7 +52,11 @@ const statusData: Record<number, string> = {
     4: '已退款',
     5: '正常',
 };
-
+const getaddress = async () => {
+    const res = await getAreaList();
+    console.log(res, 'res')
+}
+getaddress()
 const loading = ref(false);
 const total = ref(0);
 const userList = ref<any[]>([]);