소스 검색

fix:修复hover时,页面滚动条抖动的bug

lianghongjie 1 년 전
부모
커밋
40a6434090
1개의 변경된 파일11개의 추가작업 그리고 6개의 파일을 삭제
  1. 11 6
      src/pages/website/Promotion2/components/PromotionItem.tsx

+ 11 - 6
src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -56,7 +56,6 @@ export default defineUI({
               class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
               src={record?.thumbnail}
             />
-
             {isSys && (
               <Tag
                 color="#E88B00"
@@ -66,7 +65,6 @@ export default defineUI({
                 {record.published ? "已发布" : "未发布"}
               </Tag>
             )}
-
             <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
               <div
                 class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
@@ -86,7 +84,9 @@ export default defineUI({
           </View>
           <div class="item_footer rounded-b-4px flex items-center justify-between p-15px">
             <div class="flex-1 w-0">
-              <div class="text-white text-bold truncate">{record.title}</div>
+              <div class="text-white text-bold truncate text-14px">
+                {record.title}
+              </div>
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                 {dayjs(record.updateTime).format("YYYY.MM.DD")}
                 {/* 发布 */}
@@ -135,12 +135,10 @@ export default defineUI({
                   {isSys && (
                     <Menu.Item>
                       <div onClick={() => emit("menu", "thumbnail")}>
-                          替换封面
+                        替换封面
                       </div>
                     </Menu.Item>
                   )}
-
-
                 </Menu>
               }
             >
@@ -154,6 +152,13 @@ export default defineUI({
 });
 
 const itemStyles = css`
+  /* 修复hover时,页面滚动条抖动的bug */
+  > div {
+    font-size: 0;
+    > div * {
+      font-size: 14px;
+    }
+  }
   .item_footer {
     background: #414141;
   }