From e98f24279a1f0d74f78a11aada160dabe767fbed Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Sat, 23 Dec 2023 15:28:58 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E6=9D=BF=E5=9D=97=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/components/PlateCard.vue | 40 +++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

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 @@
     <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>