diff --git a/README.md b/README.md index dfbdb096..abf8af48 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,16 @@

Fantastic-admin

-## 这是什么 - -一款开箱即用的 Vue 中后台管理系统框架 +

一款开箱即用的 Vue 中后台管理系统框架

## 特点 -- 丰富的布局模式，覆盖市面上各种中后台布局 +- 丰富的布局模式，覆盖市面上各种中后台布局，兼容PC、平板和移动端 - 提供主题配置文件，轻松实现个性化定制 +- 精心设计的动效，让每一处的动画过渡都干净利落不拖沓 - 根据路由配置自动生成导航栏 - 支持全方位权限验证 +- 多级页面缓存 ## 演示 diff --git a/src/App.vue b/src/App.vue index 3ce700ec..30157dbc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,8 +20,32 @@ export default { $route: 'routeChange', '$store.state.keepAlive.list'(val) { process.env.NODE_ENV == 'development' && console.log(`[ keepAliveList ] ${val}`) + }, + '$store.state.global.mode': { + handler() { + if (this.$store.state.global.mode == 'pc') { + if (this.$store.state.global.enableSidebarCollapse) { + this.$store.commit('global/updateThemeSetting', { + 'sidebarCollapse': false + }) + } + } + if (this.$store.state.global.mode == 'mobile') { + this.$store.commit('global/updateThemeSetting', { + 'sidebarCollapse': true + }) + } + document.body.setAttribute('data-mode', this.$store.state.global.mode) + }, + immediate: true } }, + mounted() { + window.onresize = () => { + this.$store.commit('global/setMode', document.body.clientWidth) + } + window.onresize() + }, methods: { reload(type = 1) { if (type == 1) { diff --git a/src/assets/styles/reset.scss b/src/assets/styles/reset.scss index 537d5263..11cba0b6 100644 --- a/src/assets/styles/reset.scss +++ b/src/assets/styles/reset.scss @@ -27,6 +27,7 @@ body { background-color: $g-app-bg; box-sizing: border-box; font-family: Lato, PingFang SC, Microsoft YaHei, sans-serif; + -webkit-tap-highlight-color: transparent; &.hidden { overflow: hidden; } diff --git a/src/components/FixedActionBar/index.vue b/src/components/FixedActionBar/index.vue index 76f3b275..bbc780ec 100644 --- a/src/components/FixedActionBar/index.vue +++ b/src/components/FixedActionBar/index.vue @@ -43,6 +43,12 @@ export default {