wuyongqi/beautifier-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
张磊
2026-04-03 16:45:16 +08:00
parent 9357b54bb9
commit 04e94d23ed
8 changed files with 122 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/area/index.ts
+9
View File
@@ -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
+8 -6
View File
@@ -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 - 50px);
min-height: calc(100vh - #{$navbarHeight});
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 - 84px);
min-height: calc(100vh - #{$fixed-header-offset});
}
.fixed-header + .app-main {
padding-top: 84px;
padding-top: $fixed-header-offset;
}
}
</style>
src/layout/components/Navbar.vue
+7 -4
View File
@@ -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;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
background: $headerBarBg;
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
+2 -2
View File
@@ -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
+10 -1
View File
@@ -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
+66 -26
View File
@@ -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;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
background: $headerBarBg;
border-bottom: 1px solid $tag-border;
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;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
min-height: $tag-item-height;
height: $tag-item-height;
line-height: 1.25;
border: 1px solid $tag-border;
color: #606266;
background: $tag-inactive-bg;
padding: 0 18px;
font-size: 14px;
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);
color: var(--el-color-primary-light-9);
border-color: var(--el-color-primary);
z-index: 1;
background: #fff;
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;
display: inline-block;
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 5px;
background: var(--el-color-primary);
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;
color: #fff;
background-color: rgba(0, 0, 0, 0.08);
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
+13 -7
View File
@@ -1,16 +1,21 @@
// sidebar
$menuText: #bfcbd9;
// sidebar（浅色侧栏）
$menuText: #606266;
$menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$subMenuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;
$menuBg: #ebf1f6;
$menuHover: #dce8f2;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$subMenuBg: #e4edf5;
$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
+7 -2
View File
@@ -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[]>([]);