feat: 2.0
This commit is contained in:
mozzie
parent
cdd17b3bd6
commit
198c7132d1
|
|
@ -4,7 +4,7 @@
|
|||
html,
|
||||
body {
|
||||
position: relative;
|
||||
background: var(--color-neutral-2);
|
||||
background: var(--color-bg-1);
|
||||
// background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
// background-size: 400% 400%;
|
||||
// animation: gradient 15s ease infinite;
|
||||
|
|
@ -46,3 +46,13 @@ input {
|
|||
outline: none;
|
||||
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 {
|
||||
padding: 10px;
|
||||
}
|
||||
.mask {
|
||||
height: 164px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
.cover {
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-size: 105%;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
span {
|
||||
flex: 1;
|
||||
color: var(--color-text-3);
|
||||
padding-right: 40px;
|
||||
max-width: 160px;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -3,29 +3,36 @@ import { url } from "inspector";
|
|||
import "./index.less";
|
||||
const { Meta } = Card;
|
||||
|
||||
function BsCard() {
|
||||
interface IProps {
|
||||
imgUrl: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
action: string;
|
||||
styles?: {};
|
||||
}
|
||||
|
||||
function BsCard(props: IProps) {
|
||||
return (
|
||||
<Card
|
||||
className="bs-card"
|
||||
hoverable
|
||||
style={{ width: 360 }}
|
||||
style={{ ...props.styles }}
|
||||
cover={
|
||||
<div className="mask">
|
||||
<div
|
||||
className="cover"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp')",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="cover"
|
||||
style={{ backgroundImage: `url('${props.imgUrl}')` }}
|
||||
>
|
||||
<div className="mask">
|
||||
<p>{props.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Meta
|
||||
description={
|
||||
<div className="bottom-des">
|
||||
<span>card description</span>
|
||||
<a>Go</a>
|
||||
<span className="bs-ellipsis">{props.desc}</span>
|
||||
<a>{props.action}</a>
|
||||
</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 {
|
||||
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 options = ["全部", "最新的"];
|
||||
import BsCard from "../../components/Card";
|
||||
import TimeScroll from "../../components/TimeScroll";
|
||||
|
||||
export default function Index() {
|
||||
useMount(() => {});
|
||||
|
||||
return (
|
||||
<div className="container course">
|
||||
<div>
|
||||
<BsCard />
|
||||
<div className="recommends">
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user