课程悬浮优化

This commit is contained in:
禺狨 2023-03-28 18:13:07 +08:00
parent ff5961c277
commit 7f4a08f7a4
2 changed files with 38 additions and 48 deletions

View File

@ -11,6 +11,14 @@
cursor: pointer;
&:hover {
background: rgba(255, 77, 79, 0.05);
.left-item {
i {
color: #ff4d4f;
}
.title {
color: #ff4d4f;
}
}
}
.left-item {

View File

@ -57,7 +57,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
};
return (
<div className={styles["item"]}>
<>
<VideoModel
cid={cid}
id={currentId}
@ -73,54 +73,36 @@ export const HourCompenent: React.FC<PropInterface> = ({
goNextVideo();
}}
></VideoModel>
<div className={styles["left-item"]}>
<i className="iconfont icon-icon-video"></i>
<div className={styles["title"]}>
{title}({durationFormat(Number(duration))})
<div
className={styles["item"]}
onClick={() => {
setVisible(true);
}}
>
<div className={styles["left-item"]}>
<i className="iconfont icon-icon-video"></i>
<div className={styles["title"]}>
{title}({durationFormat(Number(duration))})
</div>
</div>
<div className="d-flex">
{progress >= 0 && progress < 100 && (
<>
{progress === 0 && <div className={styles["link"]}></div>}
{progress !== 0 && (
<>
<div className={styles["record"]}>
{durationFormat(Number(record.finished_duration || 0))}
</div>
<div className={styles["link"]}></div>
</>
)}
</>
)}
{progress >= 100 && <div className={styles["complete"]}></div>}
</div>
</div>
<div className="d-flex">
{progress >= 0 && progress < 100 && (
<>
{progress === 0 && (
<div
className={styles["link"]}
onClick={() => {
setVisible(true);
}}
>
</div>
)}
{progress !== 0 && (
<>
<div className={styles["record"]}>
{durationFormat(Number(record.finished_duration || 0))}
</div>
<div
className={styles["link"]}
onClick={() => {
setVisible(true);
}}
>
</div>
</>
)}
</>
)}
{progress >= 100 && (
<div
className={styles["complete"]}
onClick={() => {
setVisible(true);
}}
>
</div>
)}
</div>
</div>
</>
);
};