diff --git a/src/App.vue b/src/App.vue
index d7cd4c2302f4edb54baa02aabd502d6ee3858bf4..1b9f73bc1e09ddc1f5c84bc407a9ffebf0044595 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,30 @@
 <script setup>
 import { reactive } from "vue"
+// bg-btns
 const btns = reactive({
   options: [{ name: 'hello', value: 'hello' }, { name: 'world', value: 'world' }],
-  currentValue: ''
+  currentValue: 'hello'
 })
+
+// bg-card
+const card = reactive({
+  title: 'haha',
+  icon: "#bg-ic-c-s-half-star"
+})
+
+//
 </script>
 
 <template>
   <bg-btns :options="btns.options" v-model="btns.currentValue"></bg-btns>
+
+  <bg-card :title="card.title" :icon="card.icon">
+    <!-- slot自定义card内容体 -->
+    <div>
+      <div>haha</div>
+      <p>adsadsa</p>
+    </div>
+  </bg-card>
 </template>
 
 <style scoped>
diff --git a/src/main.js b/src/main.js
index f38d24e3e06d4eef9d0eddb38b83369b2af4bf25..ebea13567d0fe20fe8a745cc1bc37c8fc923d694 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,7 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
 
 import bgui from "@/bg-ui";
 import "@/bg-ui/index.scss";
 
-createApp(App).use(bgui).mount('#app')
+createApp(App).use(bgui).mount("#app");
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index a566a347d0d5ee0cc86036ea81554ea4bd7f60a6..0000000000000000000000000000000000000000
--- a/src/style.css
+++ /dev/null
@@ -1,90 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}