From c3a8f4215551870f2b6963aeb0cecfc31a0ff1ed Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Sun, 31 Jan 2021 02:13:22 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.31:=E5=A4=84=E7=90=86=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E6=90=9C=E7=B4=A2=E3=80=81=E6=B6=88=E6=81=AF=E9=80=9A?= =?UTF-8?q?=E7=9F=A5=E3=80=81=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E7=AD=89?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue-admin-wonderful-next/src/router/index.ts | 2 +- vue-admin-wonderful-next/src/theme/app.scss | 6 +- .../src/theme/element.scss | 12 ++ .../src/theme/media/examples.scss | 13 ++ .../src/theme/media/form.scss | 21 ++++ .../src/theme/media/layout.scss | 38 ++++++ .../src/theme/media/media.scss | 2 + .../src/views/fun/tagsView/index.vue | 81 ++++++++---- .../src/views/layout/lockScreen/index.vue | 2 + .../layout/navBars/breadcrumb/search.vue | 111 +++++++++++++++++ .../views/layout/navBars/breadcrumb/user.vue | 42 ++++++- .../layout/navBars/breadcrumb/userNews.vue | 115 ++++++++++++++++++ .../src/views/layout/routerView/link.vue | 2 +- .../src/views/login/component/account.vue | 4 +- 14 files changed, 420 insertions(+), 31 deletions(-) create mode 100644 vue-admin-wonderful-next/src/theme/media/examples.scss create mode 100644 vue-admin-wonderful-next/src/theme/media/form.scss create mode 100644 vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/search.vue create mode 100644 vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/userNews.vue diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index d3f9fdb..3dd06a1 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -528,7 +528,7 @@ export function formatTwoStageRoutes(arr: any) { return newArr } -// 缓存多级嵌套数组处理后的一维数组(tagsView中使用) +// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单过滤中使用：未过滤隐藏的(isHide)) export function setCacheTagsViewRoutes() { store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children) } diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss index 4cf74a1..c23091f 100644 --- a/vue-admin-wonderful-next/src/theme/app.scss +++ b/vue-admin-wonderful-next/src/theme/app.scss @@ -59,7 +59,7 @@ body, width: 100%; height: 100%; border-radius: 4px; - border: 1px solid rgba(238, 238, 238, 0.6); + border: 1px solid #ebeef5; } .layout-el-aside-br-color { border-right: 1px solid rgb(238, 238, 238); @@ -91,6 +91,10 @@ body, .layout-hide { display: none; } + // 去掉手机版菜单导航背景 + .el-drawer { + background-color: transparent !important; + } } /* element plus 全局样式 diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss index 7923d4e..8a8f468 100644 --- a/vue-admin-wonderful-next/src/theme/element.scss +++ b/vue-admin-wonderful-next/src/theme/element.scss @@ -256,6 +256,10 @@ .el-input-number__decrease:hover { color: set-color(primary); } +// 菜单搜索 +.el-autocomplete-suggestion__wrap { + max-height: 280px !important; +} /* Select 选择器 ------------------------------- */ @@ -364,6 +368,14 @@ color: set-color(primary); } +/* Form 表单 +------------------------------- */ +.el-form { + .el-form-item:last-of-type { + margin-bottom: 0 !important; + } +} + /* Table 表格 ------------------------------- */ .el-table .descending .sort-caret.descending { diff --git a/vue-admin-wonderful-next/src/theme/media/examples.scss b/vue-admin-wonderful-next/src/theme/media/examples.scss new file mode 100644 index 0000000..44ad2f3 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/media/examples.scss @@ -0,0 +1,13 @@ +@import './index.scss'; + +/* 页面宽度小于576px +------------------------------- */ +@media screen and (max-width: $xs) { + // tagsView 操作 +} + +/* 页面宽度小于768px +------------------------------- */ +@media screen and (max-width: $sm) { + // tagsView 操作 +} diff --git a/vue-admin-wonderful-next/src/theme/media/form.scss b/vue-admin-wonderful-next/src/theme/media/form.scss new file mode 100644 index 0000000..68a89a3 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/media/form.scss @@ -0,0 +1,21 @@ +@import './index.scss'; + +/* 页面宽度小于576px +------------------------------- */ +@media screen and (max-width: $xs) { +} + +/* 页面宽度小于768px +------------------------------- */ +@media screen and (max-width: $sm) { + .el-form { + .el-select { + width: 100%; + } + .el-input, + .el-textarea { + width: 100%; + max-width: 100% !important; + } + } +} diff --git a/vue-admin-wonderful-next/src/theme/media/layout.scss b/vue-admin-wonderful-next/src/theme/media/layout.scss index 9980814..8f96e99 100644 --- a/vue-admin-wonderful-next/src/theme/media/layout.scss +++ b/vue-admin-wonderful-next/src/theme/media/layout.scss @@ -3,6 +3,7 @@ /* 页面宽度小于576px ------------------------------- */ @media screen and (max-width: $xs) { + // MessageBox 弹框 .el-message-box { width: 80% !important; } @@ -11,7 +12,44 @@ /* 页面宽度小于768px ------------------------------- */ @media screen and (max-width: $sm) { + // Breadcrumb 面包屑 .layout-navbars-breadcrumb-hide { display: none; } + // 外链视图 + .layout-view-link { + a { + max-width: 80%; + text-align: center; + } + } + // 菜单搜索 + .layout-search-dialog { + .el-autocomplete { + width: 80% !important; + } + } +} + +/* 页面宽度小于1000px +------------------------------- */ +@media screen and (max-width: 1000px) { + // 布局配置 + .layout-drawer-content-flex { + position: relative; + &::after { + content: '手机版不支持切换布局'; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + text-align: center; + height: 140px; + line-height: 140px; + background: rgba(255, 255, 255, 0.9); + color: #666666; + } + } } diff --git a/vue-admin-wonderful-next/src/theme/media/media.scss b/vue-admin-wonderful-next/src/theme/media/media.scss index 8adf715..3600fe8 100644 --- a/vue-admin-wonderful-next/src/theme/media/media.scss +++ b/vue-admin-wonderful-next/src/theme/media/media.scss @@ -1,3 +1,5 @@ @import './login.scss'; @import './error.scss'; @import './layout.scss'; +@import './form.scss'; +@import './examples.scss'; diff --git a/vue-admin-wonderful-next/src/views/fun/tagsView/index.vue b/vue-admin-wonderful-next/src/views/fun/tagsView/index.vue index fe8acae..5c979aa 100644 --- a/vue-admin-wonderful-next/src/views/fun/tagsView/index.vue +++ b/vue-admin-wonderful-next/src/views/fun/tagsView/index.vue @@ -1,26 +1,49 @@ \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue index 18f6cf8..f31717b 100644 --- a/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue +++ b/vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue @@ -160,11 +160,13 @@ export default { store.state.themeConfig.lockScreenTime = 30; setLocalThemeConfig(); }; + // 页面加载时 onMounted(() => { initGetElement(); initSetTime(); initLockScreen(); }); + // 页面卸载时 onUnmounted(() => { clearInterval(state.setIntervalTime); clearInterval(state.isShowLockScreenIntervalTime); diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/search.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/search.vue new file mode 100644 index 0000000..88af58c --- /dev/null +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/search.vue @@ -0,0 +1,111 @@ + + + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue index d487bfe..294c0e0 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue @@ -1,12 +1,21 @@ + @@ -36,6 +46,7 @@ import { reactive, toRefs, toRef, + ref, } from "vue"; import { useRouter } from "vue-router"; import { ElMessageBox, ElMessage } from "element-plus"; @@ -43,14 +54,19 @@ import screenfull from "screenfull"; import { resetRoute } from "/@/router/index.ts"; import { useStore } from "/@/store/index.ts"; import { clearSession } from "/@/utils/storage.ts"; +import UserNews from "/@/views/layout/navBars/breadcrumb/userNews.vue"; +import Search from "/@/views/layout/navBars/breadcrumb/search.vue"; export default { name: "layoutBreadcrumbUser", + components: { UserNews, Search }, setup() { const { proxy } = getCurrentInstance(); const router = useRouter(); const store = useStore(); + const searchRef = ref(); const state = reactive({ isScreenfull: false, + isShowUserNewsPopover: false, }); // 设置布局 const setFlexAutoStyle = computed(() => { @@ -113,11 +129,22 @@ export default { router.push(path); } }; + // 菜单搜索点击 + const onSearchClick = () => { + searchRef.value.openSearch(); + }; + // 我的消息点击 + const onUserNewsPopoverClick = () => { + state.isShowUserNewsPopover = !state.isShowUserNewsPopover; + }; return { setFlexAutoStyle, onLayoutSetingClick, onHandleCommandClick, onScreenfullClick, + onSearchClick, + onUserNewsPopoverClick, + searchRef, ...toRefs(state), }; }, @@ -146,6 +173,8 @@ export default { color: var(--bg-topBarColor); height: 50px; line-height: 50px; + display: flex; + align-items: center; &:hover { background: rgba(0, 0, 0, 0.04); i { @@ -157,5 +186,14 @@ export default { ::v-deep(.el-dropdown) { color: var(--bg-topBarColor); } + ::v-deep(.el-badge) { + height: 40px; + line-height: 40px; + display: flex; + align-items: center; + } + ::v-deep(.el-badge__content.is-fixed) { + top: 12px; + } } \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/userNews.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/userNews.vue new file mode 100644 index 0000000..ac28e8a --- /dev/null +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/userNews.vue @@ -0,0 +1,115 @@ + + + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/routerView/link.vue b/vue-admin-wonderful-next/src/views/layout/routerView/link.vue index bfdd579..4109ded 100644 --- a/vue-admin-wonderful-next/src/views/layout/routerView/link.vue +++ b/vue-admin-wonderful-next/src/views/layout/routerView/link.vue @@ -1,6 +1,6 @@