recall ⭐ 回溯标签Card

ningOEX · Jan 9, 2025 · 9c2b0f3 · 9c2b0f3
1 parent 55cd7ae
commit 9c2b0f3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -6,11 +6,9 @@ import UpdatedTime from '../../components/UpdatedTime.vue';
 import WordCount from '../../components/WordCount.vue';
 import Home from '../../components/Home.vue';
 import Layout from '../../components/Layout.vue';
-import { ElTag } from 'element-plus';
 // css
 import '@fortawesome/fontawesome-free/css/all.css';
 import '../style.css'; // 引入 Tailwind CSS
-import 'element-plus/es/components/tag/style/css';
 
 export default {
     ...DefaultTheme,
@@ -19,6 +17,5 @@ export default {
         app.component('WordCount', WordCount);
         app.component('Home', Home);
         app.component('Layout', Layout);
-        app.component('ElTag', ElTag); // 标签
     },
 };
diff --git a/docs/components/Label.vue b/docs/components/Label.vue
@@ -3,9 +3,12 @@
     <span class="text-sm">🏷 标签</span>
 
     <div class="flex flex-wrap items-center gap-x-2 gap-y-6 text-xs mt-2">
-      <el-tag :type="getType(index)" v-for="(label, index) in Labels" effect="dark">{{
-        label
-      }}</el-tag>
+      <span
+        :class="bgHandle(index)"
+        style="padding: 2px 8px; cursor: pointer"
+        v-for="(label, index) in Labels"
+        >{{ label }}</span
+      >
     </div>
   </div>
 </template>
@@ -16,23 +19,36 @@ import { ref, onMounted } from "vue";
 
 const Labels = ref<string[]>([]);
 
-const getType = (index: number) => {
-  const types = ["primary", "success", "warning", "danger", "info"];
-  if (index % 1 === 0) {
-    return types[index % types.length];
-  } else if (index % 2 === 0) {
-    return types[index % types.length];
-  } else if (index % 3 === 0) {
-    return types[index % types.length];
-  } else if (index % 4 === 0) {
-    return types[index % types.length];
-  } else {
-    return types[index % types.length];
-  }
+const bgHandle = (i: number) => {
+  let className = "";
+  if (i % 1 === 0) className = "note-1 br "; // 1的倍数
+  if (i % 2 === 0) className = "note-2 br"; // 2的倍数
+  if (i % 3 === 0) className = "note-3 br"; // 3的倍数
+  if (i % 4 === 0) className = "note-4 br"; // 4的倍数
+  return className;
 };
 
 onMounted(async () => {
   const res = await request("/data.json");
   Labels.value = res.labels;
 });
 </script>
+
+<style>
+/* 不同颜色的便签 */
+.note-1 {
+  color: #4caf50; /* 绿色 */
+}
+
+.note-2 {
+  color: #2196f3; /* 蓝色 */
+}
+
+.note-3 {
+  color: #ff9800; /* 橙色 */
+}
+
+.note-4 {
+  color: #f44336; /* 红色 */
+}
+</style>