改-飞手培训-样式

components/NavHeader/index.module.scss

@@ -14,15 +14,13 @@
 }
 
 .logo {
-  width: 113px;
-  height: 35px;
+  width: 90px;
+  height: 48px;
   background-image: url(./assets/logo.png);
   background-size: 100% 100%;
-  margin-right: 40px;
 }
 
 .tabs {
-  width: 800px;
   height: 100%;
   margin-right: 58px;
   :global .ant-tabs-nav {
@@ -41,7 +39,7 @@
     .ant-tabs-tab-btn {
       font-size: 14px;
       color: #424242;
-      width: 90px;
+      width: 100px;
       text-align: center;
       font-family: MicrosoftYaHei;
       font-weight: bold;

components/NavHeader/index.tsx

@@ -44,7 +44,6 @@ export default function NavHeader() {
 
   console.log("currentHash", currentPath);
   const onChange = (key: string) => {
-    console.log(key);
     router.push(key);
   };
 

components/footer/index.module.scss

@@ -12,8 +12,8 @@
 }
 
 .logo {
-  width: 150px;
-  height: 47px;
+  width: 90px;
+  height: 48px;
   background: url("./assets/logo.png") no-repeat;
   background-size: 100% 100%;
   margin-right: 155px;

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

+import React from "react";
+import Layout from "~/components/layout";
+import { Box } from "./styled";
+import { Button } from "antd";
+import { useRouter } from "next/router";
+
+export default function FlyingDetail() {
+  const router = useRouter();
+  return (
+    <Layout>
+      <Box>
+        <div className="box-top">
+          <div className="left">科比特行业课程1111</div>
+          <div className="right">
+            <Button
+              type="primary"
+              className="btn"
+              onClick={() =>
+                router.push(`/flyingHandService/examination/${router.query.id}`)
+              }
+            >
+              去考试
+            </Button>
+          </div>
+        </div>
+        <div className="box-body">
+          <video className="body-video" src="" />
+        </div>
+      </Box>
+    </Layout>
+  );
+}

pages/flyingHandService/detail/styled.tsx

+import styled from "styled-components";
+
+export default function Style() {
+  return <></>;
+}
+
+export const Box = styled.div`
+  box-sizing: border-box;
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left {
+      width: 190px;
+      height: 25px;
+      font-size: 20px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #000000;
+      line-height: 25px;
+    }
+    .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;
+    width: 1200px;
+    height: 675px;
+    background: #111111;
+    .body-video {
+      width: 1200px;
+      height: 675px;
+    }
+  }
+`;

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

+import React from "react";
+import Layout from "~/components/layout";
+import { Box } from "./styled";
+import { Tabs } from "antd";
+import type { TabsProps } from "antd";
+
+export default function ExaminationDateil() {
+  const onChange = (key: string) => {
+    console.log(key);
+  };
+
+  const items: TabsProps["items"] = [
+    {
+      key: "1",
+      label: `Tab 1`,
+      children: `Content of Tab Pane 1`,
+    },
+    {
+      key: "2",
+      label: `Tab 2`,
+      children: `Content of Tab Pane 2`,
+    },
+  ];
+  return (
+    <Layout>
+      <Box>
+        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+      </Box>
+    </Layout>
+  );
+}

pages/flyingHandService/examination/styled.tsx

+import styled from "styled-components";
+
+export default function Style() {
+  return <></>;
+}
+
+export const Box = styled.div`
+  box-sizing: border-box;
+`;

pages/flyingHandService/index.page.tsx

 import React, { useEffect, useState } from "react";
 import { Box } from "./styled";
 import Image from "next/image";
-import { Button, Select, Space, Pagination, Cascader } from "antd";
+import { Button, Select, Space, Pagination, Cascader, Modal } from "antd";
 import Layout from "~/components/layout";
 import ContentBox from "~/components/contentBox";
 import api, { Flying, SkillsType, RegionResp } from "./api";
@@ -31,7 +31,11 @@ export default function FlyingHandService() {
 
   const leftDom = (item: Flying) => {
     return (
-      <div className="item" key={item.id}>
+      <div
+        className="item"
+        key={item.id}
+        onClick={() => router.push(`/flyingHandService/detail/${item.id}`)}
+      >
         <div className="item-top">
           <Image
             src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
@@ -173,6 +177,21 @@ export default function FlyingHandService() {
     }
   }, [router]);
 
+  //报名
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const handleOk = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setIsModalOpen(false);
+    }, 3000);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <Layout>
       <Box>
@@ -221,10 +240,37 @@ export default function FlyingHandService() {
               />
             </Space>
           </div>
-          <Button type="primary" className="btn">
+          <Button
+            type="primary"
+            className="btn"
+            onClick={() => setIsModalOpen(true)}
+          >
             报名学习课程
           </Button>
         </div>
+        <Modal
+          wrapClassName="application"
+          title={<div className="title">报名学习课程</div>}
+          open={isModalOpen}
+          onCancel={handleCancel}
+          getContainer={false}
+          footer={[
+            <Button
+              style={{ width: "100%" }}
+              key="submit"
+              type="primary"
+              loading={loading}
+              onClick={handleOk}
+            >
+              立即报名
+            </Button>,
+          ]}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+
         <ContentBox
           boxIndex={4}
           leftcontentstyle={{

pages/flyingHandService/styled.tsx

@@ -135,4 +135,15 @@ export const Box = styled.div`
   .pagination-page {
     text-align: right;
   }
+  .application {
+    .title {
+      text-align: center;
+      height: 23px;
+      font-size: 18px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #000000;
+      line-height: 23px;
+    }
+  }
 `;

pages/home/waterfallFlowBody/components/rotationChart/styled.tsx

@@ -22,8 +22,8 @@ export const Box = styled.div`
       justify-content: center;
       align-items: center;
       &:not(.slick-active) > button {
-        width: 8px;
-        height: 8px;
+        width: 6px;
+        height: 6px;
         border-radius: 50%;
       }
       & > button {

pages/home/waterfallFlowBody/index.tsx

@@ -172,7 +172,7 @@ export default function WaterfallFlowBody() {
       const resValuelist2 = res2
         .map((item, index) => {
           return item.result?.map((it) => {
-            it.type = jobApiTypeList[index];
+            it.type = mallApiTypeList[index];
             return it;
           });
         })
@@ -180,7 +180,7 @@ export default function WaterfallFlowBody() {
       const resValuelist3 = res3
         .map((item, index) => {
           return item.result?.map((it) => {
-            it.type = mallApiTypeList[index];
+            it.type = flightApiTypeList[index];
             return it;
           });
         })
@@ -188,7 +188,7 @@ export default function WaterfallFlowBody() {
       const resValuelist4 = res4
         .map((item, index) => {
           return item.result?.map((it) => {
-            it.type = flightApiTypeList[index];
+            it.type = jobApiTypeList[index];
             return it;
           });
         })
@@ -227,8 +227,6 @@ export default function WaterfallFlowBody() {
   }, []);
 
   const routerPath = (index: number, item?: AllType) => {
-    console.log(index);
-    
     if (item) {
       router.push({
         pathname: columns[index].router,
@@ -253,7 +251,7 @@ export default function WaterfallFlowBody() {
             {/* <div className="item-left-icon">
               <Image src={icon[index]} alt="#" />
             </div> */}
-            <div className="item-left-label">{item.title}</div>
+            <div className="item-left-label" onClick={() => routerPath(index)}>{item.title}</div>
           </div>
           <div>
             <Select
@@ -307,9 +305,9 @@ export default function WaterfallFlowBody() {
                   );
                 })}
           </Space>
-          <div className="item-bottom" onClick={() => routerPath(index)}>
+          {/* <div className="item-bottom" onClick={() => routerPath(index)}>
             全部
-          </div>
+          </div> */}
         </div>
       </div>
     );
@@ -319,11 +317,11 @@ export default function WaterfallFlowBody() {
     return (
       <div key={1009} className="right-box-item right-item">
         <div className="title">
-          行业新闻
           <div
             className="title-label"
             onClick={() => router.push("/projectInfo")}
           >
+            行业新闻
             &gt;
           </div>
         </div>
@@ -353,11 +351,11 @@ export default function WaterfallFlowBody() {
         <Image src={xwbg} alt="#" width={384} height={249} />
         <div className="item-box">
           <div className="title">
-            招标快讯
             <div
               className="title-label"
               onClick={() => router.push("/projectInfo")}
             >
+              招标快讯
               &gt;
             </div>
           </div>

pages/home/waterfallFlowBody/styled.tsx

@@ -37,12 +37,16 @@ export const Box = styled.div`
           font-weight: bold;
           color: #000000;
           line-height: 32px;
+          &:hover{
+            cursor: pointer;
+            color: #ff552d;
+          } 
         }
       }
       .select-box {
-        background: #e0eeff;
-        border-radius: 2px;
-        border: 1px solid #aad0ff;
+        /* background: #e0eeff; */
+        /* border-radius: 2px; */
+        /* border: 1px solid #aad0ff; */
         font-size: 12px;
         width: 49px;
         .ant-select-selection-placeholder {
@@ -56,6 +60,7 @@ export const Box = styled.div`
         }
         .ant-select-arrow {
           right: 2px;
+          color: #297ce0;
         }
       }
     }
@@ -108,10 +113,9 @@ export const Box = styled.div`
       color: #000000;
       line-height: 25px;
       &-label {
-        margin-left: 10px;
         cursor: pointer;
         font-size: 16px;
-        font-weight: 400;
+        font-weight: 100;
         &:hover {
           color: #ff552d;
         }
@@ -201,10 +205,9 @@ export const Box = styled.div`
       color: #000000;
       line-height: 25px;
       &-label {
-        margin-left: 10px;
         cursor: pointer;
         font-size: 16px;
-        font-weight: 400;
+        font-weight: 100;
         &:hover {
           color: #ff552d;
         }

pages/projectInfo/index.module.scss

 .bannerWrap{
-  height: 160px;
+  height: 100px;
   
   position: relative;
 }