首页 发现 帮助
登录
chao
/
CocoClass_home
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

update

chao 1 年之前
父节点
cb619a1a8c
当前提交
de95036209
共有 21 个文件被更改，包括 117 次插入 和 44 次删除
分列视图 显示文件统计
  1. 8 6
      build/asset-manifest.json
  2. 1 1
      build/index.html
  3. 0 0
      build/static/css/main.348c27b0.css
  4. 0 0
      build/static/css/main.348c27b0.css.map
  5. 0 0
      build/static/css/main.e670c1a7.css
  6. 0 0
      build/static/css/main.e670c1a7.css.map
  7. 0 1
      build/static/js/main.33eee32c.js
  8. 0 0
      build/static/js/main.33eee32c.js.map
  9. 1 0
      build/static/js/main.8618b225.js
  10. 0 0
      build/static/js/main.8618b225.js.LICENSE.txt
  11. 0 0
      build/static/js/main.8618b225.js.map
  12. 二进制
      build/static/media/011.ee94d6207de9e623dd21.png
  13. 二进制
      build/static/media/012.c356f5ffe3058c857599.png
  14. 27 2
      src/asstes/css/Example.css
  15. 37 4
      src/asstes/css/Introduction.css
  16. 二进制
      src/asstes/img/011.png
  17. 二进制
      src/asstes/img/012.png
  18. 二进制
      src/asstes/img/bi_arrow_left.png
  19. 二进制
      src/asstes/img/bi_arrow_right.png
  20. 36 25
      src/complates/Examples.js
  21. 7 5
      src/complates/Introduction.js

+ 8 - 6
build/asset-manifest.json
查看文件 

@@ -1,7 +1,7 @@
 
 {
 
   "files": {
 
-    "main.css": "/cocopi/static/css/main.348c27b0.css",
 
-    "main.js": "/cocopi/static/js/main.33eee32c.js",
 
+    "main.css": "/cocopi/static/css/main.e670c1a7.css",
 
+    "main.js": "/cocopi/static/js/main.8618b225.js",
 
     "static/js/453.c26ba5e3.chunk.js": "/cocopi/static/js/453.c26ba5e3.chunk.js",
 
     "static/media/1.png": "/cocopi/static/media/1.101f35acebc32f5dc3ae.png",
 
     "static/media/cocopi3.png": "/cocopi/static/media/cocopi3.08661440fe971f87c9e4.png",
 
@@ -32,15 +32,17 @@
 
     "static/media/卡片-21.png": "/cocopi/static/media/卡片-21.ef2dc9849960abee29dd.png",
 
     "static/media/卡片-16.png": "/cocopi/static/media/卡片-16.7099f52364b11f81d611.png",
 
     "static/media/卡片-22.png": "/cocopi/static/media/卡片-22.1b0260326e125780c3fd.png",
 
+    "static/media/012.png": "/cocopi/static/media/012.c356f5ffe3058c857599.png",
 
     "static/media/aiBack.png": "/cocopi/static/media/aiBack.08db1e0d8f4c32c4bac2.png",
 
+    "static/media/011.png": "/cocopi/static/media/011.ee94d6207de9e623dd21.png",
 
     "static/media/icon1.png": "/cocopi/static/media/icon1.ad19df7f1a1da0caf19b.png",
 
     "index.html": "/cocopi/index.html",
 
-    "main.348c27b0.css.map": "/cocopi/static/css/main.348c27b0.css.map",
 
-    "main.33eee32c.js.map": "/cocopi/static/js/main.33eee32c.js.map",
 
+    "main.e670c1a7.css.map": "/cocopi/static/css/main.e670c1a7.css.map",
 
+    "main.8618b225.js.map": "/cocopi/static/js/main.8618b225.js.map",
 
     "453.c26ba5e3.chunk.js.map": "/cocopi/static/js/453.c26ba5e3.chunk.js.map"
 
   },
 
   "entrypoints": [
 
-    "static/css/main.348c27b0.css",
 
-    "static/js/main.33eee32c.js"
 
+    "static/css/main.e670c1a7.css",
 
+    "static/js/main.8618b225.js"
 
   ]
 
 }

