From 859ec7a60a9a1f30c898dbf1ae05c50dccfc40e5 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 11 Aug 2022 01:51:55 +0800 Subject: [PATCH] 优化视频模块内页 --- src/components/group/tool.vue | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue index 88b4c2b..7e33920 100644 --- a/src/components/group/tool.vue +++ b/src/components/group/tool.vue @@ -1,22 +1,39 @@ <template> <a-affix :offset-top="600"> - <div style="padding-left:5px;"> - <a-button @click="showDrawer1"> + <div style="padding-left:5px;" class="myButton"> + <!-- <a-button @click="showDrawer1"> 抽屉1 - </a-button> + </a-button> --> <!-- <a-button @click="showDrawer2"> 抽屉2 </a-button> --> + <a-button @click="showMessage"> + <a-badge status="success"> + 消息 + </a-badge> + <a-icon type="message" /> + </a-button> + <a-button @click="showPreview"> + 预览 + <a-icon type="youtube" /> + </a-button> <a-button @click="showModal"> 日志 - <a-icon type="plus-circle" style="margin-left: 0px;" /> + <a-icon type="plus-circle" /> + </a-button> + <a-button @click="showScreen"> + {{screenModel}} + <transition name="fade"> + <a-icon :type="iconType" /> + </transition> </a-button> - <a-button> + + <!-- <a-button> 工具 <a-icon type="tool" style="margin-left: 0px;" /> - </a-button> + </a-button> --> </div> </a-affix> </template> @@ -24,18 +41,41 @@ <script> export default { data() { - return {} + return { + iconType: "arrows-alt", + screen: false, + screenModel: "拉伸" + } }, methods: { - showDrawer1() { - this.$emit('showDrawer1') + showMessage() { + this.$emit('showMessage') }, showModal() { this.$emit('showModal') + }, + showPreview() { + this.$emit('showPreview') + }, + showScreen() { + this.$emit('showScreen') + if (this.screen) { + this.screenModel = "拉伸"; + this.iconType = "arrows-alt"; + } else { + this.screenModel = "缩小"; + this.iconType = "shrink" + } + this.screen = !this.screen; } }, } </script> -<style> +<style lang="less"> + .myButton { + button { + min-width: 90px; + } + } </style> -- Gitblit v1.9.1