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

.

chao 1 年之前
父节点
0a604f9824
当前提交
62e51c5dea
共有 67 个文件被更改，包括 614 次插入 和 480 次删除
分列视图 显示文件统计
  1. 19 10
      build/asset-manifest.json
  2. 1 1
      build/index.html
  3. 0 0
      build/static/css/main.4363d532.css
  4. 0 0
      build/static/css/main.4363d532.css.map
  5. 0 0
      build/static/css/main.95ba2128.css
  6. 0 0
      build/static/css/main.95ba2128.css.map
  7. 1 0
      build/static/js/main.7ee87f22.js
  8. 0 4
      build/static/js/main.7ee87f22.js.LICENSE.txt
  9. 0 0
      build/static/js/main.7ee87f22.js.map
  10. 0 1
      build/static/js/main.dade3eb2.js
  11. 0 0
      build/static/js/main.dade3eb2.js.map
  12. 二进制
      build/static/media/011.22ad02aadee212e43e1f.png
  13. 二进制
      build/static/media/1.101f35acebc32f5dc3ae.png
  14. 二进制
      build/static/media/1.adbd7fafeb396230cc5a.png
  15. 二进制
      build/static/media/aiBack.08db1e0d8f4c32c4bac2.png
  16. 二进制
      build/static/media/cocopi1.889a55f8493efd3e43cf.png
  17. 二进制
      build/static/media/cocopi2.0ed078090f6538727043.png
  18. 二进制
      build/static/media/cocopi3.08661440fe971f87c9e4.png
  19. 二进制
      build/static/media/cocopi4.ee20f5cee626625c048f.png
  20. 二进制
      build/static/media/example_back.0884d132251e074b4ec2.png
  21. 二进制
      build/static/media/example_back1.96b3cb37fdfdda7724e4.png
  22. 二进制
      build/static/media/icon1.ad19df7f1a1da0caf19b.png
  23. 二进制
      build/static/media/中级1.3f22502ce58c26238df9.png
  24. 二进制
      build/static/media/中级2.561e76a5fe25faa92cc0.png
  25. 二进制
      build/static/media/初级1.9f9a06dc1c46051c7980.png
  26. 二进制
      build/static/media/初级2.6bf85beb130fc04f0a4f.png
  27. 二进制
      build/static/media/高级1.4c90c519f594db93f004.png
  28. 二进制
      build/static/media/高级2.3b45fe0d43545bd1ef67.png
  29. 166 104
      src/asstes/css/CheckeredQuery.css
  30. 7 84
      src/asstes/css/Example.css
  31. 28 75
      src/asstes/css/Introduction.css
  32. 89 46
      src/asstes/css/ProcessFlow.css
  33. 二进制
      src/asstes/img/1.png
  34. 二进制
      src/asstes/img/CocoPi (1).zip
  35. 二进制
      src/asstes/img/CocoPi.zip
  36. 二进制
      src/asstes/img/CocoPi/中级1.png
  37. 二进制
      src/asstes/img/CocoPi/中级2.png
  38. 二进制
      src/asstes/img/CocoPi/初级1.png
  39. 二进制
      src/asstes/img/CocoPi/初级2.png
  40. 二进制
      src/asstes/img/CocoPi/高级1.png
  41. 二进制
      src/asstes/img/CocoPi/高级2.png
  42. 二进制
      src/asstes/img/CocoPi1/icon1.png
  43. 二进制
      src/asstes/img/CocoPi1/icon10.png
  44. 二进制
      src/asstes/img/CocoPi1/icon11.png
  45. 二进制
      src/asstes/img/CocoPi1/icon12.png
  46. 二进制
      src/asstes/img/CocoPi1/icon13.png
  47. 二进制
      src/asstes/img/CocoPi1/icon14.png
  48. 二进制
      src/asstes/img/CocoPi1/icon15.png
  49. 二进制
      src/asstes/img/CocoPi1/icon2.png
  50. 二进制
      src/asstes/img/CocoPi1/icon3.png
  51. 二进制
      src/asstes/img/CocoPi1/icon4.png
  52. 二进制
      src/asstes/img/CocoPi1/icon5.png
  53. 二进制
      src/asstes/img/CocoPi1/icon6.png
  54. 二进制
      src/asstes/img/CocoPi1/icon7.png
  55. 二进制
      src/asstes/img/CocoPi1/icon8.png
  56. 二进制
      src/asstes/img/CocoPi1/icon9.png
  57. 二进制
      src/asstes/img/aiBack.png
  58. 二进制
      src/asstes/img/cocopi1.png
  59. 二进制
      src/asstes/img/cocopi2.png
  60. 二进制
      src/asstes/img/cocopi3.png
  61. 二进制
      src/asstes/img/cocopi4.png
  62. 112 22
      src/complates/CheckeredQuery.js
  63. 28 41
      src/complates/Examples.js
  64. 8 7
      src/complates/HeaderRight.js
  65. 89 25
      src/complates/Introduction.js
  66. 61 55
      src/complates/ProcessFlow.js
  67. 5 5
      src/complates/Sidebar.js

+ 19 - 10
build/asset-manifest.json
查看文件 

