diff --git a/frontent/ops_vue_js/src/main.js b/frontent/ops_vue_js/src/main.js
index 5fa560d..42d5f9a 100644
--- a/frontent/ops_vue_js/src/main.js
+++ b/frontent/ops_vue_js/src/main.js
@@ -7,8 +7,7 @@ import App from './App.vue'
 import router from './router'
 
 import '@tabler/core/dist/css/tabler.min.css'
-import '@tabler/core/dist/css/tabler-vendors.min.css'
-import '@tabler/core/dist/js/tabler.min.js'
+
 
 import en from './i18n/en.json'
 import zhCN from './i18n/zh-CN.json'
diff --git a/frontent/ops_vue_js/src/views/HomeView.vue b/frontent/ops_vue_js/src/views/HomeView.vue
index cd6fa11..34b9da4 100644
--- a/frontent/ops_vue_js/src/views/HomeView.vue
+++ b/frontent/ops_vue_js/src/views/HomeView.vue
@@ -1,19 +1,27 @@
 <script setup>
-import { my_network_func } from '@/my_network_func';
-import { useUserStore } from '@/stores/user'
+import { ref } from "vue";
+import { my_network_func } from "@/my_network_func";
+import { useUserStore } from "@/stores/user";
+import MyOffcanvas from "@/components/MyOffcanvas.vue";
+const user = useUserStore();
+const mos = ref();
 
-const user = useUserStore()
+function t() {
+  console.log("test");
 
-
-  function t(){
-    console.log("test")
-
-    my_network_func.postJson("/users/test",{
-      a:"1"
-    },(a)=>{
-      console.log(a)
-    });
-  }
+  my_network_func.postJson(
+    "/users/test",
+    {
+      a: "1",
+    },
+    (a) => {
+      console.log(a);
+    }
+  );
+}
+function tt(){
+  mos.value?.showAlert("danger", "123123", 5000);
+}
 </script>
 
 <template>
@@ -21,5 +29,7 @@ const user = useUserStore()
     1112
     <button @click="t">222</button>
     {{ user.userCookie }}
+    <button @click="tt">333</button>
   </main>
+  <MyOffcanvas ref="mos" />
 </template>