wangyifang
/
cz-hjjc-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模块嵌入

Browse Source
master
xy 2 years ago
parent 8ccdce6ad6
commit 02f7946286
6 changed files with 67 additions and 288 deletions
Show Stats Download Patch File Download Diff File

11
src/layout/components/Navbar/Icon.vue
Unescape View File

@ -17,7 +17,7 @@ export default {
return <Icon custom={icon} class='sub-el-icon' size="18" />
}
else {
return <svg-icon class-name="sub-el-icon" icon-class={this.icon}/>
return <i class="sub-el-icon"><svg-icon class-name="sub-el-icon__svg" icon-class={this.icon}/></i>
}
}
},
@ -31,7 +31,14 @@ export default {
<style scoped lang="scss">
.sub-el-icon {
margin-right: 4px;
margin-right: 5px;
width: 18px !important;
text-align: center;
vertical-align: middle;
color: currentColor;
display: inline-block;
&__svg {
}
}
</style>

28
src/layout/components/Navbar/index.vue
Unescape View File

@ -2,7 +2,7 @@
<div>
<header class="navbar navbar-expand-md d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
<button v-show="$store.state.app.device === 'mobile'" :aria-expanded="isShowMenuMobile" class="navbar-toggler" @click="isShowMenuMobile = !isShowMenuMobile">
<span class="navbar-toggler-icon" />
</button>
<div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
@ -70,7 +70,7 @@
</header>
<header class="navbar-expand-md">
<div id="navbar-menu" class="collapse navbar-collapse">
<div id="navbar-menu" class="navbar-collapse" v-if="$store.state.app.device === 'desktop'">
<el-menu
style="width: 100%;padding: 0 10px;"
:text-color="variables.menuText"
@ -82,6 +82,27 @@
<Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
</el-menu>
</div>
<div id="navbar-menu-mobile" class="navbar-collapse collapse" v-else>
<transition name="fade-transform-y">
<div class="navbar" v-show="isShowMenuMobile">
<div class="container-xl">
<div class="row flex-fill align-items-center">
<el-menu
unique-opened
style="width: 100%;padding: 0 10px;"
:text-color="variables.menuText"
:background-color="variables.menuBg"
:active-text-color="variables.menuActiveText"
:default-active="activeMenu"
>
<Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
</el-menu>
</div>
</div>
</div>
</transition>
</div>
</header>
</div>
</template>
@ -100,7 +121,8 @@ export default {
},
data() {
return {
isFullscreen: false
isFullscreen: false,
isShowMenuMobile: true,
}
},
computed: {

2
src/layout/mixin/ResizeHandler.js
Unescape View File

@ -17,7 +17,7 @@ export default {
beforeDestroy() {
window.removeEventListener('resize', this.$_resizeHandler)
},
mounted() {
created() {
const isMobile = this.$_isMobile()
if (isMobile) {
store.dispatch('app/toggleDevice', 'mobile')

282
src/styles/navbar.scss
Unescape View File

@ -3034,10 +3034,6 @@ progress {
flex-basis: auto
}
.navbar-expand-md .navbar-toggler {
display: none
}
.navbar-expand-md .offcanvas {
position: static;
z-index: auto;
@ -12921,185 +12917,6 @@ img,svg {
color: var(--tblr-yellow-fg)!important
}
.text-lime {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-lime-rgb),var(--tblr-text-opacity))!important
}
.text-lime-fg {
color: var(--tblr-lime-fg)!important
}
.text-green {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-green-rgb),var(--tblr-text-opacity))!important
}
.text-green-fg {
color: var(--tblr-green-fg)!important
}
.text-teal {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-teal-rgb),var(--tblr-text-opacity))!important
}
.text-teal-fg {
color: var(--tblr-teal-fg)!important
}
.text-cyan {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-cyan-rgb),var(--tblr-text-opacity))!important
}
.text-cyan-fg {
color: var(--tblr-cyan-fg)!important
}
.text-x {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-x-rgb),var(--tblr-text-opacity))!important
}
.text-x-fg {
color: var(--tblr-x-fg)!important
}
.text-facebook {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-facebook-rgb),var(--tblr-text-opacity))!important
}
.text-facebook-fg {
color: var(--tblr-facebook-fg)!important
}
.text-twitter {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-twitter-rgb),var(--tblr-text-opacity))!important
}
.text-twitter-fg {
color: var(--tblr-twitter-fg)!important
}
.text-linkedin {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-linkedin-rgb),var(--tblr-text-opacity))!important
}
.text-linkedin-fg {
color: var(--tblr-linkedin-fg)!important
}
.text-google {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-google-rgb),var(--tblr-text-opacity))!important
}
.text-google-fg {
color: var(--tblr-google-fg)!important
}
.text-youtube {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-youtube-rgb),var(--tblr-text-opacity))!important
}
.text-youtube-fg {
color: var(--tblr-youtube-fg)!important
}
.text-vimeo {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-vimeo-rgb),var(--tblr-text-opacity))!important
}
.text-vimeo-fg {
color: var(--tblr-vimeo-fg)!important
}
.text-dribbble {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-dribbble-rgb),var(--tblr-text-opacity))!important
}
.text-dribbble-fg {
color: var(--tblr-dribbble-fg)!important
}
.text-github {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-github-rgb),var(--tblr-text-opacity))!important
}
.text-github-fg {
color: var(--tblr-github-fg)!important
}
.text-instagram {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-instagram-rgb),var(--tblr-text-opacity))!important
}
.text-instagram-fg {
color: var(--tblr-instagram-fg)!important
}
.text-pinterest {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-pinterest-rgb),var(--tblr-text-opacity))!important
}
.text-pinterest-fg {
color: var(--tblr-pinterest-fg)!important
}
.text-vk {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-vk-rgb),var(--tblr-text-opacity))!important
}
.text-vk-fg {
color: var(--tblr-vk-fg)!important
}
.text-rss {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-rss-rgb),var(--tblr-text-opacity))!important
}
.text-rss-fg {
color: var(--tblr-rss-fg)!important
}
.text-flickr {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-flickr-rgb),var(--tblr-text-opacity))!important
}
.text-flickr-fg {
color: var(--tblr-flickr-fg)!important
}
.text-bitbucket {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-bitbucket-rgb),var(--tblr-text-opacity))!important
}
.text-bitbucket-fg {
color: var(--tblr-bitbucket-fg)!important
}
.text-tabler {
--tblr-text-opacity: 1;
color: rgba(var(--tblr-tabler-rgb),var(--tblr-text-opacity))!important
}
.text-tabler-fg {
color: var(--tblr-tabler-fg)!important
}
.bg-gray-50 {
--tblr-bg-opacity: .1;
@ -13327,102 +13144,3 @@ img,svg {
height: 100%!important
}
.opacity-0 {
opacity: 0!important
}
.opacity-5 {
opacity: .05!important
}
.opacity-10 {
opacity: .1!important
}
.opacity-15 {
opacity: .15!important
}
.opacity-20 {
opacity: .2!important
}
.opacity-25 {
opacity: .25!important
}
.opacity-30 {
opacity: .3!important
}
.opacity-35 {
opacity: .35!important
}
.opacity-40 {
opacity: .4!important
}
.opacity-45 {
opacity: .45!important
}
.opacity-50 {
opacity: .5!important
}
.opacity-55 {
opacity: .55!important
}
.opacity-60 {
opacity: .6!important
}
.opacity-65 {
opacity: .65!important
}
.opacity-70 {
opacity: .7!important
}
.opacity-75 {
opacity: .75!important
}
.opacity-80 {
opacity: .8!important
}
.opacity-85 {
opacity: .85!important
}
.opacity-90 {
opacity: .9!important
}
.opacity-95 {
opacity: .95!important
}
.opacity-100 {
opacity: 1!important
}
.hover-shadow-sm:hover {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important
}
.hover-shadow:hover {
box-shadow: rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0!important
}
.hover-shadow-lg:hover {
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important
}
.hover-shadow-none:hover {
box-shadow: none!important
}

18
src/styles/sidebar.scss
Unescape View File

@ -15,3 +15,21 @@
text-align: center;
min-width: 100px !important;
}
#navbar-menu-mobile {
.el-menu {
border-right: none;
.el-menu-item, .el-submenu__title{
font-size: var(--tblr-nav-link-font-size);
height: auto;
line-height: inherit;
min-height: 2rem;
padding: .5rem calc(calc(var(--tblr-page-padding)* 2) / 2);
}
.el-submenu.is-active .el-submenu__title {
border-bottom: 0;
color: var(--theme-color);
}
}
}

14
src/styles/transition.scss
Unescape View File

@ -26,7 +26,21 @@
opacity: 0;
transform: translateX(30px);
}
/* fade-transform-y */
.fade-transform-y-leave-active,
.fade-transform-y-enter-active {
transition: all .5s;
}
.fade-transform-y-enter {
opacity: 0;
transform: translateY(-30px);
}
.fade-transform-y-leave-to {
opacity: 0;
transform: translateY(-30px);
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {

Write Preview
Loading…
Cancel
Save