diff --git a/src/views/message/sys-info.vue b/src/views/message/sys-info.vue
index 61a99e1..8a32818 100644
--- a/src/views/message/sys-info.vue
+++ b/src/views/message/sys-info.vue
@@ -4,14 +4,7 @@
             <span>{{ t('sys') }}</span>
             <i class="time" v-if="v.time">({{ v.time }})</i>：
             <span class="msg">{{ v.msg }}</span>
-            <div style="float: inline-end;" v-if="v.bouts">
-                <Tooltip :show-icon="false" width="25rem" x="-50%">
-                    <a class="bouts-link">{{ t('bouts.0') }}</a>
-                    <template #tip>
-                        <Bouts :bouts="v.bouts"></Bouts>
-                    </template>
-                </Tooltip>
-            </div>
+            <a v-if="v.bouts" @click="bouts = v.bouts; showBouts = true;" class="bouts-link">{{ t('bouts.0') }}</a>
             <span v-if="v.equips" v-for="(o, p) in v.equips" :key="p">
                 <a :style="{ color: o.quality.color }" @mouseleave="commit('close_equip_tip')"
                     @mouseover="commit('show_equip_tip', { equip: o, compare: true, e: $event })">
@@ -22,6 +15,9 @@
         </div>
     </div>
 
+    <Drawer v-model="showBouts" width="30%">
+        <Bouts :bouts="bouts"></Bouts>
+    </Drawer>
 
 
 </template>
@@ -31,12 +27,14 @@ import { useStore } from "vuex";
 import { watch, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
 import { qualitys } from "@/config";
-import { Tooltip } from "@/components";
+import { Drawer, Tooltip } from "@/components";
 import Bouts from "./bouts.vue";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
 const sysInfo = ref();
+const showBouts = ref(false)
+const bouts = ref<any>([])
 
 watch(state.sysInfo, () => {
     nextTick(() => {