feat: 2.0
This commit is contained in:
parent
cdd17b3bd6
commit
198c7132d1
|
@ -4,7 +4,7 @@
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--color-neutral-2);
|
background: var(--color-bg-1);
|
||||||
// background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
// background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||||
// background-size: 400% 400%;
|
// background-size: 400% 400%;
|
||||||
// animation: gradient 15s ease infinite;
|
// animation: gradient 15s ease infinite;
|
||||||
|
@ -46,3 +46,13 @@ input {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bs-shadow {
|
||||||
|
box-shadow: rgb(0 0 0 / 13%) 0px 2px 4px 0px, rgb(0 0 0 / 11%) 0px 1px 1px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-ellipsis {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
|
@ -2,21 +2,50 @@
|
||||||
.arco-card-body {
|
.arco-card-body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
.mask {
|
|
||||||
height: 164px;
|
&:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
overflow: hidden;
|
|
||||||
.cover {
|
.cover {
|
||||||
height: 100%;
|
background-size: 105%;
|
||||||
background-size: cover;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
transition: background-size 0.25s linear;
|
||||||
|
height: 164px;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
.mask {
|
||||||
|
transition: background-image 0.25s linear;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(0, 0, 0, 0.7),
|
||||||
|
rgba(0, 0, 0, 0.1),
|
||||||
|
rgba(255, 255, 255, 0)
|
||||||
|
);
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
|
right: 10px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.bottom-des {
|
.bottom-des {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
span {
|
span {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: var(--color-text-3);
|
color: var(--color-text-3);
|
||||||
|
padding-right: 40px;
|
||||||
|
max-width: 160px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -3,29 +3,36 @@ import { url } from "inspector";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
const { Meta } = Card;
|
const { Meta } = Card;
|
||||||
|
|
||||||
function BsCard() {
|
interface IProps {
|
||||||
|
imgUrl: string;
|
||||||
|
title: string;
|
||||||
|
desc: string;
|
||||||
|
action: string;
|
||||||
|
styles?: {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function BsCard(props: IProps) {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
className="bs-card"
|
className="bs-card"
|
||||||
hoverable
|
hoverable
|
||||||
style={{ width: 360 }}
|
style={{ ...props.styles }}
|
||||||
cover={
|
cover={
|
||||||
<div className="mask">
|
<div
|
||||||
<div
|
className="cover"
|
||||||
className="cover"
|
style={{ backgroundImage: `url('${props.imgUrl}')` }}
|
||||||
style={{
|
>
|
||||||
backgroundImage:
|
<div className="mask">
|
||||||
"url('//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp')",
|
<p>{props.title}</p>
|
||||||
}}
|
</div>
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Meta
|
<Meta
|
||||||
description={
|
description={
|
||||||
<div className="bottom-des">
|
<div className="bottom-des">
|
||||||
<span>card description</span>
|
<span className="bs-ellipsis">{props.desc}</span>
|
||||||
<a>Go</a>
|
<a>{props.action}</a>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
62
apps/web-main/src/components/TimeScroll/index.less
Normal file
62
apps/web-main/src/components/TimeScroll/index.less
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
.timescroll {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 200px;
|
||||||
|
&:hover {
|
||||||
|
.caret {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.caret {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
color: var(--color-fill-4);
|
||||||
|
&.up {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&.down {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.orbit {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 24px;
|
||||||
|
bottom: 24px;
|
||||||
|
width: 4px;
|
||||||
|
background: var(--color-fill-2);
|
||||||
|
.cursor {
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
&.bingo {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: var(--color-fill-4);
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: attr(data-year);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-fill-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.empty {
|
||||||
|
right: 10px;
|
||||||
|
background: var(--color-fill-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
52
apps/web-main/src/components/TimeScroll/index.tsx
Normal file
52
apps/web-main/src/components/TimeScroll/index.tsx
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
function TimeScroll() {
|
||||||
|
const [cursor, setCursor] = useState({
|
||||||
|
top: 0,
|
||||||
|
});
|
||||||
|
const onMouseMove = (e: any) => {
|
||||||
|
const diffY = e.screenY - e.clientY;
|
||||||
|
console.log(e)
|
||||||
|
setCursor({ top: diffY });
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="timescroll" onMouseMove={onMouseMove}>
|
||||||
|
<svg
|
||||||
|
className="caret up"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
>
|
||||||
|
<path d="M8 20l8-10l8 10z" fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
<div className="orbit">
|
||||||
|
<span className="cursor" style={{ top: cursor.top }}></span>
|
||||||
|
<div
|
||||||
|
className="node bingo"
|
||||||
|
style={{ top: "20px" }}
|
||||||
|
data-year="2021"
|
||||||
|
></div>
|
||||||
|
<div className="node empty" style={{ top: "40px" }}></div>
|
||||||
|
<div
|
||||||
|
className="node bingo"
|
||||||
|
style={{ top: "60px" }}
|
||||||
|
data-year="2020"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
className="node bingo"
|
||||||
|
style={{ top: "80px" }}
|
||||||
|
data-year="2019"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
className="caret down"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
>
|
||||||
|
<path d="M24 12l-8 10l-8-10z" fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TimeScroll;
|
|
@ -1,3 +1,11 @@
|
||||||
.course {
|
.course {
|
||||||
padding: 100px 0 40px 0;
|
padding: 100px 0 40px 0;
|
||||||
|
.recommends {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
grid-column-gap:20px;
|
||||||
|
}
|
||||||
|
.timeline{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,32 +5,58 @@ import { Select, Message } from "@arco-design/web-react";
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
const options = ["全部", "最新的"];
|
const options = ["全部", "最新的"];
|
||||||
import BsCard from "../../components/Card";
|
import BsCard from "../../components/Card";
|
||||||
|
import TimeScroll from "../../components/TimeScroll";
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
useMount(() => {});
|
useMount(() => {});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container course">
|
<div className="container course">
|
||||||
<div>
|
<div className="recommends">
|
||||||
<BsCard />
|
<BsCard
|
||||||
|
imgUrl={
|
||||||
|
"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
}
|
||||||
|
title={"这个非常OK啊"}
|
||||||
|
desc={"推荐内容推荐内容推荐内容推荐内容推荐内容推荐内容推荐内容"}
|
||||||
|
action={"开始学习"}
|
||||||
|
/>
|
||||||
|
<BsCard
|
||||||
|
imgUrl={
|
||||||
|
"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
}
|
||||||
|
title={"这个非常OK啊"}
|
||||||
|
desc={"推荐内容"}
|
||||||
|
action={"开始学习"}
|
||||||
|
/>
|
||||||
|
<BsCard
|
||||||
|
imgUrl={
|
||||||
|
"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp"
|
||||||
|
}
|
||||||
|
title={"这个非常OK啊"}
|
||||||
|
desc={"推荐内容"}
|
||||||
|
action={"开始学习"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="timeline">
|
||||||
|
<Select
|
||||||
|
placeholder="排序规则"
|
||||||
|
style={{ width: 154 }}
|
||||||
|
onChange={(value) =>
|
||||||
|
Message.info({
|
||||||
|
content: `You select ${value}.`,
|
||||||
|
showIcon: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{options.map((option, index) => (
|
||||||
|
<Option key={option} disabled={index === 3} value={option}>
|
||||||
|
{option}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<TimeScroll />
|
||||||
</div>
|
</div>
|
||||||
<Select
|
|
||||||
placeholder="排序规则"
|
|
||||||
bordered={false}
|
|
||||||
style={{ width: 154 }}
|
|
||||||
onChange={(value) =>
|
|
||||||
Message.info({
|
|
||||||
content: `You select ${value}.`,
|
|
||||||
showIcon: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{options.map((option, index) => (
|
|
||||||
<Option key={option} disabled={index === 3} value={option}>
|
|
||||||
{option}
|
|
||||||
</Option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user