From 166986e31f45ffb1cc34c23dccce361d93dd98a5 Mon Sep 17 00:00:00 2001 From: mozzie Date: Thu, 2 Mar 2023 17:58:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A2=E9=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-main/package.json | 1 - apps/web-main/src/router/index.tsx | 6 ++ .../CourseDetail/components/DPlayer/index.tsx | 21 +++--- apps/web-main/src/view/CourseDetail/index.tsx | 64 +++++++++---------- apps/web-main/src/view/Subscribe/index.less | 43 +++++++++++++ apps/web-main/src/view/Subscribe/index.tsx | 44 +++++++++++++ apps/web-main/src/view/Topic/index.less | 3 + apps/web-main/src/view/Topic/index.tsx | 4 +- pnpm-lock.yaml | 23 ------- 9 files changed, 138 insertions(+), 71 deletions(-) create mode 100644 apps/web-main/src/view/Subscribe/index.less create mode 100644 apps/web-main/src/view/Subscribe/index.tsx create mode 100644 apps/web-main/src/view/Topic/index.less diff --git a/apps/web-main/package.json b/apps/web-main/package.json index 98d9f37..215e2ed 100644 --- a/apps/web-main/package.json +++ b/apps/web-main/package.json @@ -18,7 +18,6 @@ "@ricons/utils": "0.1.6", "dayjs": "1.11.7", "identicon": "3.1.1", - "react-perfect-scrollbar": "1.5.8", "dplayer": "1.27.1" }, "devDependencies": { diff --git a/apps/web-main/src/router/index.tsx b/apps/web-main/src/router/index.tsx index 676c741..fcd7c0f 100644 --- a/apps/web-main/src/router/index.tsx +++ b/apps/web-main/src/router/index.tsx @@ -1,5 +1,6 @@ import Course from "../view/Course"; import CourseDetail from "../view/CourseDetail"; +import Subscribe from "../view/Subscribe"; import Topic from "../view/Topic"; export const routerList = [ @@ -13,6 +14,11 @@ export const routerList = [ element: , name: "讨论", }, + { + path: "/subscribe", + element: , + name: "订阅", + }, { path: "/course/detail/:id", element: , diff --git a/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx b/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx index c544bea..e018612 100644 --- a/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx +++ b/apps/web-main/src/view/CourseDetail/components/DPlayer/index.tsx @@ -12,19 +12,18 @@ interface IProps { function Player(props: IProps) { const playerRef = useRef(); - const baseConf: DPlayerOptions = { - container: playerRef.current, - preload: "auto", - playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], - screenshot: true, - pluginOptions: { - hls: {}, - }, - }; - useEffect(() => { if (props.video) { - new DPlayer({ ...baseConf, video: { ...props.video, type: "hls" } }); + new DPlayer({ + container: playerRef.current, + video: { ...props.video, type: "hls" }, + preload: "auto", + playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], + screenshot: true, + pluginOptions: { + hls: {}, + }, + }); } }, [props.video]); diff --git a/apps/web-main/src/view/CourseDetail/index.tsx b/apps/web-main/src/view/CourseDetail/index.tsx index 26902ea..8dffa11 100644 --- a/apps/web-main/src/view/CourseDetail/index.tsx +++ b/apps/web-main/src/view/CourseDetail/index.tsx @@ -2,8 +2,6 @@ import { useEffect, useState } from "react"; import "./index.less"; import { ResizeBox, Space, Result, Button } from "@arco-design/web-react"; import { Icon } from "@ricons/utils"; -import "react-perfect-scrollbar/dist/css/styles.css"; -import PerfectScrollbar from "react-perfect-scrollbar"; import Material from "./components/Material"; import { useMount } from "../../hook"; import Player from "./components/DPlayer"; @@ -99,38 +97,36 @@ function CourseDetail() { min={0.1} size={0.2} panes={[ - - - , + ,
{view}
, diff --git a/apps/web-main/src/view/Subscribe/index.less b/apps/web-main/src/view/Subscribe/index.less new file mode 100644 index 0000000..fd76e07 --- /dev/null +++ b/apps/web-main/src/view/Subscribe/index.less @@ -0,0 +1,43 @@ +.subscribe { + padding: 100px 0 20px 0; + h2 { + text-align: center; + } + h4 { + text-align: center; + font-weight: 400; + color: var(--color-text-4); + } + .options { + padding-top: 100px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 20px; + > section { + padding: 40px; + text-align: center; + .price { + font-family: DINCondensed-Bold, "Century Gothic", CenturyGothic, + AppleGothic, sans-serif; + font-weight: bold; + font-size: 48px; + color: var(--color-text-2); + line-height: 1; + margin-top: 16px; + letter-spacing: 1px; + } + h3 { + font-size: 18px; + font-weight: bold; + color: var(--color-text-2); + letter-spacing: 5px; + margin-top: 40px; + } + p { + color: var(--color-text-3); + letter-spacing: 1px; + line-height: 1.9; + } + } + } +} diff --git a/apps/web-main/src/view/Subscribe/index.tsx b/apps/web-main/src/view/Subscribe/index.tsx new file mode 100644 index 0000000..36c47c4 --- /dev/null +++ b/apps/web-main/src/view/Subscribe/index.tsx @@ -0,0 +1,44 @@ +import { Button } from "@arco-design/web-react"; +import "./index.less"; + +// 季度：三个月内，在线学习 ninghao.net 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。 + +function Subscribe() { + return ( +
+

订阅选项

+

我也不知道该如何劝你们花钱点钱？但是学一点可能就少亏一点

+
+
+

季度

+
199
+

+ 三个月内，在线学习 ninghao.net + 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。 +

+ +
+
+

季度

+
299
+

+ 三个月内，在线学习 ninghao.net + 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。 +

+ +
+
+

季度

+
399
+

+ 三个月内，在线学习 ninghao.net + 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。 +

+ +
+
+
+ ); +} + +export default Subscribe; diff --git a/apps/web-main/src/view/Topic/index.less b/apps/web-main/src/view/Topic/index.less new file mode 100644 index 0000000..3c65563 --- /dev/null +++ b/apps/web-main/src/view/Topic/index.less @@ -0,0 +1,3 @@ +.topic { + padding: 100px 0 20px 0; +} diff --git a/apps/web-main/src/view/Topic/index.tsx b/apps/web-main/src/view/Topic/index.tsx index d4c560b..ce22de0 100644 --- a/apps/web-main/src/view/Topic/index.tsx +++ b/apps/web-main/src/view/Topic/index.tsx @@ -1,5 +1,5 @@ -import React from "react"; +import './index.less' export default function Index() { - return
UserIndex
; + return
UserIndex
; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index be84947..63fe7cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -191,7 +191,6 @@ importers: less: ^4.1.3 react: ^18.2.0 react-dom: ^18.2.0 - react-perfect-scrollbar: 1.5.8 react-router-dom: 6.8.0 typescript: ^4.9.3 vite: ^4.1.0 @@ -206,7 +205,6 @@ importers: less: registry.npmmirror.com/less/4.1.3 react: registry.npmmirror.com/react/18.2.0 react-dom: registry.npmmirror.com/react-dom/18.2.0_react@18.2.0 - react-perfect-scrollbar: registry.npmmirror.com/react-perfect-scrollbar/1.5.8_biqbaboplfbrettd7655fr4n2y react-router-dom: registry.npmmirror.com/react-router-dom/6.8.0_biqbaboplfbrettd7655fr4n2y devDependencies: '@types/dplayer': registry.npmmirror.com/@types/dplayer/1.25.2 @@ -9859,12 +9857,6 @@ packages: engines: {node: '>=8'} dev: true - registry.npmmirror.com/perfect-scrollbar/1.5.5: - resolution: {integrity: sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz} - name: perfect-scrollbar - version: 1.5.5 - dev: false - registry.npmmirror.com/performance-now/2.1.0: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz} name: performance-now @@ -11348,21 +11340,6 @@ packages: version: 16.13.1 dev: false - registry.npmmirror.com/react-perfect-scrollbar/1.5.8_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz} - id: registry.npmmirror.com/react-perfect-scrollbar/1.5.8 - name: react-perfect-scrollbar - version: 1.5.8 - peerDependencies: - react: '>=16.3.3' - react-dom: '>=16.3.3' - dependencies: - perfect-scrollbar: registry.npmmirror.com/perfect-scrollbar/1.5.5 - prop-types: registry.npmmirror.com/prop-types/15.8.1 - react: registry.npmmirror.com/react/18.2.0 - react-dom: registry.npmmirror.com/react-dom/18.2.0_react@18.2.0 - dev: false - registry.npmmirror.com/react-refresh/0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz} name: react-refresh