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

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
+}
+
+const contentStyle: React.CSSProperties = {
+  width: '100%',
 }
 
 export default function FlyingDetail() {
-  
-  const router = useRouter();
-  const [detail,setDetail] =useState<ParsedUrlQuery | RouterDetail>()
-  useEffect(()=>{
+  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="right">
-            {/* <Button
+        <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"
               className="btn"
               onClick={() =>
@@ -32,12 +66,18 @@ export default function FlyingDetail() {
             >
               去考试
             </Button> */}
+            </div>
           </div>
         </div>
-        <div className="box-body">
-          <video className="body-video" controls src={detail?.videoUrl as string} />
+        <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 {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0;
-    .left {
-      height: 25px;
-      font-size: 20px;
-      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-      font-weight: bold;
-      color: #000000;
-      line-height: 25px;
+  .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;
+        }
+      } */
     }
-    .right {
-      .btn {
-        width: 180px;
+    .box-bottom {
+      margin: 0 auto;
+      width: 1200px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 0 38px 0;
+      .left {
         height: 50px;
-        background: linear-gradient(135deg, #278eff 0%, #0052da 100%);
-        border-radius: 6px;
-        font-size: 20px;
-        font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
-        font-weight: bold;
-        color: #ffffff;
-        &:hover {
-          opacity: 0.8;
+        .top {
+          font-size: 24px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #000000;
+          margin-bottom: 10px;
+        }
+        .bottom {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ff552d;
+        }
+      }
+      .right {
+        .btn {
+          width: 180px;
+          height: 50px;
+          background: linear-gradient(135deg, #278eff 0%, #0052da 100%);
+          border-radius: 6px;
+          font-size: 20px;
+          font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+          font-weight: bold;
+          color: #ffffff;
+          &:hover {
+            opacity: 0.8;
+          }
         }
       }
     }
   }
-  .box-body {
-    margin-top: 20px;
+  .detail {
+    margin: 0 auto;
     width: 1200px;
-    height: 675px;
-    background: #111111;
-    .body-video {
-      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;
+        }
+      }
     }
   }
-`;
+`

pages/flyingHandService/index.page.tsx

-import { Button, Cascader, Checkbox, Form, Input, Modal, Pagination, Select, Space, message } from 'antd'
+import {
+  Button,
+  Cascader,
+  Checkbox,
+  Form,
+  Input,
+  Modal,
+  Pagination,
+  Select,
+  Space,
+  message,
+} from 'antd'
 import type { CheckboxValueType } from 'antd/es/checkbox/Group'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
@@ -19,10 +30,19 @@ export default function FlyingHandService() {
   const { Option } = Select
   const router = useRouter()
   const { userInfo, setNeedLogin } = useContext(UserContext)
-  const [list, setList] = useState(['https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg', 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg'])
-  const [productList, setProductList] = useState(Array<{ element: JSX.Element }>)
-  const [rightDomList, setRightDomList] = useState(Array<{ element: JSX.Element }>)
-  const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp>)
+  const [list, setList] = useState([
+    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg',
+    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg',
+  ])
+  const [productList, setProductList] = useState(
+    Array<{ element: JSX.Element }>
+  )
+  const [rightDomList, setRightDomList] = useState(
+    Array<{ element: JSX.Element }>
+  )
+  const [secondDistrictInfo, setSecondDistrictInfo] = useState(
+    Array<RegionResp>
+  )
   const [skills, setSkills] = useState(Array<RegionResp>)
   const [skillsDefault, setSkillsDefault] = useState<Array<number>>()
   const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>)
@@ -38,13 +58,19 @@ export default function FlyingHandService() {
                 pathname: `/flyingHandService/detail/${item.id}`,
                 query: {
                   videoUrl: item.videoUrl,
-                  curriculumName: item.curriculumName
-                }
+                  curriculumName: item.curriculumName,
+                  curriculumDesc: item.curriculumDesc,
+                },
               })
             : setNeedLogin(true)
-        }}>
+        }}
+      >
         <div className="item-top">
-          <Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="#" fill />
+          <Image
+            src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
+            alt="#"
+            fill
+          />
         </div>
         <div className="item-bottom">
           <div className="bottom-title">{item.curriculumName}</div>
@@ -79,7 +105,7 @@ export default function FlyingHandService() {
 
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
-    pageSize: 12
+    pageSize: 12,
   }) //分页器对象
 
   const [filterParams, setFilterParams] = useState<FilterInfoParams>()