+ 1 - 1
build/index.html
查看文件 

@@ -1 +1 @@
 
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>CocoPi</title><script defer="defer" src="/cocopi/static/js/main.33eee32c.js"></script><link href="/cocopi/static/css/main.348c27b0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
 
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>CocoPi</title><script defer="defer" src="/cocopi/static/js/main.8618b225.js"></script><link href="/cocopi/static/css/main.e670c1a7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

文件差异内容过多而无法显示
+ 0 - 0
build/static/css/main.348c27b0.css


文件差异内容过多而无法显示
+ 0 - 0
build/static/css/main.348c27b0.css.map


文件差异内容过多而无法显示
+ 0 - 0
build/static/css/main.e670c1a7.css


文件差异内容过多而无法显示
+ 0 - 0
build/static/css/main.e670c1a7.css.map


文件差异内容过多而无法显示
+ 0 - 1
build/static/js/main.33eee32c.js


文件差异内容过多而无法显示
+ 0 - 0
build/static/js/main.33eee32c.js.map


文件差异内容过多而无法显示
+ 1 - 0
build/static/js/main.8618b225.js


+ 0 - 0
build/static/js/main.33eee32c.js.LICENSE.txt → build/static/js/main.8618b225.js.LICENSE.txt
查看文件


文件差异内容过多而无法显示
+ 0 - 0
build/static/js/main.8618b225.js.map


二进制
build/static/media/011.ee94d6207de9e623dd21.png
查看文件


二进制
build/static/media/012.c356f5ffe3058c857599.png
查看文件


+ 27 - 2
src/asstes/css/Example.css
查看文件 

@@ -14,7 +14,6 @@
 
         padding-left: 100px;
 
         /* background: linear-gradient(to right,#3681FC,#fff); */
 
         z-index: 10;
 
-
 
     }
 
 
     h1::after {
 
@@ -30,6 +29,32 @@
 
     .Example_content{
 
         background-color: #3681FC;
 
         margin-top: 60px;
 
+        position: relative;
 
+        .img_title{
 
+            position: absolute;
 
+            top: -50px;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+            img{
 
+                width: 80%;
 
+            }
 
+        }
 
+        .bi_arrow_left{
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 25px;
 
+            transform: translate(0,-50%);
 
+            cursor: pointer;
 
+            z-index: 1;
 
+        }
 
+        .bi_arrow_right{
 
+            position: absolute;
 
+            top: 50%;
 
+            right: 25px;
 
+            transform: translate(0,-50%);
 
+            cursor: pointer;
 
+            z-index: 1;
 
+        }
 
         .contentStyle{
 
             text-align: center;
 
             padding: 110px 100px 100px;
 
@@ -42,7 +67,7 @@
 
                 transform: translate(-50%,0);
 
                 z-index: 10;
 
                 img{
 
-                    width: 50%;
 
+                    width: 80%;
 
                 }
 
             }
 
             img{

+ 37 - 4
src/asstes/css/Introduction.css
查看文件 

@@ -81,6 +81,7 @@
 
         background-color: #E2EEFF;
 
         padding: 40px 100px 80px;
 
         text-align: center;
 
+        position: relative;
 
 
         h2 {
 
             margin-top: 40px;
 
@@ -91,7 +92,6 @@
 
             letter-spacing: 0.02em;
 
             /* text-align: left; */
 
             margin-bottom: 40px;
 
-
 
         }
 
 
         .Introduction_bottom_span {
 
@@ -103,10 +103,43 @@
 
             color: #3681FC;
 
             margin-bottom: 25px;
 
         }
 
-        .ant-flex{
 
-            div{
 
+
 
+        span {
 
+            background: url('../img/011.png') no-repeat;
 
+            display: inline-block;
 
+            font-size: 96px;
 
+            font-style: italic;
 
+            font-weight: 400;
 
+            line-height: 113.47px;
 
+            position: absolute;
 
+            color: #FFFFFF38;
 
+            top: 40px;
 
+            right: 170px;
 
+            background-position: center;
 
+            background-size: 158px 179px;
 
+            padding: 20px;
 
+
 
+        }
 
+
 
+        .iot {
 
+            background: url('../img/012.png') no-repeat;
 
+            top:810px;
 
+            right:140px;
 
+            background-position: center;
 
+            background-size: 180px 170px;
 
+        }
 
+
 
+        .ant-flex {
 
+            div {
 
                 width: 20%;
 
-                img{
 
+
 
+                p {
 
+                    font-size: 20px;
 
+                    line-height: 30px;
 
+                    padding: 10px 0;
 
+                }
 
+
 
+                img {
 
                     margin-bottom: 12px;
 
                 }
 
             }

二进制
src/asstes/img/011.png
查看文件


二进制
src/asstes/img/012.png
查看文件


二进制
src/asstes/img/bi_arrow_left.png
查看文件


二进制
src/asstes/img/bi_arrow_right.png
查看文件


+ 36 - 25
src/complates/Examples.js
查看文件 

@@ -27,78 +27,89 @@ import Carousel3_7 from '../asstes/img/CocoPi2/卡片-21.png';
 
 import Carousel3_8 from '../asstes/img/CocoPi2/卡片-23.png';
 
 
 import img1 from '../asstes/img/初级1.png';
 
-import img2 from '../asstes/img/初级2.png';
 
 import img3 from '../asstes/img/中级1.png';
 
-import img4 from '../asstes/img/中级2.png';
 
+// import img4 from '../asstes/img/中级2.png';
 
 import img5 from '../asstes/img/高级1.png';
 
-import img6 from '../asstes/img/高级2.png';
 
+// import img6 from '../asstes/img/高级2.png';
 
+
 
+import biArrowLeft from '../asstes/img/bi_arrow_left.png';
 
+import biArrowRight from '../asstes/img/bi_arrow_right.png';
 
 
 
 
 const carouselRef = React.createRef();
 
 function Example() {
 
     const [state1, setState1] = useState(0);
 
+    const [imgSrc, setImgSrc] = useState(img1)
 
     const onChange = (e) => {
 
         setState1(e)
 
+        if (e === 0 || e === 1) {
 
+            setImgSrc(img1)
 
+        } else if (e === 2 || e === 3) {
 
+            setImgSrc(img3)
 
+        } else if (e === 4 || e === 5) {
 
+            setImgSrc(img5)
 
+        }
 
     };
 
-    // const switchClickState = (e) => {
 
-    //     carouselRef.current.goTo(e);
 
-    // }
 
+    const switchClickState = (type) => {
 
+        let a = state1
 
+        if (type === 'prev') {
 
+            if (state1 === 0) {
 
+                a = 5
 
+            } else {
 
+                a = a-1
 
+            }
 
+        } else {
 
+            if (state1 === 5) {
 
+                a = 0
 
+            } else {
 
+                a = a + 1
 
+            }
 
+        }
 
+        carouselRef.current.goTo(a);
 
+    }
 
     return (
 
         <div className="Example">
 
             <h1>課程案例</h1>
 
             <div className="Example_content">
 
-                <Carousel infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
 
+                <div className="img_title">
 
+                    <img src={imgSrc} alt="" />
 
+                </div>
 
+                <img onClick={() => switchClickState("prev")} className="bi_arrow_left" src={biArrowLeft} alt="left" />
 
+                <img onClick={() => switchClickState("next")} className="bi_arrow_right" src={biArrowRight} alt="left" />
 
+                <Carousel arrow={true} infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
 
                     arrowOffset={16} arrowSize={16}>
 
                     <div className="contentStyle">
 
-                        <div>
 
-                            <img src={img1} alt="" />
 
-                        </div>
 
                         <img src={Carousel1_1} alt="即將上綫" />
 
                         <img src={Carousel1_3} alt="即將上綫" />
 
                         <img src={Carousel1_2} alt="即將上綫" />
 
                         <img src={Carousel1_4} alt="即將上綫" />
 
                     </div>
 
                     <div className="contentStyle">
 
-                        <div>
 
-                            <img src={img2} alt="" />
 
-                        </div>
 
                         <img src={Carousel1_5} alt="即將上綫" />
 
                         <img src={Carousel1_6} alt="即將上綫" />
 
                         <img src={Carousel1_7} alt="即將上綫" />
 
                         <img src={Carousel1_8} alt="即將上綫" />
 
                     </div>
 
                     <div className="contentStyle">
 
-                        <div>
 
-                            <img src={img3} alt="" />
 
-                        </div>
 
                         <img src={Carousel2_1} alt="即將上綫" />
 
                         <img src={Carousel2_2} alt="即將上綫" />
 
                         <img src={Carousel2_3} alt="即將上綫" />
 
                         <img src={Carousel2_4} alt="即將上綫" />
 
                     </div>
 
                     <div className="contentStyle">
 
-                        <div>
 
-                            <img src={img4} alt="" />
 
-                        </div>
 
                         <img src={Carousel2_5} alt="即將上綫" />
 
                         <img src={Carousel2_6} alt="即將上綫" />
 
                         <img src={Carousel2_7} alt="即將上綫" />
 
                         <img src={Carousel2_8} alt="即將上綫" />
 
                     </div>
 
                     <div className="contentStyle">
 
-                        <div>
 
-                            <img src={img5} alt="" />
 
-                        </div>
 
                         <img src={Carousel3_1} alt="即將上綫" />
 
                         <img src={Carousel3_2} alt="即將上綫" />
 
                         <img src={Carousel3_3} alt="即將上綫" />
 
                         <img src={Carousel3_4} alt="即將上綫" />
 
                     </div>
 
                     <div className="contentStyle">
 
-                        <div>
 
-                            <img src={img6} alt="" />
 
-                        </div>
 
                         <img src={Carousel3_5} alt="即將上綫" />
 
                         <img src={Carousel3_6} alt="即將上綫" />
 
                         <img src={Carousel3_7} alt="即將上綫" />

+ 7 - 5
src/complates/Introduction.js
查看文件 

@@ -1,4 +1,4 @@
 
-import {Flex} from "antd"
 
+import { Flex } from "antd"
 
 import '../asstes/css/Introduction.css'
 
 import img1 from '../asstes/img/CocoPi1/icon1.png'
 
 import img2 from '../asstes/img/CocoPi1/icon2.png'
 
@@ -23,10 +23,11 @@ function Introduction() {
 
                 <h1 className='Introduction_top_title'>CocoPi</h1>
 
                 <p>用於AIoT教學、運行 <br /> Linux系統的<i>掌上計算機</i></p>
 
                 <p className='Learning'>All-in-One Product in Technology Innovation Education</p>
 
-                
+
 
             </div>
 
             <div className="Introduction_bottom">
 
                 <h2>人工智能</h2>
 
+                <span>AI</span>
 
                 <p className="Introduction_bottom_span">判別式人工智能</p>
 
                 <Flex>
 
                     <div>
 
@@ -50,7 +51,7 @@ function Introduction() {
 
                         <p>機器翻譯</p>
 
                     </div>
 
                 </Flex>
 
-                <p className="Introduction_bottom_span">判別式人工智能</p>
 
+                <p className="Introduction_bottom_span" style={{ marginTop: 30 }}>生成式人工智能</p>
 
                 <Flex>
 
                     <div>
 
                         <img src={img6} alt="" />
 
@@ -73,8 +74,9 @@ function Introduction() {
 
                         <p>智能體</p>
 
                     </div>
 
                 </Flex>
 
-                <h2 style={{marginTop:100}}>物聯網</h2>
 
-                <Flex style={{marginTop:70}}>
 
+                <h2 style={{ marginTop: 80 }}>物聯網</h2>
 
+                <span className="iot" >IoT</span>
 
+                <Flex style={{ marginTop: 90 }}>
 
                     <div>
 
                         <img src={img11} alt="" />
 
                         <p>雲端平台</p>

部分文件因为文件数量过多而无法显示