feat: 2.0

apps/web-main/src/assets/base.less

@@ -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;
+}

apps/web-main/src/components/Card/index.less

@@ -2,21 +2,50 @@
   .arco-card-body {
     padding: 10px;
   }
-  .mask {
+
-    height: 164px;
+  &:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-    overflow: hidden;
     .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-size: cover;
+      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;

apps/web-main/src/components/Card/index.tsx

@@ -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={{
+          style={{ backgroundImage: `url('${props.imgUrl}')` }}
-              backgroundImage:
+        >
-                "url('//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp')",
+          <div className="mask">
-            }}
+            <p>{props.title}</p>
-          ></div>
+          </div>
         </div>
       }
     >
       <Meta
         description={
           <div className="bottom-des">
-            <span>card description</span>
+            <span className="bs-ellipsis">{props.desc}</span>
-            <a>Go</a>
+            <a>{props.action}</a>
           </div>
         }
       />

apps/web-main/src/components/TimeScroll/index.less

@@ -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);
+      }
+    }
+  }
+}

apps/web-main/src/components/TimeScroll/index.tsx

@@ -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;

apps/web-main/src/view/Course/index.less

@@ -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;
+  }
 }

apps/web-main/src/view/Course/index.tsx

@@ -5,18 +5,42 @@ 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>
+      <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="排序规则"
-        bordered={false}
           style={{ width: 154 }}
           onChange={(value) =>
             Message.info({
@@ -31,6 +55,8 @@ export default function Index() {
             </Option>
           ))}
         </Select>
+        <TimeScroll />
+      </div>
     </div>
   );
 }