Explorar o código

优化问答广场列表卡片的样式

Ryuiso hai 5 meses
pai
achega
44d75b5dbd

+ 6 - 4
src/pages/deepseek/questionAnswer/list/index.tsx

@@ -29,7 +29,8 @@ import {
   ReloadOutlined,
   BookOutlined,
   TeamOutlined,
-  AppstoreOutlined
+  AppstoreOutlined,
+  EditOutlined
 } from '@ant-design/icons';
 import { apis } from '@/apis';
 import './style.less';
@@ -724,17 +725,18 @@ const QuestionAnswerList : React.FC = () => {
                                           {
                                               updateFlag &&
                                               <a
+                                                  className="action-button"
                                                   style={ { marginRight: 16 } }
                                                   onClick={ () => {
                                                 router.navigate( { pathname: '/deepseek/questionAnswer/modify' }, { state: { id: item.appId } } );
                                               } }>
-                                                <SettingOutlined /> 编辑
+                                                <EditOutlined /> 编辑
                                               </a>
                                           }
                                           
                                           {
                                               deleteFlag &&
-                                              <a className='text-error' onClick={ () => {
+                                              <a className='delete-button' onClick={ () => {
                                                 Modal.confirm( {
                                                   title: '删除',
                                                   content: `确定删除应用: ` + item.name + ` 吗?`,
@@ -753,7 +755,7 @@ const QuestionAnswerList : React.FC = () => {
                                     
                                     {
                                         createFlag && item.status === '5' &&
-                                        <a style={ { marginLeft: 16 } } onClick={ () => {
+                                        <a className="action-button" style={ { marginLeft: 16 } } onClick={ () => {
                                           Modal.confirm( {
                                             title: '提交审核',
                                             content: `确认提交审核应用: ` + item.name + `吗?`,

+ 29 - 60
src/pages/deepseek/questionAnswer/list/style.less

@@ -9,7 +9,6 @@
 .applicationList {
   width: 100%;
   min-height: 600px;
-  //padding-top: 10px;
 }
 
 .card{
@@ -18,10 +17,38 @@
   border-radius: @border-radius-large;
   min-height: 200px;
   overflow: auto;
+  
+  // 默认状态下操作按钮颜色
+  .action-button {
+    color: #999 !important;
+    transition: color 0.3s ease;
+    
+    &:hover {
+      color: @primary-color !important;
+    }
+  }
+  
+  .delete-button {
+    color: #999 !important;
+    transition: color 0.3s ease;
+    
+    &:hover {
+      color: @error-color !important;
+    }
+  }
 }
 .card:hover{
   box-shadow: 0 0 8px rgba(0,0,0,.1);
   border: 1px solid @primary-color ;
+  
+  // 悬停状态下操作按钮颜色
+  .action-button {
+    color: @primary-color !important;
+  }
+  
+  .delete-button {
+    color: @error-color !important;
+  }
 }
 
 .desc {
@@ -30,22 +57,14 @@
   font-weight: 300; /* 细体字 */
   line-height: 20px;
   transition: all 0.3s;
-  //margin-bottom: 16px;
 }
 
-.info-head {
-  width: 100%;
-  height: 35%;
-}
+
 
 .ant-select-selector {
   border-radius: 4px !important;
   background: #fff !important;
   height: 32px !important;
-  
-  //.ant-select-selection-item {
-  //  //margin-right: 8px !important;
-  //}
 }
 
 .ant-select-dropdown {
@@ -59,57 +78,7 @@
   }
 }
 
-// 按钮式选择器样式
-.app-type-dropdown {
-  .ant-dropdown-menu {
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    padding: 8px 0;
-    
-    .ant-dropdown-menu-item {
-      padding: 8px 16px;
-      font-size: 14px;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background-color: #f5f5f5;
-      }
-      
-      &.selected {
-        color: #1890ff;
-        background-color: #f0f8ff;
-        font-weight: 500;
-      }
-    }
-  }
-}
 
-// 按钮样式优化
-.app-type-button {
-  border-radius: 16px !important;
-  height: 32px !important;
-  padding: 0 16px !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  border: 1px solid #d9d9d9 !important;
-  background-color: #fff !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-  min-width: 140px !important;
-  justify-content: space-between !important;
-  transition: all 0.3s ease !important;
-  
-  &:hover {
-    border-color: #40a9ff !important;
-    color: #40a9ff !important;
-  }
-  
-  &:focus {
-    border-color: #1890ff !important;
-    box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.2) !important;
-  }
-}
 
 // 按钮组筛选样式
 .filter-button-group {