From 82f1f5d0cf1b51a5d81915e842e01760f404fa74 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子li <15040126243@163.com> Date: 星期三, 20 十月 2021 13:07:16 +0800 Subject: [PATCH] update 优化xxl-job-admin相关pr代码 增加格式化日志输出与docker镜像 --- ruoyi-ui/src/components/RightPanel/index.vue | 298 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 149 insertions(+), 149 deletions(-) diff --git a/ruoyi-ui/src/components/RightPanel/index.vue b/ruoyi-ui/src/components/RightPanel/index.vue index 1534b9b..fbf27eb 100644 --- a/ruoyi-ui/src/components/RightPanel/index.vue +++ b/ruoyi-ui/src/components/RightPanel/index.vue @@ -1,149 +1,149 @@ -<template> - <div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> - <div class="rightPanel-background" /> - <div class="rightPanel"> - <div class="rightPanel-items"> - <slot /> - </div> - </div> - </div> -</template> - -<script> -import { addClass, removeClass } from '@/utils' - -export default { - name: 'RightPanel', - props: { - clickNotClose: { - default: false, - type: Boolean - }, - buttonTop: { - default: 250, - type: Number - } - }, - computed: { - show: { - get() { - return this.$store.state.settings.showSettings - }, - set(val) { - this.$store.dispatch('settings/changeSetting', { - key: 'showSettings', - value: val - }) - } - }, - theme() { - return this.$store.state.settings.theme - }, - }, - watch: { - show(value) { - if (value && !this.clickNotClose) { - this.addEventClick() - } - if (value) { - addClass(document.body, 'showRightPanel') - } else { - removeClass(document.body, 'showRightPanel') - } - } - }, - mounted() { - this.insertToBody() - this.addEventClick() - }, - beforeDestroy() { - const elx = this.$refs.rightPanel - elx.remove() - }, - methods: { - addEventClick() { - window.addEventListener('click', this.closeSidebar) - }, - closeSidebar(evt) { - const parent = evt.target.closest('.rightPanel') - if (!parent) { - this.show = false - window.removeEventListener('click', this.closeSidebar) - } - }, - insertToBody() { - const elx = this.$refs.rightPanel - const body = document.querySelector('body') - body.insertBefore(elx, body.firstChild) - } - } -} -</script> - -<style> -.showRightPanel { - overflow: hidden; - position: relative; - width: calc(100% - 15px); -} -</style> - -<style lang="scss" scoped> -.rightPanel-background { - position: fixed; - top: 0; - left: 0; - opacity: 0; - transition: opacity .3s cubic-bezier(.7, .3, .1, 1); - background: rgba(0, 0, 0, .2); - z-index: -1; -} - -.rightPanel { - width: 100%; - max-width: 260px; - height: 100vh; - position: fixed; - top: 0; - right: 0; - box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05); - transition: all .25s cubic-bezier(.7, .3, .1, 1); - transform: translate(100%); - background: #fff; - z-index: 40000; -} - -.show { - transition: all .3s cubic-bezier(.7, .3, .1, 1); - - .rightPanel-background { - z-index: 20000; - opacity: 1; - width: 100%; - height: 100%; - } - - .rightPanel { - transform: translate(0); - } -} - -.handle-button { - width: 48px; - height: 48px; - position: absolute; - left: -48px; - text-align: center; - font-size: 24px; - border-radius: 6px 0 0 6px !important; - z-index: 0; - pointer-events: auto; - cursor: pointer; - color: #fff; - line-height: 48px; - i { - font-size: 24px; - line-height: 48px; - } -} -</style> +<template> + <div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> + <div class="rightPanel-background" /> + <div class="rightPanel"> + <div class="rightPanel-items"> + <slot /> + </div> + </div> + </div> +</template> + +<script> +import { addClass, removeClass } from '@/utils' + +export default { + name: 'RightPanel', + props: { + clickNotClose: { + default: false, + type: Boolean + }, + buttonTop: { + default: 250, + type: Number + } + }, + computed: { + show: { + get() { + return this.$store.state.settings.showSettings + }, + set(val) { + this.$store.dispatch('settings/changeSetting', { + key: 'showSettings', + value: val + }) + } + }, + theme() { + return this.$store.state.settings.theme + }, + }, + watch: { + show(value) { + if (value && !this.clickNotClose) { + this.addEventClick() + } + if (value) { + addClass(document.body, 'showRightPanel') + } else { + removeClass(document.body, 'showRightPanel') + } + } + }, + mounted() { + this.insertToBody() + this.addEventClick() + }, + beforeDestroy() { + const elx = this.$refs.rightPanel + elx.remove() + }, + methods: { + addEventClick() { + window.addEventListener('click', this.closeSidebar) + }, + closeSidebar(evt) { + const parent = evt.target.closest('.rightPanel') + if (!parent) { + this.show = false + window.removeEventListener('click', this.closeSidebar) + } + }, + insertToBody() { + const elx = this.$refs.rightPanel + const body = document.querySelector('body') + body.insertBefore(elx, body.firstChild) + } + } +} +</script> + +<style> +.showRightPanel { + overflow: hidden; + position: relative; + width: calc(100% - 15px); +} +</style> + +<style lang="scss" scoped> +.rightPanel-background { + position: fixed; + top: 0; + left: 0; + opacity: 0; + transition: opacity .3s cubic-bezier(.7, .3, .1, 1); + background: rgba(0, 0, 0, .2); + z-index: -1; +} + +.rightPanel { + width: 100%; + max-width: 260px; + height: 100vh; + position: fixed; + top: 0; + right: 0; + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05); + transition: all .25s cubic-bezier(.7, .3, .1, 1); + transform: translate(100%); + background: #fff; + z-index: 40000; +} + +.show { + transition: all .3s cubic-bezier(.7, .3, .1, 1); + + .rightPanel-background { + z-index: 20000; + opacity: 1; + width: 100%; + height: 100%; + } + + .rightPanel { + transform: translate(0); + } +} + +.handle-button { + width: 48px; + height: 48px; + position: absolute; + left: -48px; + text-align: center; + font-size: 24px; + border-radius: 6px 0 0 6px !important; + z-index: 0; + pointer-events: auto; + cursor: pointer; + color: #fff; + line-height: 48px; + i { + font-size: 24px; + line-height: 48px; + } +} +</style> -- Gitblit v1.9.3