@@ -1,19 +1,28 @@
 
 {
 
   "files": {
 
-    "main.css": "/static/css/main.95ba2128.css",
 
-    "main.js": "/static/js/main.dade3eb2.js",
 
+    "main.css": "/static/css/main.4363d532.css",
 
+    "main.js": "/static/js/main.7ee87f22.js",
 
     "static/js/453.423c454f.chunk.js": "/static/js/453.423c454f.chunk.js",
 
-    "static/media/1.png": "/static/media/1.adbd7fafeb396230cc5a.png",
 
-    "static/media/example_back.png": "/static/media/example_back.0884d132251e074b4ec2.png",
 
-    "static/media/011.png": "/static/media/011.22ad02aadee212e43e1f.png",
 
-    "static/media/example_back1.png": "/static/media/example_back1.96b3cb37fdfdda7724e4.png",
 
+    "static/media/初级1.png": "/static/media/初级1.9f9a06dc1c46051c7980.png",
 
+    "static/media/初级2.png": "/static/media/初级2.6bf85beb130fc04f0a4f.png",
 
+    "static/media/高级1.png": "/static/media/高级1.4c90c519f594db93f004.png",
 
+    "static/media/中级2.png": "/static/media/中级2.561e76a5fe25faa92cc0.png",
 
+    "static/media/中级1.png": "/static/media/中级1.3f22502ce58c26238df9.png",
 
+    "static/media/高级2.png": "/static/media/高级2.3b45fe0d43545bd1ef67.png",
 
+    "static/media/1.png": "/static/media/1.101f35acebc32f5dc3ae.png",
 
+    "static/media/cocopi3.png": "/static/media/cocopi3.08661440fe971f87c9e4.png",
 
+    "static/media/cocopi1.png": "/static/media/cocopi1.889a55f8493efd3e43cf.png",
 
+    "static/media/cocopi4.png": "/static/media/cocopi4.ee20f5cee626625c048f.png",
 
+    "static/media/cocopi2.png": "/static/media/cocopi2.0ed078090f6538727043.png",
 
+    "static/media/aiBack.png": "/static/media/aiBack.08db1e0d8f4c32c4bac2.png",
 
+    "static/media/icon1.png": "/static/media/icon1.ad19df7f1a1da0caf19b.png",
 
     "index.html": "/index.html",
 
-    "main.95ba2128.css.map": "/static/css/main.95ba2128.css.map",
 
-    "main.dade3eb2.js.map": "/static/js/main.dade3eb2.js.map",
 
+    "main.4363d532.css.map": "/static/css/main.4363d532.css.map",
 
+    "main.7ee87f22.js.map": "/static/js/main.7ee87f22.js.map",
 
     "453.423c454f.chunk.js.map": "/static/js/453.423c454f.chunk.js.map"
 
   },
 
   "entrypoints": [
 
-    "static/css/main.95ba2128.css",
 
-    "static/js/main.dade3eb2.js"
 
+    "static/css/main.4363d532.css",
 
+    "static/js/main.7ee87f22.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>CocoClass</title><script defer="defer" src="/static/js/main.dade3eb2.js"></script><link href="/static/css/main.95ba2128.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>CocoClass</title><script defer="defer" src="/static/js/main.7ee87f22.js"></script><link href="/static/css/main.4363d532.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.4363d532.css


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


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


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


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


+ 0 - 4
build/static/js/main.dade3eb2.js.LICENSE.txt → build/static/js/main.7ee87f22.js.LICENSE.txt
查看文件 

@@ -72,8 +72,6 @@
 
 
 /**![edit](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI1Ny43IDc1MmMyIDAgNC0uMiA2LS41TDQzMS45IDcyMmMyLS40IDMuOS0xLjMgNS4zLTIuOGw0MjMuOS00MjMuOWE5Ljk2IDkuOTYgMCAwMDAtMTQuMUw2OTQuOSAxMTQuOWMtMS45LTEuOS00LjQtMi45LTcuMS0yLjlzLTUuMiAxLTcuMSAyLjlMMjU2LjggNTM4LjhjLTEuNSAxLjUtMi40IDMuMy0yLjggNS4zbC0yOS41IDE2OC4yYTMzLjUgMzMuNSAwIDAwOS40IDI5LjhjNi42IDYuNCAxNC45IDkuOSAyMy44IDkuOXptNjcuNC0xNzQuNEw2ODcuOCAyMTVsNzMuMyA3My4zLTM2Mi43IDM2Mi42LTg4LjkgMTUuNyAxNS42LTg5ek04ODAgODM2SDE0NGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ2MzZjMCA0LjQgMy42IDggOCA4aDc4NGM0LjQgMCA4LTMuNiA4LTh2LTM2YzAtMTcuNy0xNC4zLTMyLTMyLTMyeiIgLz48L3N2Zz4=) */
 
 
-/**![ellipsis](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE3NiA1MTFhNTYgNTYgMCAxMDExMiAwIDU2IDU2IDAgMTAtMTEyIDB6bTI4MCAwYTU2IDU2IDAgMTAxMTIgMCA1NiA1NiAwIDEwLTExMiAwem0yODAgMGE1NiA1NiAwIDEwMTEyIDAgNTYgNTYgMCAxMC0xMTIgMHoiIC8+PC9zdmc+) */
 
-
 
 /**![enter](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg2NCAxNzBoLTYwYy00LjQgMC04IDMuNi04IDh2NTE4SDMxMHYtNzNjMC02LjctNy44LTEwLjUtMTMtNi4zbC0xNDEuOSAxMTJhOCA4IDAgMDAwIDEyLjZsMTQxLjkgMTEyYzUuMyA0LjIgMTMgLjQgMTMtNi4zdi03NWg0OThjMzUuMyAwIDY0LTI4LjcgNjQtNjRWMTc4YzAtNC40LTMuNi04LTgtOHoiIC8+PC9zdmc+) */
 
 
 /**![exclamation-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0tMzIgMjMyYzAtNC40IDMuNi04IDgtOGg0OGM0LjQgMCA4IDMuNiA4IDh2MjcyYzAgNC40LTMuNiA4LTggOGgtNDhjLTQuNCAwLTgtMy42LTgtOFYyOTZ6bTMyIDQ0MGE0OC4wMSA0OC4wMSAwIDAxMC05NiA0OC4wMSA0OC4wMSAwIDAxMCA5NnoiIC8+PC9zdmc+) */
 
@@ -88,8 +86,6 @@
 
 
 /**![loading](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk4OCA1NDhjLTE5LjkgMC0zNi0xNi4xLTM2LTM2IDAtNTkuNC0xMS42LTExNy0zNC42LTE3MS4zYTQ0MC40NSA0NDAuNDUgMCAwMC05NC4zLTEzOS45IDQzNy43MSA0MzcuNzEgMCAwMC0xMzkuOS05NC4zQzYyOSA4My42IDU3MS40IDcyIDUxMiA3MmMtMTkuOSAwLTM2LTE2LjEtMzYtMzZzMTYuMS0zNiAzNi0zNmM2OS4xIDAgMTM2LjIgMTMuNSAxOTkuMyA0MC4zQzc3Mi4zIDY2IDgyNyAxMDMgODc0IDE1MGM0NyA0NyA4My45IDEwMS44IDEwOS43IDE2Mi43IDI2LjcgNjMuMSA0MC4yIDEzMC4yIDQwLjIgMTk5LjMuMSAxOS45LTE2IDM2LTM1LjkgMzZ6IiAvPjwvc3ZnPg==) */
 
 
-/**![plus](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ4MiAxNTJoNjBxOCAwIDggOHY3MDRxMCA4LTggOGgtNjBxLTggMC04LThWMTYwcTAtOCA4LTh6IiAvPjxwYXRoIGQ9Ik0xOTIgNDc0aDY3MnE4IDAgOCA4djYwcTAgOC04IDhIMTYwcS04IDAtOC04di02MHEwLTggOC04eiIgLz48L3N2Zz4=) */
 
-
 
 /**![right](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc2NS43IDQ4Ni44TDMxNC45IDEzNC43QTcuOTcgNy45NyAwIDAwMzAyIDE0MXY3Ny4zYzAgNC45IDIuMyA5LjYgNi4xIDEyLjZsMzYwIDI4MS4xLTM2MCAyODEuMWMtMy45IDMtNi4xIDcuNy02LjEgMTIuNlY4ODNjMCA2LjcgNy43IDEwLjQgMTIuOSA2LjNsNDUwLjgtMzUyLjFhMzEuOTYgMzEuOTYgMCAwMDAtNTAuNHoiIC8+PC9zdmc+) */
 
 
 /**![search](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkwOS42IDg1NC41TDY0OS45IDU5NC44QzY5MC4yIDU0Mi43IDcxMiA0NzkgNzEyIDQxMmMwLTgwLjItMzEuMy0xNTUuNC04Ny45LTIxMi4xLTU2LjYtNTYuNy0xMzItODcuOS0yMTIuMS04Ny45cy0xNTUuNSAzMS4zLTIxMi4xIDg3LjlDMTQzLjIgMjU2LjUgMTEyIDMzMS44IDExMiA0MTJjMCA4MC4xIDMxLjMgMTU1LjUgODcuOSAyMTIuMUMyNTYuNSA2ODAuOCAzMzEuOCA3MTIgNDEyIDcxMmM2NyAwIDEzMC42LTIxLjggMTgyLjctNjJsMjU5LjcgMjU5LjZhOC4yIDguMiAwIDAwMTEuNiAwbDQzLjYtNDMuNWE4LjIgOC4yIDAgMDAwLTExLjZ6TTU3MC40IDU3MC40QzUyOCA2MTIuNyA0NzEuOCA2MzYgNDEyIDYzNnMtMTE2LTIzLjMtMTU4LjQtNjUuNkMyMTEuMyA1MjggMTg4IDQ3MS44IDE4OCA0MTJzMjMuMy0xMTYuMSA2NS42LTE1OC40QzI5NiAyMTEuMyAzNTIuMiAxODggNDEyIDE4OHMxMTYuMSAyMy4yIDE1OC40IDY1LjZTNjM2IDM1Mi4yIDYzNiA0MTJzLTIzLjMgMTE2LjEtNjUuNiAxNTguNHoiIC8+PC9zdmc+) */

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


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


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


二进制
build/static/media/011.22ad02aadee212e43e1f.png
查看文件


二进制
build/static/media/1.101f35acebc32f5dc3ae.png
查看文件


二进制
build/static/media/1.adbd7fafeb396230cc5a.png
查看文件


二进制
build/static/media/aiBack.08db1e0d8f4c32c4bac2.png
查看文件


二进制
build/static/media/cocopi1.889a55f8493efd3e43cf.png
查看文件


二进制
build/static/media/cocopi2.0ed078090f6538727043.png
查看文件


二进制
build/static/media/cocopi3.08661440fe971f87c9e4.png
查看文件


二进制
build/static/media/cocopi4.ee20f5cee626625c048f.png
查看文件


二进制
build/static/media/example_back.0884d132251e074b4ec2.png
查看文件


二进制
build/static/media/example_back1.96b3cb37fdfdda7724e4.png
查看文件


二进制
build/static/media/icon1.ad19df7f1a1da0caf19b.png
查看文件


二进制
build/static/media/中级1.3f22502ce58c26238df9.png
查看文件


二进制
build/static/media/中级2.561e76a5fe25faa92cc0.png
查看文件


二进制
build/static/media/初级1.9f9a06dc1c46051c7980.png
查看文件


二进制
build/static/media/初级2.6bf85beb130fc04f0a4f.png
查看文件


二进制
build/static/media/高级1.4c90c519f594db93f004.png
查看文件


二进制
build/static/media/高级2.3b45fe0d43545bd1ef67.png
查看文件


+ 166 - 104
src/asstes/css/CheckeredQuery.css
查看文件 

@@ -1,7 +1,99 @@
 
 .CheckeredQuery {
 
-    background-color: #E2EEFF;
 
+    background-color: #fff;
 
     padding: 100px 0;
 
 
+    .experience {
 
+        position: relative;
 
+        /* bottom: 64px; */
 
+        font-size: 24px;
 
+        font-weight: 500;
 
+        /* right: 64px; */
 
+        display: flex;
 
+        justify-content: space-between;
 
+
 
+        a {
 
+            display: block;
 
+            position: relative;
 
+
 
+            .img2 {
 
+                position: relative;
 
+                top: 50%;
 
+                transform: translate(0, -50%);
 
+                display: inline-block;
 
+                padding: 10px;
 
+                border-radius: 50%;
 
+                background-color: #3681FC;
 
+                border: 1px solid #D5D9EF;
 
+                margin-right: 10px;
 
+
 
+                .img1 {
 
+                    display: inline-block;
 
+                    width: 37px;
 
+                    height: 37px;
 
+                    /* padding: 10px; */
 
+                    background-color: #E2EEFF;
 
+                    border-radius: 50%;
 
+                    text-align: center;
 
+
 
+                    img {
 
+                        width: 17px;
 
+                        height: 17px;
 
+                    }
 
+                }
 
+            }
 
+
 
+            .img3 {
 
+                position: relative;
 
+                top: 50%;
 
+                transform: translate(0, -50%);
 
+                display: inline-block;
 
+                padding: 10px;
 
+                border-radius: 50%;
 
+                background-color: rgb(235, 243, 255);
 
+                border: 1px solid #D5D9EF;
 
+                margin-right: 10px;
 
+
 
+                .img4 {
 
+                    display: inline-block;
 
+                    width: 37px;
 
+                    height: 37px;
 
+                    /* padding: 10px; */
 
+                    background-color: #3681FC;
 
+                    border-radius: 50%;
 
+                    text-align: center;
 
+
 
+                    img {
 
+                        width: 17px;
 
+                        height: 17px;
 
+                    }
 
+                }
 
+            }
 
+
 
+            .span1 {
 
+                display: inline-block;
 
+                position: relative;
 
+                height: 59px;
 
+                top: 50%;
 
+                transform: translate(0, -50%);
 
+                color: #FFFFFFE5;
 
+            }
 
+            .span2 {
 
+                display: inline-block;
 
+                position: relative;
 
+                height: 59px;
 
+                top: 50%;
 
+                transform: translate(0, -50%);
 
+                color: #000000E5;
 
+            }
 
+        }
 
+
 
+        .experience_img {
 
+            vertical-align: middle;
 
+            position: relative;
 
+            right: 0;
 
+        }
 
+    }
 
+
 
     h1 {
 
         position: relative;
 
         top: 0;
 
@@ -26,120 +118,90 @@
 
         z-index: -1;
 
     }
 
 
-    .Reusable {
 
-        margin: 0 auto;
 
-        text-align: center;
 
-        position: relative;
 
-        top: 100px;
 
-
 
-        h2 {
 
-            font-size: 64px;
 
-            font-weight: 700;
 
-            line-height: 76.8px;
 
-            letter-spacing: -0.04em;
 
-            color: #3681FC;
 
-            margin-bottom: 16px;
 
+    .CheckeredQuery_content {
 
+        padding: 80px 100px;
 
+        justify-content: space-between;
 
+        width: 100%;
 
+        min-height: 580px;
 
+        flex-wrap: wrap;
 
+
 
+        .Introduction_bottom_div {
 
+            width: 48%;
 
+            border-radius: 30px;
 
+            position: relative;
 
+            margin-bottom: 30px;
 
         }
 
 
-        .Reusable_span {
 
-            font-size: 18px;
 
+        p {
 
+            display: block;
 
+            margin-top: 48px;
 
+            font-size: 20px;
 
             font-weight: 400;
 
-            line-height: 27px;
 
-            text-align: center;
 
-            color: #585656;
 
-        }
 
+            line-height: 40px;
 
+            text-align: left;
 
+            min-height: 140px;
 
 
-        button {
 
-            position: absolute;
 
-            top: 150px;
 
-            left: 50%;
 
-            transform: translate(-50%, 0);
 
-            border-color: #3681FC;
 
-            background-color: #E3EEFF;
 
-            color: #1267E7;
 
-            padding: 20px 24px;
 
-
 
-            span {
 
-                display: inline-block;
 
-                /* padding: 18px 24px; */
 
-                font-size: 26px;
 
-            }
 
         }
 
 
-        .Reusable_ul {
 
-            margin-top: 50px;
 
-            border-radius: 20px;
 
+        .Introduction_bottom_left {
 
+            padding: 64px;
 
             background-color: #3681FC;
 
-            padding: 45px 50px 70px;
 
-            color: #FFFFFFE5;
 
-            font-size: 18px;
 
-            text-align: left;
 
-
 
-            li {
 
-                margin-top: 24px;
 
-                list-style: disc;
 
-                line-height: 27px;
 
-                font-weight: 400;
 
+            color: #fff;
 
+            border-radius: 30px;
 
+
 
+            h2 {
 
+                font-family: Noto Sans SC;
 
+                font-size: 44px;
 
+                font-weight: 500;
 
+                line-height: 52.8px;
 
+                letter-spacing: 0.02em;
 
+                text-align: left;
 
+
 
+                i {
 
+                    font-style: normal;
 
+                    color: #F4C751;
 
+                }
 
             }
 
-        }
 
-    }
 
 
-    .Subscribe {
 
-        margin: 0 auto;
 
-        text-align: center;
 
-        position: relative;
 
-
 
-        h2 {
 
-            font-size: 64px;
 
-            font-weight: 700;
 
-            line-height: 76.8px;
 
-            letter-spacing: -0.04em;
 
-            background: linear-gradient(rgba(196, 155, 87, 1), rgba(145, 106, 47, 1));
 
-            background-clip: text;
 
-            -webkit-text-fill-color: transparent;
 
-            margin-bottom: 16px;
 
         }
 
 
-        .Reusable_span {
 
-            font-size: 18px;
 
-            font-weight: 400;
 
-            line-height: 27px;
 
-            text-align: center;
 
-            color: #585656;
 
-        }
 
-
 
-        button {
 
-            position: absolute;
 
-            top: 150px;
 
-            left: 50%;
 
-            transform: translate(-50%, 0);
 
-            border-color: #AC8444;
 
-            /* background-color: #ffff; */
 
-            color: #AC8444;
 
-            padding: 20px 24px;
 
-
 
-            span {
 
-                display: inline-block;
 
-                /* padding: 18px 24px; */
 
-                font-size: 26px;
 
-            }
 
-        }
 
-
 
-        .Reusable_ul {
 
-            margin-top: 50px;
 
-            border-radius: 20px;
 
-            background-color: #040000;
 
-            padding: 45px 50px 70px;
 
-            color: #FFFFFFE5;
 
-            font-size: 18px;
 
-            text-align: left;
 
-            min-width: 428px;
 
-
 
-            li {
 
-                margin-top: 24px;
 
-                list-style: disc;
 
-                line-height: 27px;
 
-                font-weight: 400;
 
+        .Introduction_bottom_right {
 
+            background-color: #3681FC;
 
+            border-radius: 30px;
 
+            padding-top: 10px;
 
+
 
+            .Introduction_bottom_right_div {
 
+                height: 100%;
 
+                padding: 64px;
 
+                border-radius: 30px;
 
+                background-color: rgb(235, 243, 255);
 
+
 
+                h2 {
 
+                    font-family: Noto Sans SC;
 
+                    font-size: 44px;
 
+                    font-weight: 500;
 
+                    line-height: 52.8px;
 
+                    letter-spacing: 0.02em;
 
+                    text-align: left;
 
+                    color: #000;
 
+
 
+                    i {
 
+                        font-style: normal;
 
+                        color: #3681FC;
 
+                    }
 
+                }
 
+
 
+                p {
 
+                    display: block;
 
+                    margin-top: 48px;
 
+                    font-family: Noto Sans SC;
 
+                    font-size: 20px;
 
+                    font-weight: 400;
 
+                    line-height: 40px;
 
+                    text-align: left;
 
+                    color: #00000099;
 
+                    min-height: 140px;
 
+                }
 
             }
 
         }
 
     }

+ 7 - 84
src/asstes/css/Example.css
查看文件 

@@ -1,88 +1,11 @@
 
 .Example {
 
-    position: relative;
 
-
 
-    h1 {
 
-        position: relative;
 
-        top: 0;
 
-        display: inline-block;
 
-        font-size: 64px;
 
-        font-weight: 500;
 
-        line-height: 92.67px;
 
-        padding-left: 100px;
 
-        /* background: linear-gradient(to right,#3681FC,#fff); */
 
-        z-index: 10;
 
-
 
-    }
 
-
 
-    h1::after {
 
-        content: '';
 
-        width: 100%;
 
-        padding: 12px 0;
 
-        background: linear-gradient(to right, #3681FC, #fff);
 
-        position: absolute;
 
-        top: 72px;
 
-        left: 0;
 
-        z-index: -1;
 
-    }
 
-
 
-    .Example_content {
 
-        margin: 0 100px;
 
-        margin-top: 67px;
 
-        background-color: #11225E;
 
-        border-radius: 48px;
 
-        position: relative;
 
-        background-image: url('../img/example_back.png'), url('../img/example_back1.png');
 
-        background-repeat: no-repeat, no-repeat;
 
-        background-position:left,right;
 
-        .Example_flex_div {
 
-            position: relative;
 
-            width: 25%;
 
-            text-align: center;
 
-            margin: 80px 0 60px;
 
-            cursor: pointer;
 
-
 
-            span:nth-child(1) {
 
-                font-size: 24px;
 
-                color: #fff;
 
-                line-height: 24px;
 
-            }
 
-
 
-            span:nth-child(3) {
 
-                font-size: 18px;
 
-                color: rgba(255, 255, 255, .55);
 
-                line-height: 28px;
 
-            }
 
-        }
 
-
 
-        .Example_flex_div_plan::after {
 
-            content: '';
 
-            width: 100%;
 
-            padding: 2px 0;
 
-            background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
 
-            position: absolute;
 
-            top: 72px;
 
-            left: 0;
 
-        }
 
-        .Carousel_div{
 
-            padding: 0 100px 80px;
 
-            .contentStyle{
 
-                height: 500px;
 
-                background: linear-gradient(to right,#3673E8,#88CCFD);
 
-                text-align: center;
 
-                position: relative;
 
-                img{
 
-                    position: relative;
 
-                    top: 45%;
 
-                    left: 50%;
 
-                    transform: translate(-50%,-50%);
 
-                }
 
-                span{
 
-                    position: relative;
 
-                    top: 100px;
 
-                    font-size: 32px;
 
-                    line-height: 44.8px;
 
-                    color: #FFFFFF8C;
 
-                }
 
+    width: 100%;
 
+    margin-top: 100px;
 
+    /* padding: 0 100px; */
 
+    .Example_content{
 
+        .contentStyle{
 
+            img{
 
+                width: 100%;
 
             }
 
         }
 
     }

+ 28 - 75
src/asstes/css/Introduction.css
查看文件 

@@ -1,6 +1,5 @@
 
 .Introduction {
 
     width: 100%;
 
-    padding: 0 100px;
 
     height: auto;
 
     padding-top: 160px;
 
 
@@ -20,6 +19,7 @@
 
     }
 
 
     .Introduction_top {
 
+        padding: 0 100px;
 
         background-image: url("../img/1.png");
 
         background-repeat: no-repeat;
 
         background-position: right center;
 
@@ -32,12 +32,12 @@
 
             font-weight: 700;
 
             line-height: 76.8px;
 
             letter-spacing: 0.04em;
 
-            text-align: left; 
+            text-align: left;
 
             position: relative;
 
             top: 0;
 
             display: inline-block;
 
         }
 
-        
+
 
         .Introduction_top_title::after {
 
             content: '';
 
             width: calc(100% + 100px);
 
@@ -78,83 +78,36 @@
 
     }
 
 
     .Introduction_bottom {
 
-        display: flex;
 
-        justify-content: space-between;
 
-        width: 100%;
 
-        min-height: 580px;
 
+        background-color: #E2EEFF;
 
+        padding: 40px 100px 80px;
 
+        text-align: center;
 
+
 
+        h2 {
 
+            margin-top: 40px;
 
+            width: 20%;
 
+            font-size: 44px;
 
+            font-weight: 700;
 
+            line-height: 52.8px;
 
+            letter-spacing: 0.02em;
 
+            /* text-align: left; */
 
+            margin-bottom: 40px;
 
 
-        .Introduction_bottom_div {
 
-            width: 48%;
 
-            border-radius: 30px;
 
-            position: relative;
 
         }
 
 
-        p {
 
-            margin-top: 48px;
 
-            font-family: Noto Sans SC;
 
-            font-size: 20px;
 
+        .Introduction_bottom_span {
 
+            width: 20%;
 
+            font-size: 24px;
 
             font-weight: 400;
 
-            line-height: 40px;
 
-            text-align: left;
 
-
 
-        }
 
-
 
-        .Introduction_bottom_left {
 
-            padding: 64px;
 
-            background-color: #3681FC;
 
-            color: #fff;
 
-            border-radius: 30px;
 
-
 
-            h2 {
 
-                font-family: Noto Sans SC;
 
-                font-size: 44px;
 
-                font-weight: 500;
 
-                line-height: 52.8px;
 
-                letter-spacing: 0.02em;
 
-                text-align: left;
 
-
 
-                i {
 
-                    font-style: normal;
 
-                    color: #F4C751;
 
-                }
 
-            }
 
-
 
+            line-height: 36px;
 
+            /* text-align: left; */
 
+            color: #3681FC;
 
+            margin-bottom: 25px;
 
         }
 
-
 
-        .Introduction_bottom_right {
 
-            background-color: #3681FC;
 
-            border-radius: 30px;
 
-            padding-top: 10px;
 
-
 
-            .Introduction_bottom_right_div {
 
-                height: 100%;
 
-                padding: 64px;
 
-                border-radius: 30px;
 
-                background-color: rgb(235, 243, 255);
 
-
 
-                h2 {
 
-                    font-family: Noto Sans SC;
 
-                    font-size: 44px;
 
-                    font-weight: 500;
 
-                    line-height: 52.8px;
 
-                    letter-spacing: 0.02em;
 
-                    text-align: left;
 
-                    color: #000;
 
-
 
-                    i {
 
-                        font-style: normal;
 
-                        color: #3681FC;
 
-                    }
 
-                }
 
-
 
-                p {
 
-                    margin-top: 48px;
 
-                    font-family: Noto Sans SC;
 
-                    font-size: 20px;
 
-                    font-weight: 400;
 
-                    line-height: 40px;
 
-                    text-align: left;
 
-                    color: #00000099;
 
+        .ant-flex{
 
+            div{
 
+                width: 20%;
 
+                img{
 
+                    margin-bottom: 12px;
 
                 }
 
             }
 
         }

+ 89 - 46
src/asstes/css/ProcessFlow.css
查看文件 

@@ -1,59 +1,102 @@
 
 .ProcessFlow {
 
     margin-top: 100px;
 
-    background-color: #E2EEFF;
 
-    padding: 100px;
 
-    display: flex;
 
-    justify-content: space-between;
 
-    flex-wrap: wrap;
 
+    background-color: #fff;
 
+    background-image: url('../img/aiBack.png');
 
 
-    .ProcessFlow_card {
 
+
 
+    h1 {
 
         position: relative;
 
+        top: 0;
 
+        display: inline-block;
 
+        font-size: 64px;
 
+        font-weight: 500;
 
+        line-height: 92.67px;
 
+        padding-left: 100px;
 
+        margin-bottom: 90px;
 
+        /* background: linear-gradient(to right,#3681FC,#fff); */
 
+        z-index: 10;
 
 
-        .ProcessFlow_card_title {
 
-            font-size: 44px;
 
-            font-weight: 700;
 
-            letter-spacing: 0.02em;
 
+    }
 
 
-        }
 
-        .ProcessFlow_card_num{
 
-            font-family: DIN Alternate;
 
-            position: absolute;
 
-            top: 25px;
 
-            right: 25px;
 
-            font-size: 35px;
 
-            color: #fff;
 
-            z-index: 1;
 
-            opacity: 0.22;
 
-        }
 
+    h1::after {
 
+        content: '';
 
+        width: 100%;
 
+        padding: 12px 0;
 
+        background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
 
+        position: absolute;
 
+        top: 72px;
 
+        left: 0;
 
+        z-index: -1;
 
+    }
 
 
-        .ProcessFlow_img_back {
 
-            padding: 5px;
 
-            position: absolute;
 
-            right: 0;
 
-            width: 93px;
 
-            top: 0;
 
-            
-        }
 
+    .anchor {
 
+        padding: 0 100px;
 
 
+        .anchor_flex {
 
+            width: 100%;
 
+            height: 600px;
 
+            background: #11225E;
 
+            position: relative;
 
+            border-radius: 48px;
 
 
-    }
 
+            .anchor_left {
 
+                position: absolute;
 
+                color: #fff;
 
+                top: 50%;
 
+                left: 8%;
 
+                transform: translate(0,-50%);
 
 
-    .english_text {
 
-        min-height: 60px;
 
-        margin-top: 40px;
 
-        font-size: 20px;
 
-        font-weight: 400;
 
-        line-height: 30px;
 
-        color: #3681FC;
 
-    }
 
+                div {
 
+                    position: relative;
 
+                    margin: 60px 10px;
 
+                    text-align: center;
 
 
-    .ProcessFlow_text {
 
-        margin-top: 16px;
 
-        font-family: Noto Sans SC;
 
-        font-size: 20px;
 
-        font-weight: 400;
 
-        line-height: 30px;
 
-        text-align: left;
 
-        color: rgba(0, 0, 0, .6);
 
+                    span:nth-child(1) {
 
+                        font-size: 24px;
 
+                        font-weight: 400;
 
+                        line-height: 24px;
 
+                        text-align: right;
 
+                        color: #FFFFFFE5;
 
+                    }
 
+
 
+                    span:nth-child(2) {
 
+                        font-size: 18px;
 
+                        font-weight: 400;
 
+                        line-height: 28px;
 
+                        text-align: right;
 
+                        color: #FFFFFF8C;
 
+                    }
 
+                }
 
+
 
+                .anchor_left_div::after {
 
+                    content: '';
 
+                    width: 100%;
 
+                    padding: 2px 0;
 
+                    background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
 
+                    position: absolute;
 
+                    top: 45px;
 
+                    left: 0;
 
+                    z-index: -1;
 
+                }
 
+            }
 
+
 
+            .anchor_right {
 
+                height: 100%;
 
+                width: 100%;
 
+                overflow: auto;
 
+
 
+                div {
 
+                    text-align: right;
 
+
 
+                    img {
 
+                        /* display: block; */
 
+                        margin: 48px;
 
+                        /* width: 100%; */
 
+                        border-radius: 48px;
 
+                    }
 
+
 
+                }
 
+            }
 
+        }
 
     }
 
 }

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


二进制
src/asstes/img/CocoPi (1).zip
查看文件


二进制
src/asstes/img/CocoPi.zip
查看文件


二进制
src/asstes/img/CocoPi/中级1.png
查看文件


二进制
src/asstes/img/CocoPi/中级2.png
查看文件


二进制
src/asstes/img/CocoPi/初级1.png
查看文件


二进制
src/asstes/img/CocoPi/初级2.png
查看文件


二进制
src/asstes/img/CocoPi/高级1.png
查看文件


二进制
src/asstes/img/CocoPi/高级2.png
查看文件


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


+ 112 - 22
src/complates/CheckeredQuery.js
查看文件 

@@ -1,32 +1,122 @@
 
-import { Flex,Button } from "antd";
 
+import { Flex } from "antd";
 
 import "../asstes/css/CheckeredQuery.css"
 
+import ExperienceImg3 from '../asstes/img/3.png'
 
+import ExperienceImg6 from '../asstes/img/6.png'
 
+import ExperienceImg4 from '../asstes/img/4.png'
 
+import ExperienceImg5 from '../asstes/img/5.png'
 
 
 function CheckeredQuery() {
 
     return (
 
         <div className="CheckeredQuery">
 
-            <h1>價格查詢</h1>
 
+            <h1>配套資源</h1>
 
             <Flex className="CheckeredQuery_content">
 
-                <div className="Reusable">
 
-                    <h2>試用版</h2>
 
-                    <span className="Reusable_span">Get started with CocoClass Using GenAI.</span>
 
-                    <Button>$0  /年</Button>
 
-                    <ul className="Reusable_ul">
 
-                        <li>適用於尚未使用CococClass GenAI的學校</li>
 
-                        <li>每校開通≤3位教師賬號，≤50位學生賬號</li>
 
-                        <li>≤100次對話/月</li>
 
-                    </ul>
 
+                <div className="Introduction_bottom_left Introduction_bottom_div">
 
+                    <h2><i>Pi Blockly </i>編程平台</h2>
 
+                    <p>
 
+                        Pi Blockly圖形化編程平台基於 Google Blockly 開發的AIoT技術應用平台，可以直接通過瀏覽器設計程式對人工智能及物聯網技術進行相關體驗。
 
+                    </p>
 
+                    <div className='experience'>
 
+                        <a href="https://pi.cocorobo.hk/">
 
+                            <span className="img2">
 
+                                <span className="img1">
 
+                                    <img src={ExperienceImg5} alt=""></img>
 
+                                </span>
 
+                            </span>
 
+                            <span className="span1">開始體驗</span>
 
+                        </a>
 
+                        <img className='experience_img' src={ExperienceImg6} alt="" />
 
+                    </div>
 
                 </div>
 
-                <div className="Subscribe">
 
-                    <h2>訂閲版</h2>
 
-                    <span className="Reusable_span">Upgrade for unlimited people and tools.</span>
 
-                    <Button>聯絡我們查詢GenAI方案</Button>
 
-                    <ul className="Reusable_ul">
 
-                        <li>全校教師賬號與學生賬號服務</li>
 
-                        <li>客制化自訂教學設計框架 - 3項</li>
 
-                        <li>客制化自訂教學設計框架 - 3項</li>
 
-                        <li>到校教師培訓工作坊 - 120分鐘</li>
 
-                        <li>綫上一對一技術支援</li>
 
-                    </ul>
 
+                <div className="Introduction_bottom_right Introduction_bottom_div">
 
+                    <div className='Introduction_bottom_right_div'>
 
+                        <h2>CocoClass <i>課程平台</i></h2>
 
+                        <p>
 
+                            Cococlass 集成各種互動學習工具、採集進展性數據並進行可視化分析，以支援在學科與跨学科教學、學校數碼化管理、競賽活動組織等不同場景下使用。
 
+                        </p>
 
+                        <div className='experience'>
 
+                            <a href="https://cloud.cocorobo.hk/">
 
+                                <span className="img3">
 
+                                    <span className="img4">
 
+                                        <img src={ExperienceImg4} alt=""></img>
 
+                                    </span>
 
+                                </span>
 
+                                <span className="span2">開始體驗</span>
 
+                            </a>
 
+                            <img className='experience_img' src={ExperienceImg3} alt="" />
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div className="Introduction_bottom_right Introduction_bottom_div">
 
+                    <div className='Introduction_bottom_right_div'>
 
+                        <h2>CocoCloud <i>雲端平臺</i></h2>
 
+                        <p>
 
+                            CocoCloud 是 CocoRobo 推出的雲端物聯網平臺,用戶可以在改平臺上進行物聯網事件的管理,以及時間狀態的查看。CocoCloud 支持數據可視化功能,用戶可以控制面板中的創建,並查看各類的數據。
 
+                        </p>
 
+                        <div className='experience'>
 
+                            <a href="https://cocorobo.hk/cloud/login">
 
+                                <span className="img3">
 
+                                    <span className="img4">
 
+                                        <img src={ExperienceImg4} alt=""></img>
 
+                                    </span>
 
+                                </span>
 
+                                <span className="span2">開始體驗</span>
 
+                            </a>
 
+                            <img className='experience_img' src={ExperienceImg3} alt="" />
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div className="Introduction_bottom_left Introduction_bottom_div">
 
+                    <h2><i>AI模型 </i>訓練平臺</h2>
 
+                    <p>
 
+                        使用CocoRobo訓練平臺可以幫助您進行數據標註完成數據集的第一步處理，引導您一步步的開始模型訓練，並將訓練過程可視化地呈現出來。
 
+                    </p>
 
+                    <div className='experience'>
 
+                        <a href="https://model-training.cocorobo.hk/">
 
+                            <span className="img2">
 
+                                <span className="img1">
 
+                                    <img src={ExperienceImg5} alt=""></img>
 
+                                </span>
 
+                            </span>
 
+                            <span className="span1">開始體驗</span>
 
+                        </a>
 
+                        <img className='experience_img' src={ExperienceImg6} alt="" />
 
+                    </div>
 
+                </div>
 
+                <div className="Introduction_bottom_left Introduction_bottom_div">
 
+                    <h2><i>AI Hub </i>體驗平臺</h2>
 
+                    <p>
 
+                        AI Hub是CocoRobo的人工智慧體驗平臺，無需安裝任何挿件，使用瀏覽器便可直接體驗最前沿的人工智慧研究、科技和應用，實現與機器的高效互動。
 
+                    </p>
 
+                    <div className='experience'>
 
+                        <a href="https://aihub.cocorobo.hk/">
 
+                            <span className="img2">
 
+                                <span className="img1">
 
+                                    <img src={ExperienceImg5} alt=""></img>
 
+                                </span>
 
+                            </span>
 
+                            <span className="span1">開始體驗</span>
 
+                        </a>
 
+                        <img className='experience_img' src={ExperienceImg6} alt="" />
 
+                    </div>
 
+                </div>
 
+                <div className="Introduction_bottom_right Introduction_bottom_div">
 
+                    <div className='Introduction_bottom_right_div'>
 
+                        <h2>Coco CAD <i>建模平臺</i></h2>
 
+                        <p>
 
+                            Coco-CAD 同樣是使用積木的方式讓學生體驗到通過漸進式方法來進行 3D 建模。
 
+                        </p>
 
+                        <div className='experience'>
 
+                            <a href="https://cocorobo.hk/cococad/">
 
+                                <span className="img3">
 
+                                    <span className="img4">
 
+                                        <img src={ExperienceImg4} alt=""></img>
 
+                                    </span>
 
+                                </span>
 
+                                <span className="span2">開始體驗</span>
 
+                            </a>
 
+                            <img className='experience_img' src={ExperienceImg3} alt="" />
 
+                        </div>
 
+                    </div>
 
                 </div>
 
             </Flex>
 
         </div>

+ 28 - 41
src/complates/Examples.js
查看文件 

@@ -1,7 +1,12 @@
 
 import React, { useState } from "react";
 
-import { Carousel, Flex } from 'antd';
 
+import { Carousel } from 'antd';
 
 import '../asstes/css/Example.css'
 
-import Carousel1 from '../asstes/img/Carousel1.png';
 
+import Carousel1 from '../asstes/img/CocoPi/初级1.png';
 
+import Carousel2 from '../asstes/img/CocoPi/初级2.png';
 
+import Carousel3 from '../asstes/img/CocoPi/中级1.png';
 
+import Carousel4 from '../asstes/img/CocoPi/中级2.png';
 
+import Carousel5 from '../asstes/img/CocoPi/高级1.png';
 
+import Carousel6 from '../asstes/img/CocoPi/高级2.png';
 
 
 
 const carouselRef = React.createRef();
 
@@ -10,52 +15,34 @@ function Example() {
 
     const onChange = (e) => {
 
         setState1(e)
 
     };
 
-    const switchClickState = (e) => {
 
-        carouselRef.current.goTo(e);
 
-    }
 
+    // const switchClickState = (e) => {
 
+    //     carouselRef.current.goTo(e);
 
+    // }
 
     return (
 
         <div className="Example">
 
-            <h1>使用示例</h1>
 
+            {/* <h1>課程案例</h1> */}
 
             <div className="Example_content">
 
-                <Flex>
 
-                    <div className={state1 === 0 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(0)}>
 
-                        <span>AI教學設計</span><br />
 
-                        <span>AI as Co-Designer</span>
 
+                <Carousel infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
 
+                    arrowOffset={16} arrowSize={16}>
 
+                    <div className="contentStyle">
 
+                        <img src={Carousel1} alt="即將上綫" />
 
                     </div>
 
-                    <div className={state1 === 1 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(1)}>
 
-                        <span>課堂助手</span><br />
 
-                        <span>AI as Teaching Assistant</span>
 
+                    <div className="contentStyle">
 
+                        <img src={Carousel2} alt="即將上綫" />
 
                     </div>
 
-                    <div className={state1 === 2 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(2)}>
 
-                        <span>教學分析</span><br />
 
-                        <span>Teaching Analysis</span>
 
+                    <div className="contentStyle">
 
+                        <img src={Carousel3} alt="即將上綫" />
 
                     </div>
 
-                    <div className={state1 === 3 ? "Example_flex_div Example_flex_div_plan" : "Example_flex_div"} onClick={() => switchClickState(3)}>
 
-                        <span>教學設計</span><br />
 
-                        <span>AI-enabled Assessment</span>
 
+                    <div className="contentStyle">
 
+                        <img src={Carousel4} alt="即將上綫" />
 
                     </div>
 
-                </Flex>
 
-                <div className="Carousel_div">
 
-                    <Carousel infinite afterChange={onChange} slideNumber={state1} ref={carouselRef}
 
-                        arrowOffset={16} arrowSize={16}>
 
-                        <div className="contentStyle">
 
-                            <img src={Carousel1} alt="即將上綫" />
 
-                            <span>即將上綫</span>
 
-                        </div>
 
-                        <div className="contentStyle">
 
-                            <img src={Carousel1} alt="即將上綫" />
 
-                            <span>即將上綫</span>
 
-                        </div>
 
-                        <div className="contentStyle">
 
-                            <img src={Carousel1} alt="即將上綫" />
 
-                            <span>即將上綫</span>
 
-                        </div>
 
-                        <div className="contentStyle">
 
-                            <img src={Carousel1} alt="即將上綫" />
 
-                            <span>即將上綫</span>
 
-                        </div>
 
-                    </Carousel>
 
-                </div>
 
+                    <div className="contentStyle">
 
+                        <img src={Carousel5} alt="即將上綫" />
 
+                    </div>
 
+                    <div className="contentStyle">
 
+                        <img src={Carousel6} alt="即將上綫" />
 
+                    </div>
 
+                </Carousel>
 
             </div>
 
         </div>
 
     )

+ 8 - 7
src/complates/HeaderRight.js
查看文件 

@@ -1,6 +1,7 @@
 
 import React, { useState } from 'react';
 
 
 import '../asstes/css/header.css'
 
+import { Button } from 'antd';
 
 
 
 function Header() {
 
@@ -14,7 +15,7 @@ function Header() {
 
             <ul >
 
                 <li onClick={() => clickSwitchValue(0)}>
 
                     <a href='#Introduction'>
 
-                        <span>整體介紹</span>
 
+                        <span>產品概覽</span>
 
                         {value === 0 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
 
                     </a>
 
                 </li>
 
@@ -26,21 +27,21 @@ function Header() {
 
                 </li>
 
                 <li onClick={() => clickSwitchValue(2)}>
 
                     <a href='#Example'>
 
-                        <span>使用示例</span>
 
+                        <span>課程案例</span>
 
                         {value === 2 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
 
                     </a>
 
                 </li>
 
                 <li onClick={() => clickSwitchValue(3)}>
 
                     <a href='#CheckeredQuery'>
 
-                        <span>價格查詢</span>
 
+                        <span>配套資源</span>
 
                         {value === 3 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
 
                     </a>
 
                 </li>
 
                 <li onClick={() => clickSwitchValue(4)}>
 
-                    <a href='https://cloud.cocorobo.hk'>
 
-                    <img src={require('../asstes/img/userLogin.png')} alt="" />
 
-                    <span style={{ marginLeft: 8 }}>登入</span>
 
-                    {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
 
+                    <a href='https://pi.cocorobo.hk' Target='_blank'>
 
+                    {/* <img src={require('../asstes/img/userLogin.png')} alt="" /> */}
 
+                    <Button type="primary">開始創作</Button>
 
+                    {/* {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />} */}
 
                     </a>
 
                     
                 </li>

+ 89 - 25
src/complates/Introduction.js
查看文件 

@@ -1,37 +1,101 @@
 
+import {Flex} from "antd"
 
 import '../asstes/css/Introduction.css'
 
-import ExperienceImg3 from '../asstes/img/3.png'
 
-import ExperienceImg6 from '../asstes/img/6.png'
 
+import img1 from '../asstes/img/CocoPi1/icon1.png'
 
+import img2 from '../asstes/img/CocoPi1/icon2.png'
 
+import img3 from '../asstes/img/CocoPi1/icon3.png'
 
+import img4 from '../asstes/img/CocoPi1/icon4.png'
 
+import img5 from '../asstes/img/CocoPi1/icon5.png'
 
+import img6 from '../asstes/img/CocoPi1/icon6.png'
 
+import img7 from '../asstes/img/CocoPi1/icon7.png'
 
+import img8 from '../asstes/img/CocoPi1/icon8.png'
 
+import img9 from '../asstes/img/CocoPi1/icon9.png'
 
+import img10 from '../asstes/img/CocoPi1/icon10.png'
 
+import img11 from '../asstes/img/CocoPi1/icon11.png'
 
+import img12 from '../asstes/img/CocoPi1/icon12.png'
 
+import img13 from '../asstes/img/CocoPi1/icon13.png'
 
+import img14 from '../asstes/img/CocoPi1/icon14.png'
 
+import img15 from '../asstes/img/CocoPi1/icon15.png'
 
 
 function Introduction() {
 
     return (
 
         <div className="Introduction">
 
             <div className="Introduction_top">
 
-                <h1 className='Introduction_top_title'>CocoClass</h1>
 
-                <p>使用生成式AI <br /> 全面重塑<i>教與學模式</i></p>
 
-                <p className='Learning'>GenAI Assissted Teaching and Learning</p>
 
+                <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">
 
-                <div className="Introduction_bottom_left Introduction_bottom_div">
 
-                    <h2>什麽是 <i>CocoClass？</i></h2>
 
-                    <p>
 
-                    CocoClass是由CocoRobo自主研發的電子學習教與學Web平臺，面嚮學校、教師及學生角色，致力於透過技術和學習科學提升教育質量，促進教育公平。
 
-                    </p>
 
-                    <div className='experience'>
 
-                        <img className='experience_img' src={ExperienceImg6} alt="" />
 
-                    </div>
 
-                </div>
 
-                <div className="Introduction_bottom_right Introduction_bottom_div">
 
-                    <div className='Introduction_bottom_right_div'>
 
-                        <h2>GenAI <i>支援教師</i></h2>
 
-                        <p>
 
-                        作爲教師的AI夥伴，CocoClass使用GenAI提供教學設計、實施、教學分析與學習評估支援服務，通過場景性的應用，針對性地支援教師探索更具科學性、探究性的課程與教學。
 
-                        </p>
 
-                        <div className='experience'>
 
-                            <img className='experience_img' src={ExperienceImg3} alt="" />
 
-                        </div>
 
-                    </div>
 
-                </div>
 
+                <h2>人工智能</h2>
 
+                <p className="Introduction_bottom_span">判別式人工智能</p>
 
+                <Flex>
 
+                    <div>
 
+                        <img src={img1} alt="" />
 
+                        <p>機器學習</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img2} alt="" />
 
+                        <p>計算機視覺</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img3} alt="" />
 
+                        <p>語音識別</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img4} alt="" />
 
+                        <p>語音合成</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img5} alt="" />
 
+                        <p>機器翻譯</p>
 
+                    </div>
 
+                </Flex>
 
+                <p className="Introduction_bottom_span">判別式人工智能</p>
 
+                <Flex>
 
+                    <div>
 
+                        <img src={img6} alt="" />
 
+                        <p>文本生成</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img7} alt="" />
 
+                        <p>語音對話</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img8} alt="" />
 
+                        <p>語音生圖</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img9} alt="" />
 
+                        <p>語音生圖</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img10} alt="" />
 
+                        <p>智能體</p>
 
+                    </div>
 
+                </Flex>
 
+                <h2 style={{marginTop:100}}>物聯網</h2>
 
+                <Flex style={{marginTop:70}}>
 
+                    <div>
 
+                        <img src={img11} alt="" />
 
+                        <p>雲端平台</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img12} alt="" />
 
+                        <p>感應系統</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img13} alt="" />
 
+                        <p>即時圖傳</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img14} alt="" />
 
+                        <p>藍牙通訊</p>
 
+                    </div>
 
+                    <div>
 
+                        <img src={img15} alt="" />
 
+                        <p>Wi-Fi聯網</p>
 
+                    </div>
 
+                </Flex>
 
             </div>
 
         </div>
 
     )

+ 61 - 55
src/complates/ProcessFlow.js
查看文件 

@@ -1,64 +1,70 @@
 
-import { Card } from 'antd';
 
+import React, { useEffect, useState } from 'react';
 
+// import { Flex } from 'antd';
 
 import '../asstes/css/ProcessFlow.css'
 
-import img1 from '../asstes/img/011.png'
 
+import img1 from '../asstes/img/cocopi1.png'
 
+import img2 from '../asstes/img/cocopi2.png'
 
+import img3 from '../asstes/img/cocopi3.png'
 
+import img4 from '../asstes/img/cocopi4.png'
 
+
 
 
 function ProcessFlow() {
 
+    const [scrollValue, setscrollValue] = useState(0)
 
+    const handleScroll = e => {
 
+        let val = parseInt(e.target.scrollTop/700)
 
+        setscrollValue(val)
 
+    }
 
+    useEffect(() => {
 
+        document.getElementById("anchor_right").addEventListener('scroll', handleScroll);
 
+
 
+        return () => {
 
+            document.getElementById("anchor_right").removeEventListener('scroll', handleScroll);
 
+        };
 
+    }, []);
 
+
 
+    const ScrollVal = (val)=>{
 
+        setscrollValue(val)
 
+        document.getElementById("anchor_right").scrollTop = val*700
 
+    }
 
     return (
 
         <div className='ProcessFlow'>
 
-            <Card
 
-                style={{
 
-                    width: '48%',
 
-                }}
 
-            >
 
-                <div className='ProcessFlow_card'>
 
-                    <span className='ProcessFlow_card_title'>Expand</span>
 
-                    <span className='ProcessFlow_card_num'>01</span>
 
-                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
 
-                </div>
 
-                <p className='english_text'>Envision and develop innovative instructional plans and themes.</p>
 
-                <p className='ProcessFlow_text'>CocoClass教學設計能夠根據教學需求和資料庫，創建符合教師要求的課堂設計、電子學習工作紙、評估題目，並自動檢索相關網絡資源。</p>
 
-            </Card>
 
-            <Card
 
-                style={{
 
-                    width: '48%',
 
-                }}
 
-            >
 
-                <div className='ProcessFlow_card'>
 
-                    <span className='ProcessFlow_card_title'>Activate</span>
 
-                    <span className='ProcessFlow_card_num'>02</span>
 
-                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
 
-                </div>
 
-                <p className='english_text'>Use AI-driven analytics to contemplate the success and shortcomings of your instruction.</p>
 
-                <p className='ProcessFlow_text'>CocoClass課堂助手能夠支援教師通過GenAI調取課堂工具，依據課程内容提供拓展性的教學資源，依據課堂實施數據補充測試題目，以適應不斷變化的教學動態。</p>
 
-            </Card>
 
-            <Card
 
-                style={{
 
-                    marginTop:40,
 
-                    width: '48%',
 
-                }}
 
-            >
 
-                <div className='ProcessFlow_card'>
 
-                    <span className='ProcessFlow_card_title'>Reflect</span>
 
-                    <span className='ProcessFlow_card_num'>03</span>
 
-                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
 
-                </div>
 
-                <p className='english_text'>Use AI-driven analytics to contemplate the success and shortcomings of your instruction.</p>
 
-                <p className='ProcessFlow_text'>CocoClass課堂教學分析使用若干理論模型，透過教學錄音與文本分析，對教師教學行爲（策略）、教學内容、師生互動、學生學習等進行分析與建議。</p>
 
-            </Card>
 
-            <Card
 
-                style={{
 
-                    marginTop:40,
 
-                    width: '48%',
 
-                }}
 
-            >
 
-                <div className='ProcessFlow_card'>
 
-                    <span className='ProcessFlow_card_title'>Understand</span>
 
-                    <span className='ProcessFlow_card_num'>04</span>
 
-                    <img className='ProcessFlow_img_back' src={img1} alt=''/>
 
+            <h1>產品特點</h1>
 
+            <div className='anchor'>
 
+                <div className='anchor_flex'>
 
+                    <div className='anchor_left'>
 
+                        <div onClick={()=>ScrollVal(0)} className={scrollValue === 0 && "anchor_left_div"}>
 
+                            <span>高性價比</span><br />
 
+                            <span>Economical Choice</span>
 
+                        </div>
 
+                        <div onClick={()=>ScrollVal(1)} className={scrollValue === 1 && "anchor_left_div"}>
 
+                            <span>高集成度</span><br />
 
+                            <span>Highly Integrated</span>
 
+                        </div>
 
+                        <div onClick={()=>ScrollVal(2)} className={scrollValue === 2 && "anchor_left_div"}>
 
+                            <span>易用性</span><br />
 
+                            <span>Usability</span>
 
+                        </div>
 
+                        <div onClick={()=>ScrollVal(3)} className={scrollValue === 3 && "anchor_left_div"}>
 
+                            <span>開放性</span><br />
 
+                            <span>Openness</span>
 
+                        </div>
 
+                    </div>
 
+                    <div className='anchor_right' id='anchor_right'>
 
+                        <div id='aaa' style={{ width: "100%" }}>
 
+                            <img src={img1} alt='' />
 
+                        </div>
 
+                        <div id='bbb' style={{ width: "100%" }}>
 
+                            <img src={img2} alt='' />
 
+                        </div>
 
+                        <div id='ccc' style={{ width: "100%" }}>
 
+                            <img src={img3} alt='' />
 
+                        </div>
 
+                        <div id='ddd' style={{ width: "100%" }}>
 
+                            <img src={img4} alt='' />
 
+                        </div>
 
+
 
+                    </div>
 
                 </div>
 
-                <p className='english_text'>Leverage GenAI to gain deep insights into student learning outcomes and progress.</p>
 
-                <p className='ProcessFlow_text'>CocoClass學習評估使用GenAI一體化功能來進行評估，根據學生的學習過程記錄和課程成果，使用AI分析學習數據，並通過人工與AI綜合輸出評估與反饋。</p>
 
-            </Card>
 
+            </div>
 
         </div>
 
     )
 
 }

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

@@ -3,7 +3,7 @@ import { Modal, Flex, Input, Typography, Checkbox, Button, Collapse } from "antd
 
 import "../asstes/css/Sidebar.css"
 
 
 import Img1 from '../asstes/img/goUpper.png'
 
-import Img2 from '../asstes/img/任务卡片.png'
 
+// import Img2 from '../asstes/img/任务卡片.png'
 
 import Img3 from '../asstes/img/对话.png'
 
 import Img4 from '../asstes/img/wenti.png'
 
 import TermsService from "./TermsService";
 
@@ -33,8 +33,8 @@ function Sidebar() {
 
     const items = [
 
         {
 
             key: '1',
 
-            label: 'CocoClass的GenAI功能使用的是什麽大語言模型？',
 
-            children: <p>CocoClass（HK）的所有GenAI功能均接入OpenAI開發的Chat GPT-4o模型，以及Anthropic開發的Claude 3 Sonnet模型。</p>,
 
+            label: 'CocoPi 通過什麽方式連接',
 
+            children: <p>CocoPi 基於Chrome ADB 服務連接，使板子和硬件進行簡單通訊。</p>,
 
         }
 
     ];
 
     const onChangeCollapse = (key) => {
 
@@ -49,11 +49,11 @@ function Sidebar() {
 
                     <span>回到頂部</span>
 
                 </a>
 
             </div>
 
-            <div onClick={() => setIsModalOpen1(true)}>
 
+            {/* <div onClick={() => setIsModalOpen1(true)}>
 
                 <img src={Img2} alt="申請試用" />
 
                 <br />
 
                 <span>申請試用</span>
 
-            </div>
 
+            </div> */}
 
             <div>
 
                 <a href="#Contact">
 
                     <img src={Img3} alt="聯絡我們" />

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