fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(功能中心新增溝通記錄與樣式調整): 在功能中心中新增「溝通記錄」功能，並對樣式進行調整，包括功能卡片的佈局和顏色設置，以提升視覺效果和用戶體驗。

Browse Source
This commit is contained in:
超级老白兔
2025-09-25 11:19:18 +08:00
parent 88653c1656
commit e00bbf576a
2 changed files with 52 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
View File

@@ -16,6 +16,7 @@
.categoryIcon { .categoryIcon {
width: 48px; width: 48px;
height: 48px; height: 48px;
color: #ffffff;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -30,6 +31,9 @@
} }
.categoryInfo { .categoryInfo {
display: flex;
align-items: center;
gap: 10px;
.categoryTitle { .categoryTitle {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
@@ -38,34 +42,31 @@
} }
.categoryCount { .categoryCount {
font-size: 14px; font-size: 12px;
color: #666; color: #666;
background: #f0f0f0; background: #f0f0f0;
padding: 4px 12px;
border-radius: 12px; border-radius: 12px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
height: 24px;
line-height: 20px;
padding: 0 10px;
} }
} }
} }
.featureCards { .featureCards {
display: flex;
justify-content: flex-start;
gap: 24px;
flex-wrap: wrap;
.featureCard { .featureCard {
border-radius: 16px; border-radius: 16px;
border: none; border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
width: 30%;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: white; background: white;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 16px;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
@@ -79,6 +80,7 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
.cardIcon { .cardIcon {
color: #ffffff;
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 12px; border-radius: 12px;

78
Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { FeatureCard, featureCategories } from "./index.data.tsx"; import { FeatureCard, featureCategories } from "./index.data.tsx";
import { Col, Row } from "antd";
const PowerCenter: React.FC = () => { const PowerCenter: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -35,45 +35,51 @@ const PowerCenter: React.FC = () => {
{/* 功能卡片 */} {/* 功能卡片 */}
<div className={styles.featureCards}> <div className={styles.featureCards}>
{category.features.map(card => ( <Row gutter={16}>
<div {category.features.map(card => (
key={card.id} <Col span={8} key={card.id}>
className={styles.featureCard} <div
onClick={() => handleCardClick(card)} key={card.id}
> className={styles.featureCard}
<div className={styles.cardContent}> onClick={() => handleCardClick(card)}
<div className={styles.cardHeader}> >
<div <div className={styles.cardContent}>
className={styles.cardIcon} <div className={styles.cardHeader}>
style={{ backgroundColor: card.color }} <div
> className={styles.cardIcon}
{card.icon} style={{ backgroundColor: card.color }}
</div> >
{/* 热门/新功能标签 */} {card.icon}
{(card.isHot || card.isNew) && ( </div>
<div {/* 热门/新功能标签 */}
className={styles.badge} {(card.isHot || card.isNew) && (
data-type={card.isNew ? "new" : "hot"} <div
> className={styles.badge}
{card.isHot ? "热门" : "新功能"} data-type={card.isNew ? "new" : "hot"}
>
{card.isHot ? "热门" : "新功能"}
</div>
)}
{/* 功能图标 */}
</div> </div>
)}
{/* 功能图标 */} {/* 功能信息 */}
</div> <div className={styles.cardInfo}>
<h3 className={styles.cardTitle}>{card.title}</h3>
{/* 功能信息 */} <p className={styles.cardDescription}>
<div className={styles.cardInfo}> {card.description}
<h3 className={styles.cardTitle}>{card.title}</h3> </p>
<p className={styles.cardDescription}>{card.description}</p> <div className={styles.cardAction}>
<div className={styles.cardAction}> <span>点击进入功能</span>
<span>点击进入功能</span> <span className={styles.arrow}>→</span>
<span className={styles.arrow}>→</span> </div>
</div>
</div> </div>
</div> </div>
</div> </Col>
</div> ))}
))} </Row>
</div> </div>
</div> </div>
))} ))}