diff --git a/Yi.Bbs.Vue3/src/components/PlateCard.vue b/Yi.Bbs.Vue3/src/components/PlateCard.vue index 34fd4263..cbbf4b7d 100644 --- a/Yi.Bbs.Vue3/src/components/PlateCard.vue +++ b/Yi.Bbs.Vue3/src/components/PlateCard.vue @@ -3,7 +3,7 @@ -
+
{{ props.name }}
@@ -13,6 +13,7 @@ >
+
@@ -43,4 +44,41 @@ const props = defineProps(["name", "introduction", "id", "isPublish"]); width: 100%; display: block; } + +.plate-box { + position: relative; + .recommend:before { + cursor: pointer; + content: "作者"; + position: absolute; + top: -8px; + right: -26px; + z-index: 1; + padding: 14px 22px 2px; + background-color: #ff9900; + transform: rotate(45deg); + font-size: 12px; + color: #ffffff; + } + .recommend:hover::after { + width: 100px; + content: "作者专属板块不得随意发布主题"; /* 鼠标悬浮时显示的文字 */ + position: absolute; + top: 30px; /* 距离盒子顶部的距离 */ + left: 70%; /* 盒子中央位置 */ + transform: translateX(-50%); /* 水平居中 */ + padding: 5px 10px; + background-color: #ff9900; + color: #ffffff; + font-size: 12px; + border-radius: 5px; + z-index: 9999; + opacity: 0; /* 初始状态不透明 */ + transition: opacity 0.5s; /* 添加过渡效果 */ + } + + .recommend:hover::after { + opacity: 1; /* 鼠标悬浮时完全显示 */ + } +}