@@ -90,7 +116,7 @@ export default function FlyingHandService() {
   const onPageChange = (page: number, pageSize: number) => {
     setPageParams({
       ...pageParams,
-      pageNo: page
+      pageNo: page,
     })
   }
 
@@ -112,11 +138,11 @@ export default function FlyingHandService() {
       .listPageJobServicesInfo({
         ...pageParams,
         ...filterParams,
-        ...queryVal
+        ...queryVal,
       })
-      .then(res => {
+      .then((res) => {
         setProductList(
-          res.result?.list?.map(item => {
+          res.result?.list?.map((item) => {
             return { element: leftDom(item) }
           }) || []
         )
@@ -139,10 +165,10 @@ export default function FlyingHandService() {
     } else {
       setFlightDefault(null)
     }
-    setFilterParams(props => {
+    setFilterParams((props) => {
       return {
         ...props,
-        licenseId: Number(value)
+        licenseId: Number(value),
       }
     })
   }
@@ -154,10 +180,10 @@ export default function FlyingHandService() {
     } else {
       setSkillsDefault([])
     }
-    setFilterParams(props => {
+    setFilterParams((props) => {
       return {
         ...props,
-        flightSkillsId: (value && value[value.length - 1]) || undefined
+        flightSkillsId: (value && value[value.length - 1]) || undefined,
       }
     })
   }
@@ -170,10 +196,10 @@ export default function FlyingHandService() {
     //     regionId: (value && value[value.length - 1]) || undefined,
     //   };
     // });
-    setFilterParams(props => {
+    setFilterParams((props) => {
       return {
         ...props,
-        regionId: value || undefined
+        regionId: value || undefined,
       }
     })
   }
@@ -184,14 +210,14 @@ export default function FlyingHandService() {
         return { element: rightDom(item) }
       })
     )
-    api.region().then(res => {
+    api.region().then((res) => {
       setSecondDistrictInfo(res.result || [])
     })
-    api.PilotLicense().then(res => {
+    api.PilotLicense().then((res) => {
       setSkills(res.result || [])
     })
-    api.IndustryFlightSkills().then(res => {
-      const list = res.result?.map(item => {
+    api.IndustryFlightSkills().then((res) => {
+      const list = res.result?.map((item) => {
         item.label = item.skillsName
         item.value = item.id
         return item
@@ -211,10 +237,10 @@ export default function FlyingHandService() {
       } else {
         setFlightDefault(queryVal.licenseId)
       }
-      setFilterParams(props => {
+      setFilterParams((props) => {
         return {
           ...props,
-          ...queryVal
+          ...queryVal,
         }
       })
     }
@@ -226,16 +252,19 @@ export default function FlyingHandService() {
   const handleOk = async (values: any) => {
     form
       .validateFields()
-      .then(async values => {
+      .then(async (values) => {
         setLoading(true)
         try {
           const res = await api.PilotRegistrations({
             ...values,
             city: values.city[values.city.length - 1] || undefined,
             province: values.city[0] || undefined,
-            uavLicenseLevelOne: values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
-            uavLicenseLevelTow: values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
-            uavLicenseLevelThree: values.uavLicenseLevelOne && values.uavLicenseLevelOne[2]
+            uavLicenseLevelOne:
+              values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
+            uavLicenseLevelTow:
+              values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
+            uavLicenseLevelThree:
+              values.uavLicenseLevelOne && values.uavLicenseLevelOne[2],
           })
           if (res.code === '200') {
             setLoading(false)
@@ -250,10 +279,10 @@ export default function FlyingHandService() {
           message.error(e.message)
         }
       })
-      .catch(err => {
+      .catch((err) => {
         message
           .warning({
-            content: err.errorFields[0].errors[0]
+            content: err.errorFields[0].errors[0],
           })
           .then()
       })
@@ -289,7 +318,17 @@ export default function FlyingHandService() {
                 onChange={onChangeRegion}
                 changeOnSelect
               /> */}
-              <Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="省份" size="large" onChange={onChangeRegion} options={secondDistrictInfo} fieldNames={{ value: 'id', label: 'name' }} allowClear />
+              <Select
+                className="selectItem"
+                bordered={false}
+                popupMatchSelectWidth={false}
+                placeholder="省份"
+                size="large"
+                onChange={onChangeRegion}
+                options={secondDistrictInfo}
+                fieldNames={{ value: 'id', label: 'name' }}
+                allowClear
+              />
               <Cascader
                 allowClear
                 placeholder="考证"
@@ -299,17 +338,34 @@ export default function FlyingHandService() {
                 fieldNames={{
                   label: 'licenseType',
                   value: 'id',
-                  children: 'childLicenses'
+                  children: 'childLicenses',
                 }}
                 options={skills}
-                onChange={value => onChange(value)}
+                onChange={(value) => onChange(value)}
                 changeOnSelect
                 value={skillsDefault}
               />
-              <Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="技能" size="large" onChange={value => onProvinceChange(value)} options={flightSkillsList} fieldNames={{ value: 'id', label: 'skillsName' }} allowClear value={flightDefault} />
+              <Select
+                className="selectItem"
+                bordered={false}
+                popupMatchSelectWidth={false}
+                placeholder="技能"
+                size="large"
+                onChange={(value) => onProvinceChange(value)}
+                options={flightSkillsList}
+                fieldNames={{ value: 'id', label: 'skillsName' }}
+                allowClear
+                value={flightDefault}
+              />
             </Space>
           </div>
-          <Button type="primary" className="btn" onClick={() => (userInfo ? setIsModalOpen(true) : setNeedLogin(true))}>
+          <Button
+            type="primary"
+            className="btn"
+            onClick={() =>
+              userInfo ? setIsModalOpen(true) : setNeedLogin(true)
+            }
+          >
             报名学习课程
           </Button>
         </div>
@@ -320,20 +376,52 @@ export default function FlyingHandService() {
           onCancel={handleCancel}
           getContainer={false}
           footer={[
-            <Button style={{ width: '100%', background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)', height: 40 }} key="submit" type="primary" loading={loading} onClick={handleOk}>
+            <Button
+              style={{
+                width: '100%',
+                background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)',
+                height: 40,
+              }}
+              key="submit"
+              type="primary"
+              loading={loading}
+              onClick={handleOk}
+            >
               立即报名
-            </Button>
-          ]}>
-          <Form form={form} layout="vertical" name="application" initialValues={{ modifier: 'public' }}>
+            </Button>,
+          ]}
+        >
+          <Form
+            form={form}
+            layout="vertical"
+            name="application"
+            initialValues={{ modifier: 'public' }}
+          >
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Form.Item style={{ flex: 1, marginRight: 16 }} name="name" rules={[{ required: true, message: '请输入姓名!' }]}>
+              <Form.Item
+                style={{ flex: 1, marginRight: 16 }}
+                name="name"
+                rules={[{ required: true, message: '请输入姓名!' }]}
+              >
                 <Input placeholder="姓名" />
               </Form.Item>
-              <Form.Item style={{ flex: 1 }} name="telephone" rules={[{ required: true, message: '请输入手机号!' }]}>
-                <Input onInput={phoneNumber} allowClear maxLength={11} placeholder="手机号" />
+              <Form.Item
+                style={{ flex: 1 }}
+                name="telephone"
+                rules={[{ required: true, message: '请输入手机号!' }]}
+              >
+                <Input
+                  onInput={phoneNumber}
+                  allowClear
+                  maxLength={11}
+                  placeholder="手机号"
+                />
               </Form.Item>
             </div>
-            <Form.Item name="city" rules={[{ required: true, message: '请选择城市!' }]}>
+            <Form.Item
+              name="city"
+              rules={[{ required: true, message: '请选择城市!' }]}
+            >
               <Cascader
                 allowClear
                 placeholder="城市"
@@ -341,7 +429,7 @@ export default function FlyingHandService() {
                 fieldNames={{
                   label: 'name',
                   value: 'id',
-                  children: 'childInfo'
+                  children: 'childInfo',
                 }}
                 options={secondDistrictInfo}
                 changeOnSelect
@@ -362,14 +450,21 @@ export default function FlyingHandService() {
                 fieldNames={{
                   label: 'licenseType',
                   value: 'id',
-                  children: 'childLicenses'
+                  children: 'childLicenses',
                 }}
                 options={skills}
                 changeOnSelect
               />
             </Form.Item>
-            <Form.Item name="industryAppAuth" label="行业应用认证（多选）" className="collection-create-form_last-form-item">
-              <Checkbox.Group options={flightSkillsList} onChange={onChangeCheck} />
+            <Form.Item
+              name="industryAppAuth"
+              label="行业应用认证（多选）"
+              className="collection-create-form_last-form-item"
+            >
+              <Checkbox.Group
+                options={flightSkillsList}
+                onChange={onChangeCheck}
+              />
             </Form.Item>
             <Form.Item name="remark">
               <Input placeholder="备注" />
@@ -381,15 +476,24 @@ export default function FlyingHandService() {
           boxIndex={4}
           leftcontentstyle={{
             width: '925px',
-            margin: { top: 0, right: '10px', bottom: '10px', left: 0 }
+            margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
           }}
           leftRenderDom={{
             columns: productList,
             pagination: (
               <div className="pagination-page">
-                <Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} />
+                <Pagination
+                  current={pageParams.pageNo}
+                  pageSize={pageParams.pageSize}
+                  showSizeChanger={false}
+                  showQuickJumper
+                  total={count}
+                  onChange={onPageChange}
+                  hideOnSinglePage={true}
+                  style={{ marginTop: 20 }}
+                />
               </div>
-            )
+            ),
           }}
           rightRenderDom={{ columns: rightDomList }}
         />