改-飞手培训-详情-页面布局，样式修改

pages/flyingHandService/detail/[id].page.tsx

-import React, { useEffect, useState } from "react";
-import Layout from "~/components/layout";
-import { Box } from "./styled";
-import { Button } from "antd";
-import { useRouter } from "next/router";
-import { ParsedUrlQuery } from "querystring";
-
+import React, { useEffect, useState } from 'react'
+import Layout from '~/components/layout'
+import { Box } from './styled'
+import { Button, Tabs } from 'antd'
+import { useRouter } from 'next/router'
+import { ParsedUrlQuery } from 'querystring'
+import type { TabsProps } from 'antd'
 interface RouterDetail {
-  videoUrl:string | '',
-  curriculumName:string
+  videoUrl: string | ''
+  curriculumName: string
+  curriculumDesc: string
 }
 
-export default function FlyingDetail() {
+const contentStyle: React.CSSProperties = {
+  width: '100%',
+}
 
-  const router = useRouter();
-  const [detail,setDetail] =useState<ParsedUrlQuery | RouterDetail>()
-  useEffect(()=>{
+export default function FlyingDetail() {
+  const router = useRouter()
+  const [detail, setDetail] = useState<ParsedUrlQuery | RouterDetail>()
+  useEffect(() => {
     setDetail(router.query)
-  },[router])
+  }, [router])
+  const onChange = (key: string) => {
+    console.log(key)
+  }
+
+  const items: TabsProps['items'] = [
+    {
+      key: '1',
+      label: `介绍`,
+      children: (
+        <div className="body">
+          <div className="top">
+            <div className="title">课程简介</div>
+            <div className="content">{detail?.curriculumDesc}</div>
+          </div>
+          {/* <div className="bottom">详情</div> */}
+        </div>
+      ),
+    },
+  ]
   return (
-    <Layout>
+    <Layout contentStyle={contentStyle}>
       <Box>
-        <div className="box-top">
-          <div className="left">{detail?.curriculumName}</div>
+        <div className="box">
+          <div className="box-body">
+            <video
+              className="body-video"
+              controls
+              src={detail?.videoUrl as string}
+            />
+          </div>
+          <div className="box-bottom">
+            <div className="left">
+              <div className="top">{detail?.curriculumName}</div>
+              <div className="bottom">免费</div>
+            </div>
             <div className="right">
               {/* <Button
               type="primary"
@@ -34,10 +68,16 @@ export default function FlyingDetail() {
             </Button> */}
             </div>
           </div>
-        <div className="box-body">
-          <video className="body-video" controls src={detail?.videoUrl as string} />
+        </div>
+        <div className="detail">
+          <Tabs
+            className="tabs"
+            defaultActiveKey="1"
+            items={items}
+            onChange={onChange}
+          />
         </div>
       </Box>
     </Layout>
-  );
+  )
 }

pages/flyingHandService/detail/styled.tsx

-import styled from "styled-components";
+import styled from 'styled-components'
 
 export default function Style() {
-  return <></>;
+  return <></>
 }
 
 export const Box = styled.div`
   box-sizing: border-box;
-  .box-top {
+  .box {
+    background-color: #fff;
+    height: 586px;
+    padding-top: 20px;
+    .box-body {
+      margin: 0 auto;
+      display: flex;
+      width: 1200px;
+      height: 470px;
+      /* background: #111111; */
+      .body-video {
+        width: 1200px;
+        height: 470px;
+      }
+      /* .right-box {
+        width: 362px;
+        height: 470px;
+        background: #1b2128;
+        .tabs {
+          color: #fff;
+        }
+      } */
+    }
+    .box-bottom {
+      margin: 0 auto;
+      width: 1200px;
       display: flex;
       justify-content: space-between;
       align-items: center;
-    padding: 10px 0;
+      padding: 16px 0 38px 0;
       .left {
-      height: 25px;
-      font-size: 20px;
-      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-      font-weight: bold;
+        height: 50px;
+        .top {
+          font-size: 24px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
           color: #000000;
-      line-height: 25px;
+          margin-bottom: 10px;
+        }
+        .bottom {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ff552d;
+        }
       }
       .right {
         .btn {
@@ -35,14 +68,41 @@ export const Box = styled.div`
         }
       }
     }
-  .box-body {
-    margin-top: 20px;
-    width: 1200px;
-    height: 675px;
-    background: #111111;
-    .body-video {
+  }
+  .detail {
+    margin: 0 auto;
     width: 1200px;
-      height: 675px;
+    height: 420px;
+    background: #ffffff;
+    box-shadow: 0px 2px 6px 0px rgba(183, 188, 197, 0.1);
+    border-radius: 12px;
+    margin-top: 16px;
+    padding: 20px;
+    .tabs {
+      .body {
+        .top {
+          .title {
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+          }
+          .content {
+            font-size: 18px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #27323f;
+            margin-top: 10px;
+          }
+        }
+        .bottom {
+          font-size: 18px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #000000;
+          margin-top: 29px;
+        }
+      }
     }
   }
-`;
+`