ui

2025-04-23 11:22:46 +08:00
parent 7a1aae1e2f
commit 0b29e4e856
20 changed files with 1301 additions and 1 deletions
@@ -0,0 +1,55 @@
+<style>
+  body {
+    --icon-size: var(--icon-size, 2rem);
+    --icon-color: var(--icon-color, #000);
+    height: var(--icon-size);
+    width: var(--icon-size);
+    font-size: calc(var(--icon-size) - 0.5rem);
+    line-height: var(--icon-size);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+    cursor: pointer;
+    color: var(--icon-color);
+  }
+
+  body i {
+    font-family: "iconfont" !important;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body:hover {
+    opacity: 0.8;
+  }
+
+  body[type=round] {
+    border-radius: 50%;
+  }
+
+  body[type=round]:hover {
+    background-color: color-mix(in srgb, var(--icon-color), #999 40%);
+    color: #fff;
+  }
+
+  body[type=rect]:hover {
+    background-color: color-mix(in srgb, var(--icon-color), #999 40%);
+    color: #fff;
+  }
+
+  body[type=outline] {
+    border: 1px solid var(--icon-color);
+    background-color: transparent;
+  }
+</style>
+
+<body :style="`--icon-size:${size};--icon-color:${color}`" :type>
+  <i :class="'icon-'+name"></i>
+</body>
+<script setup>
+  size = '2rem'
+  color = '#000'
+  name = ''
+  type = 'round' // rect, round, outline, none
+</script>