Compare commits
29 Commits
| Author | SHA1 | Date |
|---|---|---|
 Jzx201211
|
b19b3ab001 | 4 years ago |
|
Jzx201211
|
d03ef59543 | 4 years ago |
|
Jzx201211
|
49d13b611b | 4 years ago |
|
Jzx201211
|
db517ee4eb | 4 years ago |
|
Jzx201211
|
7d1bbac23a | 4 years ago |
|
Jzx201211
|
dee8c115d7 | 4 years ago |
|
Jzx201211
|
a2ca28a0f0 | 4 years ago |
|
Jzx201211
|
bbcd701863 | 4 years ago |
|
Jzx201211
|
ca27ae5a97 | 4 years ago |
|
Jzx201211
|
0fddd25700 | 4 years ago |
|
Jzx201211
|
e3755fb532 | 4 years ago |
|
Jzx201211
|
47ad469ddd | 4 years ago |
|
Jzx201211
|
1dc734f1c8 | 4 years ago |
|
Jzx201211
|
a4a61bfe79 | 4 years ago |
|
Jzx201211
|
908501038f | 4 years ago |
|
Jzx201211
|
d5433865c9 | 4 years ago |
|
Jzx201211
|
a8c8f41026 | 4 years ago |
|
Jzx201211
|
973b619af3 | 4 years ago |
|
Jzx201211
|
af4ce219c8 | 4 years ago |
|
Jzx201211
|
561fdea184 | 4 years ago |
|
Jzx201211
|
876d16e06b | 4 years ago |
|
Jzx201211
|
1265521b95 | 4 years ago |
|
Jzx201211
|
70f58099b5 | 4 years ago |
|
Jzx201211
|
cc0ecdc5f0 | 4 years ago |
|
Jzx201211
|
f0b97c8cb3 | 4 years ago |
|
Jzx201211
|
c4a8840ac2 | 4 years ago |
|
Jzx201211
|
754a49fa96 | 4 years ago |
|
Jzx201211
|
92a21c0edd | 4 years ago |
|
Jzx201211
|
15b931d884 | 4 years ago |
|
After Width: | Height: | Size: 503 B |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,523 @@
|
|||||||
|
*{
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
transition: all .5s;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 50px;
|
||||||
|
line-height: 64px;
|
||||||
|
background: #001529;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.menu ul{
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.menu ul li{
|
||||||
|
margin-right: 30px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.menu ul li:hover{
|
||||||
|
color: #b7b7b7;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: #1890ff !important;
|
||||||
|
}
|
||||||
|
.menu ul a{
|
||||||
|
color: white;
|
||||||
|
margin-right: 30px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.menu ul a:hover{
|
||||||
|
color: #b7b7b7;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.center2{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 1300px;
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 90px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.center2_box1{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #34495e;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.center2_box2{
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 200;
|
||||||
|
color: #686f9a;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.center2_box3{
|
||||||
|
padding-left: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
height: 46px;
|
||||||
|
width: 734px;
|
||||||
|
}
|
||||||
|
.center2 ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.center2_box3 li{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #34495e;
|
||||||
|
padding: 10px 30px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.active_xuanxiang{
|
||||||
|
color: #1890ff !important;
|
||||||
|
border-color: #1890ff !important;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.center2_page{
|
||||||
|
width: 1300px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.center2_page1_left{
|
||||||
|
width: 384px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-top: 42px;
|
||||||
|
padding-left: 50px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center2_page1_left h3{
|
||||||
|
font-size: 18px;
|
||||||
|
color: #34495e;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.center2_page1_left p{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.center2_page1_left p img{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.center2_page1_left p span{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #667a8d;
|
||||||
|
}
|
||||||
|
.center2_page1_left_bottom{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 34px;
|
||||||
|
}
|
||||||
|
.center2_page1_left_bottom_box1{
|
||||||
|
width: 137px;
|
||||||
|
height: 40px;
|
||||||
|
background: #377dff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.center2_page1_left_bottom_box2{
|
||||||
|
width: 137px;
|
||||||
|
height: 40px;
|
||||||
|
background: #dfe6ff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #377dff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center2_page1_left_bottom_box2 i{
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
.center2_page1_right{
|
||||||
|
width: 915px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 41px;
|
||||||
|
height: 445px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center2_page1_right img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.center2_page1_right video{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
|
left: 102px;
|
||||||
|
top: 41px;
|
||||||
|
width: 730px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main{
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.center3{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center3_main{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 1200px;
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.center3_main h2{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #34495e;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.center3_main h5{
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 200;
|
||||||
|
color: #686f9a;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.center3_main_box{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.center3_main_box_left{
|
||||||
|
height: 598px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.center3_main_box_right{
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 380px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.center3_main_box_left_box{
|
||||||
|
width: 137px;
|
||||||
|
height: 40px;
|
||||||
|
background: #377dff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.center3_main_box_right_box1{
|
||||||
|
background: black;
|
||||||
|
width: 180px;
|
||||||
|
height: 130px;
|
||||||
|
background: rgba(104,111,154,.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 20px 20px 0;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center3_main_box_right_box2{
|
||||||
|
background: black;
|
||||||
|
width: 180px;
|
||||||
|
height: 130px;
|
||||||
|
background: rgba(104,111,154,.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center3_main_box_right a img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center4{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center4_main{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 1300px;
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center4_main h2{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #34495e;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.center4_main h5{
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 200;
|
||||||
|
color: #686f9a;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.center4_main_box1{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.center4_main_box1_left{
|
||||||
|
width: 137px;
|
||||||
|
height: 40px;
|
||||||
|
background: #dfe6ff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #377dff;
|
||||||
|
margin-right: 20px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.center4_main_box1_right{
|
||||||
|
width: 137px;
|
||||||
|
height: 40px;
|
||||||
|
background: #377dff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center4_main_box1_right i{
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 15px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.center4_main_box2{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.center4_main_box2_box{
|
||||||
|
width: 426px;
|
||||||
|
height: 176px;
|
||||||
|
border-radius: 22px;
|
||||||
|
padding-top: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.center4_main_box2_box img{
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.center4_main_box2_box div{
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
.center4_main_box2_box div h4{
|
||||||
|
width: 235px;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #34495e;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.center4_main_box2_box div h6{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #6d7278;
|
||||||
|
line-height: 24px;
|
||||||
|
width: 238px;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.center4_main_box2_box:hover{
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
.center5{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center5_main{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 1300px;
|
||||||
|
padding-top: 80px;
|
||||||
|
padding-bottom: 120px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center5_main h2{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #34495e;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.center5_main h5{
|
||||||
|
height: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 200;
|
||||||
|
color: #686f9a;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.center5_main_box{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center5_main_box p{
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #667a8d;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.center5_main_box p span{
|
||||||
|
color: #335eea;
|
||||||
|
}
|
||||||
|
.center5_main_box_box1{
|
||||||
|
margin-top: 81px;
|
||||||
|
}
|
||||||
|
.center5_main_box_box1 img{
|
||||||
|
margin-right: 42px;
|
||||||
|
}
|
||||||
|
.center5_main_box_box2{
|
||||||
|
margin-top: 54px;
|
||||||
|
}
|
||||||
|
.center5_main_box_box2 img{
|
||||||
|
margin-right: 45px;
|
||||||
|
}
|
||||||
|
.center5_main_box_box3{
|
||||||
|
width: 137px;
|
||||||
|
height: 40px;
|
||||||
|
background: #377dff;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 88px;
|
||||||
|
}
|
||||||
|
.center6{
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.center6_main{
|
||||||
|
padding: 90px 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
background: #242424;
|
||||||
|
min-width: 1200px;
|
||||||
|
}
|
||||||
|
.center6_main_box{
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.center6_main_box .title{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ddd;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.center6_main_box a{
|
||||||
|
display: block;
|
||||||
|
color: #bbb;
|
||||||
|
line-height: 34px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.center6_main_box2{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 290px;
|
||||||
|
margin-top: -12px;
|
||||||
|
}
|
||||||
|
.center6_main_box2 p{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #bbb;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-weight: 300;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.center6_main_box2 ul{
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.center6_main_box2 ul li:first-child{
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
.center6_main_box2 ul li span{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #bbb;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.center6_main_box2 ol{
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0;
|
||||||
|
height: 108px;
|
||||||
|
}
|
||||||
|
.center6_main_box2 ol li{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center6_main_box2 ol li a{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #bbb;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
@ -1,32 +1,14 @@
|
|||||||
import styles from "./index.less";
|
import styles from "./index.less";
|
||||||
import { Carousel } from "antd";
|
import { Carousel } from "antd";
|
||||||
|
import Menu from "./menu/menu.js";
|
||||||
const contentStyle = {
|
import IndexRouter from "./router/IndexRouter.js";
|
||||||
height: "160px",
|
|
||||||
color: "#fff",
|
|
||||||
lineHeight: "160px",
|
|
||||||
textAlign: "center",
|
|
||||||
background: "#364d79",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function IndexPage() {
|
export default function IndexPage() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h1 className={styles.title}>Page index</h1>
|
<IndexRouter>
|
||||||
<Carousel autoplay>
|
<Menu></Menu>
|
||||||
<div>
|
</IndexRouter>
|
||||||
<h3 style={contentStyle}>1</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 style={contentStyle}>2</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 style={contentStyle}>3</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 style={contentStyle}>4</h3>
|
|
||||||
</div>
|
|
||||||
</Carousel>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,63 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import "../index.css";
|
||||||
|
import Showye from "../shouye/shouye.js";
|
||||||
|
import Shijiankecheng from "../shijiankecheng/shijiankecheng";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
|
||||||
|
export default class Menu extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="menu">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/shouye" activeClassName="active">
|
||||||
|
首页
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/shijiankecheng" activeClassName="active">
|
||||||
|
实践课程
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/shijianxiangmu" activeClassName="active">
|
||||||
|
实践项目
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/jiaoxueketang" activeClassName="active">
|
||||||
|
教学课堂
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/zaixianjingsai" activeClassName="active">
|
||||||
|
在线竞赛
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/jiaoxueanli" activeClassName="active">
|
||||||
|
教学案例
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/jiaoliuwenda" activeClassName="active">
|
||||||
|
交流问答
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/daxuekaiyuan" activeClassName="active">
|
||||||
|
大学开源
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink to="/gongchengrenzheng" activeClassName="active">
|
||||||
|
工程认证
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
|
||||||
|
import Shouye from "../shouye/shouye";
|
||||||
|
import Shijiankecheng from "../shijiankecheng/shijiankecheng";
|
||||||
|
|
||||||
|
export default class IndexRouter extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<HashRouter>
|
||||||
|
{this.props.children}
|
||||||
|
<Switch>
|
||||||
|
<Route path="/shouye" component={Shouye}></Route>
|
||||||
|
<Route path="/shijiankecheng" component={Shijiankecheng}></Route>
|
||||||
|
<Redirect from="/" to="/shouye"></Redirect>
|
||||||
|
</Switch>
|
||||||
|
</HashRouter>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Path from "./path2/path";
|
||||||
|
import Center6 from "../shouye/component/tg_dibu/center6";
|
||||||
|
|
||||||
|
export default class Path2 extends Component {
|
||||||
|
render() {
|
||||||
|
console.log(this.props);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Path id={this.props.match.params.id}></Path>
|
||||||
|
<Center6></Center6>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Box2 extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
list: [],
|
||||||
|
color: "",
|
||||||
|
color2: -1,
|
||||||
|
};
|
||||||
|
fetch("https://test-data.educoder.net/api/disciplines.json?source=subject")
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
list: data.disciplines,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleclick2(t, i) {
|
||||||
|
this.props.eventbox(t);
|
||||||
|
this.setState({
|
||||||
|
color2: i,
|
||||||
|
color: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleclick(e, v, t, i, o) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.event(v, t);
|
||||||
|
this.setState({
|
||||||
|
color: i,
|
||||||
|
color2: o,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleclick3() {
|
||||||
|
this.props.eventall();
|
||||||
|
this.setState({
|
||||||
|
color2: -1,
|
||||||
|
color: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="kc_main_box2">
|
||||||
|
<div className="kc_main_box2_contain">
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
onClick={() => this.handleclick3()}
|
||||||
|
className={this.state.color2 === -1 ? "kc_active" : ""}
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</li>
|
||||||
|
{this.state.list.map((item, index) => (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => this.handleclick2(item.id, index)}
|
||||||
|
className={this.state.color2 === index ? "kc_active" : ""}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
<div className="kc_main_box2_contain_li">
|
||||||
|
<div className="kc_main_box2_contain_li_ul">
|
||||||
|
{item.sub_disciplines.map((item1, index2) => (
|
||||||
|
<div
|
||||||
|
className="kc_main_box2_contain_li_ul_li"
|
||||||
|
style={{
|
||||||
|
color: this.state.color === item1.id ? "#4cacff" : "",
|
||||||
|
}}
|
||||||
|
key={item1.id}
|
||||||
|
onClick={(e) =>
|
||||||
|
this.handleclick(
|
||||||
|
e,
|
||||||
|
item.id,
|
||||||
|
item1.id,
|
||||||
|
item1.id,
|
||||||
|
index
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item1.name}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,290 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Box2 from "./box2";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
|
||||||
|
export default class Box4 extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
map: [],
|
||||||
|
current: 1,
|
||||||
|
button: "new",
|
||||||
|
color: 0,
|
||||||
|
id1: "",
|
||||||
|
id2: "",
|
||||||
|
};
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
this.state.button +
|
||||||
|
"&page=" +
|
||||||
|
1 +
|
||||||
|
"&limit=16&keyword=&discipline_id=&sub_discipline_id="
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.subjects);
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ background: "#f8f8f8" }}>
|
||||||
|
<Box2
|
||||||
|
event={this.hadnleClick_box2}
|
||||||
|
eventall={this.handleClick_box2_all}
|
||||||
|
eventbox={this.hadnleClick_box2_part}
|
||||||
|
></Box2>
|
||||||
|
<div className="kc_main_box3">
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
this.state.color === 0 ? "kc_main_box3_box1" : "kc_main_box3_box2"
|
||||||
|
}
|
||||||
|
onClick={this.handleClick_zuixin}
|
||||||
|
>
|
||||||
|
最新
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
this.state.color === 1 ? "kc_main_box3_box1" : "kc_main_box3_box2"
|
||||||
|
}
|
||||||
|
onClick={this.handleClick_zuire}
|
||||||
|
>
|
||||||
|
最热
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="kc_main_box4">
|
||||||
|
{this.state.map.map((item, index) => (
|
||||||
|
<NavLink
|
||||||
|
to={"/shijiankecheng/path2/" + item.identifier}
|
||||||
|
key={item.id}
|
||||||
|
className="kc_main_box4_box"
|
||||||
|
style={{ color: "black", marginRight: index % 4 == 3 ? "0" : "" }}
|
||||||
|
>
|
||||||
|
<div className="kc_main_box4_box_shang">
|
||||||
|
<img
|
||||||
|
src={"https://testali-cdn.educoder.net/" + item.image_url}
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div className="kc_main_box4_box_xia">
|
||||||
|
<div className="kc_main_box4_box_xia_box1">{item.name}</div>
|
||||||
|
<div className="kc_main_box4_box_xia_box2">
|
||||||
|
<div className="kc_main_box4_box_xia_box2_box">
|
||||||
|
{item.stages_count}
|
||||||
|
</div>
|
||||||
|
<div className="kc_main_box4_box_xia_box2_box">
|
||||||
|
{item.members_count}
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
(console.log("active"),
|
||||||
|
this.state.map.length === 0 ? console.log("y") : "")
|
||||||
|
}
|
||||||
|
<div className="kc_main_box5">
|
||||||
|
<button
|
||||||
|
onClick={() => this.handleClick_shang(this.state.current)}
|
||||||
|
disabled={this.state.current === 1 ? "disabled" : ""}
|
||||||
|
className={
|
||||||
|
this.state.current === 1 ? "button_color_no" : "button_color_yes"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
style={{ marginLeft: "8px" }}
|
||||||
|
onClick={() => this.handleClick_xia(this.state.current)}
|
||||||
|
disabled={this.state.map.length < 16 ? "disabled" : ""}
|
||||||
|
className={
|
||||||
|
this.state.map.length < 16
|
||||||
|
? "button_color_no"
|
||||||
|
: "button_color_yes"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
hadnleClick_box2_part = (disciplines_id) => {
|
||||||
|
this.setState({
|
||||||
|
map: [],
|
||||||
|
id1: disciplines_id,
|
||||||
|
current: 1,
|
||||||
|
});
|
||||||
|
var b = this.state.button;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
1 +
|
||||||
|
"&limit=16&keyword=&discipline_id=" +
|
||||||
|
disciplines_id +
|
||||||
|
"&sub_discipline_id="
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
hadnleClick_box2 = (disciplines_id, sub_disciplines_id) => {
|
||||||
|
this.setState({
|
||||||
|
map: [],
|
||||||
|
id1: disciplines_id,
|
||||||
|
id2: sub_disciplines_id,
|
||||||
|
current: 1,
|
||||||
|
});
|
||||||
|
var b = this.state.button;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
1 +
|
||||||
|
"&limit=16&keyword=&discipline_id=" +
|
||||||
|
disciplines_id +
|
||||||
|
"&sub_discipline_id=" +
|
||||||
|
sub_disciplines_id
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleClick_zuixin = () => {
|
||||||
|
this.setState({
|
||||||
|
color: 0,
|
||||||
|
button: "new",
|
||||||
|
map: [],
|
||||||
|
});
|
||||||
|
var v = this.state.current;
|
||||||
|
var b = "new";
|
||||||
|
var id1 = this.state.id1;
|
||||||
|
var id2 = this.state.id2;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
v +
|
||||||
|
"&limit=16&keyword=&discipline_id=" +
|
||||||
|
id1 +
|
||||||
|
"&sub_discipline_id=" +
|
||||||
|
id2
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleClick_zuire = () => {
|
||||||
|
this.setState({
|
||||||
|
color: 1,
|
||||||
|
button: "",
|
||||||
|
map: [],
|
||||||
|
});
|
||||||
|
var v = this.state.current;
|
||||||
|
var b = "";
|
||||||
|
var id1 = this.state.id1;
|
||||||
|
var id2 = this.state.id2;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
v +
|
||||||
|
"&limit=16&keyword=&discipline_id=" +
|
||||||
|
id1 +
|
||||||
|
"&sub_discipline_id=" +
|
||||||
|
id2
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleClick_xia(v) {
|
||||||
|
this.setState({
|
||||||
|
current: this.state.current + 1,
|
||||||
|
map: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
var b = this.state.button;
|
||||||
|
var id1 = this.state.id1;
|
||||||
|
var id2 = this.state.id2;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
(v + 1) +
|
||||||
|
"&limit=16&keyword=&discipline_id=" +
|
||||||
|
id1 +
|
||||||
|
"&sub_discipline_id=" +
|
||||||
|
id2
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleClick_shang(v) {
|
||||||
|
this.setState({
|
||||||
|
current: this.state.current - 1,
|
||||||
|
map: [],
|
||||||
|
});
|
||||||
|
var b = this.state.button;
|
||||||
|
var id1 = this.state.id1;
|
||||||
|
var id2 = this.state.id2;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
(v - 1) +
|
||||||
|
"&limit=16&keyword=&discipline_id=" +
|
||||||
|
id1 +
|
||||||
|
"&sub_discipline_id=" +
|
||||||
|
id2
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleClick_box2_all = () => {
|
||||||
|
this.setState({
|
||||||
|
map: [],
|
||||||
|
id1: "",
|
||||||
|
id2: "",
|
||||||
|
current: 1,
|
||||||
|
});
|
||||||
|
var b = this.state.button;
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
|
||||||
|
b +
|
||||||
|
"&page=" +
|
||||||
|
1 +
|
||||||
|
"&limit=16&keyword=&discipline_id=&sub_discipline_id="
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
map: data.subjects,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Quanbu from "./kecheng/quanbu";
|
||||||
|
import Shijianxiangmu from "./kecheng/shijianxiangmu";
|
||||||
|
import Shipingxiangmu from "./kecheng/shipingxiangmu";
|
||||||
|
import Jiaoxuekejian from "./kecheng/jiaoxuekejian";
|
||||||
|
import Taolun from "./kecheng/taolun";
|
||||||
|
|
||||||
|
export default class Kecheng extends Component {
|
||||||
|
state = {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
name: "全部",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "实践项目",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "视频项目",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "教学课件",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "讨论",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
current: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClick(value) {
|
||||||
|
this.setState({
|
||||||
|
current: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="left_three">
|
||||||
|
<div className="left_three_box">
|
||||||
|
{this.state.list.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className={
|
||||||
|
this.state.current === index
|
||||||
|
? "left_three_box_box_active"
|
||||||
|
: "left_three_box_box"
|
||||||
|
}
|
||||||
|
onClick={() => this.handleClick(index)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{this.state.current === 0 && <Quanbu id={this.props.id}></Quanbu>}
|
||||||
|
{this.state.current === 1 && (
|
||||||
|
<Shijianxiangmu id={this.props.id}></Shijianxiangmu>
|
||||||
|
)}
|
||||||
|
{this.state.current === 2 && (
|
||||||
|
<Shipingxiangmu id={this.props.id}></Shipingxiangmu>
|
||||||
|
)}
|
||||||
|
{this.state.current === 3 && (
|
||||||
|
<Jiaoxuekejian id={this.props.id}></Jiaoxuekejian>
|
||||||
|
)}
|
||||||
|
{this.state.current === 4 && <Taolun id={this.props.id}></Taolun>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Jiaoxuekejian extends Component {
|
||||||
|
render() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Quanbu extends Component {
|
||||||
|
state = {
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
componentDidMount() {
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/stages.json?subject_id=" +
|
||||||
|
this.props.id
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.stages);
|
||||||
|
this.setState({
|
||||||
|
list: data.stages,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{this.state.list.map((item) => (
|
||||||
|
<div key={item.stage_id} className="zhangjie">
|
||||||
|
<div className="zhangjie_wenzi">
|
||||||
|
<div className="zhangjie_wenzi_box">{item.stage_name}</div>
|
||||||
|
<div className="zhangjie_wenzi_box">{item.stage_description}</div>
|
||||||
|
{item.items.map((item2) => (
|
||||||
|
<div className="zhangjie_wenzi_box" key={item2.id}>
|
||||||
|
{item2.name}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Shijianxiangmu extends Component {
|
||||||
|
render() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Shipingxiangmu extends Component {
|
||||||
|
render() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Taolun extends Component {
|
||||||
|
render() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Tongguan from "./paihangbang/tongguan";
|
||||||
|
import Shipingxuexi from "./paihangbang/shipingxuexi";
|
||||||
|
import Xiazaiziyuan from "./paihangbang/xiazaiziyuan";
|
||||||
|
import Hudongtaolun from "./paihangbang/hudongtaolun";
|
||||||
|
|
||||||
|
export default class Paihang extends Component {
|
||||||
|
state = {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
name: "通关榜",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "视频学习榜",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "下载资源榜",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "互动讨论榜",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
current: 0,
|
||||||
|
};
|
||||||
|
handleClick(index) {
|
||||||
|
this.setState({
|
||||||
|
current: index,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="paihang">
|
||||||
|
<div className="paihang_shang">
|
||||||
|
{this.state.list.map((item, index) => (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => this.handleClick(index)}
|
||||||
|
className={this.state.current === index ? "li_active" : ""}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{this.state.current === 0 && <Tongguan id={this.props.id}></Tongguan>}
|
||||||
|
{this.state.current === 1 && (
|
||||||
|
<Shipingxuexi id={this.props.id}></Shipingxuexi>
|
||||||
|
)}
|
||||||
|
{this.state.current === 2 && (
|
||||||
|
<Xiazaiziyuan id={this.props.id}></Xiazaiziyuan>
|
||||||
|
)}
|
||||||
|
{this.state.current === 3 && (
|
||||||
|
<Hudongtaolun id={this.props.id}></Hudongtaolun>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Xiazaiziyuan extends Component {
|
||||||
|
state = {
|
||||||
|
number: 1,
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_discusses.json?page=" +
|
||||||
|
this.state.number
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="paihang_style">
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>排名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>姓名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>发帖数</div>
|
||||||
|
</div>
|
||||||
|
{this.state.list.map((item) => (
|
||||||
|
<div className="paihang_style" key={item.user_id}>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> {item.num}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="tongguan_xia">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_shang(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.number === 1 ? "button_color_no" : "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.number === 1 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_xia(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.list.length < 10
|
||||||
|
? "button_color_no"
|
||||||
|
: "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.list.length < 10 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handleClick_shang(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number - 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_discusses.json?page=" +
|
||||||
|
(number - 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleClick_xia(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number + 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_discusses.json?page=" +
|
||||||
|
(number + 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Shipingxuexi extends Component {
|
||||||
|
state = {
|
||||||
|
number: 1,
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
componentDidMount() {
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_videos.json?page=" +
|
||||||
|
this.state.number
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="paihang_style">
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>排名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>姓名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> 累计学习时长</div>
|
||||||
|
</div>
|
||||||
|
{this.state.list.map((item) => (
|
||||||
|
<div className="paihang_style" key={item.user_id}>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> {item.num}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="tongguan_xia">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_shang(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.number === 1 ? "button_color_no" : "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.number === 1 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_xia(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.list.length < 10
|
||||||
|
? "button_color_no"
|
||||||
|
: "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.list.length < 10 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handleClick_shang(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number - 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_videos.json?page=" +
|
||||||
|
(number - 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleClick_xia(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number + 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_videos.json?page=" +
|
||||||
|
(number + 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Tongguan extends Component {
|
||||||
|
state = {
|
||||||
|
number: 1,
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
componentDidMount() {
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_shixuns_passed.json?page=" +
|
||||||
|
this.state.number
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="paihang_style">
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>排名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>姓名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> 通关关卡数</div>
|
||||||
|
</div>
|
||||||
|
{this.state.list.map((item) => (
|
||||||
|
<div className="paihang_style" key={item.user_id}>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> {item.num}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="tongguan_xia">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_shang(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.number === 1 ? "button_color_no" : "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.number === 1 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_xia(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.list.length < 10
|
||||||
|
? "button_color_no"
|
||||||
|
: "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.list.length < 10 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handleClick_shang(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number - 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_shixuns_passed.json?page=" +
|
||||||
|
(number - 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleClick_xia(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number + 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_shixuns_passed.json?page=" +
|
||||||
|
(number + 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Xiazaiziyuan extends Component {
|
||||||
|
state = {
|
||||||
|
number: 1,
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
componentDidMount() {
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_pdf_attachments.json?page=" +
|
||||||
|
this.state.number
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="paihang_style">
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>排名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>姓名</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> 下载资源次数</div>
|
||||||
|
</div>
|
||||||
|
{this.state.list.map((item) => (
|
||||||
|
<div className="paihang_style" key={item.user_id}>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
|
||||||
|
<div style={{ flex: " 1 1 0%" }}> {item.num}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="tongguan_xia">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_shang(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.number === 1 ? "button_color_no" : "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.number === 1 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClick_xia(this.state.number);
|
||||||
|
}}
|
||||||
|
className={
|
||||||
|
this.state.list.length < 10
|
||||||
|
? "button_color_no"
|
||||||
|
: "button_color_yes"
|
||||||
|
}
|
||||||
|
disabled={this.state.list.length < 10 ? "disabled" : ""}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handleClick_shang(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number - 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_pdf_attachments.json?page=" +
|
||||||
|
(number - 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleClick_xia(number) {
|
||||||
|
this.setState({
|
||||||
|
number: this.state.number + 1,
|
||||||
|
list: [],
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
"/study_ranking_pdf_attachments.json?page=" +
|
||||||
|
(number + 1)
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.data);
|
||||||
|
this.setState({
|
||||||
|
list: data.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,145 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Zhangjie from "./zhangjie";
|
||||||
|
import marked from "marked";
|
||||||
|
|
||||||
|
const bgImg = {
|
||||||
|
bg: {
|
||||||
|
backgroundImage: 'url("")',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default class Path extends Component {
|
||||||
|
state = {
|
||||||
|
list: [],
|
||||||
|
list2: [],
|
||||||
|
url: "",
|
||||||
|
};
|
||||||
|
componentDidMount() {
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
".json?identifier=" +
|
||||||
|
this.props.id
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
this.setState({
|
||||||
|
list: data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
fetch(
|
||||||
|
"https://test-data.educoder.net/api/paths/" +
|
||||||
|
this.props.id +
|
||||||
|
".json?identifier=" +
|
||||||
|
this.props.id
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data.attachments);
|
||||||
|
this.setState({
|
||||||
|
list2: data.attachments,
|
||||||
|
});
|
||||||
|
if (typeof this.state.list2[0]?.url === "undefined") {
|
||||||
|
this.setState({
|
||||||
|
url: "https://test.educoder.net/static/banner.4c45dd73.png",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
url: "https://test-data.educoder.net" + this.state.list2[0].url,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(this.state.url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// style={{backgroundImage:this.state.list2!=[]?`url("https://test-data.educoder.net"${this.state.list2[0].url})`:''}}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="path">
|
||||||
|
<div
|
||||||
|
className="path_box"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${this.state.url})`,
|
||||||
|
backgroundSize: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="path_top">
|
||||||
|
<div className="path_top_box">{this.state.list.name}</div>
|
||||||
|
<div className="path_top_box2">
|
||||||
|
<div className="path_top_box2_box">
|
||||||
|
<span>章节</span>
|
||||||
|
<p>{this.state.list.stages_count}</p>
|
||||||
|
</div>
|
||||||
|
<div className="path_top_box2_box">
|
||||||
|
<span>实训</span>
|
||||||
|
<p>{this.state.list.shixuns_count}</p>
|
||||||
|
</div>
|
||||||
|
<div className="path_top_box2_box">
|
||||||
|
<span>选择题关卡</span>
|
||||||
|
<p>{this.state.list.challenge_choose_count}</p>
|
||||||
|
</div>
|
||||||
|
<div className="path_top_box2_box">
|
||||||
|
<span>实践关卡</span>
|
||||||
|
<p>{this.state.list.challenges_count}</p>
|
||||||
|
</div>
|
||||||
|
<div className="path_top_box2_box">
|
||||||
|
<span>视频</span>
|
||||||
|
<p>{this.state.list.videos_count}</p>
|
||||||
|
</div>
|
||||||
|
<div className="path_top_box2_box">
|
||||||
|
<span>参与人数</span>
|
||||||
|
<p>{this.state.list.member_count}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="path_body" style={{ display: "flex" }}>
|
||||||
|
<div className="left">
|
||||||
|
<div className="left_one">
|
||||||
|
<div className="left_one_box1">
|
||||||
|
<img
|
||||||
|
style={{ marginRight: "10px" }}
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAO9JREFUOBFj3H//P8ePj//a/jMyRDH8/y/uZcDCyAAEoZP//QfRxAHG54yMDIv+izHUsYANY/hfyECCdkxL/kv+/89QzviKkYGFgZEhGpdhEvwMDJNiwQ6Gm5G3+D/Di49wLgoDaGgc0///QIdSDfyXZKKaWVCDiDLwxUeQN4kLZBZ8LgSGCcP2i/8Zlh6HqIq2/A9MCPh0MAAjBQ94+YmBYf5hhAJkNkIUlUWUl1G14OeNGog/fIiRHQ1DYkIJvxomRgbG5/iVkCLL+BxoIMMiUrTgUwsqtVlkWZnqHv/+Bypj44BZXxKfBtxyiCoAAHADSWb7p5YAAAAAAElFTkSuQmCC"
|
||||||
|
></img>
|
||||||
|
课程介绍
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="left_one_box2">{this.state.list.description}</div>
|
||||||
|
</div>
|
||||||
|
<Zhangjie id={this.props.id}></Zhangjie>
|
||||||
|
</div>
|
||||||
|
<div className="right">
|
||||||
|
<div className="right_top">
|
||||||
|
<div className="right_top_box1">
|
||||||
|
<img
|
||||||
|
style={{ marginRight: "10px" }}
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAv9JREFUSA2dVV1IVEEU/s7sqkuiUAahgREkQVjmS0FEBRWELz1Yj5ZSJBEaVm8RBOFbQSZIQUU9hFT4EqRuBdIP0oOia5lIZBRZoBWYy+a6O3M6s3DxXrurez1wOeee+b7zzZ05dwYIaD0x3dk9rNsD0hAOSgBjDwHTQXmBhZgwB7A8wcwjFI1xYYiw7sA2mshWJqRUHSkkso3b/LMPXJHOw9eaCko6OOUE1muY1pQx490xPuLOO3HZLV7b8BJz9X1QNnbybt8zok/plBlHwlxw5z1CIajbIMwQm87no1xugZeZVVkbN5S28YD5i2mTxmDmkdjm1t/geoux2O5hrpY9vCnhJOWrBzbnmOyr12T5Kg3M8UixunSyF8WJeXQxY7cX5X0jwmvZu9rH+5CeZXMxn1TH4uX/T8gpsfkOF83E0S8zrHRyS3rCu5Iwdo2eobgfzrN0bsCfWVzLWcQSGVt/p4WTxXy/aEM7b0wafBRyKAvPP03QBQoVX5ro82JA+MUYl+h5bKIwkge3IEZELCK1gUVsZZlYhgtcZWmQ6Ai2y5fk6VUYU6mkeaVZv02n9FDviD5m8TJYbf1KzOFGY6bFsB60tSmhn4SJ1HnA7JTZJCMR9TRTnFGyEhE315B6KHUjIhxWpPrCh6qoVwD2WTDCLxFemVmuWE0VfRPX6hTx7TrRGHIAQX02rq+QdE6XbJQOKmI5Ga4P0VfIticx7vrgl0xZjl9rW5KvkB1Yk4dzMsP3Ns7JBFtcBGksf8sqZI+Swnzsl3PsjT91IWsxFjt+gmYXst4oq5CFfTpNU43N2BtSaJBig16q/G+Ss2MWY7GLx93v0ua5W+YOSiFzfUAutu+N9DNXdk5C5R28Op1GnRQtcBc2QFwV4L4ILnnjWo7nKncXccc6jcPGoM2dc2Kex4TEUec9m8/pi44+4lD/FHbInxVxF9KM+I+zGLAHsTvvF+ck5BBLr3OL3KRNcjyxNMGVyWa654wt53NaOqeIzColcVL+L1nJTOwMLev/AaJkF76u7DFoAAAAAElFTkSuQmCC"
|
||||||
|
></img>
|
||||||
|
课程须知
|
||||||
|
</div>
|
||||||
|
<div className="right_top_box2">
|
||||||
|
{this.state.list.learning_notes}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="right_top">
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSsize: "16px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{ marginRight: "10px" }}
|
||||||
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAWCAYAAADTlvzyAAAAAXNSR0IArs4c6QAAA+JJREFUSA2dVltslEUUPmf+f7cXt+oKRKzVtCoICbARtVEJIA+mQiMaI00UXuCBRCT2AZPGaCJvWjUmQowPSBpN+kK8RKVNCIZLorIEVEqFmABVgxsuspi2wHZ3Z+f4za7/9r9sSe0k7Zz55pzzzZzL7M80zdHaJ7fnx+g9EeokptkklGGm/geX0PZDq1hP0w1MpzHm7pA5LLQfZKka6t/MaqZ1p7q4UGMvArkRBMC+IWnTpvC4EMeEzI+bD9NWoZpk1nzt1Yu0cXB44js27qMlY+pE0fAzqfjPtXxHCPcOFZdr0tuIlWOvfyXnnBWmTQjh1MNQtynSBVaynhFnROOFgZP6y84lbl/YSPmBPackAeBVOHc8vP8MuVgnvHWtGQdacO66ygT2jDw/eKLwUADDIkDYmNePIU/1fqWR626V3I8HZMT+eBYHCw3AHSEoSEjKzA0rzLuNcmGs1np+MnY5jDNJcxgL3NBRztWwwsuLdAy1PBbGQ+uRpclCJOwiEvEXINTaBPMAr66hFSieSPL9hErRVyLc7sfKsnL+CmMBwtzZ2K9EcsmvBLL2jpZiP4rvhh+vyrj9ylbqU8RPVzFPKBX3e6I3Bwi7uriE8O3yNu2MbuCuB/hZiBuwV/Lv4RATsxto/YZ79eZwsQnJt51LG/7061s5QGiBzlT8qGL+3MresC/MruV6HP2108PsjHZ4+532UhzifX4cUTl9PBX7xI95coTQbhjhBk/Bzqi20fGSm4UwJ4ALzUPLHqVQcaBY6lb+QfYgkYHDTI69JwsPs+GXgMyvoHLpWsF8/dqxullaUw9uumBSuyIhrMcScerdsayUE0OrEcrW/2z/IaW+uJw9v2/jqrYJz65MODh0o0UoZl+YhXYDoctlS/xpzw/OQuSwG0QtnsFUM4h/g7N3P1qhf4+zbIKXZFlXZIwV716Tih2wax4YlkeopF+HXAmByLm3foqlM9fofZDdXTb6H/9AfLolSVu2L9YdSMFizxSHObQ65X7AAycKH4O3fAPE/sK2tDo8mnc+g2LN/HoObjbb6r2jXq/pbZcX8Zjf5emyMT3WaeXqEFjR7rG88wbEGZNZ57ZFsjn3TXbUgF1XB6ukwo/JLziRwUlyrxyI5RHGch6rSjMXnjyYkcn3FalicjOVoknLrbq+cM+W7+MJVGN65hw+S/RSoo4WfbiMGuONdOap+3nU7pYJfWrUvFOeM4a2olKfwG0D/ejXm0qGQ/upkcaj0HuxmwfDehFCT2HdHnGO/E1tukhJx6Em9FgTctOEz4cmtM8t+BOkwn485TCPk6Er+Nk+n7yTRm72ffMvtr1U/uTpxS8AAAAASUVORK5CYII="
|
||||||
|
></img>
|
||||||
|
教学团队
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="right_buttom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Shengqing extends Component {
|
||||||
|
render() {
|
||||||
|
return <div></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import "../shijiankecheng.css";
|
||||||
|
import Kecheng from "./kecheng";
|
||||||
|
import Paihang from "./paihang";
|
||||||
|
import Shengqing from "./shengqing";
|
||||||
|
|
||||||
|
export default class Zhangjie extends Component {
|
||||||
|
state = {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
name: "课程章节",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "排行榜",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "证书申请",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
current: 0,
|
||||||
|
};
|
||||||
|
handleClick(index) {
|
||||||
|
this.setState({
|
||||||
|
current: index,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="left_two">
|
||||||
|
{this.state.list.map((item, index) => (
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
this.state.current === index
|
||||||
|
? "left_two_box_active"
|
||||||
|
: "left_two_box"
|
||||||
|
}
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => this.handleClick(index)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{this.state.current === 0 && <Kecheng id={this.props.id}></Kecheng>}
|
||||||
|
{this.state.current === 1 && <Paihang id={this.props.id}></Paihang>}
|
||||||
|
{this.state.current === 2 && <Shengqing id={this.props.id}></Shengqing>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,510 @@
|
|||||||
|
*{
|
||||||
|
|
||||||
|
}
|
||||||
|
.kc_main{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-width: 1200px;
|
||||||
|
min-height: 80vh;
|
||||||
|
float: left;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
.kc_main_box1{
|
||||||
|
height: 160px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.kc_main_box1 img{
|
||||||
|
height: 100%;
|
||||||
|
width: 101%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.kc_main_box1_main{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 1200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box1{
|
||||||
|
margin-top: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box1 span:first-child{
|
||||||
|
width: 140px;
|
||||||
|
height: 30px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box1 span:last-child{
|
||||||
|
height: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box2{
|
||||||
|
display: inline-block;
|
||||||
|
width: 104px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #666;
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box2 i{
|
||||||
|
font-size: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box3{
|
||||||
|
width: 450px;
|
||||||
|
margin-top: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: start;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box3 span{
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: rgba(0,0,0,.85);
|
||||||
|
font-size: 12px;
|
||||||
|
font-variant: tabular-nums;
|
||||||
|
line-height: 1.66667;
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box3 span input{
|
||||||
|
height: 46px;
|
||||||
|
padding-left: 14px;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box3_box{
|
||||||
|
width: 52px;
|
||||||
|
height: 46px;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
.kc_main_box1_main_box3_box button{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
list-style: none;
|
||||||
|
color: #fff;
|
||||||
|
background: #1890ff;
|
||||||
|
border: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.kc_main_box2{
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,.04);
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain{
|
||||||
|
width: 1200px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain ul{
|
||||||
|
padding: 30px 0 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain ul li{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 8px 22px;
|
||||||
|
border-radius: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain ul li:hover{
|
||||||
|
background: #ddecf9 !important;
|
||||||
|
color: #4cacff !important;
|
||||||
|
}
|
||||||
|
.kc_active{
|
||||||
|
background: #ddecf9 !important;
|
||||||
|
color: #4cacff !important;
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain_li{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 30px;
|
||||||
|
width: 500px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
z-index: 8;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain_li_ul{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain_li_ul_li{
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-right: 20px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.kc_main_box2_contain ul li:hover .kc_main_box2_contain_li{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kc_main_box3{
|
||||||
|
width: 1200px;
|
||||||
|
height: 52px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.kc_main_box3_box1{
|
||||||
|
padding: 3px 11px;
|
||||||
|
border: 1px;
|
||||||
|
margin-right: 20px;
|
||||||
|
border-radius: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
float: left;
|
||||||
|
background: #1890ff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.kc_main_box3_box2{
|
||||||
|
padding: 3px 11px;
|
||||||
|
border: 1px;
|
||||||
|
margin-right: 20px;
|
||||||
|
border-radius: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
float: left;
|
||||||
|
color: #999;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.kc_main_box4{
|
||||||
|
width: 1200px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box:hover{
|
||||||
|
box-shadow: 0 0 12px 10px rgba(0,0,0,.1);
|
||||||
|
}
|
||||||
|
.kc_main_box4_box:hover .kc_main_box4_box_shang img{
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
.kc_main_box4_box{
|
||||||
|
width: 280px;
|
||||||
|
box-shadow: 0 0 12px rgba(0,0,0,.1);
|
||||||
|
margin-bottom: 35px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all .5s;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-right: 26px;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box_shang{
|
||||||
|
height: 175px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box_shang img{
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box_xia{
|
||||||
|
padding-bottom: 11px;
|
||||||
|
padding-top: 31px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box_xia_box1{
|
||||||
|
max-width: 248px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box_xia_box2{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.kc_main_box4_box_xia_box2_box{
|
||||||
|
padding: 5px 10px;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.kc_main_box5{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.kc_main_box5 button{
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
text-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px;
|
||||||
|
padding: 3px 11px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.button_color_no{
|
||||||
|
|
||||||
|
cursor:no-drop;
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
.button_color_yes{
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
background: #fff;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
.path{
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.path_box{
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.path_body{
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.path_top{
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
height: 225px;
|
||||||
|
}
|
||||||
|
.path_top_box{
|
||||||
|
font-size: 28px;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.path_top_box2{
|
||||||
|
display: flex;
|
||||||
|
color: #ebebeb;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.path_top_box2_box{
|
||||||
|
margin-right: 30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.left{
|
||||||
|
width: 66.7%;
|
||||||
|
}
|
||||||
|
.left_one{
|
||||||
|
padding: 40px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.left_one_box1{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.left_one_box2{
|
||||||
|
|
||||||
|
}
|
||||||
|
.left_two{
|
||||||
|
height: 76px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.left_two_box{
|
||||||
|
padding: 8px 0;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 50px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
.left_two_box:hover{
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
.left_two_box_active{
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 50px;
|
||||||
|
line-height: 60px;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
.left_two_box_active::after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #1890ff;
|
||||||
|
}
|
||||||
|
.left_three{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.left_three_box{
|
||||||
|
margin-top: 22px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.left_three_box_box:hover{
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
.left_three_box_box{
|
||||||
|
margin-right: 14px;
|
||||||
|
background: white;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 1px 6px;
|
||||||
|
}
|
||||||
|
.left_three_box_box_active{
|
||||||
|
margin-right: 14px;
|
||||||
|
background: #d8ecff;
|
||||||
|
color: #1890ff;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 1px 6px;
|
||||||
|
}
|
||||||
|
.zhangjie{
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 30px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.zhangjie_wenzi{
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 2.5px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
text-align:left;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.zhangjie_wenzi_box{
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 2.5px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: 400px;
|
||||||
|
top: 180px;
|
||||||
|
margin-left: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.right_top{
|
||||||
|
top: -70px;
|
||||||
|
padding: 20px 25px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.right_top_box1{
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px
|
||||||
|
}
|
||||||
|
.right_top_box2{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
|
||||||
|
}
|
||||||
|
.paihang{
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
padding: 0px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.paihang_shang{
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
list-style: none;
|
||||||
|
height: 39px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.paihang_shang li {
|
||||||
|
height: 100%;
|
||||||
|
line-height: 22px;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 32px;
|
||||||
|
width: auto;
|
||||||
|
float: left;
|
||||||
|
padding: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.li_active{
|
||||||
|
color: #1890ff;
|
||||||
|
border-bottom: 1px solid #1890ff;
|
||||||
|
}
|
||||||
|
.paihang_style{
|
||||||
|
height: 42px;
|
||||||
|
background: rgb(250, 250, 250);
|
||||||
|
display: flex;
|
||||||
|
padding: 0px 5px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.tongguan_xia{
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.tongguan_xia button{
|
||||||
|
min-width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { Route, Redirect, Switch } from "react-router-dom";
|
||||||
|
import Path1 from "./Path1";
|
||||||
|
import Path2 from "./Path2";
|
||||||
|
|
||||||
|
export default class Shijiankecheng extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="kc_main">
|
||||||
|
<Switch>
|
||||||
|
<Route path="/shijiankecheng/path1" component={Path1}></Route>
|
||||||
|
<Route path="/shijiankecheng/path2/:id" component={Path2} />
|
||||||
|
<Redirect
|
||||||
|
from="/shijiankecheng"
|
||||||
|
to="/shijiankecheng/path1"
|
||||||
|
></Redirect>
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,385 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Center3 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="main">
|
||||||
|
<div className="center3">
|
||||||
|
<div className="center3_main">
|
||||||
|
<h2>程序设计与软件工程课程方向</h2>
|
||||||
|
<h5>Computer Programming and Software Engineering Courses</h5>
|
||||||
|
<div className="center3_main_box">
|
||||||
|
<div className="center3_main_box_left">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/1?t=1612190124"></img>
|
||||||
|
<div className="center3_main_box_left_box">社区支持</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3_main_box_right">
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/51?t=1618281355"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/6?t=1612189186"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/7?t=1612189226"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/8?t=1612189263"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/49?t=1616556680"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/10?t=1612230903"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/11?t=1612189331"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/12?t=1612189380"></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3">
|
||||||
|
<div className="center3_main">
|
||||||
|
<h2>计算机系统能力课程方向</h2>
|
||||||
|
<h5>Computer System Capability Courses</h5>
|
||||||
|
<div className="center3_main_box">
|
||||||
|
<div className="center3_main_box_right">
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/15?t=1612189437"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/21?t=1612189545"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/16?t=1612231280"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/17?t=1612189472"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/18?t=1612189494"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/14?t=1612189427"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/19?t=1612189514"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/48?t=1613355287"></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="center3_main_box_left">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/2?t=1612190130"></img>
|
||||||
|
<div
|
||||||
|
className="center3_main_box_left_box"
|
||||||
|
style={{ marginLeft: "auto" }}
|
||||||
|
>
|
||||||
|
社区支持
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3">
|
||||||
|
<div className="center3_main">
|
||||||
|
<h2>电子信息专业课程方向</h2>
|
||||||
|
<h5>Electronic Information Courses</h5>
|
||||||
|
<div className="center3_main_box">
|
||||||
|
<div className="center3_main_box_left">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/3?t=1612190135"></img>
|
||||||
|
<div className="center3_main_box_left_box">社区支持</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3_main_box_right">
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/31?t=1612189799"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/30?t=1612189775"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/32?t=1612189837"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/33?t=1612189865"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/35?t=1612231123"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/36?t=1612190321"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/37?t=1612190328"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/34?t=1612230852"></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3">
|
||||||
|
<div className="center3_main">
|
||||||
|
<h2>大数据专业课程方向</h2>
|
||||||
|
<h5>Big Data and Data Science Courses</h5>
|
||||||
|
<div className="center3_main_box">
|
||||||
|
<div className="center3_main_box_right">
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/38?t=1612190620"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/39?t=1612190632"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/47?t=1612190981"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/41?t=1612190867"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/42?t=1612190907"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/43?t=1612190791"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/44?t=1612190808"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/45?t=1612190823"></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="center3_main_box_left">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/4?t=1612190141"></img>
|
||||||
|
<div
|
||||||
|
className="center3_main_box_left_box"
|
||||||
|
style={{ marginLeft: "auto" }}
|
||||||
|
>
|
||||||
|
社区支持
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3">
|
||||||
|
<div className="center3_main">
|
||||||
|
<h2>人工智能专业课程方向</h2>
|
||||||
|
<h5>Artificial Intelligence Courses</h5>
|
||||||
|
<div className="center3_main_box">
|
||||||
|
<div className="center3_main_box_left">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/5?t=1614734991"></img>
|
||||||
|
<div className="center3_main_box_left_box">社区支持</div>
|
||||||
|
</div>
|
||||||
|
<div className="center3_main_box_right">
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/22?t=1612190428"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/23?t=1612190441"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/24?t=1612190459"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/25?t=1612190472"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/26?t=1612230653"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/28?t=1612190564"></img>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box1"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/29?t=1612190575"></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.educoder.net/paths/2832"
|
||||||
|
className="center3_main_box_right_box2"
|
||||||
|
>
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/27?t=1612190548"></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Center5 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center5">
|
||||||
|
<div className="center5_main">
|
||||||
|
<h2>头歌企业版</h2>
|
||||||
|
<h5>Enterprise Edition of EduCoder Software and Services</h5>
|
||||||
|
<div className="center5_main_box">
|
||||||
|
<p>
|
||||||
|
为<span>3000家以上高校和企业</span>
|
||||||
|
提供产品和服务
|
||||||
|
</p>
|
||||||
|
<div className="center5_main_box_box1">
|
||||||
|
<a target={"_blank"} href="https://www.nudt.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/9.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.pku.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/10.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.tsinghua.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/11.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.fudan.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/12.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.sjtu.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/13.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.ustc.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/14.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.hust.edu.cn">
|
||||||
|
<img src={require("../../../../assets/img/15.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="http://www.hnkjxy.net.cn">
|
||||||
|
<img src={require("../../../../assets/img/16.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="http://www.hnjdzy.net">
|
||||||
|
<img src={require("../../../../assets/img/17.png")}></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="center5_main_box_box2">
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="http://www.10086.cn/index/hn/index_731_731.html"
|
||||||
|
>
|
||||||
|
<img src={require("../../../../assets/img/18.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent"
|
||||||
|
>
|
||||||
|
<img src={require("../../../../assets/img/19.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://cloud.inspur.com">
|
||||||
|
<img src={require("../../../../assets/img/20.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.amazon.cn">
|
||||||
|
<img src={require("../../../../assets/img/21.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
target={"_blank"}
|
||||||
|
href="https://www.alibabagroup.com/cn/global/home"
|
||||||
|
>
|
||||||
|
<img src={require("../../../../assets/img/22.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.ucloud.cn">
|
||||||
|
<img src={require("../../../../assets/img/23.png")}></img>
|
||||||
|
</a>
|
||||||
|
<a target={"_blank"} href="https://www.lenovo.com.cn">
|
||||||
|
<img src={require("../../../../assets/img/24.png")}></img>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="center5_main_box_box3">试用申请</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
.center1{
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
height: 345px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.center1_main{
|
||||||
|
border-radius: 8px ;
|
||||||
|
height: 345px;
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.center1_main_left{
|
||||||
|
list-style: none ;
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
height: 345px;
|
||||||
|
width: 160px;
|
||||||
|
padding: 10px 20px 0 20px ;
|
||||||
|
background: black ;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
border-right: 0px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.center1_main_left_box{
|
||||||
|
margin-right: 20px;
|
||||||
|
color: #fff;
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #4b4b4b;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0!important;
|
||||||
|
}
|
||||||
|
.center1_main_left_box .ant-menu-submenu-title{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.center1_main_left_box .ant-menu-submenu-arrow{
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.center1_picture{
|
||||||
|
height: 345px;
|
||||||
|
width: 1200px;
|
||||||
|
line-height: 345px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
background: blue;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.center1_picture img{
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center1_picture .ant-carousel .slick-list .slick-track{
|
||||||
|
height: 345px;
|
||||||
|
}
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { Carousel } from "antd";
|
||||||
|
import "./center1.css";
|
||||||
|
import { Menu } from "antd";
|
||||||
|
import {
|
||||||
|
MailOutlined,
|
||||||
|
AppstoreOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
|
||||||
|
const { SubMenu } = Menu;
|
||||||
|
|
||||||
|
export default class Center1 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center1">
|
||||||
|
<div className="center1_main">
|
||||||
|
<Menu className="center1_main_left">
|
||||||
|
<SubMenu
|
||||||
|
key="sub1"
|
||||||
|
title="程序设计语言"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="1">C/C++程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="2">Java程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="3">Python程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="4">PHP程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="5">Go语言程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="6">C#程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="7">Matlab程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="8">面向对象程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="9">其他语言</Menu.Item>
|
||||||
|
<Menu.Item key="10">R语言程序设计</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu
|
||||||
|
key="sub2"
|
||||||
|
title="计算机基础"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="11">离散数学</Menu.Item>
|
||||||
|
<Menu.Item key="12">大学计算机基础</Menu.Item>
|
||||||
|
<Menu.Item key="13">计算思维</Menu.Item>
|
||||||
|
<Menu.Item key="14">图形图像</Menu.Item>
|
||||||
|
<Menu.Item key="15">数理统计</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu
|
||||||
|
key="sub5"
|
||||||
|
title="计算机系统能力"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="16">计算机组成原理</Menu.Item>
|
||||||
|
<Menu.Item key="17">操作系统</Menu.Item>
|
||||||
|
<Menu.Item key="18">编译原理</Menu.Item>
|
||||||
|
<Menu.Item key="19">计算机系统</Menu.Item>
|
||||||
|
<Menu.Item key="20">信号与系统</Menu.Item>
|
||||||
|
<Menu.Item key="21">汇编语言程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="22">Linux编程设计</Menu.Item>
|
||||||
|
<Menu.Item key="23">Verilog程序设计</Menu.Item>
|
||||||
|
<Menu.Item key="24">机器人</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu
|
||||||
|
key="sub6"
|
||||||
|
title="云计算与大数据"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="12">数据科学</Menu.Item>
|
||||||
|
<Menu.Item key="12">数据采集</Menu.Item>
|
||||||
|
<Menu.Item key="12">数据存储管理</Menu.Item>
|
||||||
|
<Menu.Item key="12">数据分析处理</Menu.Item>
|
||||||
|
<Menu.Item key="12">数据可视化</Menu.Item>
|
||||||
|
<Menu.Item key="12">大数据应用案例</Menu.Item>
|
||||||
|
<Menu.Item key="12">虚拟化</Menu.Item>
|
||||||
|
<Menu.Item key="12">集群管理</Menu.Item>
|
||||||
|
<Menu.Item key="12">云计算基础</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu
|
||||||
|
key="sub7"
|
||||||
|
title="人工智能"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="9">Option 9</Menu.Item>
|
||||||
|
<Menu.Item key="10">Option 10</Menu.Item>
|
||||||
|
<Menu.Item key="11">Option 11</Menu.Item>
|
||||||
|
<Menu.Item key="12">Option 12</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu
|
||||||
|
key="sub8"
|
||||||
|
title="软件工程"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="9">Option 9</Menu.Item>
|
||||||
|
<Menu.Item key="10">Option 10</Menu.Item>
|
||||||
|
<Menu.Item key="11">Option 11</Menu.Item>
|
||||||
|
<Menu.Item key="12">Option 12</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu
|
||||||
|
key="sub9"
|
||||||
|
title="Web开发"
|
||||||
|
className="center1_main_left_box"
|
||||||
|
>
|
||||||
|
<Menu.Item key="9">Option 9</Menu.Item>
|
||||||
|
<Menu.Item key="10">Option 10</Menu.Item>
|
||||||
|
<Menu.Item key="11">Option 11</Menu.Item>
|
||||||
|
<Menu.Item key="12">Option 12</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
<SubMenu key="sub10" title="更多" className="center1_main_left_box">
|
||||||
|
<Menu.Item key="9">Option 9</Menu.Item>
|
||||||
|
<Menu.Item key="10">Option 10</Menu.Item>
|
||||||
|
<Menu.Item key="11">Option 11</Menu.Item>
|
||||||
|
<Menu.Item key="12">Option 12</Menu.Item>
|
||||||
|
</SubMenu>
|
||||||
|
</Menu>
|
||||||
|
|
||||||
|
<div className="center1_picture">
|
||||||
|
<Carousel autoplay>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/146?t=1644571196"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/89?t=1640671464"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/98?t=1618836366"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/111?t=1629197065"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/63?t=1642574531"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/96?t=1616488300"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/97?t=1639539417"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="center1_picture">
|
||||||
|
<img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/94?t=1614765799"></img>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Page1 from "./component/page1";
|
||||||
|
import Page2 from "./component/page2";
|
||||||
|
import Page3 from "./component/page3";
|
||||||
|
import Page4 from "./component/page4";
|
||||||
|
import Page5 from "./component/page5";
|
||||||
|
|
||||||
|
export default class Center2 extends Component {
|
||||||
|
state = {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: "云端编程环境",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: "远程桌面",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: "远程命令行",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
text: "虚拟仿真",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
text: "交互式笔记",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
current: 0,
|
||||||
|
availTime: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center2">
|
||||||
|
<h2 className="center2_box1">异质架构实践运行环境</h2>
|
||||||
|
<h5 className="center2_box2">
|
||||||
|
Heterogeneous Architecture Pratice Runtime Environments
|
||||||
|
</h5>
|
||||||
|
<ul className="center2_box3">
|
||||||
|
{this.state.list.map((item, index) => (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
className={this.state.current === index ? "active_xuanxiang" : ""}
|
||||||
|
onClick={() => this.handleClick(index)}
|
||||||
|
>
|
||||||
|
{item.text}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
{this.state.current === 0 && <Page1 event={this.videoEvent}></Page1>}
|
||||||
|
{this.state.current === 1 && <Page2 event={this.videoEvent}></Page2>}
|
||||||
|
{this.state.current === 2 && <Page3 event={this.videoEvent}></Page3>}
|
||||||
|
{this.state.current === 3 && <Page4 event={this.videoEvent}></Page4>}
|
||||||
|
{this.state.current === 4 && <Page5 event={this.videoEvent}></Page5>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
videoEvent = () => {
|
||||||
|
this.setState({
|
||||||
|
current: (this.state.current + 1) % 5,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
handleClick(index) {
|
||||||
|
console.log(index);
|
||||||
|
this.setState({
|
||||||
|
current: index,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Page2 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center2_page">
|
||||||
|
<div className="center2_page1_left" style={{ float: "right" }}>
|
||||||
|
<h3>远程桌面特点</h3>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>图文、视频、Latex</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>图形化操作系统</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>可配置应用软件和模拟器</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>可定制测试集</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>自动化部署、测试、反馈</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>大规模并发实验</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>支持一流课程建设</span>
|
||||||
|
</p>
|
||||||
|
<h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
|
||||||
|
<p>
|
||||||
|
<span>CentOS、Ubuntu、 Windows、 Kylin OS</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>Wireshark、Vscode、GN3 … …</span>
|
||||||
|
</p>
|
||||||
|
<div className="center2_page1_left_bottom">
|
||||||
|
<div className="center2_page1_left_bottom_box1">社区支持</div>
|
||||||
|
<div className="center2_page1_left_bottom_box2">
|
||||||
|
立即体验
|
||||||
|
<i className="center2_page1_left_bottom_box2_box"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center2_page1_right">
|
||||||
|
<img src={require("../../../../../assets/img/2.png")}></img>
|
||||||
|
<video
|
||||||
|
src="https://video.educoder.net/sv/28357c10-1775907ad78/28357c10-1775907ad78.mp4"
|
||||||
|
autoplay="autoplay"
|
||||||
|
id="video"
|
||||||
|
onLoadStart={() => this.handlevideo()}
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handlevideo() {
|
||||||
|
var v = document.getElementById("video");
|
||||||
|
|
||||||
|
v.addEventListener("ended", this.handlev.bind(this));
|
||||||
|
}
|
||||||
|
handlev() {
|
||||||
|
this.props.event();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Page3 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center2_page">
|
||||||
|
<div className="center2_page1_left">
|
||||||
|
<h3>远程命令行环境</h3>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>标准Linux Shell命令</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>命令操作全程记录</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>可配置命令行应用程序</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>可配置命令行模拟器</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>自动化部署、测试、反馈</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>支持一流课程建设</span>
|
||||||
|
</p>
|
||||||
|
<h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
|
||||||
|
<p>
|
||||||
|
<span>CentOS、Ubuntu、Python、Vim、Docker</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>SSH、Git、Hadoop、Hive … …</span>
|
||||||
|
</p>
|
||||||
|
<div className="center2_page1_left_bottom">
|
||||||
|
<div className="center2_page1_left_bottom_box1">社区支持</div>
|
||||||
|
<div className="center2_page1_left_bottom_box2">
|
||||||
|
立即体验
|
||||||
|
<i className="center2_page1_left_bottom_box2_box"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center2_page1_right">
|
||||||
|
<img src={require("../../../../../assets/img/2.png")}></img>
|
||||||
|
<video
|
||||||
|
src="https://video.educoder.net/sv/4fdca3e8-17752499adf/4fdca3e8-17752499adf.mp4"
|
||||||
|
autoplay="autoplay"
|
||||||
|
id="video"
|
||||||
|
onLoadStart={() => this.handlevideo()}
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handlevideo() {
|
||||||
|
var v = document.getElementById("video");
|
||||||
|
|
||||||
|
v.addEventListener("ended", this.handlev.bind(this));
|
||||||
|
}
|
||||||
|
handlev() {
|
||||||
|
this.props.event();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Page4 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center2_page">
|
||||||
|
<div className="center2_page1_left" style={{ float: "right" }}>
|
||||||
|
<h3>虚拟仿真项目特点</h3>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>三维动画教学</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>命令操作全程记录</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>构件化、可组装虚拟场景</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>自动化评测、反馈</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>大规模并发仿真实验</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>支持虚拟仿真项目建设</span>
|
||||||
|
</p>
|
||||||
|
<h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
|
||||||
|
<p>
|
||||||
|
<span>Ubuntu、CentOS、WebGL、Python</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>Java、C#、ThreeJS、Unity … …</span>
|
||||||
|
</p>
|
||||||
|
<div className="center2_page1_left_bottom">
|
||||||
|
<div className="center2_page1_left_bottom_box1">社区支持</div>
|
||||||
|
<div className="center2_page1_left_bottom_box2">
|
||||||
|
立即体验
|
||||||
|
<i className="center2_page1_left_bottom_box2_box"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center2_page1_right">
|
||||||
|
<img src={require("../../../../../assets/img/2.png")}></img>
|
||||||
|
<video
|
||||||
|
src="https://video.educoder.net/sv/5490aa0d-17759081e1d/5490aa0d-17759081e1d.mp4"
|
||||||
|
autoplay="autoplay"
|
||||||
|
id="video"
|
||||||
|
onLoadStart={() => this.handlevideo()}
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handlevideo() {
|
||||||
|
var v = document.getElementById("video");
|
||||||
|
|
||||||
|
v.addEventListener("ended", this.handlev.bind(this));
|
||||||
|
}
|
||||||
|
handlev() {
|
||||||
|
this.props.event();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
export default class Page5 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="center2_page">
|
||||||
|
<div className="center2_page1_left">
|
||||||
|
<h3>Jupyter NoteBook环境</h3>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>代码编辑与结果展示同步</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>富媒体展示计算结果</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>模块化执行</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>支持Latex、Markdown</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>200种可选运行环境</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<img src={require("../../../../../assets/img/1.png")}></img>
|
||||||
|
<span>自动化部署、测试、反馈</span>
|
||||||
|
</p>
|
||||||
|
<h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
|
||||||
|
<p>
|
||||||
|
<span>CentOS、openEuler、TensorFlow、Python</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>MindSpore、Spark、Ubuntu … …</span>
|
||||||
|
</p>
|
||||||
|
<div className="center2_page1_left_bottom">
|
||||||
|
<div className="center2_page1_left_bottom_box1">社区支持</div>
|
||||||
|
<div className="center2_page1_left_bottom_box2">
|
||||||
|
立即体验
|
||||||
|
<i className="center2_page1_left_bottom_box2_box"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="center2_page1_right">
|
||||||
|
<img src={require("../../../../../assets/img/2.png")}></img>
|
||||||
|
<video
|
||||||
|
src="https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4"
|
||||||
|
autoplay="autoplay"
|
||||||
|
id="video"
|
||||||
|
onLoadStart={() => this.handlevideo()}
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
handlevideo() {
|
||||||
|
var v = document.getElementById("video");
|
||||||
|
|
||||||
|
v.addEventListener("ended", this.handlev.bind(this));
|
||||||
|
}
|
||||||
|
handlev() {
|
||||||
|
this.props.event();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import Center1 from "./component/tg_yemiandonghua/center1.js";
|
||||||
|
import Center2 from "./component/tg_yunxinghuanjing/center2";
|
||||||
|
import Center3 from "./component/tg_kechengfangxiang/center3";
|
||||||
|
import Center4 from "./component/tg_jiaoxuegongju/center4";
|
||||||
|
import Center5 from "./component/tg_shangbiao/center5";
|
||||||
|
import Center6 from "./component/tg_dibu/center6";
|
||||||
|
|
||||||
|
export default class Shouye extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Center1></Center1>
|
||||||
|
<Center2></Center2>
|
||||||
|
<Center3></Center3>
|
||||||
|
<Center4></Center4>
|
||||||
|
<Center5></Center5>
|
||||||
|
<Center6></Center6>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue