perf:板块主题增加标识

Yi.Bbs.Vue3/src/components/PlateCard.vue

@@ -3,7 +3,7 @@
     <el-col>
       <el-card :body-style="{ padding: '0px' }" shadow="never">
         <img src="" class="image" />
-        <div style="padding: 14px">
+        <div style="padding: 14px" class="plate-box">
           <span>{{ props.name }}</span>
           <div class="bottom">
             <time class="remarks">{{ props.introduction }}</time>
@@ -13,6 +13,7 @@
               ></el-button>
             </RouterLink>
           </div>
+          <span class="recommend" v-if="isPublish"> </span>
         </div>
       </el-card>
     </el-col>
@@ -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; /* 鼠标悬浮时完全显示 */
+  }
+}
 </style>