feat: ui抖动

This commit is contained in:
mozzie 2023-03-24 11:24:05 +08:00
parent a3c17101d6
commit 58d578fc16
3 changed files with 20 additions and 18 deletions

View File

@ -12,6 +12,16 @@
.xicon { .xicon {
display: initial; display: initial;
} }
.icon {
> svg {
width: 20px;
height: 20px;
}
color: var(--color-text-4);
&.active {
color: var(--color-text-2);
}
}
} }
.thumbnail-timeline { .thumbnail-timeline {

View File

@ -3,7 +3,6 @@ import Timeline, { IOnScrollParam } from "./components/Timeline";
import Tab20Regular from "@ricons/fluent/Tab20Regular"; import Tab20Regular from "@ricons/fluent/Tab20Regular";
import Table20Regular from "@ricons/fluent/Table20Regular"; import Table20Regular from "@ricons/fluent/Table20Regular";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { Icon } from "@ricons/utils";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useMount } from "../../hook"; import { useMount } from "../../hook";
import { getCourseList } from "../../api"; import { getCourseList } from "../../api";
@ -88,17 +87,10 @@ export default function Index() {
key={action.key} key={action.key}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => onClickActionItem(action)} onClick={() => onClickActionItem(action)}
className="bs tip ml6" className={`bs tip ml6 icon ${action.active ? "active" : ""}`}
data-tip={action.tip} data-tip={action.tip}
>
<Icon
size={20}
color={
action.active ? "var(--color-text-2)" : "var(--color-text-4)"
}
> >
{action.icon} {action.icon}
</Icon>
</span> </span>
))} ))}
</div> </div>

View File

@ -13,29 +13,29 @@ function Subscribe() {
> >
<defs> <defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"> <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#F78DA7"></stop> <stop offset="5%" stopColor="#F78DA7"></stop>
<stop offset="95%" stop-color="#8ED1FC"></stop> <stop offset="95%" stopColor="#8ED1FC"></stop>
</linearGradient> </linearGradient>
</defs> </defs>
<path <path
d="M 0,700 C 0,700 0,233 0,233 C 70.30622009569379,262.2535885167464 140.61244019138758,291.50717703349284 240,292 C 339.3875598086124,292.49282296650716 467.8564593301435,264.22488038277504 565,272 C 662.1435406698565,279.77511961722496 727.9617224880384,323.5933014354068 821,316 C 914.0382775119616,308.4066985645932 1034.2966507177032,249.40191387559807 1142,227 C 1249.7033492822968,204.59808612440193 1344.8516746411483,218.79904306220095 1440,233 C 1440,233 1440,700 1440,700 Z" d="M 0,700 C 0,700 0,233 0,233 C 70.30622009569379,262.2535885167464 140.61244019138758,291.50717703349284 240,292 C 339.3875598086124,292.49282296650716 467.8564593301435,264.22488038277504 565,272 C 662.1435406698565,279.77511961722496 727.9617224880384,323.5933014354068 821,316 C 914.0382775119616,308.4066985645932 1034.2966507177032,249.40191387559807 1142,227 C 1249.7033492822968,204.59808612440193 1344.8516746411483,218.79904306220095 1440,233 C 1440,233 1440,700 1440,700 Z"
stroke="none" stroke="none"
stroke-width="0" strokeWidth="0"
fill="url(#gradient)" fill="url(#gradient)"
fill-opacity="0.53" fillOpacity="0.53"
></path> ></path>
<defs> <defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"> <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="5%" stop-color="#F78DA7"></stop> <stop offset="5%" stopColor="#F78DA7"></stop>
<stop offset="95%" stop-color="#8ED1FC"></stop> <stop offset="95%" stopColor="#8ED1FC"></stop>
</linearGradient> </linearGradient>
</defs> </defs>
<path <path
d="M 0,700 C 0,700 0,466 0,466 C 100.29665071770336,416.0478468899521 200.59330143540672,366.09569377990425 301,394 C 401.4066985645933,421.90430622009575 501.92344497607667,527.665071770335 588,536 C 674.0765550239233,544.334928229665 745.7129186602871,455.244019138756 839,417 C 932.2870813397129,378.755980861244 1047.2248803827752,391.35885167464113 1151,408 C 1254.7751196172248,424.64114832535887 1347.3875598086124,445.32057416267946 1440,466 C 1440,466 1440,700 1440,700 Z" d="M 0,700 C 0,700 0,466 0,466 C 100.29665071770336,416.0478468899521 200.59330143540672,366.09569377990425 301,394 C 401.4066985645933,421.90430622009575 501.92344497607667,527.665071770335 588,536 C 674.0765550239233,544.334928229665 745.7129186602871,455.244019138756 839,417 C 932.2870813397129,378.755980861244 1047.2248803827752,391.35885167464113 1151,408 C 1254.7751196172248,424.64114832535887 1347.3875598086124,445.32057416267946 1440,466 C 1440,466 1440,700 1440,700 Z"
stroke="none" stroke="none"
stroke-width="0" strokeWidth="0"
fill="url(#gradient)" fill="url(#gradient)"
fill-opacity="1" fillOpacity="1"
></path> ></path>
</svg> </svg>
<div className="container"> <div className="container">