签入版本

2026-09-29 10:14:04 +08:00
parent 3e5fc01124
commit d6b552103d
1664 changed files with 298944 additions and 0 deletions
@@ -0,0 +1,122 @@
+<template>
+  <h3>{{ getNameText() }} 赞助商</h3>
+
+  <p>
+    <a
+      v-for="sponsor in list"
+      :key="sponsor.href"
+      :href="sponsor.href"
+      :title="sponsor.alt"
+      target="_blank"
+      rel="sponsored noopener"
+      class="sponsor_wrapper"
+      :class="
+        isDark && sponsor.imgSrcLight === sponsor.imgSrcDark && 'apply-bg'
+      "
+    >
+      <img
+        :src="sponsor.imgSrc"
+        :class="
+          isDark &&
+          sponsor.imgSrcLight === sponsor.imgSrcDark &&
+          'invert-colors'
+        "
+        :alt="sponsor.alt"
+        :style="{ height: size + 'px' }"
+      />
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+import sponsors from "./sponsors.json";
+import { computed } from "vue";
+import { useData } from "vitepress";
+
+const props = withDefaults(
+  defineProps<{
+    name: "Gold" | "Platinum" | "Silver" | "Bronze";
+    size?: number | string;
+  }>(),
+  {
+    size: 140,
+  }
+);
+
+/**
+ * 获取赞助商等级
+ */
+const getNameText = () => {
+  switch (props.name) {
+    case "Gold":
+      return "黄金";
+      break;
+    case "Platinum":
+      return "铂金";
+      break;
+    case "Silver":
+      return "白金";
+      break;
+    case "Bronze":
+      return "青铜";
+      break;
+    default:
+      return "白金";
+      break;
+  }
+};
+
+const { isDark } = useData();
+
+const list = computed(() =>
+  sponsors[props.name.toLowerCase()].map((sponsor) => ({
+    ...sponsor,
+    imgSrc: isDark.value ? sponsor.imgSrcDark : sponsor.imgSrcLight,
+  }))
+);
+</script>
+
+<style scoped>
+.sponsor_wrapper {
+  padding: 5px;
+  margin: 0 3px;
+
+  border-radius: 5px;
+
+  display: inline-block;
+  text-decoration: none;
+  vertical-align: middle;
+
+  transition: background-color 300ms ease-in-out;
+}
+
+p {
+  margin: 0;
+}
+
+h3 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  margin: 0.75em 0;
+}
+
+img {
+  transition: all 0.3s ease;
+  filter: grayscale(100%);
+  opacity: 0.66;
+}
+
+html:not(.light) img.invert-colors {
+  filter: invert(1) grayscale(100%);
+  background-color: transparent;
+}
+
+.sponsor_wrapper.apply-bg:hover {
+  background-color: var(--c-text);
+}
+
+.sponsor_wrapper:hover img {
+  filter: none !important;
+  opacity: 1;
+}
+</style>