diff --git a/src/assets/images/FEL.png b/src/assets/images/FEL.png
new file mode 100644
index 0000000..b48b0b5
Binary files /dev/null and b/src/assets/images/FEL.png differ
diff --git a/src/assets/images/about-bg.png b/src/assets/images/about-bg.png
new file mode 100644
index 0000000..1db717b
Binary files /dev/null and b/src/assets/images/about-bg.png differ
diff --git a/src/assets/images/about/1.png b/src/assets/images/about/1.png
new file mode 100644
index 0000000..d6c4bab
Binary files /dev/null and b/src/assets/images/about/1.png differ
diff --git a/src/assets/images/about/10.png b/src/assets/images/about/10.png
new file mode 100644
index 0000000..a617279
Binary files /dev/null and b/src/assets/images/about/10.png differ
diff --git a/src/assets/images/about/11.png b/src/assets/images/about/11.png
new file mode 100644
index 0000000..afc900d
Binary files /dev/null and b/src/assets/images/about/11.png differ
diff --git a/src/assets/images/about/12.png b/src/assets/images/about/12.png
new file mode 100644
index 0000000..4f68fe3
Binary files /dev/null and b/src/assets/images/about/12.png differ
diff --git a/src/assets/images/about/2.png b/src/assets/images/about/2.png
new file mode 100644
index 0000000..100e662
Binary files /dev/null and b/src/assets/images/about/2.png differ
diff --git a/src/assets/images/about/3.png b/src/assets/images/about/3.png
new file mode 100644
index 0000000..9ed56da
Binary files /dev/null and b/src/assets/images/about/3.png differ
diff --git a/src/assets/images/about/4.png b/src/assets/images/about/4.png
new file mode 100644
index 0000000..7982688
Binary files /dev/null and b/src/assets/images/about/4.png differ
diff --git a/src/assets/images/about/5.png b/src/assets/images/about/5.png
new file mode 100644
index 0000000..d9d1dad
Binary files /dev/null and b/src/assets/images/about/5.png differ
diff --git a/src/assets/images/about/6.png b/src/assets/images/about/6.png
new file mode 100644
index 0000000..4638750
Binary files /dev/null and b/src/assets/images/about/6.png differ
diff --git a/src/assets/images/about/7.png b/src/assets/images/about/7.png
new file mode 100644
index 0000000..bd87c1d
Binary files /dev/null and b/src/assets/images/about/7.png differ
diff --git a/src/assets/images/about/8.png b/src/assets/images/about/8.png
new file mode 100644
index 0000000..1a5363d
Binary files /dev/null and b/src/assets/images/about/8.png differ
diff --git a/src/assets/images/about/9.png b/src/assets/images/about/9.png
new file mode 100644
index 0000000..68dc21b
Binary files /dev/null and b/src/assets/images/about/9.png differ
diff --git a/src/assets/images/application/1.png b/src/assets/images/application/1.png
new file mode 100644
index 0000000..cd92484
Binary files /dev/null and b/src/assets/images/application/1.png differ
diff --git a/src/assets/images/application/app1-1.png b/src/assets/images/application/app1-1.png
new file mode 100644
index 0000000..a69fbea
Binary files /dev/null and b/src/assets/images/application/app1-1.png differ
diff --git a/src/assets/images/application/app1.png b/src/assets/images/application/app1.png
new file mode 100644
index 0000000..467464a
Binary files /dev/null and b/src/assets/images/application/app1.png differ
diff --git a/src/assets/images/application/app10-1.png b/src/assets/images/application/app10-1.png
new file mode 100644
index 0000000..a69fbea
Binary files /dev/null and b/src/assets/images/application/app10-1.png differ
diff --git a/src/assets/images/application/app10.png b/src/assets/images/application/app10.png
new file mode 100644
index 0000000..2151e0e
Binary files /dev/null and b/src/assets/images/application/app10.png differ
diff --git a/src/assets/images/application/app2-1.png b/src/assets/images/application/app2-1.png
new file mode 100644
index 0000000..f670dc1
Binary files /dev/null and b/src/assets/images/application/app2-1.png differ
diff --git a/src/assets/images/application/app2.png b/src/assets/images/application/app2.png
new file mode 100644
index 0000000..7cdd9b4
Binary files /dev/null and b/src/assets/images/application/app2.png differ
diff --git a/src/assets/images/application/app3-1.png b/src/assets/images/application/app3-1.png
new file mode 100644
index 0000000..097b092
Binary files /dev/null and b/src/assets/images/application/app3-1.png differ
diff --git a/src/assets/images/application/app3.png b/src/assets/images/application/app3.png
new file mode 100644
index 0000000..1a5639b
Binary files /dev/null and b/src/assets/images/application/app3.png differ
diff --git a/src/assets/images/application/app4-1.png b/src/assets/images/application/app4-1.png
new file mode 100644
index 0000000..a9b4ffb
Binary files /dev/null and b/src/assets/images/application/app4-1.png differ
diff --git a/src/assets/images/application/app4.png b/src/assets/images/application/app4.png
new file mode 100644
index 0000000..1a5639b
Binary files /dev/null and b/src/assets/images/application/app4.png differ
diff --git a/src/assets/images/application/app5-1.png b/src/assets/images/application/app5-1.png
new file mode 100644
index 0000000..a661502
Binary files /dev/null and b/src/assets/images/application/app5-1.png differ
diff --git a/src/assets/images/application/app5.png b/src/assets/images/application/app5.png
new file mode 100644
index 0000000..f6403a3
Binary files /dev/null and b/src/assets/images/application/app5.png differ
diff --git a/src/assets/images/application/app6-1.png b/src/assets/images/application/app6-1.png
new file mode 100644
index 0000000..5b92f45
Binary files /dev/null and b/src/assets/images/application/app6-1.png differ
diff --git a/src/assets/images/application/app6.png b/src/assets/images/application/app6.png
new file mode 100644
index 0000000..8177c7f
Binary files /dev/null and b/src/assets/images/application/app6.png differ
diff --git a/src/assets/images/application/app7-1.png b/src/assets/images/application/app7-1.png
new file mode 100644
index 0000000..18b6fd3
Binary files /dev/null and b/src/assets/images/application/app7-1.png differ
diff --git a/src/assets/images/application/app7.png b/src/assets/images/application/app7.png
new file mode 100644
index 0000000..93607e6
Binary files /dev/null and b/src/assets/images/application/app7.png differ
diff --git a/src/assets/images/application/app8-1.png b/src/assets/images/application/app8-1.png
new file mode 100644
index 0000000..7213107
Binary files /dev/null and b/src/assets/images/application/app8-1.png differ
diff --git a/src/assets/images/application/app8.png b/src/assets/images/application/app8.png
new file mode 100644
index 0000000..e861faf
Binary files /dev/null and b/src/assets/images/application/app8.png differ
diff --git a/src/assets/images/application/app9-1.png b/src/assets/images/application/app9-1.png
new file mode 100644
index 0000000..618635e
Binary files /dev/null and b/src/assets/images/application/app9-1.png differ
diff --git a/src/assets/images/application/app9.png b/src/assets/images/application/app9.png
new file mode 100644
index 0000000..3dff9ba
Binary files /dev/null and b/src/assets/images/application/app9.png differ
diff --git a/src/assets/images/exp/1.png b/src/assets/images/exp/1.png
new file mode 100644
index 0000000..6620c83
Binary files /dev/null and b/src/assets/images/exp/1.png differ
diff --git a/src/assets/images/exp/2.png b/src/assets/images/exp/2.png
new file mode 100644
index 0000000..b172a66
Binary files /dev/null and b/src/assets/images/exp/2.png differ
diff --git a/src/assets/images/exp/3.png b/src/assets/images/exp/3.png
new file mode 100644
index 0000000..e9d924e
Binary files /dev/null and b/src/assets/images/exp/3.png differ
diff --git a/src/assets/images/exp/4.png b/src/assets/images/exp/4.png
new file mode 100644
index 0000000..0ae10d7
Binary files /dev/null and b/src/assets/images/exp/4.png differ
diff --git a/src/assets/images/exp/5.png b/src/assets/images/exp/5.png
new file mode 100644
index 0000000..308978a
Binary files /dev/null and b/src/assets/images/exp/5.png differ
diff --git a/src/assets/images/exp/6.png b/src/assets/images/exp/6.png
new file mode 100644
index 0000000..c894ba4
Binary files /dev/null and b/src/assets/images/exp/6.png differ
diff --git a/src/assets/images/exp/7.png b/src/assets/images/exp/7.png
new file mode 100644
index 0000000..3211b38
Binary files /dev/null and b/src/assets/images/exp/7.png differ
diff --git a/src/assets/images/industrial/app1-1.png b/src/assets/images/industrial/app1-1.png
new file mode 100644
index 0000000..6e39841
Binary files /dev/null and b/src/assets/images/industrial/app1-1.png differ
diff --git a/src/assets/images/industrial/app1.png b/src/assets/images/industrial/app1.png
new file mode 100644
index 0000000..aab4b80
Binary files /dev/null and b/src/assets/images/industrial/app1.png differ
diff --git a/src/assets/images/industrial/app10-1.png b/src/assets/images/industrial/app10-1.png
new file mode 100644
index 0000000..42ab9f7
Binary files /dev/null and b/src/assets/images/industrial/app10-1.png differ
diff --git a/src/assets/images/industrial/app10.png b/src/assets/images/industrial/app10.png
new file mode 100644
index 0000000..afb1910
Binary files /dev/null and b/src/assets/images/industrial/app10.png differ
diff --git a/src/assets/images/industrial/app11-1.png b/src/assets/images/industrial/app11-1.png
new file mode 100644
index 0000000..03157df
Binary files /dev/null and b/src/assets/images/industrial/app11-1.png differ
diff --git a/src/assets/images/industrial/app11.png b/src/assets/images/industrial/app11.png
new file mode 100644
index 0000000..df8ae50
Binary files /dev/null and b/src/assets/images/industrial/app11.png differ
diff --git a/src/assets/images/industrial/app12-1.png b/src/assets/images/industrial/app12-1.png
new file mode 100644
index 0000000..12e0ec3
Binary files /dev/null and b/src/assets/images/industrial/app12-1.png differ
diff --git a/src/assets/images/industrial/app12.png b/src/assets/images/industrial/app12.png
new file mode 100644
index 0000000..547cbfc
Binary files /dev/null and b/src/assets/images/industrial/app12.png differ
diff --git a/src/assets/images/industrial/app13-1.png b/src/assets/images/industrial/app13-1.png
new file mode 100644
index 0000000..833b96d
Binary files /dev/null and b/src/assets/images/industrial/app13-1.png differ
diff --git a/src/assets/images/industrial/app13.png b/src/assets/images/industrial/app13.png
new file mode 100644
index 0000000..47e0b45
Binary files /dev/null and b/src/assets/images/industrial/app13.png differ
diff --git a/src/assets/images/industrial/app14-1.png b/src/assets/images/industrial/app14-1.png
new file mode 100644
index 0000000..bc03497
Binary files /dev/null and b/src/assets/images/industrial/app14-1.png differ
diff --git a/src/assets/images/industrial/app14.png b/src/assets/images/industrial/app14.png
new file mode 100644
index 0000000..f853f52
Binary files /dev/null and b/src/assets/images/industrial/app14.png differ
diff --git a/src/assets/images/industrial/app15-1.png b/src/assets/images/industrial/app15-1.png
new file mode 100644
index 0000000..1e8c779
Binary files /dev/null and b/src/assets/images/industrial/app15-1.png differ
diff --git a/src/assets/images/industrial/app15.png b/src/assets/images/industrial/app15.png
new file mode 100644
index 0000000..f721e28
Binary files /dev/null and b/src/assets/images/industrial/app15.png differ
diff --git a/src/assets/images/industrial/app16-1.png b/src/assets/images/industrial/app16-1.png
new file mode 100644
index 0000000..cb5aca7
Binary files /dev/null and b/src/assets/images/industrial/app16-1.png differ
diff --git a/src/assets/images/industrial/app16.png b/src/assets/images/industrial/app16.png
new file mode 100644
index 0000000..0e5e607
Binary files /dev/null and b/src/assets/images/industrial/app16.png differ
diff --git a/src/assets/images/industrial/app2-1.png b/src/assets/images/industrial/app2-1.png
new file mode 100644
index 0000000..d5cabd2
Binary files /dev/null and b/src/assets/images/industrial/app2-1.png differ
diff --git a/src/assets/images/industrial/app2.png b/src/assets/images/industrial/app2.png
new file mode 100644
index 0000000..be5bc24
Binary files /dev/null and b/src/assets/images/industrial/app2.png differ
diff --git a/src/assets/images/industrial/app3-1.png b/src/assets/images/industrial/app3-1.png
new file mode 100644
index 0000000..c1841ba
Binary files /dev/null and b/src/assets/images/industrial/app3-1.png differ
diff --git a/src/assets/images/industrial/app3.png b/src/assets/images/industrial/app3.png
new file mode 100644
index 0000000..1fd81bb
Binary files /dev/null and b/src/assets/images/industrial/app3.png differ
diff --git a/src/assets/images/industrial/app4-1.png b/src/assets/images/industrial/app4-1.png
new file mode 100644
index 0000000..a4f2bf9
Binary files /dev/null and b/src/assets/images/industrial/app4-1.png differ
diff --git a/src/assets/images/industrial/app4.png b/src/assets/images/industrial/app4.png
new file mode 100644
index 0000000..31b1a0e
Binary files /dev/null and b/src/assets/images/industrial/app4.png differ
diff --git a/src/assets/images/industrial/app5-1.png b/src/assets/images/industrial/app5-1.png
new file mode 100644
index 0000000..91da43c
Binary files /dev/null and b/src/assets/images/industrial/app5-1.png differ
diff --git a/src/assets/images/industrial/app5.png b/src/assets/images/industrial/app5.png
new file mode 100644
index 0000000..f6f856b
Binary files /dev/null and b/src/assets/images/industrial/app5.png differ
diff --git a/src/assets/images/industrial/app6-1.png b/src/assets/images/industrial/app6-1.png
new file mode 100644
index 0000000..00794c3
Binary files /dev/null and b/src/assets/images/industrial/app6-1.png differ
diff --git a/src/assets/images/industrial/app6.png b/src/assets/images/industrial/app6.png
new file mode 100644
index 0000000..c008ae0
Binary files /dev/null and b/src/assets/images/industrial/app6.png differ
diff --git a/src/assets/images/industrial/app7-1.png b/src/assets/images/industrial/app7-1.png
new file mode 100644
index 0000000..6b8ffb3
Binary files /dev/null and b/src/assets/images/industrial/app7-1.png differ
diff --git a/src/assets/images/industrial/app7.png b/src/assets/images/industrial/app7.png
new file mode 100644
index 0000000..26993f0
Binary files /dev/null and b/src/assets/images/industrial/app7.png differ
diff --git a/src/assets/images/industrial/app8-1.png b/src/assets/images/industrial/app8-1.png
new file mode 100644
index 0000000..a8c194d
Binary files /dev/null and b/src/assets/images/industrial/app8-1.png differ
diff --git a/src/assets/images/industrial/app8.png b/src/assets/images/industrial/app8.png
new file mode 100644
index 0000000..9279ed3
Binary files /dev/null and b/src/assets/images/industrial/app8.png differ
diff --git a/src/assets/images/industrial/app9-1.png b/src/assets/images/industrial/app9-1.png
new file mode 100644
index 0000000..04593f0
Binary files /dev/null and b/src/assets/images/industrial/app9-1.png differ
diff --git a/src/assets/images/industrial/app9.png b/src/assets/images/industrial/app9.png
new file mode 100644
index 0000000..cfc11a5
Binary files /dev/null and b/src/assets/images/industrial/app9.png differ
diff --git a/src/assets/images/publication-bg.png b/src/assets/images/publication-bg.png
new file mode 100644
index 0000000..3b8c9b6
Binary files /dev/null and b/src/assets/images/publication-bg.png differ
diff --git a/src/assets/images/publish-bg.png b/src/assets/images/publish-bg.png
new file mode 100644
index 0000000..0e14dad
Binary files /dev/null and b/src/assets/images/publish-bg.png differ
diff --git a/src/assets/images/publish3.png b/src/assets/images/publish3.png
new file mode 100644
index 0000000..c9edc75
Binary files /dev/null and b/src/assets/images/publish3.png differ
diff --git a/src/assets/images/research/1.png b/src/assets/images/research/1.png
new file mode 100644
index 0000000..771a638
Binary files /dev/null and b/src/assets/images/research/1.png differ
diff --git a/src/assets/images/research/12.png b/src/assets/images/research/12.png
new file mode 100644
index 0000000..8f9d90e
Binary files /dev/null and b/src/assets/images/research/12.png differ
diff --git a/src/assets/images/research/13.png b/src/assets/images/research/13.png
new file mode 100644
index 0000000..8f63e62
Binary files /dev/null and b/src/assets/images/research/13.png differ
diff --git a/src/assets/images/research/14.png b/src/assets/images/research/14.png
new file mode 100644
index 0000000..cef749c
Binary files /dev/null and b/src/assets/images/research/14.png differ
diff --git a/src/assets/images/research/2.png b/src/assets/images/research/2.png
new file mode 100644
index 0000000..6ca51d5
Binary files /dev/null and b/src/assets/images/research/2.png differ
diff --git a/src/assets/images/research/3.png b/src/assets/images/research/3.png
new file mode 100644
index 0000000..ae47412
Binary files /dev/null and b/src/assets/images/research/3.png differ
diff --git a/src/assets/images/research/4.png b/src/assets/images/research/4.png
new file mode 100644
index 0000000..c252c7b
Binary files /dev/null and b/src/assets/images/research/4.png differ
diff --git a/src/assets/images/research/5.png b/src/assets/images/research/5.png
new file mode 100644
index 0000000..6a29f4f
Binary files /dev/null and b/src/assets/images/research/5.png differ
diff --git a/src/assets/images/research/6.png b/src/assets/images/research/6.png
new file mode 100644
index 0000000..6278478
Binary files /dev/null and b/src/assets/images/research/6.png differ
diff --git a/src/assets/images/research/7.png b/src/assets/images/research/7.png
new file mode 100644
index 0000000..9cdd87f
Binary files /dev/null and b/src/assets/images/research/7.png differ
diff --git a/src/assets/images/research/8.png b/src/assets/images/research/8.png
new file mode 100644
index 0000000..8a1943f
Binary files /dev/null and b/src/assets/images/research/8.png differ
diff --git a/src/assets/images/research/res1-1.png b/src/assets/images/research/res1-1.png
new file mode 100644
index 0000000..4db1f75
Binary files /dev/null and b/src/assets/images/research/res1-1.png differ
diff --git a/src/assets/images/research/res1.png b/src/assets/images/research/res1.png
new file mode 100644
index 0000000..666c9e2
Binary files /dev/null and b/src/assets/images/research/res1.png differ
diff --git a/src/assets/images/research/res2-1.png b/src/assets/images/research/res2-1.png
new file mode 100644
index 0000000..7d81303
Binary files /dev/null and b/src/assets/images/research/res2-1.png differ
diff --git a/src/assets/images/research/res2.png b/src/assets/images/research/res2.png
new file mode 100644
index 0000000..44c1683
Binary files /dev/null and b/src/assets/images/research/res2.png differ
diff --git a/src/assets/images/research/res3-1.png b/src/assets/images/research/res3-1.png
new file mode 100644
index 0000000..411ab93
Binary files /dev/null and b/src/assets/images/research/res3-1.png differ
diff --git a/src/assets/images/research/res3.png b/src/assets/images/research/res3.png
new file mode 100644
index 0000000..fe7e7c1
Binary files /dev/null and b/src/assets/images/research/res3.png differ
diff --git a/src/assets/images/research/res4-1.png b/src/assets/images/research/res4-1.png
new file mode 100644
index 0000000..bf37456
Binary files /dev/null and b/src/assets/images/research/res4-1.png differ
diff --git a/src/assets/images/research/res4.png b/src/assets/images/research/res4.png
new file mode 100644
index 0000000..5558d69
Binary files /dev/null and b/src/assets/images/research/res4.png differ
diff --git a/src/assets/images/research/res5-1.png b/src/assets/images/research/res5-1.png
new file mode 100644
index 0000000..92cb4d3
Binary files /dev/null and b/src/assets/images/research/res5-1.png differ
diff --git a/src/assets/images/research/res5.png b/src/assets/images/research/res5.png
new file mode 100644
index 0000000..2c3b9a5
Binary files /dev/null and b/src/assets/images/research/res5.png differ
diff --git a/src/assets/images/science/1.png b/src/assets/images/science/1.png
new file mode 100644
index 0000000..7270365
Binary files /dev/null and b/src/assets/images/science/1.png differ
diff --git a/src/assets/images/science/2.png b/src/assets/images/science/2.png
new file mode 100644
index 0000000..12909c4
Binary files /dev/null and b/src/assets/images/science/2.png differ
diff --git a/src/assets/images/science/3.png b/src/assets/images/science/3.png
new file mode 100644
index 0000000..828eac3
Binary files /dev/null and b/src/assets/images/science/3.png differ
diff --git a/src/assets/images/sfel/1.png b/src/assets/images/sfel/1.png
new file mode 100644
index 0000000..796a12b
Binary files /dev/null and b/src/assets/images/sfel/1.png differ
diff --git a/src/assets/images/sfel/2.png b/src/assets/images/sfel/2.png
new file mode 100644
index 0000000..fed40d8
Binary files /dev/null and b/src/assets/images/sfel/2.png differ
diff --git a/src/assets/images/sfel/3.png b/src/assets/images/sfel/3.png
new file mode 100644
index 0000000..3362d31
Binary files /dev/null and b/src/assets/images/sfel/3.png differ
diff --git a/src/assets/images/sfel/4.png b/src/assets/images/sfel/4.png
new file mode 100644
index 0000000..53ddf01
Binary files /dev/null and b/src/assets/images/sfel/4.png differ
diff --git a/src/assets/images/sfel/5.png b/src/assets/images/sfel/5.png
new file mode 100644
index 0000000..a94926a
Binary files /dev/null and b/src/assets/images/sfel/5.png differ
diff --git a/src/assets/images/sfel/6.png b/src/assets/images/sfel/6.png
new file mode 100644
index 0000000..7f9ee23
Binary files /dev/null and b/src/assets/images/sfel/6.png differ
diff --git a/src/assets/images/sfel/7.png b/src/assets/images/sfel/7.png
new file mode 100644
index 0000000..1116a01
Binary files /dev/null and b/src/assets/images/sfel/7.png differ
diff --git a/src/assets/images/sfel/8.png b/src/assets/images/sfel/8.png
new file mode 100644
index 0000000..bee9a4a
Binary files /dev/null and b/src/assets/images/sfel/8.png differ
diff --git a/src/assets/images/sfel/9.png b/src/assets/images/sfel/9.png
new file mode 100644
index 0000000..c6f1a7c
Binary files /dev/null and b/src/assets/images/sfel/9.png differ
diff --git a/src/assets/images/survey1.png b/src/assets/images/survey1.png
new file mode 100644
index 0000000..51a1aa7
Binary files /dev/null and b/src/assets/images/survey1.png differ
diff --git a/src/assets/images/survey2.png b/src/assets/images/survey2.png
new file mode 100644
index 0000000..f91d1e9
Binary files /dev/null and b/src/assets/images/survey2.png differ
diff --git a/src/assets/images/survey3.png b/src/assets/images/survey3.png
new file mode 100644
index 0000000..f8cb66e
Binary files /dev/null and b/src/assets/images/survey3.png differ
diff --git a/src/assets/images/userSharing/1.png b/src/assets/images/userSharing/1.png
new file mode 100644
index 0000000..cb8452f
Binary files /dev/null and b/src/assets/images/userSharing/1.png differ
diff --git a/src/assets/images/userSharing/2.png b/src/assets/images/userSharing/2.png
new file mode 100644
index 0000000..47564e2
Binary files /dev/null and b/src/assets/images/userSharing/2.png differ
diff --git a/src/assets/images/userSharing/3.png b/src/assets/images/userSharing/3.png
new file mode 100644
index 0000000..07bc903
Binary files /dev/null and b/src/assets/images/userSharing/3.png differ
diff --git a/src/assets/images/userSharing/4.png b/src/assets/images/userSharing/4.png
new file mode 100644
index 0000000..e1215df
Binary files /dev/null and b/src/assets/images/userSharing/4.png differ
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
new file mode 100644
index 0000000..910e2fb
--- /dev/null
+++ b/src/pages/about/index.vue
@@ -0,0 +1,1575 @@
+<template>
+  <div class="wrap" v-if="modules.length>=1">
+    <el-carousel height="24rem" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+    
+    <div class="block history gray">
+      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]" @click="openLink(modules[1].form)">
+        <h2 class="wow fadeInLeft" style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+          <div class="left">
+            <h2>{{ modules[1].form.subTitle }}</h2>
+            <div class="line"></div>
+            <div class="des">{{ modules[1].form.des }}</div>
+          </div>
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <ul class="card">
+          <li :class="['item1 wow fadeInLeft', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]" data-wow-delay="0.7s" @click="openLink(modules[3].form)">
+            <h6>{{ modules[3].form.title }}</h6>
+            <div class="des" v-html="modules[3].form.des"></div>
+          </li>
+          <li :class="['item2 wow fadeInRight', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]" data-wow-delay="0.9s" @click="openLink(modules[4].form)">
+            <h6>{{ modules[4].form.title }}</h6>
+            <div class="des" v-html="modules[4].form.des"></div>
+          </li>
+          <li :class="['item3 wow fadeInLeft', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]" data-wow-delay="1.1s" @click="openLink(modules[5].form)">
+            <h6>{{ modules[5].form.title }}</h6>
+            <div class="des" v-html="modules[5].form.des"></div>
+          </li>
+          <li :class="['item4 wow fadeInRight', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]" data-wow-delay="1.3s" @click="openLink(modules[6].form)">
+            <h6>{{ modules[6].form.title }}</h6>
+            <div class="des" v-html="modules[6].form.des"></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[7].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
+        <ul class="stat">
+          <li class="wow fadeInLeft" data-wow-delay="0.2s">
+            <p class="num">{{ modules[8].form.title }}</p>
+            <p class="text">{{ modules[8].form.des }}</p>
+          </li>
+          <li class="wow fadeInLeft" data-wow-delay="0.4s">
+            <p class="num">{{ modules[9].form.title }}</p>
+            <p class="text">{{ modules[9].form.des }}</p>
+          </li>
+          <li class="wow fadeInLeft" data-wow-delay="0.6s">
+            <p class="num">{{ modules[10].form.title }}</p>
+            <p class="text">{{ modules[10].form.des }}</p>
+          </li>
+          <li class="wow fadeInLeft" data-wow-delay="0.9s">
+            <p class="num">{{ modules[11].form.title }}</p>
+            <p class="text">{{ modules[11].form.des }}</p>
+          </li>
+          <li class="wow fadeInLeft" data-wow-delay="1.1s">
+            <p class="num">{{ modules[12].form.title }}</p>
+            <p class="text">{{ modules[12].form.des }}</p>
+          </li>
+          <li class="wow fadeInLeft" data-wow-delay="1.3s">
+            <p class="num">{{ modules[13].form.title }}</p>
+            <p class="text">{{ modules[13].form.des }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="plan">
+      <div :class="['inner', {'cursor-pointer': isLink(modules[14].form.link.linkName)}]" @click="openLink(modules[14].form)">
+        <img class="pic wow fadeInLeft" :src="modules[14].form.pic" alt="">
+        <div class="texts wow fadeInRight">
+          <h6>{{ modules[14].form.title }}</h6>
+          <div class="des">{{ modules[14].form.des }}</div>
+          <img src="@/assets/images/arrow-white.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[15].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
+        <ul class="people">
+          <template v-for="(item, i) in modules[16].list">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s">
+              <img class="pic" :src="item.pic" alt="">
+              <div class="texts">
+                <p class="sub">{{ item.subTitle }}</p>
+                <h6>{{ item.title }}</h6>
+                <p class="des">{{ item.des }}</p>
+                <img :class="{'arrow': isLink(item.link.linkName)}" src="@/assets/images/arrow.png" alt="" @click="openLink(item)">
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block list-block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[17].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
+        <ul class="list">
+          <li class="wow fadeInDown" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[18].form.link.linkName)}" @click="openLink(modules[18].form)">
+            <img class="pic" :src="modules[18].form.pic" alt="">
+            <h6>{{ modules[18].form.title }}</h6>
+            <p class="des">{{ modules[18].form.des }}</p>
+          </li>
+          <li class="wow fadeInDown" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[19].form.link.linkName)}" @click="openLink(modules[19].form)">
+            <img class="pic" :src="modules[19].form.pic" alt="">
+            <h6>{{ modules[19].form.title }}</h6>
+            <p class="des">{{ modules[19].form.des }}</p>
+          </li>
+          <li class="wow fadeInDown" data-wow-delay="1s" :class="{'cursor-pointer': isLink(modules[20].form.link.linkName)}" @click="openLink(modules[20].form)">
+            <img class="pic" :src="modules[20].form.pic" alt="">
+            <h6>{{ modules[20].form.title }}</h6>
+            <p class="des">{{ modules[20].form.des }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner staff-inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[21].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
+        <div :class="['staff wow fadeInDown', {'cursor-pointer': isLink(modules[22].form.link.linkName)}]" data-wow-delay="0.7s" @click="openLink(modules[22].form)">
+          <div class="left">
+            <h6>{{ modules[22].form.title }}</h6>
+            <div class="des">{{ modules[22].form.des }}</div>
+          </div>
+          <img class="pic" :src="modules[22].form.pic" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+  .inner {
+    .wow  {
+      font-size: 1.921rem;
+    }
+    .texts {
+      padding: 4.1rem 2.85rem 1.5rem;
+      .left {
+        width: 58%;
+        margin-right: 2.8rem;
+        h2 {
+          font-size: 1.721rem;
+        }
+        .line {
+          margin: 1rem;
+        }
+        .des {
+          font-size: 1.256rem;
+        }
+      }
+      .bg {
+        width: 38%;
+        height: 25.3rem;
+      }
+    }
+    .b-title {
+      margin-bottom: 2.5rem;
+      font-size: 2.8rem;
+    }
+    .intro  {
+      margin-bottom: 4rem;
+    }
+  }
+}
+.history {
+  h2 {
+    font-size: 2.14rem;
+    color: #333;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 5.125rem 3.5625rem 1.875rem;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 6.25rem 0px 0px 0px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .left {
+    width: 43.4375rem;
+  }
+  .line {
+    width: 8.5rem;
+    height: 2px;
+    margin: 1.25rem 0;
+    background: #D7D7D7;
+  }
+  .des {
+    font-size: 1.57rem;
+    color: #181818;
+    line-height: 31px;
+    -webkit-line-clamp: 6;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+    border-top-right-radius: 40px;
+  }
+}
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    width: calc((100% - 28px) / 2);
+    // height: 13.85rem;
+    padding: 3.5rem 3.344rem ;
+    margin-bottom: 1.4rem;
+    color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+    &:nth-child(odd) {
+      margin-right: 1.75rem;
+    }
+  }
+  .item1 {
+    background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
+  }
+  .item2 {
+    background-color: #4984B6;
+  }
+  .item3 {
+    background-color: #567180;
+  }
+  .item4 {
+    background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
+  }
+  h6 {
+    margin-bottom: 10px;
+    font-size: 2.28rem;
+    font-family: toppan;
+  }
+  .des {
+    font-size: 1.024rem;
+  }
+}
+.plan {
+  padding: 3.65rem 0;
+  background: #072947;
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    width: 85.7142rem;
+  }
+  .pic {
+    width: 33.2rem;
+    height: 24.4rem;
+    margin-bottom: -4.8rem;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .texts {
+    width: 51%;
+    margin-top: 4.25rem;
+    color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
+    img {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+  }
+  h6 {
+    font-size: 2.056rem;
+  }
+  .des {
+    margin: 2rem 0;
+    font-size: 1.1424rem;
+  }
+}
+.people {
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 6.296rem;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+  }
+  .pic {
+    width: 47%;
+    height: auto;
+  }
+  .texts {
+    width: 49%;
+    padding-top: 4.45rem;
+  }
+  h6 {
+    margin: 1rem 0;
+    font-size: 2.28rem;
+    font-weight: 600;
+  }
+  .sub {
+    font-size: 1.1424rem;
+    color: #020202;
+  }
+  .des {
+    font-size: 1.024rem;
+    color: #020202;
+    line-height: 30px;
+  }
+  .arrow {
+    height: 3.7rem;width: 3.7rem;
+  }
+}
+.list-block {
+  .inner {
+    width: 80%;
+    padding: 5.625rem 0;
+    background-color: #fff;
+  }
+}
+.list {
+  display: flex;
+  justify-content: center;
+  li {
+    flex: 1;
+    padding-bottom: 1.875rem;
+    margin-right: 1.75rem;
+    text-align: center;
+    background-color: #F5F5F5;
+    transition: .3s;
+    &:hover {
+      background-color: #1f5793;
+      h6, .des {
+        color: #fff;
+      }
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .pic {
+    width: 100%;
+  }
+  h6 {
+    margin: 1.75rem 0 5px;
+    font-size: 1.368rem;
+    color: #272727;
+    transition: .3s;
+  }
+  .des {
+    font-size: .912rem;
+    color: #757575;
+    transition: .3s;
+  }
+}
+.staff {
+  display: flex;
+  justify-content: space-between;
+  background: #F8F8F8;
+  transition: .3s;
+  &:hover {
+    transform: scale(1.05);
+    background-color: #165191;
+    h6, .des {
+      color: #fff;
+    }
+  }
+  .staff-inner {
+    width: 98.8125rem;
+  }
+  .left {
+    width: 50%;
+    padding: 5.4rem 2.15rem 0 2.3rem;
+  }
+  h6 {
+    margin-bottom: 1.5rem;
+    font-size: 1.712rem;
+    color: #333;
+    transition: .3s;
+    @include mul-ellipsis(3);
+  }
+  .des {
+    font-size: 1.42rem;
+    color: #333;
+    line-height: 1.94rem;
+    transition: .3s;
+  }
+  .pic {
+    width: 53%;
+    height: auto
+  }
+}
+.stat {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 3rem;
+  li {
+    width: 27%;
+    margin-bottom: 2.5rem;
+  }
+  .num {
+    margin-bottom: 10px;
+    font-size: 2.7rem;
+    font-weight: 800;
+    font-family: toppan;
+    color: #035CE1;
+    line-height: 2.45rem;
+  }
+  .text {
+    font-size: 1.08rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .card li {
+    padding:3.5rem 1rem;
+  }
+  .history{
+    .texts{
+      padding: 3.14rem 1.5rem;
+    }
+  }
+ .texts {
+  flex-direction: column;
+  .left{
+    width: 100%;
+    h2{
+      font-size: 1.42rem;
+    }
+    
+  }
+  .bg{ 
+      margin: 0;
+      width: 100%;
+      height: 28.125rem;
+    }
+ }
+ .block{
+  padding: 50px 0;
+  .intro{
+    margin-bottom: 3.125rem;
+  }
+  .inner {
+    .card{
+      flex-direction: column;
+      li {
+        width: 100%;
+      }
+    }
+  }
+  
+ }
+ .gray {
+    .inner{
+      .stat{
+        flex-direction: column;
+        li{
+          width: 100%;
+          text-align: center;
+        }
+      } 
+    }
+    
+  }
+  .plan{
+    .inner{
+       flex-direction: column;
+       .pic{
+        width: 95%;margin: 0 auto;
+       }
+       .texts {
+        width: 100%;
+        text-align: center;
+       }
+    }
+  }
+  .block {
+    .inner {
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .people{
+        .wow {
+          flex-direction: column;
+          .pic {
+            width: 95%;
+            margin: 0 auto;
+          }
+          .texts{
+            padding-top: 3.125rem;
+            width: 100%;
+          }
+        }
+      }
+      .list{
+        flex-direction: column;
+        .wow {
+          width: 100%;
+        }
+      }
+      .staff {
+        flex-direction: column;
+        .left{
+          width: 100%;
+          h6 {
+            font-size: 1.42rem;
+          }
+          .des{
+             font-size: 1.07rem;
+          }
+        }
+        .pic {
+          width: 95%;margin: 0 auto;
+          height: 25rem;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .inner{
+    .texts {
+      .bg {
+        height: 21.875rem;
+        margin-top: 1rem;
+      }
+    }
+    .card {
+      li {
+        h6 {
+          font-size: 2rem;
+        }
+      }
+    }
+    .people{
+      li {
+        margin-bottom: 30px;
+        .pic {
+          height: 18.875rem;
+        }
+      }
+    }
+  }
+  .plan {
+    .pic {
+      height: 25rem;
+    }
+  }
+  .list {
+    .pic {
+      height: 19rem;
+    }
+  }
+  .staff {
+    .pic {
+      height: 20rem !important;
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        li {
+          padding: 1rem;
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        li {
+          .pic {
+            width: 100% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        .pic {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px)  {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        li {
+          padding: 1rem;
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        li {
+          .pic {
+            width: 100% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        .pic {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        li {
+          padding: 1.5rem;
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        li {
+          .pic {
+            width: 100% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        .pic {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        li {
+          padding: 2rem;
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        li {
+          .pic {
+            width: 100% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        .pic {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        flex-direction: row;
+        li {
+          padding: 2rem;
+          width: calc((100% - 28px) / 2);
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        li {
+          .pic {
+            width: 100% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        .pic {
+          height: auto !important;
+        }
+      }
+      .stat {
+        flex-direction: row;
+        li {
+          width: 30%;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px)  {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        flex-direction: row;
+        li {
+          padding: 2rem;
+          width: calc((100% - 28px) / 2);
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        
+        li {
+          flex-direction: row !important;
+          .pic {
+            width: 47% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        flex-direction: row;
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        flex-direction: row;
+        .pic {
+          width: 53%;
+          height: auto !important;
+        }
+      }
+      .stat {
+        flex-direction: row;
+        li {
+          width: 30%;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap  {
+    /deep/ .el-carousel {
+      height: 12rem;
+      .el-carousel__container{
+        height: 12rem !important;
+      }
+      img {
+        height: 12rem;
+      }
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      bottom: 0;
+      left: 2rem;
+    }
+  }
+  .history  {
+    .inner {
+      h2  {
+        margin-left: 1rem !important;
+      }
+      .texts  {
+        padding: 4.1rem 1.35rem 1.5rem;
+        .left {
+          h2 {
+            margin: 0 !important;
+            font-size: 1.321rem;
+          }
+          .line {
+            margin: .5rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+          }
+      }
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      width: 90%;
+      .b-title {
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+      }
+      .intro  {
+        margin-bottom: 1rem;
+        font-size: .85rem;
+      }
+      .texts  {
+        .bg {
+          height: auto;
+        }
+      }
+      .card {
+        flex-direction: row;
+        li {
+          padding:  3.5rem 3.344rem;
+          width: calc((100% - 28px) / 2);
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+      .people {
+        
+        li {
+          flex-direction: row !important;
+          .pic {
+            width: 47% !important;
+            height: auto;
+            margin: 0;
+          }
+          .texts {
+            padding: 1rem !important;
+          }
+        }
+      }
+      .list {
+        flex-direction: row;
+        li {
+          .pic {
+            height: 13rem;
+          }
+        }
+      }
+      .staff  {
+        flex-direction: row;
+        .pic {
+          width: 53%;
+          height: auto !important;
+        }
+      }
+      .stat {
+        flex-direction: row;
+        li {
+          width: 30%;
+        }
+      }
+    }
+  }
+  .plan {
+    padding: 1rem 0;
+      .inner {
+        width: 90%;
+        .pic {
+          width: 100%;
+          height: auto;
+        }
+        .texts  {
+          margin-top: 1rem;
+        }
+      }
+  }
+  .list-block  {
+    .inner {
+      padding-top: 1rem;
+      .list {
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 1200px) and (max-width: 1300px) {
+  .block {
+    .inner {
+      .card {
+        li {
+          h6 {
+            font-size: 1.5rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/application/index.vue b/src/pages/application/index.vue
new file mode 100644
index 0000000..fba0f6b
--- /dev/null
+++ b/src/pages/application/index.vue
@@ -0,0 +1,938 @@
+<template>
+  <div class="wrap" v-if="modules.length>=1">
+    <el-carousel  :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+    
+    <div class="block history gray">
+      <div class="inner">
+        <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+          <div class="left">
+            <h2>{{ modules[1].form.subTitle }}</h2>
+            <!-- <div class="line"></div> -->
+            <div class="des">{{ modules[1].form.des }}</div>
+            <img :class="{'arrow': isLink(modules[1].form.link.linkName)}" src="@/assets/images/arrow.png" alt="" @click="openLink(modules[1].form)">
+          </div>
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+        </div>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner app-inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <ul class="app">
+          <li v-for="(item, i) in modules[3].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+            <img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
+            <img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <ul class="group">
+          <li v-for="(item, i) in modules[5].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block news-block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
+        <ul class="news">
+          <li v-for="(item, i) in articles" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" @click="toArtice(item, modules[7].form)">
+            <img :src="item.titleImg" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <div class="des" v-html="item.mainBody"></div>
+              <span class="meta">{{ item.releaseTime }}</span>
+            </div>
+          </li>
+        </ul>
+        <div class="all-link" @click="toAll(modules[7].form)">
+          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      articles: []
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+          
+          // 获取文章列表
+          const { column, site, articleNum } = json[7].form
+          if (column.length) {
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+            }).catch(err => {})
+          }
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+
+.wrap{
+  /deep/ .el-carousel {
+    height: 21.6rem;
+    .el-carousel__container{
+      height: 21.6rem;
+    }
+    img{
+      height: 21.6rem;
+    }
+  }
+}
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.15rem 0;
+  .inner {
+    .b-title  {
+      font-size: 2.25rem;
+      margin-bottom: 2.25rem;
+    }
+    .intro  {
+      margin-bottom: 2.25rem;
+    }
+  }
+}
+.history {
+  h2 {
+    font-size: 1.35rem;
+    color: #333;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 2.7rem 2.56rem 2.7rem;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+    transition: .3s;
+    position: relative;
+    &:hover {
+      transform: scale(1.05);
+    }
+    // .line {
+    //   padding: 2.7rem 0;
+    // }
+    .des {
+      margin:  2.7rem 0;
+    }
+  }
+  .left {
+    width: 50%;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 1.2rem;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    width: 32.88rem;
+    height: auto;
+    position: absolute;
+    right: -1rem;
+    bottom: 2.9rem;
+  }
+}
+.app-inner {
+  width: 1558px;
+}
+.app {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 368px;
+    height: 252px;
+    margin: 0 14px 14px 0;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+      .icon {
+        transform: rotateY(180deg);
+      }
+    }
+    &:first-child {
+      width: 750px;
+    }
+    &:nth-child(3), &:nth-child(7), &:nth-child(10) {
+      margin-right: 0;
+    }
+    &:nth-child(9) {
+      width: 563px;
+    }
+    &:nth-child(10) {
+      width: 555px;
+    }
+  }
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .icon {
+    position: relative;
+    transition: .3s;
+  }
+  .text {
+    position: relative;
+    margin-top: 20px;
+    font-size: 2rem;
+    color: #fff;
+  }
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: calc((100% - 56px) / 3);
+    margin: 0 28px 39px 0;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+      .text {
+        color: #fff;
+        background-color: #394f6d;
+      }
+    }
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+  .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 6.43rem;
+    font-size: 1.44rem;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    line-height:  6.43rem;
+    text-align: center;
+    color: #272727;
+    background-color: #F5F5F5;
+    transition: .3s;
+  }
+}
+.news-block {
+  background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+}
+.news {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  li {
+    display: inline-flex;
+    width: calc((100% - 28px) / 2);
+    padding: 1.53rem;
+    margin-bottom: 1.26rem;
+    background-color: #fff;
+    cursor: pointer;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  img {
+    width: 10.66rem;
+    height: auto;
+  }
+  .texts {
+    margin-left: 34px;
+  }
+  h6 {
+    font-size: 1.1rem;
+    color: #0648A8;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .des {
+    margin: 2px 0;
+    font-size: .9rem;
+    color: #333;
+    line-height: 22px;
+    -webkit-line-clamp: 2;
+  }
+  .meta {
+    font-size: .8rem;
+    color: #999;
+  }
+}
+@media (max-width: 1520px) {
+  .app-inner {
+    width: 1558px;
+  }
+}
+
+
+@media (min-width: 280px) and (max-width: 1200px) {
+  .wrap{
+  /deep/ .el-carousel {
+    height: 15rem;
+    .el-carousel__container{
+      height: 15rem;
+    }
+    img{
+      height: 15rem;
+    }
+  }
+}
+.banner-item .banner-name {
+  font-size: 1.5rem;
+  bottom: 2.25rem;
+  left: 16.125rem
+}
+ .block{ 
+  padding: 50px 0;
+  .inner{
+    width: 95%;
+    margin: 0 auto;
+    .texts{
+      flex-direction: column;
+      .left {
+        width: 100%;
+      }
+      .bg{
+        margin: 0;
+        width: 100%;
+        height: 20rem !important;
+      }
+    }
+  }
+  .app{
+    li {
+      width: 100%;
+    }
+  }
+  .intro {
+    margin-bottom: 30px;
+  }
+  .group{
+     flex-direction: column;
+     li {
+      width: 100%;
+      img {
+        height: 20rem;
+      }
+     }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 0 auto;
+      flex-direction: column;
+      img{
+        width: 100%;
+        height: 12rem;
+      }
+      .texts{
+        margin-left: 0;
+        margin-top: 20px;
+      }
+    }
+  }
+ }
+}
+@media (max-width: 1200px) {
+ .block{ 
+  padding: 50px 0;
+  .inner{
+    width: 95%;
+    margin: 0 auto;
+    .texts{
+      flex-direction: column;
+      .left {
+        width: 100%;
+      }
+      .bg{
+        margin: 0;
+        width: 100%;
+        height: 450px;
+      }
+    }
+  }
+  .app{
+    li {
+      width: 100%;
+    }
+  }
+  .intro {
+    margin-bottom: 30px;
+  }
+  .group{
+     flex-direction: column;
+     li {
+      width: 100%;
+     }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 0 auto;
+      flex-direction: column;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+      .texts{
+        margin-left: 0;
+        margin-top: 20px;
+      }
+    }
+  }
+ }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          height: auto !important;
+        }
+      }
+      .group{
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+      .news {
+         li {
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          height: auto !important;
+        }
+      }
+      .group{
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+      .news {
+         li {
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          height: auto !important;
+        }
+      }
+      .group{
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+      .news {
+         li {
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          height: auto !important;
+        }
+      }
+      .group{
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+      .news {
+         li {
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        padding: 5rem 1.25rem;
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          height: auto !important;
+        }
+      }
+      .group{
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+      .news {
+         li {
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        flex-direction: row;
+        padding: 3rem 1.25rem;
+        .left {
+          width: 50%;
+        }
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          width: 50%;
+          margin: -3rem 0 0 0;
+          height: auto !important;
+        }
+      }
+      .group{
+        flex-direction: row;
+        li {
+          width: calc((100% - 56px) / 3);
+          img {
+            height: auto;
+          }
+          .text {
+            line-height: 1.5rem;
+          }
+        }
+      }
+      .news {
+        flex-direction: row;
+         li {
+          width: calc((100% - 28px) / 2);
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+      .app {
+        flex-direction: row;
+        li {
+          width: 45%;
+          &:nth-child(2n+1) {
+            margin-right: 1rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px)  {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .inner {
+      h2 {
+        margin-left: 1.5rem !important;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .texts {
+        flex-direction: row;
+        padding: 3rem 1.25rem;
+        .left {
+          width: 50%;
+        }
+        h2{
+          margin-left: 0 !important;
+        }
+        .bg {
+          width: 50%;
+          margin: -3rem 0 0 0;
+          height: auto !important;
+        }
+      }
+      .group{
+        flex-direction: row;
+        li {
+          width: calc((100% - 56px) / 3);
+          img {
+            height: auto;
+          }
+          .text {
+            line-height: 1.5rem;
+          }
+        }
+      }
+      .news {
+        flex-direction: row;
+         li {
+          width: calc((100% - 28px) / 2);
+          padding: 1.25rem;
+          img{
+             height: auto;
+          }
+          .texts {
+            padding: 1.25rem;
+          }
+         }
+      }
+      .app {
+        flex-direction: row;
+        li {
+          width: 45%;
+          &:nth-child(2n+1) {
+            margin-right: 1rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index 553a031..4d51777 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -13,7 +13,7 @@
         <div class="left">
           <template v-if="!isPeople">
             <h2>{{ form.title }}</h2>
-            <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} {{$t('column.views')}} | {{ form.releaseTime }}</div>
+            <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.releaseTime }}</div>
             <div class="meta">{{ form.edit && $t('column.edit') + '：' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + '：' + form.audit }} {{ form.label && ' | ' + $t('column.label') + '：' + form.label }}</div>
           </template>
           <p v-if="form.summary"
@@ -52,6 +52,7 @@ export default {
     return {
       id: this.$route.query.articleId,
       columnId: +this.$route.query.id,
+      preview: this.$route.query.preview,
       loaded: false,
       routes: [],
       form: {},
@@ -77,58 +78,78 @@ export default {
   methods: {
     // 获取文章详情
     getInfo () {
-      this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
-        // 设置面包屑
-        const { columnName, path, id } = this.$route.query
+      // 预览直接取缓存数据，不然就调接口
+      let cache = localStorage.getItem('article')
+      if (this.preview && cache) {
+        cache = JSON.parse(cache)
+        const temId = cache.articleTemplate
+        this.form = cache
         this.routes = [
           {
-            name: columnName || data.columnName,
-            path: path ? '/' + path : '',
-            query: {
-              id: id || data.columnId
-            }
+            name: cache.columnName,
           },
           {
-            name: data.title
+            name: cache.title
           }
         ]
-        // 文章被禁用了就直接返回
-        if (data.isDisable) {
-          this.$router.back()
-        } else {
-          const temId = data.articleTemplate
-          let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
-          if (temId === 25 || temId === 26) { // 会议活动/期刊详情
-            this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
-          } else {
-            if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可
-            if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
-            data.releaseTime = data.releaseTime.split(' ')[0]
-            this.form = data
-            this.columnId = data.columnId
-            // 如果没上传banner
-            if (!data.bannerImg) {
-              const columns = await this.$post(this.api.listWithTree, {
-                siteId: this.site,
-                columnName: '',
-                templateId: '',
-                typeId: '',
-                isSort: 1
-              })
-              this.getBanner(columns.data)
-              this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
+        if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可
+        if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
+        if (cache.releaseTime) cache.releaseTime = cache.releaseTime.split(' ')[0]
+        this.loaded = true
+        console.log("🚀 ~ file: index.vue:90 ~ getInfo ~ cache:", this.form, cache)
+      } else {
+        this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
+          // 设置面包屑
+          const { columnName, path, id } = this.$route.query
+          this.routes = [
+            {
+              name: columnName || data.columnName,
+              path: path ? '/' + path : '',
+              query: {
+                id: id || data.columnId
+              }
+            },
+            {
+              name: data.title
             }
+          ]
+          // 文章被禁用了就直接返回
+          if (data.isDisable) {
+            this.$router.back()
+          } else {
+            const temId = data.articleTemplate
+            let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
+            if (temId === 25 || temId === 26) { // 会议活动/期刊详情
+              this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
+            } else {
+              if (temId == 69) this.isParty = 1 // 组织架构（articleTemplate=69）是另一套主题，加个class即可
+              if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
+              data.releaseTime = data.releaseTime.split(' ')[0]
+              this.form = data
+              this.columnId = data.columnId
+              // 如果没上传banner
+              if (!data.bannerImg) {
+                const columns = await this.$post(this.api.listWithTree, {
+                  siteId: this.site,
+                  columnName: '',
+                  templateId: '',
+                  typeId: '',
+                  isSort: 1
+                })
+                this.getBanner(columns.data)
+                this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
+              }
 
-            // 浏览量+1
-            this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
-            this.loaded = true
+              // 浏览量+1
+              this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
+              this.loaded = true
+            }
           }
-        }
-      }).catch(err => { })
+        }).catch(err => { })
+      }
     },
     // 列表详情
     getColumnInfo () {
-      console.log("🚀 ~ file: index.vue:125 ~ getColumnInfo ~ this.columnId:", this.columnId)
       this.columnId && this.$post(`${this.api.findColumn}?id=${this.columnId}`)
         .then(({ data }) => {
           if (data.detailStyleId == 69) this.isParty = 1
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
new file mode 100644
index 0000000..22007fe
--- /dev/null
+++ b/src/pages/careers/index.vue
@@ -0,0 +1,825 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block">
+      <div class="inner">
+        <ul class="card">
+          <li class="wow fadeInDown" data-wow-delay="0.1s">
+            <img class="pic" :src="modules[1].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[1].form.title }}</h6>
+              <p class="text">{{ modules[1].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+            </div>
+          </li>
+          <li class="wow fadeInDown" data-wow-delay="0.3s">
+            <img class="pic" :src="modules[2].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="text">{{ modules[2].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+            </div>
+          </li>
+          <li class="wow fadeInDown" data-wow-delay="0.5s">
+            <img class="pic" :src="modules[3].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="text">{{ modules[3].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
+            </div>
+          </li>
+          <li class="wow fadeInDown" data-wow-delay="0.7s">
+            <img class="pic" :src="modules[4].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[4].form.title }}</h6>
+              <p class="text">{{ modules[4].form.des }}</p>
+            </div>
+            <div class="arrow">
+              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
+        <ul class="people">
+          <template v-for="(item, i) in modules[6].list">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+              <img class="comma" src="@/assets/images/comma.png" alt="">
+              <div class="left">
+                <h6>{{ item.title }}</h6>
+                <div class="des">{{ item.des }}</div>
+              </div>
+              <img class="pic" :src="item.pic" alt="">
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+
+    <ul class="shows">
+      <template v-for="(item, i) in modules[7].list">
+        <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
+          <div class="left">
+            <h6>{{ item.title }}</h6>
+            <div class="sub">{{ item.subTitle }}</div>
+            <div class="des">{{ item.des }}</div>
+            <img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+          </div>
+          <img class="pic" :src="item.pic" alt="">
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.wrap{
+  /deep/ .el-carousel {
+    height: 21.6rem;
+    .el-carousel__container{
+      height: 21.6rem;
+    }
+    img{
+      height: 21.6rem;
+    }
+  }
+}
+
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.15rem 0;
+  .inner {
+    .b-title  {
+      font-size: 2.25rem;
+      margin-bottom: 2.25rem;
+    }
+    .intro  {
+      margin-bottom: 6.9rem;
+    }
+   
+  }
+}
+.card {
+  display: flex;
+  justify-content: center;
+  li {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex: 1;
+    height: 23.67rem;
+    color: #fff;
+    &:hover {
+      .arrow {
+        opacity: 1;
+      }
+    }
+    .pic {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .texts {
+      position: relative;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 1.57rem;
+    }
+    .text {
+      font-size: 1.08rem;
+      text-align: center;
+    }
+    .arrow {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 7.9rem;
+      text-align: center;
+      background: #36404A;
+      opacity: 0;
+      transition: .3s;
+      cursor: default;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.people {
+  position: relative;
+  li {
+    position: relative;
+    padding: 4.5rem 3.15rem 4.5rem 2.565rem;
+    margin-bottom: 100px;
+    background-color: #fff;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+    &:nth-child(even) {
+      display: flex;
+      justify-content: flex-end;
+      .comma {
+        left: 70%;
+      }
+      .pic {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+  .comma {
+    position: absolute;
+    top: -22px;
+    left: 57px;
+  }
+  .left {
+    width: 50%;
+  }
+  h6 {
+    font-size: 1.4rem;
+    color: #333;
+  }
+  .des {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    color: #666;
+    line-height: 32px;
+  }
+  .pic {
+    position: absolute;
+    top: -60px;
+    right: 43px;
+    width: 40%;
+    height: auto;
+  }
+}
+.shows {
+  position: relative;
+  li {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: auto;
+    margin-bottom: 40px;
+    color: #fff;
+    &:hover .left {
+      h6, .sub, .des, .icon {
+        transform: translateY(20px);
+      }
+    }
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+    &:nth-child(2) {
+      .left {
+        background-color: rgba(47, 79, 23, .65);
+      }
+    }
+    &:nth-child(3) {
+      .left {
+        width: 43%;
+        background-color: rgba(91, 58, 35, .65);
+      }
+    }
+  }
+  .left {
+    position: relative;
+    z-index: 1;
+    width: 43.333%;
+    height: 100%;
+    padding: 138px 30px 130px 103px;
+    background-color: rgba(54, 54, 54, .65);
+  }
+  .pic {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+  }
+  h6 {
+    font-size: 2.07rem;
+    transition: .3s;
+  }
+  .sub {
+    margin: 20px 0 20px 0;
+    font-size: 1.35rem;
+    transition: .3s;
+  }
+  .des {
+    margin-bottom: 40px;
+    font-size: 1.08rem;
+    transition: .3s;
+  }
+  .icon {
+    transition: .3s;
+  }
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+  .wrap{
+  /deep/ .el-carousel {
+    height: 15rem;
+    .el-carousel__container{
+      height: 15rem;
+    }
+    img{
+      height: 15rem;
+    }
+  }
+}
+ .block{ 
+  padding: 50px 0;
+  .inner {
+    width: 95%;margin: 0 auto;
+    .card{
+      flex-direction: column;
+      li{
+        margin-top: 20px;
+        width: 100%;
+        height: 27rem;
+      }
+    }
+    .people{
+      li {
+        padding: 200px 20px 30px;
+        .left {
+          width: 100%;
+        }
+        .pic{
+          top: -60px;
+          right: 13px;
+          width: 60%;
+          height: 12.5rem;
+        }
+      }
+    }
+    
+  }
+ }
+ .shows{
+    li {
+      flex-direction: column;
+      align-items:flex-start;
+      height: 16rem;
+      .left {
+        padding: 10px ;
+        h6{
+          font-size: 1.5rem ;
+        }
+        .sub {
+          margin: .5rem;
+          font-size: 1rem;
+        }
+        .des{
+          margin-bottom: 1.25rem;
+        }
+        .icon {
+          width: 3.5rem;
+          height: 3.5rem;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40px;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        h6 {
+          font-size: 1rem;
+        }
+        .sub {
+          font-size: .9rem;
+        }
+        .des {
+          font-size: .88rem;
+          margin-bottom: .5rem;
+        }
+        .icon {
+          width: 2rem;height: 2rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40px;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        h6 {
+          font-size: 1rem;
+        }
+        .sub {
+          font-size: .9rem;
+        }
+        .des {
+          font-size: .88rem;
+          margin-bottom: .5rem;
+        }
+        .icon {
+          width: 2rem;height: 2rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40px;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        h6 {
+          font-size: 1rem;
+        }
+        .sub {
+          font-size: .9rem;
+        }
+        .des {
+          font-size: .88rem;
+          margin-bottom: .5rem;
+        }
+        .icon {
+          width: 2rem;height: 2rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px)  {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          margin-bottom: 15rem;
+          padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -40%;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        padding: 2rem 2rem;
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          padding: 10rem 1.25rem 1.5rem;
+          margin-bottom: 15rem;
+          .pic {
+            top: -60%;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        padding: 3rem 2rem;
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          margin-bottom: 20rem;
+          padding: 10rem 1.25rem 1.5rem;
+       
+          .pic {
+            top: -85%;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        padding: 4rem 2rem;
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+     padding: 1.25rem 0;
+     .inner {
+      .card {
+        li {
+          flex: none;
+          height: 25rem;
+          .pic {
+            height: 25rem;
+          }
+        }
+      }
+      .people {
+        li {
+          margin-bottom: 30rem;
+          padding: 10rem 1.25rem 1.5rem;
+          .pic {
+            top: -115%;
+            height: auto;
+          }
+        }
+      }
+      
+     }
+  }
+  .shows {
+    li {
+      height: auto;
+      .left {
+        padding: 4rem 2rem;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index c39459f..c2441df 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -134,240 +134,248 @@
               </span>
             </el-tree>
 
-            <template v-if="info.listStyleId === 12">
-              <div class="article-wrap">
-                <ul class="articles">
-                  <li v-for="(item, i) in articles"
-                      :key="i"
-                      :class="{'news-notice': info.listStyleId === 55}"
-                      class="readDetail"
-                      @click="toArtice(item)">
-                    <template v-if="info.listStyleId === 55">
-                      <div class="releaseTime">
-                        <p class="d">{{ item.date }}</p>
-                        <p class="m">{{ item.month }}</p>
-                      </div>
-                      <div class="news-title">{{ item.title }}</div>
-                    </template>
-                    <template v-else>
-                      <img class="pic"
-                           :src="item.titleImg"
-                           alt=""
-                           onerror="javascript:this.src='./images/1.png';" />
-                      <div class="texts">
-                        <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                           class="type">
-                          {{ item.classificationName }}
-                        </p>
-                        <h6 class="titleDes">{{ item.title }}</h6>
-                        <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
-                          <span class="meta">{{ item.releaseTime }}</span>
-                          <div class="des"
-                               v-html="item.mainBody"></div>
-                        </template>
-                        <span v-if="item.listStyleId === 10 "
-                              class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+            <template v-if="articles.length">
+              <template v-if="info.listStyleId === 12">
+                <div class="article-wrap">
+                  <ul class="articles">
+                    <li v-for="(item, i) in articles"
+                        :key="i"
+                        :class="{'news-notice': info.listStyleId === 55}"
+                        class="readDetail"
+                        @click="toArtice(item)">
+                      <template v-if="info.listStyleId === 55">
+                        <div class="releaseTime">
+                          <p class="d">{{ item.date }}</p>
+                          <p class="m">{{ item.month }}</p>
+                        </div>
+                        <div class="news-title">{{ item.title }}</div>
+                      </template>
+                      <template v-else>
+                        <img class="pic"
+                             :src="item.titleImg"
+                             alt=""
+                             onerror="javascript:this.src='./images/1.png';" />
+                        <div class="texts">
+                          <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                             class="type">
+                            {{ item.classificationName }}
+                          </p>
+                          <h6 class="titleDes">{{ item.title }}</h6>
+                          <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
+                            <span class="meta">{{ item.releaseTime }}</span>
+                            <div class="des"
+                                 v-html="item.mainBody"></div>
+                          </template>
+                          <span v-if="item.listStyleId === 10 "
+                                class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                         item.labelName }}</span>
-                        <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                          <div v-if="item.keynoteSpeaker"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/mine.png"
-                                 alt="" /> {{ item.keynoteSpeaker }}
-                          </div>
-                          <div v-if="item.activityStartTime"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/time.png"
-                                 alt="" />
-                            {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                          </div>
-                          <div v-if="item.offlineLocation"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/location.png"
-                                 alt="" /> {{ item.offlineLocation }}
-                          </div>
-                          <div v-if="item.onlineLocation"
-                               class="meta">
-                            <img class="icon"
-                                 src="@/assets/images/online.png"
-                                 alt="" /> {{ item.onlineLocation }}
-                          </div>
-                        </template>
-                        <el-button type="primary"
-                                   class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
-                      </div>
-
-                    </template>
-                  </li>
-                </ul>
-                <div v-if="articles.length"
-                     class="pagination">
-                  <el-pagination background
-                                 @current-change="currentChange"
-                                 :current-page="page"
-                                 layout="total, prev, pager, next"
-                                 :total="total"></el-pagination>
+                          <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
+                            <div v-if="item.keynoteSpeaker"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/mine.png"
+                                   alt="" /> {{ item.keynoteSpeaker }}
+                            </div>
+                            <div v-if="item.activityStartTime"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/time.png"
+                                   alt="" />
+                              {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                            </div>
+                            <div v-if="item.offlineLocation"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/location.png"
+                                   alt="" /> {{ item.offlineLocation }}
+                            </div>
+                            <div v-if="item.onlineLocation"
+                                 class="meta">
+                              <img class="icon"
+                                   src="@/assets/images/online.png"
+                                   alt="" /> {{ item.onlineLocation }}
+                            </div>
+                          </template>
+                          <el-button type="primary"
+                                     class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
+                        </div>
+
+                      </template>
+                    </li>
+                  </ul>
+                  <div v-if="articles.length"
+                       class="pagination">
+                    <el-pagination background
+                                   @current-change="currentChange"
+                                   :current-page="page"
+                                   layout="total, prev, pager, next"
+                                   :total="total"></el-pagination>
+                  </div>
                 </div>
-              </div>
-            </template>
-            <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
-              <div class="article-wrap">
-                <ul class="articles">
-                  <li v-for="(item, i) in articles"
-                      :key="i"
-                      :class="{'news-notice': info.listStyleId === 55}"
-                      @click="toArtice(item)">
-                    <template v-if="info.listStyleId === 55">
-                      <div class="releaseTime">
-                        <p class="d">{{ item.date }}</p>
-                        <p class="m">{{ item.month }}</p>
-                      </div>
-                      <div class="news-title">{{ item.title }}</div>
-                    </template>
-                    <template v-else>
-                      <div class="texts leftBox">
-                        <p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
-                           class="type">
-                          {{ item.classificationName }}
-                        </p>
-                        <h6 class="titleDes">{{ item.title }}</h6>
-                        <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
-                          <span class="meta">{{ item.releaseTime }}
-                            <template v-if="item.labelName != ''">
-                              | {{ item.labelName }}
-                            </template>
-                          </span>
-                        </template>
-                        <span v-if="item.listStyleId === 10 "
-                              class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+              </template>
+              <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
+                <div class="article-wrap">
+                  <ul class="articles">
+                    <li v-for="(item, i) in articles"
+                        :key="i"
+                        :class="{'news-notice': info.listStyleId === 55}"
+                        @click="toArtice(item)">
+                      <template v-if="info.listStyleId === 55">
+                        <div class="releaseTime">
+                          <p class="d">{{ item.date }}</p>
+                          <p class="m">{{ item.month }}</p>
+                        </div>
+                        <div class="news-title">{{ item.title }}</div>
+                      </template>
+                      <template v-else>
+                        <div class="texts leftBox">
+                          <p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
+                             class="type">
+                            {{ item.classificationName }}
+                          </p>
+                          <h6 class="titleDes">{{ item.title }}</h6>
+                          <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
+                            <span class="meta">{{ item.releaseTime }}
+                              <template v-if="item.labelName != ''">
+                                | {{ item.labelName }}
+                              </template>
+                            </span>
+                          </template>
+                          <span v-if="item.listStyleId === 10 "
+                                class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                         item.labelName }}</span>
-                        <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                          <div v-if="item.keynoteSpeaker"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/mine.png"
-                                 alt="" /> {{ item.keynoteSpeaker }}
-                          </div>
-                          <div v-if="item.activityStartTime"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/time.png"
-                                 alt="" />
-                            {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                          </div>
-                          <div v-if="item.offlineLocation"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/location.png"
-                                 alt="" /> {{ item.offlineLocation }}
-                          </div>
-                          <div v-if="item.onlineLocation"
-                               class="meta">
-                            <img class="icon"
-                                 src="@/assets/images/online.png"
-                                 alt="" /> {{ item.onlineLocation }}
-                          </div>
-                        </template>
-                      </div>
-                      <img class="pic"
-                           :src="item.titleImg"
-                           alt=""
-                           onerror="javascript:this.src='./images/1.png';" />
-                    </template>
-                  </li>
-                </ul>
-                <div v-if="articles.length"
-                     class="pagination">
-                  <el-pagination background
-                                 @current-change="currentChange"
-                                 :current-page="page"
-                                 layout="total, prev, pager, next"
-                                 :total="total"></el-pagination>
+                          <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
+                            <div v-if="item.keynoteSpeaker"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/mine.png"
+                                   alt="" /> {{ item.keynoteSpeaker }}
+                            </div>
+                            <div v-if="item.activityStartTime"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/time.png"
+                                   alt="" />
+                              {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                            </div>
+                            <div v-if="item.offlineLocation"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/location.png"
+                                   alt="" /> {{ item.offlineLocation }}
+                            </div>
+                            <div v-if="item.onlineLocation"
+                                 class="meta">
+                              <img class="icon"
+                                   src="@/assets/images/online.png"
+                                   alt="" /> {{ item.onlineLocation }}
+                            </div>
+                          </template>
+                        </div>
+                        <img class="pic"
+                             :src="item.titleImg"
+                             alt=""
+                             onerror="javascript:this.src='./images/1.png';" />
+                      </template>
+                    </li>
+                  </ul>
+                  <div v-if="articles.length"
+                       class="pagination">
+                    <el-pagination background
+                                   @current-change="currentChange"
+                                   :current-page="page"
+                                   layout="total, prev, pager, next"
+                                   :total="total"></el-pagination>
+                  </div>
                 </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="article-wrap">
-                <ul class="articles">
-                  <li v-for="(item, i) in articles"
-                      :key="i"
-                      :class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}"
-                      class="overDetail"
-                      @click="toArtice(item)">
-                    <template v-if="info.listStyleId === 55">
-                      <div class="releaseTime">
-                        <p class="d">{{ item.date }}</p>
-                        <p class="m">{{ item.month }}</p>
-                      </div>
-                      <div class="news-title">{{ item.title }}</div>
-                    </template>
-                    <template v-else>
-                      <img class="pic"
-                           :src="item.titleImg"
-                           alt=""
-                           onerror="javascript:this.src='./images/1.png';" />
-                      <div class="texts">
-                        <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                           class="type">
-                          {{ item.classificationName }}
-                        </p>
-                        <h6 class="titleDes">{{ item.title }}</h6>
-                        <template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
-                          <span class="meta">{{ item.releaseTime }}</span>
-                          <div class="des"
-                               v-html="item.mainBody"></div>
-                        </template>
-                        <span v-if="item.listStyleId === 10 "
-                              class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+              </template>
+              <template v-else>
+                <div class="article-wrap">
+                  <ul class="articles">
+                    <li v-for="(item, i) in articles"
+                        :key="i"
+                        :class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}"
+                        class="overDetail"
+                        @click="toArtice(item)">
+                      <template v-if="info.listStyleId === 55">
+                        <div class="releaseTime">
+                          <p class="d">{{ item.date }}</p>
+                          <p class="m">{{ item.month }}</p>
+                        </div>
+                        <div class="news-title">{{ item.title }}</div>
+                      </template>
+                      <template v-else>
+                        <img class="pic"
+                             :src="item.titleImg"
+                             alt=""
+                             onerror="javascript:this.src='./images/1.png';" />
+                        <div class="texts">
+                          <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                             class="type">
+                            {{ item.classificationName }}
+                          </p>
+                          <h6 class="titleDes">{{ item.title }}</h6>
+                          <template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
+                            <span class="meta">{{ item.releaseTime }}</span>
+                            <div class="des"
+                                 v-html="item.mainBody"></div>
+                          </template>
+                          <span v-if="item.listStyleId === 10 "
+                                class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                         item.labelName }}</span>
-                        <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                          <div v-if="item.keynoteSpeaker"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/mine.png"
-                                 alt="" /> {{ item.keynoteSpeaker }}
-                          </div>
-                          <div v-if="item.activityStartTime"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/time.png"
-                                 alt="" />
-                            {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                          </div>
-                          <div v-if="item.offlineLocation"
-                               class="meta m-b-10">
-                            <img class="icon"
-                                 src="@/assets/images/location.png"
-                                 alt="" /> {{ item.offlineLocation }}
-                          </div>
-                          <div v-if="item.onlineLocation"
-                               class="meta">
-                            <img class="icon"
-                                 src="@/assets/images/online.png"
-                                 alt="" /> {{ item.onlineLocation }}
-                          </div>
-                        </template>
-                        <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68"
-                                   type="primary"
-                                   class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
-
-                      </div>
-
-                    </template>
-                  </li>
-                </ul>
-                <div v-if="articles.length"
-                     class="pagination">
-                  <el-pagination background
-                                 @current-change="currentChange"
-                                 :current-page="page"
-                                 layout="total, prev, pager, next"
-                                 :total="total"></el-pagination>
+                          <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
+                            <div v-if="item.keynoteSpeaker"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/mine.png"
+                                   alt="" /> {{ item.keynoteSpeaker }}
+                            </div>
+                            <div v-if="item.activityStartTime"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/time.png"
+                                   alt="" />
+                              {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                            </div>
+                            <div v-if="item.offlineLocation"
+                                 class="meta m-b-10">
+                              <img class="icon"
+                                   src="@/assets/images/location.png"
+                                   alt="" /> {{ item.offlineLocation }}
+                            </div>
+                            <div v-if="item.onlineLocation"
+                                 class="meta">
+                              <img class="icon"
+                                   src="@/assets/images/online.png"
+                                   alt="" /> {{ item.onlineLocation }}
+                            </div>
+                          </template>
+                          <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68"
+                                     type="primary"
+                                     class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
+
+                        </div>
+
+                      </template>
+                    </li>
+                  </ul>
+                  <div v-if="articles.length"
+                       class="pagination">
+                    <el-pagination background
+                                   @current-change="currentChange"
+                                   :current-page="page"
+                                   layout="total, prev, pager, next"
+                                   :total="total"></el-pagination>
+                  </div>
                 </div>
-              </div>
+              </template>
             </template>
+            <div v-else
+                 class="none">
+              <img src="@/assets/images/none.png"
+                   alt="">
+              <p class="text">暂无更多信息，敬请期待。</p>
+            </div>
           </div>
         </div>
         <div class="right">
@@ -599,7 +607,6 @@ export default {
           this.getAllId = id
           this.getArticle(id);
           this.columns = data;
-          console.log("🚀 ~ file: index.vue:608 ~ .then ~ this.columns:", this.columns)
           // 如果没上传banner
           if (!this.info.columnBanner) {
             this.getBanner(data);
@@ -1196,6 +1203,19 @@ export default {
         background-color: $partyTheme !important;
     }
 }
+.none {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    text-align: center;
+    .text {
+        margin-top: 20px;
+        font-size: 0.9rem;
+        color: #333;
+    }
+}
 @media (max-width: 1200px) {
     .banner {
         height: 15rem !important;
diff --git a/src/pages/contactUs/index.vue b/src/pages/contactUs/index.vue
new file mode 100644
index 0000000..121cbf0
--- /dev/null
+++ b/src/pages/contactUs/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <!-- 联系我们 -->
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <Breadcrumb ref="breadcrumb"
+                    :data.sync="routes" />
+        <div class="contact">
+          <div class="fields">
+            <h6>{{ modules[1].form.title }}</h6>
+            <div v-html="modules[1].form.info"></div>
+          </div>
+          <img :src="modules[2].form.pic"
+               alt=""
+               class="pic">
+          <el-table :data="modules[3].list"
+                    class="patent-table"
+                    ref="table"
+                    stripe
+                    header-align="center">
+            <el-table-column prop="dep"
+                             label="部门"
+                             align="center"
+                             min-width="250"></el-table-column>
+            <el-table-column prop="contacts"
+                             label="联系人"
+                             align="center"
+                             min-width="100"></el-table-column>
+            <el-table-column prop="phone"
+                             label="电话"
+                             align="center"
+                             min-width="150"></el-table-column>
+            <el-table-column prop="email"
+                             label="邮箱"
+                             align="center"
+                             min-width="150">
+
+              <template slot-scope="scope">
+                <div class="flex j-center a-center">
+                  <img class="m-r-5"
+                       src="@/assets/images/mall1.png"
+                       alt="">
+                  {{ scope.row.email }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: [],
+      list: []
+    };
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted () {
+    new WOW().init();
+    this.getColumn()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+    // 获取父级所有栏目名称和id
+    getParent (data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn () {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => { })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+
+.single-banner {
+    .banner-img {
+        height: 21.6rem;
+    }
+    .texts {
+        h6 {
+            font-size: 2.16rem;
+            margin-bottom: 0.95rem;
+        }
+        .banner-des {
+            font-size: 0.96rem;
+        }
+    }
+}
+.block {
+    padding: 2rem 0;
+    background: url(http://10.10.11.7/images/contactUs/3.png) 0 130px no-repeat,
+        url(http://10.10.11.7/images/contactUs/4.png) bottom right no-repeat;
+    background-color: #f7f8fa;
+}
+.inner {
+    .contact {
+        padding: 3rem 6rem;
+        background-color: #fff;
+    }
+    .fields {
+        position: relative;
+        padding: 2rem;
+        border: 4px solid #f9f9f9;
+        h6 {
+            position: absolute;
+            top: -16px;
+            left: 60px;
+            font-size: 1.1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+            background-color: #fff;
+        }
+        .text {
+            font-size: 1rem;
+            color: #333;
+            line-height: 1.6;
+        }
+    }
+    .pic {
+        width: 100%;
+        margin: 2rem 0 1.5rem;
+    }
+}
+/deep/.patent-table {
+    thead tr,
+    thead th {
+        color: #fff;
+        background-color: #1583ff;
+    }
+}
+@media (max-width: 1200px) {
+    .inner {
+        .contact {
+            padding: 3rem 1rem;
+        }
+    }
+}
+</style>
diff --git a/src/pages/devHistory/index.vue b/src/pages/devHistory/index.vue
new file mode 100644
index 0000000..6d9007d
--- /dev/null
+++ b/src/pages/devHistory/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block history">
+      <div class="inner">
+        <h6 v-html="modules[1].form.title"></h6>
+        <p class="en">{{ modules[1].form.subTitle }}</p>
+        <div class="text"
+             v-html="modules[1].form.des"></div>
+        <h6 style="font-size: 1.6rem">{{ modules[2].form.title }}</h6>
+        <p class="en"
+           style="margin-top: -15px;font-size: 1.6rem">{{ modules[2].form.subTitle }}</p>
+        <div class="text"
+             v-html="modules[2].form.des"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    };
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.history {
+    .inner {
+        width: 1000px;
+    }
+    h6 {
+        position: relative;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+    }
+    .en {
+        margin-top: -25px;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+        color: #e3e3e3;
+    }
+    .text {
+        max-width: 1200px;
+        margin: 30px 0;
+        overflow: auto;
+    }
+}
+@media (max-width: 1000px) {
+    .history {
+        .inner {
+            width: 90%;
+        }
+    }
+}
+</style>
diff --git a/src/pages/deviceIntroBeam/index.vue b/src/pages/deviceIntroBeam/index.vue
new file mode 100644
index 0000000..3bb77cd
--- /dev/null
+++ b/src/pages/deviceIntroBeam/index.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block share">
+      <h6 v-html="modules[1].form.title"></h6>
+      <p class="en"
+         v-html="modules[1].form.des"></p>
+      <div class="sum">{{ modules[2].form.title }}</div>
+      <div class="flex beamBox">
+        <div class="left">
+          <div class="des"
+               v-html="modules[2].form.des"></div>
+        </div>
+        <img class="pic"
+             :src="modules[2].form.pic"
+             alt="">
+      </div>
+    </div>
+
+    <div class="intro">
+      <div class="intro-inner">
+        <img class="pic"
+             :src="modules[3].form.pic"
+             alt="">
+        <div class="des"
+             v-html="modules[3].form.des"></div>
+      </div>
+    </div>
+
+    <div class="unit">
+      <h6>{{ modules[4].form.title }}</h6>
+      <img class="pic"
+           :src="modules[4].form.pic"
+           alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`)
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']
+            );
+            this.modules = json;
+            console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json);
+          }
+        })
+        .catch((err) => { });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat;
+    /deep/ .el-carousel {
+        height: 12.6rem;
+        .el-carousel__container {
+            height: 12.6rem;
+        }
+        img {
+            height: 12.6rem;
+        }
+    }
+}
+.banner-item {
+    .banner-name {
+        font-size: 2.16rem;
+        left: 17%;
+        bottom: 20%;
+    }
+}
+.block {
+    padding: 3.85rem 0;
+    .inner {
+        h6 {
+            font-size: 1.76rem;
+        }
+        .en {
+            font-size: 1.76rem;
+            margin: 0px 0 2rem;
+        }
+        .sum {
+            margin-top: 3rem;
+            font-size: 0.96rem;
+        }
+    }
+}
+.beamBox {
+    position: relative;
+    .imgText {
+        position: absolute;
+        right: 2rem;
+        bottom: 2.25rem;
+        display: flex;
+        font-size: 0.9rem;
+        font-weight: 400;
+        .readio {
+            width: 7px;
+            height: 7px;
+            background-color: #2a2a2a;
+            border-radius: 50%;
+            margin-right: 10px;
+            margin-top: 8px;
+        }
+    }
+}
+.share {
+    position: relative;
+    width: 80%;
+    padding-left: 14%;
+    .beamBox {
+        align-items: center;
+    }
+    .left {
+        width: 50%;
+        padding-right: 66px;
+    }
+    h6 {
+        position: relative;
+        font-size: 1.92rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: bold;
+        color: #333333;
+    }
+    .en {
+        margin-top: -25px;
+        font-size: 2.4rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+        color: #e3e3e3;
+    }
+    .sum {
+        margin-top: 60px;
+        font-size: 1.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 44px;
+    }
+    .des {
+        margin-top: 1.25rem;
+        font-size: 0.88rem;
+        color: #333;
+        line-height: 1.85rem;
+        -webkit-line-clamp: inherit;
+        overflow: visible;
+    }
+    .pic {
+        width: 50%;
+        margin-top: 10px;
+        border-top-left-radius: 20px;
+    }
+}
+.intro {
+    width: 80%;
+    height: 19.65rem;
+    padding-left: 14%;
+    margin-bottom: 67px;
+    background-color: #2e4984;
+    .intro-inner {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+    .pic {
+        width: 50%;
+        height: 100%;
+    }
+    .des {
+        width: 50%;
+        height: 19.65rem;
+        padding: 2.85rem 3rem 1rem 3rem;
+        font-size: 0.96rem;
+        color: #fff;
+        line-height: 2rem;
+        -webkit-line-clamp: 7; //设定一共3行，超出的部分隐藏，并用省略号来表示
+    }
+}
+.unit {
+    width: 986px;
+    padding-bottom: 60px;
+    margin: 0 auto;
+    h6 {
+        padding-left: 0.93rem;
+        margin-bottom: 0.93rem;
+        font-size: 0.88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #2a2a2a;
+        border-left: 4px solid #1583ff;
+    }
+}
+
+@media (max-width: 1200px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+    .beamBox {
+        .imgText {
+            bottom: 4rem;
+            right: 4rem;
+        }
+    }
+    .share {
+        width: 90%;
+        padding-left: 0;
+        margin: 0 auto;
+    }
+    .beamBox {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        .left {
+            width: 100%;
+        }
+        .des {
+            -webkit-line-clamp: 100;
+        }
+        .pic {
+            margin-top: 10px;
+            width: 100%;
+            height: auto;
+        }
+    }
+    .intro {
+        width: 90%;
+        padding: 1rem 0;
+        height: auto;
+        .intro-inner {
+            flex-direction: column;
+        }
+        .pic {
+            width: 80%;
+        }
+        .des {
+            width: 80%;
+            height: auto;
+            padding: 2rem 0 0;
+            -webkit-line-clamp: 100;
+        }
+    }
+    .unit {
+        width: 95%;
+        img {
+            width: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/deviceIntroLayout/index.vue b/src/pages/deviceIntroLayout/index.vue
new file mode 100644
index 0000000..2be18f5
--- /dev/null
+++ b/src/pages/deviceIntroLayout/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block share">
+      <div class="inner">
+        <h6 v-html="modules[1].form.title"></h6>
+        <p class="en">{{ modules[1].form.subTitle }}</p>
+        <div class="card"
+             v-html="modules[1].form.des"></div>
+        <div class="flex textBox">
+          <div class="left">
+            <div class="des"
+                 v-html="modules[2].form.des"></div>
+          </div>
+          <img class="pic"
+               :src="modules[2].form.pic"
+               alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="intro">
+      <img class="bg"
+           src="http://10.10.11.7/images/device/7.png"
+           alt="">
+      <img class="pic"
+           :src="modules[3].form.pic"
+           alt="">
+    </div>
+
+    <div class="unit">
+      <h6>{{ modules[4].form.title }}</h6>
+      <img class="pic"
+           :src="modules[4].form.pic"
+           alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: []
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`)
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']
+            );
+            this.modules = json;
+            console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json);
+          }
+        })
+        .catch((err) => { });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat;
+    /deep/ .el-carousel {
+        height: 12.6rem;
+        .el-carousel__container {
+            height: 12.6rem;
+        }
+        img {
+            height: 12.6rem;
+        }
+    }
+}
+.banner-item {
+    .banner-name {
+        font-size: 2.16rem;
+        left: 17%;
+        bottom: 20%;
+    }
+}
+.block {
+    padding: 3.85rem 0;
+    .inner {
+        h6 {
+            font-size: 2.16rem;
+        }
+        .en {
+            font-size: 1.76rem;
+            margin: 0px 0 2rem;
+        }
+    }
+}
+.share {
+    position: relative;
+    .inner {
+        width: 100%;
+        max-width: 1323px;
+        .textBox {
+            position: absolute;
+            width: 85%;
+            right: 0;
+            top: 26rem;
+            .left {
+                flex-grow: 1;
+            }
+        }
+        h6 {
+            font-weight: bold;
+        }
+    }
+    .left {
+        width: 34.187rem;
+        margin-right: 4.125rem;
+    }
+    h6 {
+        position: relative;
+        font-size: 1.76rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+    }
+    .en {
+        margin: -25px 0 40px;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+        color: #e3e3e3;
+    }
+    .card {
+        position: absolute;
+        left: 0;
+        max-width: 1671px;
+        width: 85%;
+        padding: 1.6rem 2.9rem 1.6rem 14%;
+        font-size: 1.06rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        border-radius: 0 6rem 0 0;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 2.375rem;
+        background: url(http://10.10.11.7/images/device/5.png) 0 0 /100% 100% no-repeat;
+    }
+    .des {
+        margin-top: 25px;
+        font-size: 0.98rem;
+        -webkit-line-clamp: inherit;
+        color: #333;
+        line-height: 37px;
+        overflow: visible;
+    }
+    .pic {
+        width: 44.375rem;
+        height: auto;
+        border-top-left-radius: 20px;
+    }
+}
+.intro {
+    position: relative;
+    height: 42.625rem;
+    margin-bottom: 2.3rem;
+    margin-top: 50rem;
+    width: 85%;
+    .bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 65%;
+        height: 35.73rem;
+    }
+    .pic {
+        position: absolute;
+        top: 3.015rem;
+        left: 30%;
+        width: 71%;
+        height: 29.74rem;
+    }
+}
+.unit {
+    width: 986px;
+    padding-bottom: 60px;
+    margin: 0 auto;
+    h6 {
+        padding-left: 0.93rem;
+        margin-bottom: 0.93rem;
+        font-size: 0.88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #2a2a2a;
+        border-left: 4px solid #1583ff;
+    }
+}
+@media (max-width: 1400px) {
+    .share {
+        .card {
+            position: relative;
+            margin-left: -2.5%;
+        }
+        .inner {
+            max-width: none;
+            width: 95%;
+            .textBox {
+                position: static;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                margin-left: 15%;
+                .left {
+                    width: 100%;
+                    .des {
+                        -webkit-line-clamp: 100;
+                    }
+                }
+            }
+        }
+        .pic {
+            width: 50%;
+            margin-top: 20px;
+        }
+    }
+
+    .bg {
+        width: 100%;
+    }
+    .intro {
+        height: 36rem;
+        margin-top: 0;
+        .pic {
+            width: 100%;
+            left: 0;
+            top: 6%;
+        }
+    }
+    .unit {
+        width: 95%;
+        img {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 980px) {
+    .share {
+        .pic {
+            width: 80%;
+        }
+    }
+}
+@media (max-width: 640px) {
+    .share {
+        .inner {
+            .textBox {
+                margin: 0 auto;
+            }
+        }
+        .left {
+            margin-right: 0;
+        }
+    }
+    .intro {
+        height: auto;
+        .bg,
+        .pic {
+            position: static;
+            width: 100%;
+            height: auto;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/deviceIntroLinear/index.vue b/src/pages/deviceIntroLinear/index.vue
new file mode 100644
index 0000000..03882d7
--- /dev/null
+++ b/src/pages/deviceIntroLinear/index.vue
@@ -0,0 +1,358 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block history gray">
+      <div class="inner">
+        <h2 class="wow fadeInLeft"
+            v-html="modules[1].form.title"></h2>
+        <p class="en"
+           v-html="modules[1].form.des"></p>
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
+          <div class="left">
+            <h6>{{ modules[2].form.title }}</h6>
+            <div class="line"></div>
+            <div class="text"
+                 v-html="modules[2].form.des"></div>
+          </div>
+          <img class="bg"
+               src="http://10.10.11.7/images/device/10.png"
+               alt="" />
+        </div>
+      </div>
+    </div>
+
+    <div class="block intro">
+      <div class="inner">
+        <div class="left">
+          <h5>{{ modules[3].form.title }}</h5>
+          <img :src="modules[3].form.pic"
+               alt="" />
+        </div>
+        <div class="right">
+          <h6>{{ modules[4].form.title }}</h6>
+          <img :src="modules[4].form.pic"
+               alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page';
+import WOW from 'wow.js';
+export default {
+  mixins: [mixins],
+  data () {
+    return {};
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`)
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']
+            );
+            this.modules = json;
+            console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json);
+          }
+        })
+        .catch((err) => { });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 12.6rem;
+        .el-carousel__container {
+            height: 12.6rem;
+        }
+        img {
+            height: 12.6rem;
+        }
+    }
+}
+.banner-item {
+    .banner-name {
+        font-size: 2.16rem;
+        left: 17%;
+        bottom: 20%;
+    }
+}
+.block {
+    padding: 3.85rem 0;
+    .inner {
+        h2 {
+            font-size: 1.76rem;
+        }
+        .en {
+            font-size: 1.76rem;
+            margin: 0px 0 2rem;
+        }
+    }
+}
+.history {
+    .inner {
+        width: 1200px;
+        max-width: 1504px;
+    }
+
+    h2 {
+        position: relative;
+        font-size: 1.76rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #1c1c1c;
+    }
+
+    .en {
+        margin: -25px 0 40px;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+        color: #e3e3e3;
+    }
+
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 5.125rem 0 1.875rem 2.375rem;
+        margin-top: 20px;
+        background: #1583ff;
+        border-radius: 65px 100px 0px 0px;
+        transition: 0.3s;
+        position: relative;
+        .imgText {
+            position: absolute;
+            right: 0rem;
+            bottom: 4.25rem;
+            display: flex;
+            font-size: 0.9rem;
+            color: #ffffff;
+            font-weight: 400;
+            .readio {
+                width: 7px;
+                height: 7px;
+                background-color: #ffffff;
+                border-radius: 50%;
+                margin-right: 10px;
+                margin-top: 8px;
+            }
+        }
+
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+
+    .left {
+        width: 50%;
+    }
+
+    h6 {
+        font-size: 1.4rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+    }
+
+    .line {
+        width: 214px;
+        height: 5px;
+        margin: 54px 0 44px;
+        background: #ffffff;
+        opacity: 0.52;
+    }
+
+    .text {
+        font-size: 1.1rem;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 1.6;
+    }
+
+    .bg {
+        width: 50%;
+        margin: -8.875rem -3.125rem 0 0;
+        border-top-left-radius: 30px;
+    }
+}
+
+.intro {
+    .inner {
+        display: flex;
+    }
+    .left {
+        width: 30%;
+    }
+    .right {
+        width: 68%;
+        margin-left: 2%;
+    }
+    h5 {
+        margin-bottom: 0.93rem;
+        font-size: 0.88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #2a2a2a;
+    }
+
+    h6 {
+        padding-left: 0.93rem;
+        margin-bottom: 0.93rem;
+        font-size: 0.88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #2a2a2a;
+        border-left: 4px solid #1583ff;
+    }
+
+    img {
+        width: 100%;
+        height: 85%;
+    }
+}
+
+@media (min-width: 280px) and (max-width: 620px) {
+    .inner {
+        flex-direction: column;
+
+        .left,
+        .right {
+            width: 50%;
+            margin: 20px auto;
+        }
+    }
+
+    .history {
+        .left {
+            .line {
+                width: 100%;
+            }
+        }
+    }
+    .block {
+        padding: 50px 0;
+        .inner {
+            .texts {
+                .bg {
+                    width: 100%;
+                    height: 200px;
+                    margin: -50px 0px 0 0;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 1200px) {
+    body {
+        width: 100% !important;
+    }
+
+    .history {
+        .inner {
+            width: 95%;
+        }
+        .texts {
+            flex-direction: column;
+        }
+        .bg {
+            margin: 0 auto;
+        }
+    }
+
+    .inner {
+        flex-direction: column;
+        width: 95%;
+        .left,
+        .right {
+            width: 95%;
+            margin: 20px auto;
+        }
+    }
+    .intro {
+        img {
+            height: auto;
+        }
+    }
+}
+@media (max-width: 980px) {
+    .history {
+        .bg {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 320px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
+    }
+}
+</style>
diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue
new file mode 100644
index 0000000..e020776
--- /dev/null
+++ b/src/pages/edu/index.vue
@@ -0,0 +1,679 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <img class="block-pic br wow fadeInLeft" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
+        <img class="block-pic wow fadeInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
+      </div>
+    </div>
+    
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <ul class="list">
+          <template v-for="(item, i) in modules[4].list">
+            <li v-if="item.isEnable" :key="i" class="wow fadeInUp" data-wow-delay="0.5s">
+              <img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+              <div class="texts">
+                <h6>{{ item.title }}</h6>
+                <p class="sub">{{ item.subTitle }}</p>
+                <div class="des">{{ item.des }}</div>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+
+.wrap{
+  /deep/ .el-carousel {
+    height: 21.6rem;
+    .el-carousel__container{
+      height: 21.6rem;
+    }
+    img{
+      height: 21.6rem;
+    }
+  }
+}
+
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.15rem 0;
+  .inner {
+    .b-title  {
+      font-size: 2.25rem;
+      margin-bottom: 2.25rem;
+    }
+    .intro  {
+      margin-bottom: 2.25rem;
+    }
+   
+  }
+}
+.block-pic {
+  transition: .3s;
+  height: auto;
+  &.br {
+    border-radius: 270px;
+  }
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+.list {
+  li {
+    position: relative;
+    &:nth-child(even) {
+      text-align: right;
+      .texts {
+        left: 0;
+        text-align: left;
+      }
+    }
+  }
+  .pic {
+    width: 45%;
+    height: auto;
+  }
+  .texts {
+    position: absolute;
+    top: 7.59rem;
+    left: 40%;
+    width: 60%;
+    padding: 2.7rem 1.35rem ;
+    background-color: #fff;
+    overflow: hidden;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  h6 {
+    font-size: 1.8rem;
+    color: #3C3C3C;
+  }
+  .sub {
+    margin-top: 1.48rem;
+    font-size: 1.08rem;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    margin-top: 1.2rem;
+    font-size: 1rem;
+    color: #3C3C3C;
+    line-height: 32px;
+  }
+}
+@media (max-width: 1520px) {
+  .list {
+    .pic {
+      width: 45%;
+    }
+    li:nth-child(odd) {
+      .texts {
+        width: 50%;
+      }
+    }
+  }
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+  .wrap{
+  /deep/ .el-carousel {
+    height: 18rem;
+    .el-carousel__container{
+      height: 18rem;
+    }
+    img{
+      height: 18rem;
+    }
+  }
+}
+.banner-item .banner-name {
+  font-size: 1.5rem;
+  bottom: 5.25rem;
+  left: 14.125rem;
+  line-height: 2rem
+}
+ .block{ 
+  padding: 50px 0;
+  .inner {
+    width: 95%;margin: 0 auto;
+    .b-title{
+      margin-bottom: 30px;
+    }
+    .intro {
+      margin-bottom: 30px;
+    }
+    .block-pic{
+      height: 15rem;
+    }
+  }
+  .list{
+    li {
+      margin-top: 20px;
+      .pic{
+        width: 100%;height: 25rem;
+      }
+      .texts{
+        padding: 10px;
+        width: 70%;
+        top: 2rem;
+        height: auto;
+        left: 24%;
+      }
+    }
+  }
+ }
+}
+
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            height: auto;
+          }
+          .texts {
+            h6 {
+              font-size: 1rem;
+            }
+            .sub {
+              font-size: .85rem;
+              line-height: .85rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: .85rem;
+              line-height: .85rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            h6 {
+              font-size: 1.5rem;
+            }
+            .sub {
+              font-size: 1.05rem;
+              line-height: 1.05rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.05rem;
+              line-height: 1.05rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            h6 {
+              font-size: 1.8rem;
+            }
+            .sub {
+              font-size: 1.25rem;
+              line-height: 1.25rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.25rem;
+              line-height: 1.25rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            padding: 2rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px)  {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            width: 50%;
+            height: auto;
+          }
+          .texts {
+            top: 2rem;
+            left: 30%;
+            padding: 1.5rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            width: 50%;
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            left: 30%;
+            padding: 1.5rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px)  {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block  {
+    padding: 1.25rem 0;
+    .inner {
+      .intro  {
+        margin-bottom: 1rem;
+      }
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .block-pic {
+        height: auto;
+      }
+      .list {
+        .wow  {
+          .pic {
+            width: 50%;
+            height: auto;
+          }
+          .texts {
+            top: 5rem;
+            left: 30%;
+            padding: 1.5rem;
+            h6 {
+              font-size: 2rem;
+            }
+            .sub {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+            }
+            .des {
+              font-size: 1.55rem;
+              line-height: 1.55rem;
+              margin-top: .5rem;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/estate/event/index.vue b/src/pages/estate/event/index.vue
new file mode 100644
index 0000000..704f8a8
--- /dev/null
+++ b/src/pages/estate/event/index.vue
@@ -0,0 +1,239 @@
+<template>
+  <!-- 产业光源-大事记 -->
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="block history">
+      <div class="inner">
+        <h2 class="wow fadeInLeft">大事记</h2>
+        <p class="en">DEVELOPMENT HISTORY</p>
+
+        <div v-if="modules[1].list.length"
+             class="event">
+          <ul class="time">
+            <template v-for="(item, i) in modules[1].list">
+              <li v-if="item.isEnable"
+                  :key="i"
+                  :class="{active: curYear == i}"
+                  @click="yearClick(i)">{{ item.title }}</li>
+            </template>
+          </ul>
+          <div class="right">
+            <h6 class="year">{{ modules[1].list[curYear].title }}</h6>
+            <ul class="list">
+              <template v-for="(e, j) in modules[1].list[curYear].list">
+                <li v-if="e.isEnable"
+                    :key="j"
+                    :class="{'cursor-pointer': isLink(e.link.linkName)}"
+                    @click="openLink(e)">
+                  <div class="texts">
+                    <p class="date">{{ e.title }}</p>
+                    <p class="text">{{ e.des }}</p>
+                  </div>
+                  <img v-if="e.pic"
+                       :src="e.pic"
+                       alt=""
+                       class="pic">
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/estate'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+      curYear: 0
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 年份点击回调
+    yearClick (i) {
+      this.curYear = i
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../../plugins/wow/animate.css);
+@import '../../../styles/page/page.scss';
+.wrap {
+    background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
+        url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
+}
+
+.history {
+    h2 {
+        position: relative;
+        font-size: 2rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #1c1c1c;
+    }
+    .en {
+        margin: -15px 0 40px;
+        font-size: 2rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+        color: #e3e3e3;
+    }
+}
+.event {
+    display: flex;
+    justify-content: center;
+    .time {
+        width: 200px;
+        padding-right: 10px;
+        margin-right: 20px;
+        border-right: 1px solid #ddd;
+        li {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            width: 190px;
+            padding-right: 45px;
+            line-height: 60px;
+            font-size: 1.4rem;
+            font-weight: 600;
+            font-family: SFProDisplay-Semibold, SFProDisplay;
+            color: #666;
+            box-shadow: inset 0px -1px 0px 0px #dddddd;
+            cursor: pointer;
+            &.active {
+                font-weight: 800;
+                color: #1a81f4;
+                background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
+                &:before {
+                    content: '';
+                    width: 18px;
+                    height: 18px;
+                    background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+    .right {
+        width: 1000px;
+    }
+    .year {
+        margin: 0 0 20px 20px;
+        font-size: 3.2rem;
+        font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+        font-weight: 800;
+        color: #1a81f4;
+    }
+    .list {
+        border-top: 1px solid #ddd;
+        li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 30px;
+            border-bottom: 1px solid #ddd;
+        }
+        .texts {
+            width: 500px;
+        }
+        .date {
+            margin-bottom: 15px;
+            font-size: 1.2rem;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #333;
+        }
+        .text {
+            font-size: 1.1rem;
+            color: #333;
+            @include mul-ellipsis(3);
+            &:before {
+                content: '';
+                display: inline-block;
+                width: 7px;
+                height: 7px;
+                margin: 0 10px;
+                background-color: #666;
+                transform: rotate(45deg);
+            }
+        }
+        .pic {
+            width: 300px;
+            height: 195px;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        padding: 20px 0;
+        .org {
+            width: 100%;
+            padding: 15px;
+            flex-direction: column;
+            .left {
+                width: 100%;
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .event {
+                flex-direction: column;
+                .time {
+                    width: 100%;
+                    li {
+                        width: 100%;
+                        justify-content: flex-start;
+                    }
+                }
+                .right {
+                    width: 100%;
+                    .list {
+                        li {
+                            padding: 1.25rem;
+                            flex-direction: column;
+                            .texts {
+                                width: 100%;
+                            }
+                            .pic {
+                                width: 100%;
+                                height: auto;
+                                margin-top: 1rem;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/estate/index/index.vue b/src/pages/estate/index/index.vue
new file mode 100644
index 0000000..a83114e
--- /dev/null
+++ b/src/pages/estate/index/index.vue
@@ -0,0 +1,821 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+               width="100%"
+               :src="item.pic"
+               alt=""
+               @click="openLink(item)">
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block banner-block"
+         id="part1">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[1].form.title }}
+            <span class="sub">{{ modules[1].form.subTitle }}</span>
+          </h5>
+          <span class="more"
+                @click="toAll(modules[2].form)">MORE</span>
+        </div>
+        <template v-if="articles.length">
+          <div class="sfel-banner wow fadeInDown"
+               data-wow-delay="0.5s"
+               @click="toArtice(curArticle, modules[2].form)">
+            <div style="width: 50%;overflow: hidden;"
+                 class="newBox">
+              <img class="pic"
+                   width="100%"
+                   height="100%"
+                   :src="curArticle.titleImg"
+                   alt="">
+            </div>
+            <div class="right">
+              <h6>{{ curArticle.title }}</h6>
+              <div class="des"
+                   v-html="curArticle.mainBody"></div>
+              <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
+              <ul class="inds">
+                <li v-for="i in articles.length > 3 ? 4 : articles.length"
+                    :key="i"
+                    :class="{active: curInd == i - 1}"
+                    @click.stop="switchCarousel(i - 1)"></li>
+              </ul>
+            </div>
+          </div>
+
+          <ul class="card">
+            <template v-for="(item, i) in articles">
+              <li v-if="i > 3 && i < 7"
+                  :key="i"
+                  class="wow fadeInDown"
+                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
+                <div class="texts">
+                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
+                  <div class="des">{{ item.title }}</div>
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt=""
+                       @click="toArtice(item, modules[2].form)">
+                </div>
+              </li>
+            </template>
+          </ul>
+        </template>
+      </div>
+    </div>
+
+    <div class="block talent"
+         id="part2">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[3].form.title }}
+            <span class="sub">{{ modules[3].form.subTitle }}</span>
+          </h5>
+          <!-- <span class="more" @click="toAll(modules[4].form)">MORE</span> -->
+        </div>
+        <div class="shows">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s">
+            <h6>{{ modules[4].form.title }}</h6>
+            <div class="text"
+                 v-html="modules[4].form.des"></div>
+            <el-button v-if="isLink(modules[4].form.link.linkName)"
+                       type="primary"
+                       round
+                       @click="openLink(modules[4].form)">这里跳转</el-button>
+          </div>
+          <img :src="modules[4].form.pic"
+               alt=""
+               class="pic">
+        </div>
+      </div>
+    </div>
+
+    <div class="block conference"
+         id="part3">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[5].form.title }}
+            <span class="sub">{{ modules[5].form.subTitle }}</span>
+          </h5>
+          <span class="more"
+                @click="toAll(modules[6].form)">MORE</span>
+        </div>
+        <div class="shows"
+             v-if="articles2.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles2[0], modules[6].form)">
+            <img class="pic"
+                 width="100%"
+                 height="100%"
+                 :src="articles2[0].titleImg"
+                 alt="">
+            <div class="text">{{ articles2[0].title }}</div>
+          </div>
+          <ul class="card-list wow fadeInRight"
+              data-wow-delay="0.5s">
+            <template v-for="(item, i) in articles2">
+              <li v-if="i && i < 4"
+                  :key="i"
+                  @click="toArtice(item, modules[6].form)">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <p class="sum">{{ item.mainBody }}</p>
+                  <p v-if="item.keynoteSpeaker"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/mine.png"
+                         alt="">
+                    {{ item.keynoteSpeaker }}
+                  </p>
+                  <p v-if="item.activityStartTime"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/time.png"
+                         alt="">
+                    会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                  </p>
+                  <p v-if="item.onlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/online.png"
+                         alt="">
+                    {{ item.onlineLocation }}
+                  </p>
+                  <p v-if="item.offlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/location.png"
+                         alt="">
+                    {{ item.offlineLocation }}
+                  </p>
+                </div>
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="block program"
+         id="part4">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[7].form.title }}
+            <span class="sub">{{ modules[7].form.subTitle }}</span>
+          </h5>
+          <span class="more"
+                @click="toAll(modules[8].form)">MORE</span>
+        </div>
+        <template v-if="articles3.length">
+          <div class="slide"
+               @click="toArtice(articles3[0], modules[8].form)">
+            <div class="texts">
+              <h6>{{ articles3[0].title }}</h6>
+              <div class="des">{{ articles3[0].mainBody }}</div>
+              <div class="meta">发表日期：{{ articles3[0].releaseTime }} &emsp;浏览量：{{ articles3[0].totalBrowsing }}</div>
+            </div>
+            <div class="img-wrap">
+              <img class="pic"
+                   :src="articles3[0].titleImg"
+                   alt="">
+            </div>
+          </div>
+          <ul class="list">
+            <template v-for="(item, i) in articles3">
+              <li v-if="i && i < 4"
+                  :key="i"
+                  class="wow fadeInDown"
+                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                  @click="toArtice(item, modules[8].form)">
+                <div class="des">{{ item.title }}</div>
+                <p class="date">{{ item.releaseTime }}</p>
+              </li>
+            </template>
+          </ul>
+        </template>
+      </div>
+    </div>
+
+    <div class="tools">
+      <div class="logo">
+        <img src="@/assets/images/logo.png"
+             alt="">
+      </div>
+      <ul class="nav">
+        <li v-for="(item, i) in navs"
+            :key="i"
+            class="column"
+            @click="toAnchor(item)">{{ item.name }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      navs: [],
+      articles: [],
+      articles1: [],
+      articles2: [],
+      articles3: [],
+      curInd: 0,
+      curArticle: {},
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
+
+          // 获取文章列表
+          if (json[2].form.column.length) {
+            const { column, articleNum } = json[2].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 7))
+              this.curArticle = this.articles[0]
+              this.carouselInterval()
+            }).catch(err => { })
+          }
+          if (json[6].form.column.length) {
+            const { column, articleNum } = json[6].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
+            }).catch(err => { })
+          }
+          if (json[8].form.column.length) {
+            const { column, articleNum } = json[8].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
+            }).catch(err => { })
+          }
+
+          // 获取页面的所有标题，展示到左侧导航
+          const navs = []
+          let id = 0
+          json.forEach((e, i) => {
+            if (i % 2 && e.form.title) navs.push({
+              id: ++id,
+              name: e.form.title
+            })
+          })
+          this.navs = navs
+
+          this.modules = json
+        }
+      }).catch(err => { })
+    },
+    // 自动轮播
+    carouselInterval () {
+      const len = this.articles.length > 3 ? 4 : this.articles.length
+      console.log("🚀 ~ file: index.vue:309 ~ carouselInterval ~ len:", len)
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.curInd++
+        if (this.curInd > len) this.curInd = 0
+        this.curArticle = this.articles[this.curInd] || {}
+      }, 5000)
+    },
+    // 手动轮播切换
+    switchCarousel (i) {
+      if (this.curInd !== i) {
+        this.curInd = i
+        this.curArticle = this.articles[this.curInd] || {}
+      }
+    },
+    // 左侧导航点击回调
+    toAnchor (e) {
+      const el = document.querySelector(`#part${e.id}`)
+      el && el.scrollIntoView()
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../../plugins/wow/animate.css);
+@import '../../../styles/page/page.scss';
+/deep/ .el-carousel {
+    height: 991px;
+    .el-carousel__container,
+    .el-carousel__item,
+    img {
+        height: 100%;
+    }
+}
+.title {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 25px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #ddd;
+    h5 {
+        padding-left: 16px;
+        font-size: 1.6rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 1;
+        border-left: 6px solid #2b96ef;
+    }
+    .sub {
+        font-size: 1.1rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #afb7bf;
+    }
+    .more {
+        font-size: 0.8rem;
+        color: #666;
+        cursor: pointer;
+    }
+}
+/deep/.articles {
+    width: 50%;
+    .el-carousel__indicators--horizontal {
+        bottom: 20px;
+        left: 804px;
+    }
+}
+.banner-block {
+    background: url(../../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
+}
+.sfel-banner {
+    display: flex;
+    cursor: pointer;
+    .pic {
+        transition: 0.5s;
+        &:hover {
+            transform: scale(1.3);
+        }
+    }
+    .right {
+        position: relative;
+        width: 50%;
+        padding: 50px 50px 30px;
+        background: #1583ff;
+        color: #fff;
+        &:hover {
+            background: #465f85;
+            h6,
+            .des,
+            .meta {
+                color: #fff;
+                transform: translateY(15px);
+            }
+        }
+    }
+    .inds {
+        position: absolute;
+        bottom: 40px;
+        left: 60px;
+        display: flex;
+        li {
+            width: 10px;
+            height: 10px;
+            margin-right: 12px;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: 0.2s;
+            &.active {
+                width: 30px;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 5px;
+            }
+        }
+    }
+    h6 {
+        font-size: 1.3rem;
+        transition: 0.3s;
+    }
+    .des {
+        margin: 30px 0;
+        font-size: 0.9rem;
+        line-height: 24px;
+        transition: 0.3s;
+    }
+    .meta {
+        font-size: 0.8rem;
+        transition: 0.3s;
+    }
+}
+.card {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 40px;
+    li {
+        width: calc((100% - 56px) / 3);
+        margin-right: 28px;
+        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+        border-radius: 6px;
+        transition: 0.3s;
+        background-color: #fff;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .pic {
+        width: 100%;
+        // height: 259px;
+    }
+    .texts {
+        padding: 40px 30px;
+    }
+    .meta {
+        font-size: 0.9rem;
+        color: #666;
+    }
+    .des {
+        height: 60px;
+        margin: 10px 0;
+        font-size: 1rem;
+        font-family: SFProDisplay;
+        font-weight: 500;
+        color: #333;
+        line-height: 28px;
+        -webkit-line-clamp: 2;
+    }
+    .arrow {
+        width: 36px;
+    }
+}
+.talent {
+    .shows {
+        display: flex;
+        color: #fff;
+        background: #1a2844;
+        border-radius: 0px 100px 0px 100px;
+        .left {
+            width: 50%;
+            padding: 120px 0 0 5%;
+        }
+        h6 {
+            font-size: 1.6rem;
+        }
+        .text {
+            margin: 20px 0;
+            font-size: 1rem;
+            line-height: 2;
+        }
+        .pic {
+            width: 50%;
+            min-height: 465px;
+        }
+    }
+}
+.conference {
+    background: url(../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
+    .shows {
+        display: flex;
+    }
+    .left {
+        position: relative;
+        width: 550px;
+        // min-width: 550px;
+        height: 550px;
+        margin-right: 20px;
+        cursor: pointer;
+        overflow: hidden;
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 12px;
+            line-height: 3rem;
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, 0.57);
+        }
+        .pic {
+            transition: 0.5s;
+        }
+        &:hover {
+            .pic {
+                transform: scale(1.3);
+            }
+        }
+    }
+    .card-list {
+        width: 600px;
+        li {
+            display: flex;
+            align-items: center;
+            padding: 6px;
+            margin-bottom: 7px;
+            background-color: #fff;
+            cursor: pointer;
+            transition: 0.3s;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &:hover {
+                transform: translateX(20px);
+            }
+        }
+        .pic {
+            width: 167px;
+            height: 167px;
+            margin-right: 36px;
+        }
+        .texts {
+            width: calc(100% - 210px);
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 1.2rem;
+            color: #333;
+            @include ellipsis;
+        }
+        .sum {
+            margin-bottom: 6px;
+            font-size: 1rem;
+            color: #666;
+            @include ellipsis;
+        }
+        .text {
+            display: flex;
+            align-items: center;
+            margin: 10px 0;
+            font-size: 0.9rem;
+            @include ellipsis;
+        }
+        .icon {
+            margin-right: 5px;
+        }
+    }
+}
+
+.program {
+    background: #fff;
+    .slide {
+        display: flex;
+        margin-bottom: 14px;
+        cursor: pointer;
+    }
+    .texts {
+        width: 51%;
+        padding: 56px;
+        background: #fbfbfb;
+        h6 {
+            font-size: 1.3rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+        }
+        .des {
+            margin: 35px 0 25px;
+            font-size: 1rem;
+            color: #666;
+            line-height: 32px;
+        }
+        .meta {
+            font-size: 0.9rem;
+            color: #666;
+        }
+    }
+    .img-wrap {
+        width: 49%;
+        min-height: 334px;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    &:hover {
+        .pic {
+            transform: scale(1.3);
+        }
+    }
+    .list {
+        display: flex;
+        li {
+            width: calc((100% - 28px) / 3);
+            height: 204px;
+            padding: 36px 22px;
+            margin-right: 14px;
+            background: url(../../../assets/images/sfel/7.png) no-repeat center;
+            transition: 0.5s;
+            cursor: pointer;
+            &:nth-child(2) {
+                background-image: url(../../../assets/images/sfel/8.png);
+            }
+            &:nth-child(3) {
+                margin-right: 0;
+                background-image: url(../../../assets/images/sfel/9.png);
+            }
+            &:hover {
+                transform: translateY(20px);
+            }
+        }
+        .des {
+            height: 90px;
+            margin-bottom: 30px;
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 30px;
+        }
+        .date {
+            font-size: 0.9rem;
+            font-family: LaoSangamMN;
+            color: #ffffff;
+        }
+    }
+}
+.tools {
+    z-index: 9;
+    position: fixed;
+    top: 200px;
+    left: 0;
+    width: 180px;
+    text-align: center;
+    .logo {
+        padding: 15px 0;
+        background: #0c60be;
+        box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
+    }
+    .nav {
+        li {
+            padding: 0 10px;
+            font-size: 1.1rem;
+            line-height: 50px;
+            color: #fff;
+            background-color: #1d1d1d;
+            cursor: pointer;
+            @include ellipsis;
+            &.active {
+                background-color: #1583ff;
+            }
+            &:hover {
+                background-color: #1583ff;
+            }
+        }
+    }
+}
+@media (max-width: 1520px) {
+}
+@media (max-width: 1200px) {
+    .sfel-banner {
+        flex-direction: column;
+        .newBox {
+            width: 100% !important;
+        }
+        .right {
+            margin-top: 10px;
+            width: 100%;
+            height: 410px;
+        }
+    }
+    .card {
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin-top: 20px;
+        }
+    }
+    .shop-shows {
+        flex-direction: column;
+        .left {
+            width: 100%;
+        }
+        .right {
+            width: 100%;
+            margin-top: 20px;
+        }
+    }
+    .shows {
+        flex-direction: column;
+        .left {
+            width: 100%;
+        }
+        .card-list {
+            width: 100%;
+            margin-top: 20px;
+            li {
+                flex-direction: column;
+                .pic {
+                    width: 100% !important;
+                    margin-right: 0;
+                }
+                .texts {
+                    margin-top: 20px;
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .talent {
+        .shows {
+            .left {
+                width: 100%;
+                margin-bottom: 20px;
+            }
+            .pic {
+                width: 100%;
+                min-height: 0;
+            }
+        }
+    }
+    .media-wrap {
+        flex-direction: column;
+        .left {
+            width: 100%;
+        }
+        .right {
+            width: 100%;
+            margin-top: 20px;
+        }
+    }
+    .news {
+        flex-direction: column;
+        li {
+            margin-top: 30px;
+            width: 100%;
+        }
+    }
+    .slide,
+    .list {
+        flex-direction: column;
+        .texts,
+        .img-wrap {
+            width: 100%;
+        }
+    }
+    .list {
+        li {
+            width: 100% !important;
+            margin-top: 20px;
+        }
+    }
+    .slides {
+        div {
+            flex: 1;
+        }
+    }
+    .program {
+        .list {
+            li {
+                background-size: cover;
+            }
+        }
+    }
+    #part6 {
+        .slide {
+            .texts {
+                height: 430px;
+            }
+        }
+    }
+}
+@media (max-width: 980px) {
+    /deep/ .el-carousel {
+        height: 600px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/estate/location/index.vue b/src/pages/estate/location/index.vue
new file mode 100644
index 0000000..26bc658
--- /dev/null
+++ b/src/pages/estate/location/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <!-- 产业光源-地理位置 -->
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div class="item wow bounceInLeft"
+           data-wow-delay="0.5s"
+           :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+           @click="openLink(modules[1].form)">
+        <div class="img-wrap">
+          <img class="pic"
+               :src="modules[1].form.pic"
+               alt="">
+        </div>
+        <div class="texts">
+          <h6>{{ modules[1].form.title }}</h6>
+          <div class="des">{{ modules[1].form.des }}</div>
+        </div>
+      </div>
+      <div class="item wow bounceInRight"
+           data-wow-delay="0.6s"
+           :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+           @click="openLink(modules[2].form)">
+        <div class="img-wrap">
+          <img class="pic"
+               :src="modules[2].form.pic"
+               alt="">
+        </div>
+        <div class="texts">
+          <h6>{{ modules[2].form.title }}</h6>
+          <div class="des">{{ modules[2].form.des }}</div>
+        </div>
+      </div>
+      <div class="item wow bounceInLeft"
+           data-wow-delay="0.5s"
+           :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+           @click="openLink(modules[3].form)">
+        <div class="img-wrap">
+          <img class="pic"
+               :src="modules[3].form.pic"
+               alt="">
+        </div>
+        <div class="texts">
+          <h6>{{ modules[3].form.title }}</h6>
+          <div class="des">{{ modules[3].form.des }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/estate'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../../plugins/wow/animate.css);
+@import '../../../styles/page/page.scss';
+.tab-content {
+    width: 70%;
+    max-width: 1504px;
+    padding-bottom: 100px;
+    margin: 30px auto 0;
+    .item {
+        display: flex;
+        padding: 42px;
+        margin-bottom: 36px;
+        color: #333;
+        background: #f5f5f5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat;
+        transition: 0.5s;
+        &:nth-child(even) {
+            justify-content: space-between;
+            flex-direction: row-reverse;
+            background-position: 30% 100%;
+            .texts {
+                padding-left: 0;
+            }
+        }
+        &:hover {
+            .pic {
+                transform: scale(1.1);
+            }
+        }
+    }
+    .img-wrap {
+        height: 383px;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    .texts {
+        width: 707px;
+        padding: 98px 72px 30px 80px;
+    }
+    h6 {
+        margin-bottom: 24px;
+        font-size: 2rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+    }
+    .des {
+        font-size: 1rem;
+        line-height: 33px;
+        -webkit-line-clamp: 8;
+    }
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 80%;
+        padding: 1.25rem 0;
+        .item {
+            padding: 0.85rem;
+            flex-direction: column !important;
+            .texts {
+                margin-top: 0.5rem;
+                width: 100%;
+                padding: 0;
+            }
+        }
+        .img-wrap {
+            height: auto;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/estate/orgSetup/index.vue b/src/pages/estate/orgSetup/index.vue
new file mode 100644
index 0000000..ca46f82
--- /dev/null
+++ b/src/pages/estate/orgSetup/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <!-- 产业光源-机构设置 -->
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div class="org">
+        <div class="left">
+          <h6>{{ modules[1].form.title }}</h6>
+          <p class="text"
+             v-html="modules[1].form.des"></p>
+        </div>
+        <img class="pic"
+             src="http://10.10.11.7/images/overviewSetup/1.png"
+             alt="">
+      </div>
+      <div class="lg-bg">
+        <img :src="modules[2].form.pic"
+             alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/estate'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../../plugins/wow/animate.css);
+@import '../../../styles/page/page.scss';
+.tab-content {
+    padding: 77px 0;
+}
+.org {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1294px;
+    padding: 9px 86px 29px 116px;
+    margin: 0 auto 50px;
+    background: #fcfcfc;
+    border-radius: 160px;
+    .left {
+        width: 705px;
+    }
+    h6 {
+        font-size: 1.4rem;
+        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+        font-weight: bold;
+        color: #333;
+    }
+    .text {
+        margin-top: 10px;
+        font-size: 1rem;
+        color: #020202;
+        line-height: 2rem;
+    }
+    .pic {
+        width: 320px;
+        height: 282px;
+    }
+}
+.lg-bg {
+    max-width: 85%;
+    margin: 0 auto;
+    text-align: center;
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        padding: 20px 0;
+        .org {
+            width: 100%;
+            padding: 15px;
+            flex-direction: column;
+            .left {
+                width: 100%;
+            }
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/estate/survey/index.vue b/src/pages/estate/survey/index.vue
new file mode 100644
index 0000000..585b72d
--- /dev/null
+++ b/src/pages/estate/survey/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <!-- 产业光源-产业光源概况 -->
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div class="survey">
+        <h6>
+          {{ modules[1].form.title }}
+          <img class="title-bg"
+               src="http://10.10.11.7/images/overviewIntro/2.png"
+               alt="">
+        </h6>
+        <p class="text"
+           v-html="modules[1].form.des"></p>
+      </div>
+      <div class="lg-bg">
+        <img width="100%"
+             src="http://10.10.11.7/images/estate/3.png"
+             alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/estate'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../../plugins/wow/animate.css);
+@import '../../../styles/page/page.scss';
+.tab-content {
+    padding-top: 70px;
+}
+.survey {
+    width: 1294px;
+    min-height: 500px;
+    padding: 80px 86px 29px 597px;
+    margin: 0 auto 200px;
+    background: url(http://10.10.11.7/images/estate/2.png) 0 0/100% 100% no-repeat;
+    border-radius: 160px;
+    h6 {
+        position: relative;
+        margin-bottom: 30px;
+        font-size: 1.2rem;
+        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+        font-weight: bold;
+        color: #333;
+    }
+    .title-bg {
+        position: absolute;
+        top: -40px;
+        left: -20px;
+    }
+    .text {
+        margin-top: 10px;
+        font-size: 1rem;
+        color: #020202;
+        line-height: 2rem;
+    }
+}
+.lg-bg {
+    width: 40%;
+}
+@media (max-width: 1300px) {
+    .tab-content {
+        padding: 20px 0;
+    }
+    .lg-bg {
+        width: 100%;
+    }
+    .survey {
+        width: 95%;
+        padding: 80px 86px 29px 47%;
+        margin-bottom: 2rem;
+    }
+}
+@media (max-width: 768px) {
+    .survey {
+        padding: 30px;
+        background: none;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/exp/index.vue b/src/pages/exp/index.vue
new file mode 100644
index 0000000..b3d713b
--- /dev/null
+++ b/src/pages/exp/index.vue
@@ -0,0 +1,557 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block station">
+      <div class="inner">
+        <h6 class="wow fadeInUp"
+            v-html="modules[1].form.title"></h6>
+        <p class="en wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[1].form.subTitle }}</p>
+        <div v-if="modules[1].form.pic"
+             class="text-center">
+          <video v-if="Util.isVideo(modules[1].form.mediaType)"
+                 class="pic"
+                 ref="video"
+                 autoplay
+                 controls
+                 loop>
+            <source :src="modules[1].form.pic"
+                    type="video/mp4">
+            您的浏览器不支持 video 标签。
+          </video>
+          <img v-else
+               class="pic"
+               :src="modules[1].form.pic"
+               alt="">
+        </div>
+        <div class="des"
+             v-html="modules[1].form.des"></div>
+      </div>
+    </div>
+
+    <ul class="list">
+      <li :class="['item1', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
+          @click="openLink(modules[2].form)">
+        <img src="@/assets/images/exp/2.png"
+             alt="">
+        <h6>{{ modules[2].form.title }}</h6>
+      </li>
+      <li :class="['item2', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
+          @click="openLink(modules[3].form)">
+        <img src="@/assets/images/exp/3.png"
+             alt="">
+        <h6>{{ modules[3].form.title }}</h6>
+      </li>
+      <li :class="['item3', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]"
+          @click="openLink(modules[4].form)">
+        <img src="@/assets/images/exp/4.png"
+             alt="">
+        <h6>{{ modules[4].form.title }}</h6>
+      </li>
+      <li :class="['item4', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]"
+          @click="openLink(modules[5].form)">
+        <img src="@/assets/images/exp/5.png"
+             alt="">
+        <h6>{{ modules[5].form.title }}</h6>
+      </li>
+      <li :class="['item5', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]"
+          @click="openLink(modules[6].form)">
+        <img src="@/assets/images/exp/6.png"
+             alt="">
+        <h6>{{ modules[6].form.title }}</h6>
+      </li>
+      <li :class="['item6', {'cursor-pointer': isLink(modules[7].form.link.linkName)}]"
+          @click="openLink(modules[7].form)">
+        <img src="@/assets/images/exp/7.png"
+             alt="">
+        <h6>{{ modules[7].form.title }}</h6>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: [],
+      Util
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 12.6rem;
+        .el-carousel__container {
+            height: 12.6rem;
+        }
+        img {
+            height: 12.6rem;
+        }
+    }
+}
+.banner-item {
+    .banner-name {
+        font-size: 2.16rem;
+        left: 17%;
+        bottom: 20%;
+    }
+}
+.block {
+    padding: 3.85rem 0;
+    .inner {
+        h6 {
+            font-size: 1.76rem;
+        }
+        .en {
+            font-size: 1.76rem;
+            margin: 0px 0 2rem;
+        }
+    }
+}
+.station {
+    h6 {
+        position: relative;
+        font-size: 2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: bold;
+        color: #333333;
+        line-height: 1;
+    }
+    .en {
+        margin-bottom: 20px;
+        font-size: 1.7rem;
+        font-family: AppleSystemUIFont;
+        color: #e4e4e4;
+        line-height: 1;
+    }
+    .pic {
+        width: 64%;
+        height: auto;
+        margin: 0 auto;
+    }
+    .des {
+        margin-top: 2.75rem;
+        font-size: 0.98rem;
+        color: #333;
+        line-height: 1.7rem;
+        -webkit-line-clamp: inherit;
+    }
+}
+.list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 1.5rem;
+    width: 1200px;
+    margin: auto;
+    li {
+        position: relative;
+        height: 20.1rem;
+        overflow: hidden;
+        &:hover {
+            img {
+                transform: scale(1.3);
+            }
+        }
+    }
+    img {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    h6 {
+        position: absolute;
+        top: 192px;
+        left: 60px;
+        font-size: 1.12rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #fff;
+    }
+    .item1,
+    .item2 {
+        width: 25%;
+    }
+    .item3 {
+        width: 50%;
+    }
+    .item4 {
+        width: 40%;
+    }
+    .item5 {
+        width: 32%;
+    }
+    .item6 {
+        width: 28%;
+    }
+}
+
+@media (min-width: 280px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+            .el-carousel__container {
+                height: 15rem;
+            }
+            img {
+                height: 15rem;
+            }
+        }
+    }
+    .station {
+        .pic {
+            height: 20rem;
+        }
+    }
+    .list {
+        li {
+            height: 20rem;
+            h6 {
+                top: 5rem;
+            }
+        }
+    }
+}
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        width: 80%;
+        margin: 0 auto;
+        li {
+            margin-top: 1rem;
+            width: 100% !important;
+        }
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        width: 80%;
+        margin: 0 auto;
+        li {
+            margin-top: 1rem;
+            width: 100% !important;
+        }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        width: 80%;
+        margin: 0 auto;
+        li {
+            margin-top: 1rem;
+            width: 100% !important;
+        }
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        width: 80%;
+        margin: 0 auto;
+        li {
+            margin-top: 1rem;
+            width: 100% !important;
+        }
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        width: 80%;
+        margin: 0 auto;
+        li {
+            margin-top: 1rem;
+            width: 100% !important;
+        }
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        display: flex;
+        width: 100%;
+        li {
+            width: 25%;
+        }
+    }
+    .item3 {
+        width: 50% !important;
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 13rem !important;
+        }
+        .banner-name {
+            padding: 7rem 0 0 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            width: 90%;
+            .text-center {
+                .pic {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .list {
+        display: flex;
+        width: 100%;
+        li {
+            width: 25%;
+        }
+    }
+    .item3 {
+        width: 50% !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/governance/index.vue b/src/pages/governance/index.vue
new file mode 100644
index 0000000..d5b71d6
--- /dev/null
+++ b/src/pages/governance/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block history gray">
+      <div class="inner">
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
+          <div class="left">
+            <h2 v-html="modules[1].form.title"></h2>
+            <div class="text"
+                 v-html="modules[1].form.des"></div>
+          </div>
+          <img class="bg"
+               width="562"
+               height="467"
+               :src="modules[1].form.pic"
+               alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="cards">
+      <ul>
+        <template v-for="(item, i) in modules[2].list">
+          <li v-if="item.isEnable"
+              :key="i"
+              :class="{active: curYear == i}"
+              @click="depClick(i)">{{ item.title }}</li>
+        </template>
+      </ul>
+    </div>
+
+    <div class="block committee gray">
+      <div v-if="modules[2].list[curYear].list[0]"
+           class="inner">
+        <div class="left">
+          <h2>{{ modules[2].list[curYear].list[0].title }}</h2>
+          <div class="text"
+               v-html="modules[2].list[curYear].list[0].des"></div>
+        </div>
+        <img class="pic"
+             :src="modules[2].list[curYear].list[0].pic"
+             alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      curYear: 0,
+    };
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+    // 部门点击回调
+    depClick (i) {
+      this.curYear = i
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.history {
+    h2 {
+        padding-bottom: 15px;
+        font-size: 1.2rem;
+        color: #333;
+        &:after {
+            content: '';
+            display: block;
+            width: 65px;
+            height: 3px;
+            margin-top: 20px;
+            background: #0280f1;
+        }
+    }
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 82px 0 50px 30px;
+        margin-top: 20px;
+        background-color: #fff;
+        border-radius: 100px 0px 0px 0px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+    .left {
+        width: 600px;
+        padding-right: 20px;
+    }
+    .text {
+        margin: 20px 0;
+        font-size: 1.2rem;
+        color: #181818;
+        line-height: 31px;
+        @include mul-ellipsis(10);
+    }
+    .bg {
+        margin: -122px 0 0 0;
+    }
+}
+.cards {
+    padding: 60px 0;
+    ul {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        width: 1200px;
+        margin: 0 auto;
+    }
+    li {
+        width: 368px;
+        margin: 0 30px 50px 0;
+        line-height: 84px;
+        font-size: 1.2rem;
+        color: #333;
+        text-align: center;
+        @include ellipsis();
+        background: url(http://10.10.11.7/images/governance/3.png) 0 0 / cover no-repeat;
+        cursor: pointer;
+        &:nth-child(2) {
+            background-image: url(http://10.10.11.7/images/governance/4.png);
+        }
+        &:nth-child(3) {
+            background-image: url(http://10.10.11.7/images/governance/5.png);
+        }
+        &:nth-child(4) {
+            background-image: url(http://10.10.11.7/images/governance/4.png);
+        }
+        &:nth-child(5) {
+            background-image: url(http://10.10.11.7/images/governance/7.png);
+        }
+        &:nth-child(6) {
+            background-image: url(http://10.10.11.7/images/governance/6.png);
+        }
+        &:nth-child(8) {
+            background-image: url(http://10.10.11.7/images/governance/6.png);
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        &:hover,
+        &.active {
+            color: #fff;
+            background: #0d84f2;
+        }
+    }
+}
+.committee {
+    .inner {
+        display: flex;
+        align-items: center;
+    }
+    .left {
+        width: 50%;
+        margin-right: 2%;
+    }
+    h2 {
+        margin-bottom: 20px;
+        font-size: 1.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #333;
+    }
+    .text {
+        font-size: 1rem;
+        font-family: PingFangSC-Regular, PingFang SC;
+        line-height: 1.5;
+        color: #333;
+    }
+    .pic {
+        width: 48%;
+        height: 300px;
+    }
+}
+@media (max-width: 1200px) {
+    .history {
+        .texts {
+            flex-direction: column;
+        }
+        .left {
+            width: 90%;
+        }
+        .bg {
+            width: 100%;
+            margin-top: 2rem;
+        }
+    }
+    .cards {
+        ul {
+            width: 98%;
+        }
+        li {
+            width: 100%;
+            margin: 0 0 20px 0;
+        }
+    }
+}
+@media (max-width: 640px) {
+    .committee {
+        .inner {
+            flex-direction: column;
+        }
+        .left {
+            width: 100%;
+        }
+        .pic {
+            width: 100%;
+            margin-top: 2rem;
+        }
+    }
+}
+</style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
new file mode 100644
index 0000000..ff52057
--- /dev/null
+++ b/src/pages/home/index.vue
@@ -0,0 +1,1044 @@
+<template>
+  <div class="wrap"
+       v-if="modules.length>=1">
+    <el-carousel class="carousel"
+                 :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+               width="100%"
+               :src="item.pic"
+               alt=""
+               @click="openLink(item)">
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
+        <ul class="card">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.2s">
+            <img class="pic"
+                 :src="modules[2].form.pic"
+                 alt="">
+            <div class="texts">
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="des">{{ modules[2].form.des }}</p>
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(modules[2].form.link.linkName)}"
+                   @click="openLink(modules[2].form)">
+            </div>
+          </li>
+          <li class="wow fadeInDown"
+              data-wow-delay="0.6s">
+            <img class="pic"
+                 :src="modules[3].form.pic"
+                 alt="">
+            <div class="texts">
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="des">{{ modules[3].form.des }}</p>
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(modules[3].form.link.linkName)}"
+                   @click="openLink(modules[3].form)">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block news-block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <ul class="news">
+          <li class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              v-for="(item, i) in articles"
+              :key="i"
+              @click="toArtice(item, modules[5].form)">
+            <img :src="item.titleImg"
+                 alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <div class="des"
+                   v-html="item.mainBody"></div>
+              <span class="meta">{{ item.releaseTime }}</span>
+            </div>
+          </li>
+        </ul>
+        <div class="all-link"
+             @click="toAll(modules[5].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
+        <ul class="people">
+          <template v-for="(item, i) in modules[7].list">
+            <li v-if="item.isEnable"
+                :key="i"
+                class="wow fadeInDown"
+                :data-wow-delay="(0.4 * i).toFixed(1) + 's'">
+              <img class="pic"
+                   :src="item.pic"
+                   alt="">
+              <div class="texts">
+                <h6>{{ item.title }}</h6>
+                <p class="des">{{ item.des }}</p>
+                <img src="@/assets/images/arrow.png"
+                     alt=""
+                     :class="{'arrow': isLink(item.link.linkName)}"
+                     @click="openLink(item)">
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+
+    <div class="about"
+         :class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}"
+         @click="openLink(modules[8].form)">
+      <div class="inner">
+        <img class="wow fadeInUp"
+             src="@/assets/images/about.png"
+             alt="">
+        <div class="line wow fadeInUp"
+             data-wow-delay="0.4s"></div>
+        <div class="text wow fadeInUp"
+             data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
+        <div class="des wow fadeInDown"
+             data-wow-delay="1s"
+             v-html="modules[8].form.des"></div>
+      </div>
+    </div>
+
+    <div class="block"
+         style="padding-bottom: 0">
+      <div class="inner">
+        <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
+        <ul class="stat">
+          <li class="wow fadeInRight"
+              data-wow-delay="0.2s">
+            <!-- <p class="num">{{ modules[10].form.title }}</p> -->
+            <animate-number class="num"
+                            ref="num1"
+                            from="0"
+                            :to="modules[10].form.title"
+                            duration="3000" />
+            <p class="text">{{ modules[10].form.des }}</p>
+          </li>
+          <li class="wow fadeInRight"
+              data-wow-delay="0.4s">
+            <animate-number class="num"
+                            ref="num2"
+                            from="0"
+                            :to="modules[11].form.title"
+                            duration="3000" />
+            <p class="text">{{ modules[11].form.des }}</p>
+          </li>
+          <li class="wow fadeInRight"
+              data-wow-delay="0.6s">
+            <animate-number class="num"
+                            ref="num3"
+                            from="0"
+                            :to="modules[12].form.title"
+                            duration="3000" />
+            <p class="text">{{ modules[12].form.des }}</p>
+          </li>
+          <li class="wow fadeInRight"
+              data-wow-delay="0.9s">
+            <animate-number class="num"
+                            ref="num4"
+                            from="0"
+                            :to="modules[13].form.title"
+                            duration="3500" />
+            <p class="text">{{ modules[13].form.des }}</p>
+          </li>
+          <li class="wow fadeInRight"
+              data-wow-delay="1.2s">
+            <p class="num">{{ modules[14].form.title }}</p>
+            <p class="text">{{ modules[14].form.des }}</p>
+          </li>
+          <li class="wow fadeInRight"
+              data-wow-delay="1.5s">
+            <p class="num">{{ modules[15].form.title }}</p>
+            <p class="text">{{ modules[15].form.des }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      articles: [],
+    }
+  },
+  beforeDestroy () {
+    // 移除滚动事件
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  mounted () {
+    new WOW().init()
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+
+          console.log('JSON=>', json)
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
+
+          // 获取文章列表
+          const { column, site, articleNum } = json[5].form
+          if (column.length) {
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+            }).catch(err => { })
+          }
+        }
+      }).catch(err => { })
+    },
+    // 监听页面滚动，到了底部后开始数字滚动动画
+    handleScroll () {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      if (scrollTop > 6350) {
+        window.removeEventListener('scroll', this.handleScroll) // 展示完动画后移除滚动监听
+        for (let i = 1; i < 5; i++) {
+          this.$refs['num' + i].start()
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.carousel {
+    height: 100vh;
+    img {
+        height: 100%;
+    }
+    /deep/.el-carousel__container {
+        height: 100vh;
+    }
+}
+.block {
+    padding-top: 3.15rem;
+    .b-title {
+        font-size: 2.25rem;
+    }
+    .intro {
+        font-size: 1.35rem;
+        margin-bottom: 3.6rem;
+    }
+}
+.card {
+    display: flex;
+    justify-content: space-between;
+    li {
+        width: 47%;
+        transition: 0.3s;
+        &:hover {
+            margin-top: -0.9375rem;
+        }
+    }
+    .pic {
+        width: 100%;
+        height: auto;
+    }
+    .texts {
+        padding-left: 1.375rem;
+        margin-top: 3rem;
+        border-left: 2px solid #dfe4e9;
+    }
+    h6 {
+        min-height: 4.5rem;
+        margin-bottom: 1.56rem;
+        line-height: 2rem;
+        font-size: 1.368rem;
+        color: #333;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .des {
+        font-size: 1.024rem;
+        color: #222;
+        line-height: 30px;
+    }
+}
+
+.news-block {
+    background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+}
+.news {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        display: inline-flex;
+        width: calc((100% - 28px) / 2);
+        padding: 2.125rem;
+        margin-bottom: 1.75rem;
+        background-color: #fff;
+        cursor: pointer;
+        overflow: hidden;
+        transition: 0.3s;
+        &:nth-child(odd) {
+            margin-right: 1.75rem;
+        }
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+    img {
+        width: 12.5rem;
+        height: 7.81rem;
+    }
+    .texts {
+        width: calc(100% - 220px);
+        margin-left: 1.25rem;
+    }
+    h6 {
+        font-size: 1.28rem;
+        color: #0648a8;
+        @include ellipsis;
+    }
+    .des {
+        margin: 14px 0;
+        font-size: 1.14rem;
+        color: #333;
+        line-height: 22px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .meta {
+        font-size: 1.14rem;
+        color: #999;
+    }
+}
+
+.people {
+    li {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 7.87rem;
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+        }
+        &:hover {
+            .pic {
+                transform: scale(1.05);
+            }
+            .texts {
+                transform: translateY(15px);
+            }
+        }
+    }
+    .pic {
+        width: 47%;
+        height: auto;
+        transition: 0.3s;
+    }
+    .texts {
+        width: 48%;
+        padding-top: 8.5rem;
+        transition: 0.3s;
+    }
+    h6 {
+        font-size: 1.8rem;
+    }
+    .des {
+        margin: 20px 0 10px;
+        font-size: 1.2rem;
+        color: #020202;
+        line-height: 30px;
+    }
+}
+
+.glance {
+    padding-bottom: 3.125rem;
+    font-size: 2.81rem;
+    font-weight: bold;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    text-align: center;
+    border-bottom: 1px solid #dedede;
+}
+.stat {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin-top: 3.75rem;
+    li {
+        width: 27%;
+        margin-bottom: 50px;
+        transition: 0.3s;
+        &:hover {
+            transform: translateX(20px);
+        }
+    }
+    .num {
+        margin-bottom: 10px;
+        font-family: toppan;
+        font-size: 2.7rem;
+        font-weight: 800;
+        color: #035ce1;
+        line-height: 49px;
+    }
+    .text {
+        font-size: 1.08rem;
+        margin-top: 1rem;
+        line-height: 1.8rem;
+    }
+}
+.about {
+    padding: 3.848rem 0 9.9rem;
+    background: url(../../assets/images/about-bg.png) no-repeat center center;
+    background-size: 100% 100%;
+    .line {
+        display: flex;
+        align-items: center;
+        margin: 3.125rem 0 1.875rem;
+        width: 5.5rem;
+        height: 6px;
+        background-color: #fff;
+        &:after {
+            content: '';
+            width: 6px;
+            height: 6px;
+        }
+    }
+    .text {
+        font-size: 1.35rem;
+        color: #fff;
+    }
+    .des {
+        display: block;
+        padding: 2.375rem 3.75rem;
+        margin-top: 3.78rem;
+        font-size: 1.35rem;
+        color: #fff;
+        line-height: 42px;
+        text-align: center;
+        background: rgba(111, 69, 36, 0.56);
+        border-radius: 17px;
+        overflow: visible;
+        transition: 0.3s;
+        &:hover {
+            background: rgba(239, 126, 10, 0.56);
+            transform: translateY(10px);
+        }
+    }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+    .carousel {
+        height: 21.87rem;
+        img {
+            height: 100%;
+        }
+        /deep/.el-carousel__container {
+            height: 21.87rem;
+        }
+    }
+    .about {
+        .des {
+            font-size: 1rem;
+        }
+    }
+    .el-carousel__item {
+        height: 21.87rem;
+        img {
+            height: 21.87rem;
+        }
+    }
+    .block {
+        padding: 3.125rem 0;
+        .inner {
+            width: 95%;
+            margin: 0 auto;
+            .b-title {
+                font-size: 2rem;
+                margin-bottom: 1.25rem;
+            }
+            .wow {
+                font-size: 1.5rem;
+            }
+            .intro {
+                margin-bottom: 1.25rem;
+            }
+            .card {
+                flex-direction: column;
+                li {
+                    margin-top: 1.25rem;
+                    width: 100%;
+                }
+            }
+            .news {
+                flex-direction: column;
+                li {
+                    width: 100%;
+                    margin-bottom: 15px;
+                    img {
+                        width: 10rem;
+                    }
+                    .texts {
+                        width: calc(100% - 10rem);
+                    }
+                }
+            }
+            .people {
+                li {
+                    flex-direction: column;
+                    margin-bottom: 1.25rem;
+                    .pic {
+                        width: 100%;
+                        height: 21.875rem;
+                    }
+                    .texts {
+                        padding-top: 1.25rem;
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+    .card .pic {
+        height: 20rem;
+    }
+    .about {
+        width: 100%;
+        padding: 1.25rem 0 1.875rem;
+        .inner {
+            width: 95%;
+            margin: 0 auto;
+            .line {
+                margin: 1.25rem 0 1.25rem;
+            }
+            .des {
+                margin-top: 1.25rem;
+                padding: 10px 1.25rem;
+            }
+        }
+    }
+    .glance {
+        padding-bottom: 1.25rem;
+    }
+    .stat {
+        flex-direction: column;
+        li {
+            width: 100%;
+            text-align: center;
+        }
+    }
+}
+
+@media (min-width: 751px) and (max-width: 920px) {
+    .news {
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin-bottom: 0.9375rem;
+            img {
+                width: 10rem;
+            }
+            .texts {
+                width: calc(100% - 10rem);
+            }
+        }
+    }
+}
+
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 15rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .b-title {
+                font-size: 1.3rem;
+            }
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                        h6 {
+                            font-size: 1.2rem;
+                            margin-bottom: 1rem;
+                        }
+                        img {
+                            width: 3.77rem;
+                            height: 3.77rem;
+                        }
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        h6 {
+                            font-size: 1.5rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .about {
+        .inner {
+            .des {
+                line-height: 1.2rem;
+            }
+        }
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 15rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .about {
+        .inner {
+            .des {
+                line-height: 1.5rem;
+            }
+        }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 15rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .about {
+        .inner {
+            .des {
+                line-height: 1.5rem;
+            }
+        }
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 18rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 18rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 18rem;
+            img {
+                height: 18rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .about {
+                .des {
+                    line-height: 1.5rem;
+                }
+            }
+        }
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 20rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 20rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 20rem;
+            img {
+                height: 20rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .about {
+                .des {
+                    line-height: 1.2rem;
+                }
+            }
+            .stat {
+                flex-direction: row;
+                li {
+                    width: 30%;
+                }
+            }
+        }
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 22rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 22rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 22rem;
+            img {
+                height: 22rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 47%;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    flex-direction: row;
+                    &:nth-child(2) {
+                        flex-direction: row-reverse !important;
+                    }
+                    .pic {
+                        width: 47%;
+                        height: auto;
+                    }
+                    .texts {
+                        width: 48%;
+                    }
+                }
+            }
+            .about {
+                .des {
+                    line-height: 1.2rem;
+                }
+            }
+            .stat {
+                flex-direction: row;
+                li {
+                    width: 30%;
+                }
+            }
+        }
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 25rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 25rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 25rem;
+            img {
+                height: 25rem;
+            }
+        }
+    }
+    .block {
+        padding: 1rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.95rem;
+                line-height: 1rem;
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 47%;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        margin-top: 1.2rem;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.2rem;
+                    img {
+                        width: 8rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    flex-direction: row;
+                    &:nth-child(2) {
+                        flex-direction: row-reverse !important;
+                    }
+                    .pic {
+                        width: 47%;
+                        height: auto;
+                    }
+                    .texts {
+                        width: 48%;
+                    }
+                }
+            }
+            .about {
+                .des {
+                }
+            }
+            .stat {
+                flex-direction: row;
+                li {
+                    width: 30%;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/iasf/index.vue b/src/pages/iasf/index.vue
new file mode 100644
index 0000000..1c1e53a
--- /dev/null
+++ b/src/pages/iasf/index.vue
@@ -0,0 +1,1069 @@
+<template>
+  <div class="wrap">
+    <el-carousel class="carousel"
+                 :style="{height}"
+                 :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+               width="100%"
+               :src="item.pic"
+               alt=""
+               @click="openLink(item)">
+          <div class="texts">
+            <h6>{{ item.title }}</h6>
+            <p class="text">{{ item.des }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block"
+         style="padding-top: 80px">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
+        <ul class="card">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.2s"
+              :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+              @click="openLink(modules[2].form)">
+            <img class="pic"
+                 :src="modules[2].form.pic"
+                 alt="">
+            <div class="project">SILF</div>
+            <div class="texts">
+              <div class="name">SILF</div>
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="des">{{ modules[2].form.des }}</p>
+            </div>
+          </li>
+          <li class="wow fadeInDown"
+              data-wow-delay="0.6s"
+              :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+              @click="openLink(modules[3].form)">
+            <img class="pic"
+                 :src="modules[3].form.pic"
+                 alt="">
+            <div class="project">S³FEL</div>
+            <div class="texts">
+              <div class="name">S³FEL</div>
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="des">{{ modules[3].form.des }}</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block news-wrap">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <div class="all-link"
+             @click="toAll(modules[5].form)">
+          <span>{{$t('column.seeMore')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+        <template v-if="articles.length">
+          <div class="news-banner wow fadeInDown"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles[0], modules[5].form)">
+            <div class="pic-wrap">
+              <img class="pic"
+                   width="100%"
+                   height="100%"
+                   :src="articles[0].titleImg"
+                   alt="">
+              <div class="pic-cover"></div>
+            </div>
+            <div class="right">
+              <h6>{{ articles[0].title }}</h6>
+              <div class="des"
+                   v-html="articles[0].mainBody"></div>
+              <p class="meta">{{ articles[0].releaseTime }} {{ articles[0].classificationName && ' | ' + articles[0].classificationName }}</p>
+            </div>
+          </div>
+
+          <ul class="news">
+            <template v-for="(item, i) in articles">
+              <li v-if="i"
+                  :key="i"
+                  class="wow fadeInDown"
+                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                  @click="toArtice(item, modules[5].form)">
+                <div class="pic-wrap">
+                  <img class="pic"
+                       :src="item.titleImg"
+                       alt="">
+                  <div class="pic-cover"></div>
+                </div>
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <div class="des"
+                       v-html="item.mainBody"></div>
+                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
+                </div>
+              </li>
+            </template>
+          </ul>
+        </template>
+        <ul class="news-carousel">
+          <li v-if="articles1.length">
+            <img class="pic"
+                 src="http://10.10.11.7/images/iasf/8.png"
+                 alt="">
+            <div class="texts">
+              <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
+              <div class="des-wrap">
+                <p class="meta">{{ curArticle1.source }}</p>
+                <div class="des"
+                     @click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div>
+              </div>
+              <p class="date">{{ curArticle1.releaseTime }}</p>
+            </div>
+            <div class="action">
+              <i class="el-icon-arrow-left dir"
+                 @click.stop="prevCarousel(1)"></i>
+              <ul class="inds">
+                <li v-for="i in articles1.length > 3 ? 4 : articles1.length"
+                    :key="i"
+                    :class="{active: curInd1 == i - 1}"
+                    @click.stop="switchCarousel(1, i - 1)"></li>
+              </ul>
+              <i class="el-icon-arrow-right dir"
+                 @click.stop="nextCarousel(1)"></i>
+            </div>
+          </li>
+          <li v-if="articles2.length">
+            <img class="pic"
+                 src="http://10.10.11.7/images/iasf/9.png"
+                 alt="">
+            <div class="texts">
+              <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
+              <div class="des-wrap">
+                <p class="meta">{{ curArticle2.classificationName }}</p>
+                <div class="des"
+                     @click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div>
+              </div>
+              <p class="date">{{ curArticle2.releaseTime }}</p>
+            </div>
+            <div class="action">
+              <i class="el-icon-arrow-left dir"
+                 @click.stop="prevCarousel(2)"></i>
+              <ul class="inds">
+                <li v-for="i in articles2.length > 3 ? 4 : articles2.length"
+                    :key="i"
+                    :class="{active: curInd2 == i - 1}"
+                    @click.stop="switchCarousel(2, i - 1)"></li>
+              </ul>
+              <i class="el-icon-arrow-right dir"
+                 @click.stop="nextCarousel(2)"></i>
+            </div>
+          </li>
+          <li v-if="articles3.length">
+            <img class="pic"
+                 src="http://10.10.11.7/images/iasf/10.png"
+                 alt="">
+            <div class="texts">
+              <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
+              <div class="activity">
+                <div v-if="curArticle3.activityStartTime"
+                     class="date-y">
+                  <p class="d">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[2] }}</p>
+                  <p class="y">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[0] + '-' + curArticle3.activityStartTime.split(' ')[0].split('-')[1] }}</p>
+                </div>
+                <div class="des-wrap">
+                  <p class="meta">{{ curArticle3.classificationName }}</p>
+                  <div class="des"
+                       @click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="action">
+              <i class="el-icon-arrow-left dir"
+                 @click.stop="prevCarousel(3)"></i>
+              <ul class="inds">
+                <li v-for="i in articles3.length > 3 ? 4 : articles3.length"
+                    :key="i"
+                    :class="{active: curInd3 == i - 1}"
+                    @click.stop="switchCarousel(3, i - 1)"></li>
+              </ul>
+              <i class="el-icon-arrow-right dir"
+                 @click.stop="nextCarousel(3)"></i>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block people-block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
+        <ul v-if="articles4.length"
+            class="people">
+          <li v-for="(item, i) in articles4"
+              :key="i"
+              @click="toArtice(item, modules[10].form)"
+              class="wow fadeInDown">
+            <img class="pic"
+                 :src="item.titleImg"
+                 alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <p class="job">岗位：{{ item.post }}</p>
+              <p class="hobby">爱好：{{ item.hobby }}</p>
+              <div class="text"
+                   v-html="item.mainBody"></div>
+            </div>
+          </li>
+        </ul>
+        <div class="all-link"
+             @click="toAll(modules[10].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="block talent-block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
+        <div class="talent">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s">
+            <h6>{{ modules[12].form.title }}</h6>
+            <p class="sub-title">{{ modules[12].form.subTitle }}</p>
+            <div class="text"
+                 v-html="modules[12].form.des"></div>
+            <el-button v-if="isLink(modules[12].form.link.linkName)"
+                       style="background-color: #026BE1;"
+                       type="primary"
+                       round
+                       @click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button>
+          </div>
+          <img :src="modules[12].form.pic"
+               alt=""
+               class="pic wow fadeInRight"
+               data-wow-delay="0.5s">
+        </div>
+      </div>
+    </div>
+
+    <div class="about">
+      <div class="about-bg">
+        <div class="inner">
+          <div class="left">
+            <h6>{{ modules[13].form.title }}</h6>
+            <div class="text"
+                 v-html="modules[13].form.des"></div>
+            <img src="@/assets/images/arrow-white.png"
+                 alt=""
+                 :class="{'arrow': isLink(modules[13].form.link.linkName)}"
+                 @click="openLink(modules[13].form)">
+          </div>
+          <img class="pic"
+               :src="modules[13].form.pic"
+               alt="">
+        </div>
+      </div>
+    </div>
+
+    <ul class="tools">
+      <template v-for="(item, i) in modules[19].list">
+        <li v-if="item.isEnable"
+            :key="i"
+            @click="toLink(item, i)">{{ item.title }}</li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      height: 0,
+      articles: [],
+      articles1: [],
+      articles2: [],
+      articles3: [],
+      articles4: [],
+      curInd1: 0,
+      curArticle1: {},
+      curInd2: 0,
+      curArticle2: {},
+      curInd3: 0,
+      curArticle3: {},
+      timer: null,
+    }
+  },
+  mounted () {
+    this.height = window.innerHeight + 'px'
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
+
+          // 获取文章列表
+          if (json[5].form.column.length) {
+            const { column, articleNum } = json[5].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 4))
+            }).catch(err => { })
+          }
+
+          if (json[6].form.column.length) {
+            const { column, articleNum } = json[6].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
+              if (this.articles1.length) this.curArticle1 = this.articles1[0]
+            }).catch(err => { })
+          }
+          if (json[7].form.column.length) {
+            const { column, articleNum } = json[7].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
+              if (this.articles2.length) this.curArticle2 = this.articles2[0]
+            }).catch(err => { })
+          }
+          if (json[8].form.column.length) {
+            const { column, articleNum } = json[8].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
+              if (this.articles3.length) this.curArticle3 = this.articles3[0]
+            }).catch(err => { })
+          }
+          if (json[10].form.column.length) {
+            const { column, articleNum } = json[10].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles4 = Util.removeTag(data.slice(0, articleNum || 3))
+            }).catch(err => { })
+          }
+          this.carouselInterval()
+        }
+      }).catch(err => { })
+    },
+    // 自动轮播
+    carouselInterval () {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.curInd1++
+        if (this.curInd1 > this.articles1.length - 1) this.curInd1 = 0
+        if (this.articles1[this.curInd1]) this.curArticle1 = this.articles1[this.curInd1] || {}
+
+        this.curInd2++
+        if (this.curInd2 > this.articles2.length - 1) this.curInd2 = 0
+        if (this.articles2[this.curInd2]) this.curArticle2 = this.articles2[this.curInd2] || {}
+
+        this.curInd3++
+        if (this.curInd3 > this.articles3.length - 1) this.curInd3 = 0
+        if (this.articles3[this.curInd3]) this.curArticle3 = this.articles3[this.curInd3] || {}
+      }, 5000)
+    },
+    // 手动轮播切换
+    switchCarousel (k, i) {
+      if (this['curInd' + k] !== i) {
+        this['curInd' + k] = i
+        this['curArticle' + k] = this['articles' + k][this['curInd' + k]] || {}
+      }
+    },
+    // 上一页轮播
+    prevCarousel (k) {
+      --this['curInd' + k]
+      if (this['curInd' + k] < 0) this['curInd' + k] = this['articles' + k].length - 1
+      this['curArticle' + k] = this['articles' + k][this['curInd' + k]] || {}
+    },
+    // 上一页轮播
+    nextCarousel (k) {
+      ++this['curInd' + k]
+      if (this['curInd' + k] > this['articles' + k].length - 1) this['curInd' + k] = 0
+      this['curArticle' + k] = this['articles' + k][this['curInd' + k]] || {}
+    },
+    // 右侧工具栏点击回调
+    toLink (item, i) {
+      i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.carousel {
+    height: 100vh;
+    img {
+        height: 100%;
+    }
+    /deep/.el-carousel__container {
+        height: 100%;
+    }
+    .texts {
+        position: absolute;
+        bottom: 20%;
+        left: 120px;
+        h6,
+        .text {
+            padding: 20px 15px;
+            color: #fff;
+            background-color: rgba(0, 0, 0, 0.29);
+        }
+        h6 {
+            margin-bottom: 30px;
+            font-size: 68px;
+            font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+        }
+        .text {
+            font-size: 24px;
+            font-family: AppleSystemUIFont;
+        }
+    }
+}
+.block {
+    padding-top: 3.15rem;
+    .b-title {
+        font-size: 35px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #333;
+    }
+    .intro {
+        margin-bottom: 3.6rem;
+        font-size: 30px;
+        font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
+        color: #5b5b5e;
+    }
+}
+.inner {
+    width: 1444px;
+    // min-width: 70%;
+}
+.card {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 80px;
+    li {
+        position: relative;
+        width: calc((100% - 64px) / 2);
+        height: 488px;
+        transition: 0.3s;
+        overflow: hidden;
+        &:hover {
+            .project {
+                top: -100%;
+            }
+            .texts {
+                top: 0;
+            }
+        }
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+    }
+    .project {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        font-size: 45px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: 0.3s;
+    }
+    .texts {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 128px;
+        text-align: center;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: 0.3s;
+    }
+    .name {
+        font-size: 45px;
+        font-family: PingFangSC-Medium, PingFang SC;
+    }
+    h6 {
+        margin: 10px 0 20px;
+        line-height: 63px;
+        font-size: 45px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        @include mul-ellipsis(2);
+    }
+    .des {
+        font-size: 28px;
+        line-height: 44px;
+    }
+}
+.news-wrap {
+    background: url(http://10.10.11.7/images/iasf/1.png) 0 0/100% 100% no-repeat;
+}
+.news-title:after {
+    display: none;
+}
+.news-banner {
+    display: flex;
+    margin-top: 20px;
+    cursor: pointer;
+    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
+    &:hover {
+        .right {
+            background-color: #091733;
+        }
+        .pic-cover {
+            display: block;
+        }
+    }
+    .pic-wrap {
+        position: relative;
+        width: 50%;
+        overflow: hidden;
+    }
+    .pic-cover {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(111, 182, 255, 0.2);
+    }
+    .pic {
+        transition: 0.5s;
+    }
+    .right {
+        position: relative;
+        width: 50%;
+        padding: 42px 71px 90px 58px;
+        background: #026be1;
+        color: #fff;
+        transition: 0.3s;
+        h6 {
+            font-size: 24px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            line-height: 43px;
+            @include mul-ellipsis(2);
+        }
+        .des {
+            margin: 28px 0 25px;
+            font-size: 18px;
+            line-height: 32px;
+        }
+        .meta {
+            font-size: 16px;
+        }
+    }
+}
+.news {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 20px 0;
+    li {
+        width: calc((100% - 40px) / 3);
+        margin-right: 20px;
+        background-color: #fff;
+        cursor: pointer;
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        &:hover {
+            .pic-cover {
+                display: block;
+            }
+            .texts {
+                background-color: #091733;
+            }
+            .meta,
+            h6,
+            .des {
+                color: #fff;
+            }
+        }
+    }
+    .pic-wrap {
+        position: relative;
+        width: 100%;
+        height: 220px;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    .pic-cover {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(111, 182, 255, 0.2);
+    }
+    .texts {
+        padding: 24px 28px;
+        background-color: #fff;
+        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
+        transition: 0.3s;
+    }
+    .meta {
+        font-size: 16px;
+        color: #666;
+    }
+    h6 {
+        font-size: 20px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #333;
+        @include ellipsis;
+    }
+    .des {
+        height: 84px;
+        margin: 14px 0 16px;
+        font-size: 16px;
+        line-height: 28px;
+        color: #333;
+        text-indent: 2em;
+    }
+}
+.news-carousel {
+    display: flex;
+    li {
+        position: relative;
+        width: calc((100% - 40px) / 3);
+        height: 284px;
+        margin-right: 20px;
+        overflow: hidden;
+        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    .texts {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 50px 30px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.3);
+    }
+    h6 {
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        cursor: pointer;
+    }
+    .des-wrap {
+        height: 101px;
+        margin: 11px 0 25px;
+    }
+    .meta {
+        margin-bottom: 16px;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.86);
+    }
+    .des {
+        font-size: 20px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        -webkit-line-clamp: 2;
+        line-height: 30px;
+        cursor: pointer;
+    }
+    .date {
+        font-size: 16px;
+    }
+    .activity {
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+        .meta {
+            margin-bottom: 5px;
+        }
+        .des-wrap {
+            max-width: calc(100% - 100px);
+            height: auto;
+            margin: 0;
+        }
+    }
+    .date-y {
+        margin-right: 20px;
+        text-align: center;
+        color: #fff;
+        .d {
+            font-size: 28px;
+        }
+        .y {
+            padding-top: 5px;
+            margin-top: 5px;
+            font-size: 16px;
+            border-top: 1px solid #686868;
+        }
+    }
+    /deep/.el-carousel__indicators--horizontal {
+        bottom: 20px;
+        .el-carousel__indicator--horizontal {
+            width: 10px;
+            height: 10px;
+            padding: 0;
+            margin-right: 6px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.65);
+            &.is-active {
+                background: #1583ff;
+            }
+        }
+        .el-carousel__button {
+            width: 0;
+        }
+    }
+    .action {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.65);
+        transform: translateX(-50%);
+    }
+    .inds {
+        display: inline-flex;
+        margin: 0 15px;
+        li {
+            width: 10px;
+            height: 10px;
+            margin-right: 6px;
+            background: rgba(255, 255, 255, 1);
+            border-radius: 50%;
+            transition: 0.2s;
+            cursor: pointer;
+            &.active {
+                background: #1583ff;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+    .dir {
+        font-size: 1.2rem;
+        color: #fff;
+        line-height: 1;
+        cursor: pointer;
+    }
+}
+.people-block {
+    background: url(../../assets/images/FEL.png) 0 0/100% 100% no-repeat;
+}
+.people {
+    display: flex;
+
+    li {
+        width: 33.33%;
+        padding: 20px 73px 40px;
+        text-align: center;
+        border-right: 1px solid #ddd;
+        cursor: pointer;
+        &:first-child {
+            padding-left: 0;
+        }
+        &:last-child {
+            padding-right: 0;
+            border-right: 0;
+        }
+    }
+    .pic {
+        width: 293px;
+        height: 293px;
+        margin-bottom: 28px;
+        border-radius: 50%;
+    }
+    h6 {
+        font-size: 1.1rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #333;
+    }
+    .job {
+        margin: 18px 0 12px;
+        font-size: 1rem;
+        font-weight: 600;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #333;
+    }
+    .hobby {
+        margin-bottom: 15px;
+        font-size: 1rem;
+        color: #333;
+    }
+    .text {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #333;
+    }
+}
+.talent-block {
+    background: url(http://10.10.11.7/images/iasf/11.png) 0 0/100% 100% no-repeat;
+}
+.talent {
+    display: flex;
+    color: #fff;
+    border-radius: 0px 100px 0px 100px;
+    overflow: hidden;
+    .left {
+        width: 50%;
+        padding: 120px 80px 0 5%;
+        background: #111c43;
+    }
+    h6 {
+        font-size: 30px;
+        font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .sub-title {
+        margin: 8px 0 20px;
+        font-size: 0.9rem;
+    }
+    .text {
+        margin-bottom: 60px;
+        font-size: 1rem;
+        line-height: 2;
+    }
+    .el-button {
+        font-size: 20px;
+        border: 0;
+    }
+    .pic {
+        width: 50%;
+        min-height: 465px;
+    }
+}
+.about {
+    padding: 100px 0 229px;
+    background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat;
+    .about-bg {
+        background-color: #0a7fec;
+    }
+    .inner {
+        position: relative;
+        height: 465px;
+        padding: 73px 0 58px;
+    }
+    .left {
+        width: 44%;
+    }
+    h6 {
+        font-size: 36px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #fff;
+    }
+    .text {
+        margin: 24px 0 37px;
+        font-size: 20px;
+        line-height: 35px;
+        color: #fff;
+        @include mul-ellipsis(4);
+    }
+    .pic {
+        position: absolute;
+        top: -60px;
+        right: 0;
+        width: 744px;
+        height: 657px;
+    }
+}
+.tools {
+    z-index: 10;
+    position: fixed;
+    top: 60vh;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    li {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 22px;
+        margin-bottom: 1px;
+        font-size: 20px;
+        color: #0084ff;
+        line-height: 56px;
+        background-color: rgba(19, 18, 19, 0.94);
+        cursor: pointer;
+        transition: 0.3s;
+        &:before {
+            content: '';
+            width: 28px;
+            height: 28px;
+            margin-right: 7px;
+            background: url(http://10.10.11.7/images/iasf/icon1.png) no-repeat;
+        }
+        &:nth-child(2):before {
+            background-image: url(http://10.10.11.7/images/iasf/icon2.png);
+        }
+        &:nth-child(2):hover:before {
+            background-image: url(http://10.10.11.7/images/iasf/icon2-1.png);
+        }
+        &:nth-child(3):before {
+            background-image: url(http://10.10.11.7/images/iasf/icon3.png);
+        }
+        &:nth-child(3):hover:before {
+            background-image: url(http://10.10.11.7/images/iasf/icon3-1.png);
+        }
+        &:nth-child(4):before {
+            background-image: url(http://10.10.11.7/images/iasf/icon4.png);
+        }
+        &:nth-child(4):hover:before {
+            background-image: url(http://10.10.11.7/images/iasf/icon4-1.png);
+        }
+        &:hover {
+            justify-content: flex-start;
+            // width: 192px;
+            padding-right: 4rem;
+            color: #fff;
+            background-color: rgba(1, 129, 247, 0.94);
+            &:before {
+                background-image: url(http://10.10.11.7/images/iasf/icon1-1.png);
+            }
+        }
+    }
+    .icon {
+        margin-right: 10px;
+    }
+}
+@media (max-width: 1470px) {
+    .inner {
+        width: 95%;
+    }
+    .card {
+        li {
+            height: auto;
+        }
+    }
+    .about {
+        .pic {
+            width: 700px;
+            height: auto;
+        }
+    }
+}
+@media (max-width: 1370px) {
+    .card {
+        .texts {
+            padding: 0 1rem;
+        }
+    }
+    .about {
+        .inner {
+            height: auto;
+        }
+        .left {
+            width: 100%;
+        }
+        .pic {
+            position: static;
+            width: auto;
+            max-width: 100%;
+            height: auto;
+            margin-top: 10px;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .carousel .texts {
+        left: 5%;
+        right: 5%;
+    }
+    .card {
+        flex-direction: column;
+        li {
+            margin-top: 1.25rem;
+            width: 100%;
+        }
+    }
+    .news {
+        flex-direction: column;
+        li {
+            width: 100%;
+        }
+    }
+    .news-banner {
+        flex-direction: column;
+        .pic-wrap,
+        .right {
+            width: 100%;
+        }
+    }
+    .news-carousel,
+    .people {
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+    }
+    .talent {
+        flex-direction: column;
+        .left,
+        .pic {
+            width: 100%;
+        }
+        .left {
+            padding-bottom: 50px;
+            margin-bottom: 10px;
+        }
+    }
+    .entry {
+        flex-direction: column;
+        li {
+            width: 100% !important;
+            margin-right: 0;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 4e24870..0d8b22f 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -1,17 +1,21 @@
 <template>
   <div class="wrap">
-    <el-carousel :interval="6000"
-                 height="354px">
-      <template v-for="(item, i) in banners">
-        <el-carousel-item :key="i">
-          <div :class="['banner-item', {'cursor-pointer': item.url}]"
+    <el-carousel class="carousel"
+                 :interval="6000"
+                 height="354px"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+               width="100%"
+               :src="item.pic"
+               alt=""
                @click="openLink(item)">
-            <img :src="item.banner"
-                 alt="">
-            <div class="texts">
-              <h6>{{ item.title }}</h6>
-              <p class="sub">{{ item.subheading }}</p>
-            </div>
+          <div class="texts">
+            <h6>{{ item.title }}</h6>
+            <p class="sub">{{ item.des }}</p>
           </div>
         </el-carousel-item>
       </template>
@@ -205,13 +209,13 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import { Loading } from "element-ui";
 import Setting from "@/setting";
 export default {
+  mixins: [mixins],
   data () {
-    const that = this
     return {
-      banners: [],
       timer: null,
       curTab: '',
       tabs: [
@@ -314,12 +318,14 @@ export default {
     // 获取banner
     getBanner () {
       // 预览/详情
-      this.$post(`${this.api.findPage}?columnId=${this.id}`).then(({ data }) => {
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
           // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.banners = json[0]
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", this.banners)
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
       }).catch(err => { })
     },
@@ -535,11 +541,12 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    .banner-item {
-        position: relative;
+    .carousel {
         img {
-            width: 100%;
-            height: 354px;
+            height: 100%;
+        }
+        /deep/.el-carousel__container {
+            height: 100%;
         }
         .texts {
             position: absolute;
@@ -550,10 +557,10 @@ export default {
         }
         h6 {
             margin-bottom: 25px;
-            font-size: 44px;
+            font-size: 36px;
         }
         .sub {
-            font-size: 22px;
+            font-size: 24px;
         }
     }
     .inner-wrap {
diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue
new file mode 100644
index 0000000..98aae7a
--- /dev/null
+++ b/src/pages/industrial/index.vue
@@ -0,0 +1,443 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block history gray">
+      <div class="inner"
+           :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+           @click="openLink(modules[1].form)">
+        <h2 class="wow fadeInLeft"
+            style="margin-left: 57px"
+            v-html="modules[1].form.title"></h2>
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
+          <div class="left">
+            <h2>{{ modules[1].form.subTitle }}</h2>
+            <div class="text"
+                 v-html="modules[1].form.des"></div>
+          </div>
+          <img class="bg"
+               :src="modules[1].form.pic"
+               alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block land">
+      <div class="inner">
+        <img class="pic"
+             :src="modules[2].form.pic"
+             alt="">
+        <div class="right">
+          <h6 v-html="modules[2].form.title"></h6>
+          <div class="text"
+               v-html="modules[2].form.des"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp"
+            v-html="modules[3].form.title"></h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <ul class="plan">
+          <li>
+            <div class="left">
+              <h6 v-html="modules[4].form.title"></h6>
+              <div class="text"
+                   v-html="modules[4].form.des"></div>
+              <a v-if="isLink(modules[4].form.link.linkName)"
+                 class="survey"
+                 @click="openLink(modules[4].form)">需求调研 ></a>
+            </div>
+            <img class="pic"
+                 :src="modules[4].form.pic"
+                 alt="">
+          </li>
+          <li>
+            <div class="left">
+              <h6 v-html="modules[5].form.title"></h6>
+              <div class="text"
+                   v-html="modules[5].form.des"></div>
+              <a v-if="isLink(modules[5].form.link.linkName)"
+                 class="survey"
+                 @click="openLink(modules[5].form)">需求调研 ></a>
+            </div>
+            <img class="pic"
+                 :src="modules[5].form.pic"
+                 alt="">
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp"
+            v-html="modules[6].form.title"></h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
+        <ul class="app">
+          <li v-for="(item, i) in modules[7].list"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img class="bg"
+                 :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
+                 alt="">
+            <img class="icon"
+                 :src="require('@/assets/images/industrial/app' + (i + 1) + '-1.png')"
+                 alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block news-block">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp"
+            v-html="modules[8].form.title"></h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
+        <ul class="news">
+          <li class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              v-for="(item, i) in articles"
+              :key="i"
+              @click="toArtice(item, modules[9].form)">
+            <img :src="item.titleImg"
+                 alt="">
+            <div class="texts">
+              <span class="meta">{{ item.releaseTime }}</span>
+              <h6>{{ item.title }}</h6>
+            </div>
+          </li>
+        </ul>
+        <div class="all-link"
+             @click="toAll(modules[9].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      articles: [],
+    };
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+
+            // 获取文章列表
+            const { column, articleNum } = json[9].form
+            if (column.length) {
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+              }).catch(err => { })
+            }
+          }
+        })
+        .catch((err) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.history {
+    h2 {
+        margin-bottom: 20px;
+        font-size: 1.8rem;
+        color: #333;
+    }
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 30px 57px;
+        background-color: #fff;
+        border-radius: 100px 0px 0px 0px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+    .left {
+        width: 500px;
+        padding-right: 30px;
+    }
+    .text {
+        margin: 20px 0;
+        font-size: 1.2rem;
+        color: #181818;
+        line-height: 31px;
+        @include mul-ellipsis(10);
+    }
+    .bg {
+        width: 560px;
+        height: 500px;
+        margin: -122px -83px 0 0;
+    }
+}
+.land {
+    .inner {
+        display: flex;
+    }
+    .pic {
+        width: 50%;
+        height: 450px;
+    }
+    .right {
+        width: 50%;
+    }
+    h6 {
+        margin-left: 50px;
+        font-size: 1.3rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #333;
+        @include ellipsis();
+    }
+    .text {
+        height: 405px;
+        padding: 50px;
+        margin-top: 1rem;
+        background: rgba(242, 246, 248, 0.45);
+        border-radius: 0px 100px 0px 0px;
+    }
+}
+.plan {
+    li {
+        display: flex;
+        justify-content: space-between;
+        height: 433px;
+        margin-bottom: 60px;
+        color: #333;
+        background-color: #fff;
+        border-radius: 100px 0px 0px 0px;
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+            .pic {
+                margin: -20px 0 0 -20px;
+                border-radius: 0 100px 0 0;
+            }
+        }
+        .left {
+            width: 50%;
+            padding: 50px;
+        }
+        h6 {
+            font-size: 1.4rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+        }
+        .text {
+            margin: 14px 0 40px;
+            font-size: 1rem;
+            line-height: 1.6;
+        }
+        .survey {
+            padding: 8px 15px;
+            font-size: 0.9rem;
+            color: #fff;
+            background-color: #1150ac;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .pic {
+            width: 48%;
+            height: 423px;
+            margin: -20px -20px 0 0;
+            border-radius: 100px 0 0 0;
+        }
+    }
+}
+
+.app {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: calc((100% - 30px) / 4);
+        height: 200px;
+        margin: 0 10px 10px 0;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+            .icon {
+                transform: rotateY(180deg);
+            }
+        }
+        &:nth-child(4n) {
+            margin-right: 0;
+        }
+    }
+    .bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .icon {
+        position: relative;
+        width: 62px;
+        transition: 0.5s;
+    }
+    .text {
+        position: relative;
+        margin-top: 20px;
+        font-size: 32px;
+        color: #fff;
+    }
+}
+.news {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        width: calc((100% - 34px) / 3);
+        margin: 0 17px 20px 0;
+        background-color: #fff;
+        cursor: pointer;
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+    }
+    img {
+        width: 100%;
+        height: 220px;
+    }
+    .texts {
+        padding: 20px 24px;
+        background-color: #fff;
+    }
+    h6 {
+        margin-top: 8px;
+        font-size: 1rem;
+        color: #333;
+        text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
+    }
+    .meta {
+        font-size: 0.9rem;
+        color: #666;
+        text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
+    }
+}
+@media (max-width: 1200px) {
+    .history {
+        .texts {
+            flex-direction: column;
+        }
+        .left {
+            width: 100%;
+        }
+        .bg {
+            width: 100%;
+            height: auto;
+            margin-top: 1rem;
+        }
+    }
+    .land {
+        .inner {
+            flex-direction: column;
+        }
+        .pic,
+        .right {
+            width: 100%;
+        }
+        h6 {
+            margin-left: 0;
+        }
+        .right {
+            margin-top: 1rem;
+        }
+        .text {
+            height: auto;
+        }
+    }
+    .plan {
+        li {
+            flex-direction: column !important;
+            height: auto;
+            .left,
+            .pic {
+                width: 100%;
+            }
+            .pic {
+                margin: 1rem 0 0 !important;
+            }
+        }
+    }
+    .app {
+        li {
+            width: calc((100% - 10px) / 2);
+            height: 267px;
+            &:nth-child(2n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .news {
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin: 0 0 20px 0;
+        }
+    }
+}
+@media (max-width: 780px) {
+    .app {
+        li {
+            width: 100%;
+            margin-right: 0;
+        }
+    }
+}
+</style>
diff --git a/src/pages/lightSources/index.vue b/src/pages/lightSources/index.vue
new file mode 100644
index 0000000..eaa10d6
--- /dev/null
+++ b/src/pages/lightSources/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <!-- 全球先进光源 -->
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <el-image class="block-pic br wow fadeInLeft"
+                  data-wow-delay="0.8s"
+                  style="width: 100%; height: 536px"
+                  :src="modules[1].form.pic"
+                  :preview-src-list="[modules[1].form.pic]">
+        </el-image>
+      </div>
+    </div>
+
+    <div class="block sources">
+      <div class="inner">
+        <ul class="tabs wow fadeInLeft">
+          <li v-for="(item, i) in tabs"
+              :class="{active: item.id == active}"
+              :key="i"
+              @click="tabChange(item)">{{ item.name }}</li>
+        </ul>
+        <div class="table-wrap">
+          <table v-if="!active"
+                 class="table">
+            <thead>
+              <tr>
+                <th>光源名称</th>
+                <th>国家和地区</th>
+                <th>地点</th>
+                <th>能量（GeV）</th>
+                <th>储存环周长(m)</th>
+                <th>光束线/条</th>
+                <th>代际</th>
+                <th>发射度(nm.rad)</th>
+                <th>状态</th>
+                <th>建成时间</th>
+              </tr>
+            </thead>
+            <template v-if="modules[2].list.length">
+              <template v-for="(item, i) in modules[2].list">
+                <tr v-if="item.isEnable"
+                    :key="i">
+                  <td :class="{link: isLink(item.link.linkName)}"
+                      @click="openLink(item)">{{ item.name }}</td>
+                  <td>{{ item.country }}</td>
+                  <td>{{ item.address }}</td>
+                  <td>{{ item.gev }}</td>
+                  <td>{{ item.storage }}</td>
+                  <td>{{ item.stations }}</td>
+                  <td>{{ item.intergenerational }}</td>
+                  <td>{{ item.emittance }}</td>
+                  <td>{{ item.status }}</td>
+                  <td>{{ item.time }}</td>
+                </tr>
+              </template>
+            </template>
+            <tr v-else>
+              <td class="none"
+                  colspan="20">暂无数据</td>
+            </tr>
+          </table>
+          <table v-else
+                 class="table">
+            <thead>
+              <tr>
+                <th>光源名称</th>
+                <th>国家和地区</th>
+                <th>地点</th>
+                <th>加速器技术</th>
+                <th>能量/GeV</th>
+                <th>波长范围/nm</th>
+                <th>重复频率/Hz</th>
+                <th>设施长度/m</th>
+                <th>实验站/个</th>
+                <th>状态</th>
+                <th>建成时间</th>
+              </tr>
+            </thead>
+            <template v-if="modules[3].list.length">
+              <template v-for="(item, i) in modules[3].list">
+                <tr v-if="item.isEnable"
+                    :key="i">
+                  <td :class="{link: isLink(item.link.linkName)}"
+                      @click="openLink(item)">{{ item.name }}</td>
+                  <td>{{ item.country }}</td>
+                  <td>{{ item.address }}</td>
+                  <td>{{ item.accelerator }}</td>
+                  <td>{{ item.gev }}</td>
+                  <td>{{ item.wavelength }}</td>
+                  <td>{{ item.repetitive }}</td>
+                  <td>{{ item.facility }}</td>
+                  <td>{{ item.stations }}</td>
+                  <td>{{ item.status }}</td>
+                  <td>{{ item.time }}</td>
+                </tr>
+              </template>
+            </template>
+            <tr v-else>
+              <td class="none"
+                  colspan="20">暂无数据</td>
+            </tr>
+          </table>
+          <div class="copyright">全球先进光源页面所刊载内容，包括图片、文字、数据源自相关设施官方网站、宣传手册，以及国际原子能机构（IAEA）网站公开数据，由深圳综合粒子设施研究院及中国科学学与科技政策研究会科技基础设施专业委员会共同汇总整理而来。相关内容供访问者学习、研究，如需转载或引用，须声明内容来源。</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      active: 0,
+      tabs: [
+        {
+          id: 0,
+          name: '同步辐射光源'
+        },
+        {
+          id: 1,
+          name: '自由电子激光'
+        },
+      ]
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
+    },
+    // tab回调
+    tabChange ({ id }) {
+      this.active = id
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.block {
+    padding: 3.15rem 0;
+    .inner {
+        .b-title {
+            font-size: 2.25rem;
+            margin-bottom: 2.25rem;
+        }
+        .intro {
+            margin-bottom: 2.25rem;
+        }
+    }
+}
+.block-pic {
+    transition: 0.3s;
+    height: auto;
+    &.br {
+        border-radius: 270px;
+    }
+    &:hover {
+        transform: scale(1.05);
+    }
+}
+.tabs {
+    justify-content: flex-start;
+    box-shadow: none;
+}
+.table {
+    width: 100%;
+    margin-top: 20px;
+    border-collapse: collapse;
+    th {
+        white-space: nowrap;
+    }
+    th,
+    td {
+        padding: 10px 10px;
+        font-size: 0.9rem;
+        text-align: left;
+    }
+    .link {
+        color: #1583ff;
+        cursor: pointer;
+    }
+}
+.copyright {
+    margin-top: 25px;
+    font-size: 0.7rem;
+    line-height: 1.6;
+    color: #8d8d8d;
+}
+@media (max-width: 1200px) {
+    .table-wrap {
+        width: 100%;
+        overflow: auto;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/member/index.vue b/src/pages/member/index.vue
index ff2ad40..962659a 100644
--- a/src/pages/member/index.vue
+++ b/src/pages/member/index.vue
@@ -10,16 +10,17 @@
             会员<em>专享权益</em>
           </h6>
           <ul class="step">
-            <li>找实训产品难？</li>
-            <li>专业咨询、写方案难？</li>
-            <li>产品与方案匹配难？</li>
-            <li>项目垫资难？</li>
+            <template v-for="(item, i) in modules[0].list">
+              <li v-if="item.isEnable"
+                  :key="i">{{ item.title }}</li>
+            </template>
           </ul>
-          <p class="member-des">职站商城聚合新商科实训产品，高品质低价格，让你一站式采购无忧</p>
+          <div class="member-des"
+               v-html="modules[1].form.des"></div>
           <ul class="param">
-            <li v-for="(item, i) in params"
+            <li v-for="(item, i) in modules[2].list"
                 :key="i">
-              <img :src="require('@/assets/images/member/icon' + (i + 1) + '.png')"
+              <img :src="item.pic"
                    alt="">
               <p class="name">{{ item.name }}</p>
               <p class="des">{{ item.des }}</p>
@@ -76,16 +77,16 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      // this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-      //   if (data.length) {
-      //     // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-      //     const json = JSON.parse(this.preview ?
-      //       data :
-      //       data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-      //     this.modules = json
-      //     console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-      //   }
-      // }).catch(err => {})
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
     },
   }
 };
@@ -96,7 +97,7 @@ export default {
 @import '../../styles/page/page.scss';
 .reg {
     padding-bottom: 50px;
-    background: url(../../assets/images/member/1.jpg) 0 0/100% 605px no-repeat;
+    background: url(https://www.occupationlab.com/images/member/1.jpg) 0 0/100% 605px no-repeat;
     .equity-wrap {
         width: 1190px;
         padding-top: 20px;
@@ -108,7 +109,7 @@ export default {
     .equity {
         min-height: 614px;
         margin-top: 20px;
-        background: url(../../assets/images/member/2.jpg) 0 0/100% 100% no-repeat;
+        background: url(https://www.occupationlab.com/images/member/2.jpg) 0 0/100% 100% no-repeat;
         background-color: #111d42;
         border-radius: 24px 18px 18px 18px;
         box-shadow: 0 0 20px 4px rgba(0, 16, 42, 0.3);
@@ -152,7 +153,7 @@ export default {
                 left: -34px;
                 width: 24px;
                 height: 24px;
-                background: url(../../assets/images/member/3.png) 0 0/100% 100% no-repeat;
+                background: url(https://www.occupationlab.com/images/member/3.png) 0 0/100% 100% no-repeat;
             }
         }
     }
@@ -186,7 +187,7 @@ export default {
     .btn {
         width: 400px;
         height: 72px;
-        margin: 30px auto;
+        margin: 30px auto 50px;
         font-size: 24px;
         color: #13192e;
         font-weight: 600;
diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue
new file mode 100644
index 0000000..9a494e4
--- /dev/null
+++ b/src/pages/mission/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="wrap">
+    <!-- 关于IASF-使命愿景价值观 -->
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <div class="item wow bounceInLeft"
+             data-wow-delay="0.5s"
+             :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+             @click="openLink(modules[1].form)">
+          <img :src="modules[1].form.pic"
+               alt="" />
+          <div class="texts">
+            <h6 v-html="modules[1].form.title"></h6>
+            <div class="text"
+                 v-html="modules[1].form.des"></div>
+          </div>
+        </div>
+        <div class="item wow bounceInRight"
+             data-wow-delay="0.8s"
+             :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
+             @click="openLink(modules[2].form)">
+          <img :src="modules[2].form.pic"
+               alt="" />
+          <div class="texts rightText">
+            <h6 v-html="modules[2].form.title"></h6>
+            <div class="text"
+                 v-html="modules[2].form.des"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block mind gray">
+      <div class="inner">
+        <h6 class="m-title"
+            v-html="modules[3].form.title"></h6>
+        <ul class="list">
+          <template v-for="(item, i) in modules[4].list">
+            <li v-if="item.isEnable"
+                :key="i"
+                :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+                @click="openLink(item)">
+              <img :src="item.pic"
+                   alt=""
+                   class="pic">
+              <div class="texts">
+                <h6>{{ item.title }}</h6>
+                <div class="text"
+                     v-html="item.des"></div>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: [],
+    };
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.inner {
+    width: 1200px;
+}
+.item {
+    position: relative;
+    margin-bottom: 58px;
+    img {
+        width: 100%;
+        height: 400px;
+    }
+    .texts {
+        position: absolute;
+        top: 79px;
+        left: -34px;
+        width: 532px;
+        padding: 70px 38px 70px 55px;
+        color: #333;
+        background: rgba(255, 241, 231, 0.84);
+        transition: 0.5s;
+    }
+    &:nth-child(2) .texts {
+        left: auto;
+        right: -36px;
+        padding-left: 38px;
+        color: #fff;
+        background: rgba(40, 179, 255, 0.54);
+    }
+    h6 {
+        margin-bottom: 14px;
+        font-size: 2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+    }
+    .text {
+        font-size: 1rem;
+    }
+}
+.mind {
+    .m-title {
+        margin-bottom: 30px;
+        font-size: 2.2rem;
+        text-align: center;
+        color: #333;
+    }
+    .list {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    li {
+        display: inline-flex;
+        align-items: center;
+        width: calc((100% - 22px) / 2);
+        margin: 0 22px 22px 0;
+        background-color: #fff;
+        &:nth-child(even) {
+            margin-right: 0;
+        }
+        .pic {
+            width: 250px;
+            height: 230px;
+        }
+        .texts {
+            width: calc(100% - 250px);
+            padding: 0 20px;
+        }
+        h6 {
+            margin-bottom: 1rem;
+            font-size: 1.3rem;
+            color: #272727;
+            @include ellipsis();
+        }
+        .text {
+            font-size: 1rem;
+            color: #666;
+            line-height: 1.5;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .inner {
+        width: 98%;
+    }
+    .item {
+        img {
+            margin-left: 30px;
+        }
+        .rightText {
+            right: 12px !important;
+        }
+        .texts {
+            width: 85%;
+            box-sizing: border-box;
+            left: 12px;
+        }
+    }
+}
+@media (max-width: 980px) {
+    .mind {
+        .list {
+            flex-direction: column;
+        }
+        li {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 480px) {
+    .mind {
+        li {
+            .pic {
+                width: 150px;
+                height: 130px;
+            }
+            .texts {
+                width: calc(100% - 150px);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
new file mode 100644
index 0000000..b8d914c
--- /dev/null
+++ b/src/pages/news/index.vue
@@ -0,0 +1,1769 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="newsTab">
+      <ul class="scollBox wow fadeInLeft"
+          ref="newsTab">
+        <template v-for="(item, i) in modules[1].list">
+          <li v-if="item.columnName"
+              :class="{active: i == curColumn}"
+              :key="i"
+              @click="tabChange($event,i)">{{ item.columnName }}</li>
+        </template>
+      </ul>
+    </div>
+
+    <div class="block">
+      <div class="inner"
+           v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
+        <div class="news-banner wow fadeInDown"
+             data-wow-delay="0.5s"
+             @click="toArtice(curArticle, modules[1].list[curColumn])">
+          <img width="50%"
+               height="410"
+               class="titileImg"
+               :src="curArticle.titleImg"
+               alt=""
+               onerror="javascript:this.src='./images/3.png';">
+          <div class="right">
+            <h6>{{ curArticle.title }}</h6>
+            <div class="des"
+                 v-html="curArticle.mainBody"></div>
+            <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
+            <ul class="inds">
+              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
+                  :key="i"
+                  :class="{active: curInd == i - 1}"
+                  @click.stop="switchCarousel(i - 1)"></li>
+            </ul>
+          </div>
+        </div>
+
+        <ul class="card">
+          <template v-for="(item, i) in modules[1].list[curColumn].articles">
+            <li v-if="i > 2"
+                :key="i"
+                class="wow fadeInDown"
+                :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+              <img class="pic"
+                   :src="item.titleImg"
+                   alt="">
+              <div class="texts">
+                <p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
+                <div class="des">{{ item.title }}</div>
+                <img class="arrow"
+                     src="@/assets/images/arrow.png"
+                     alt=""
+                     @click="toArtice(item, modules[1].list[curColumn])">
+              </div>
+            </li>
+          </template>
+        </ul>
+        <div class="more wow fadeInDown"
+             data-wow-delay="0.5s"
+             @click="toMore">More news ></div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner lg">
+        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <div class="shop-shows"
+             v-if="articles.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles[0], modules[3].form)">
+            <img class="pic"
+                 width="100%"
+                 height="400"
+                 :src="articles[0].titleImg"
+                 alt=""
+                 onerror="javascript:this.src='./images/2.png';">
+            <div class="texts">
+              <h6>{{ articles[0].title }}</h6>
+              <div class="des"
+                   v-html="articles[0].mainBody"></div>
+            </div>
+          </div>
+          <div v-if="articles.length > 1"
+               class="right wow fadeInRight"
+               data-wow-delay="0.5s">
+            <ul class="show-card">
+              <li v-if="articles[1]"
+                  @click="toArtice(articles[1], modules[3].form)">
+                <img class="pic"
+                     :src="articles[1].titleImg"
+                     alt="">
+                <div class="text">{{ articles[1].title }}</div>
+              </li>
+              <li v-if="articles[2]"
+                  @click="toArtice(articles[2], modules[3].form)">
+                <img class="pic"
+                     :src="articles[2].titleImg"
+                     alt="">
+                <div class="text">{{ articles[2].title }}</div>
+              </li>
+            </ul>
+            <ul class="card-list">
+              <template v-for="(item, i) in articles">
+                <li v-if="i > 2"
+                    :key="i">
+                  <img class="pic"
+                       :src="item.titleImg"
+                       alt="">
+                  <div class="texts">
+                    <h6>{{ item.title }}</h6>
+                    <div class="des"
+                         v-html="item.mainBody"></div>
+                  </div>
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt=""
+                       @click="toArtice(item, modules[3].form)">
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+        <div class="all-link m-t-10"
+             @click="toAll(modules[3].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="block conference">
+      <div class="inner lg">
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <div class="shows"
+             v-if="articles1.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles1[0], modules[5].form)">
+            <img class="pic"
+                 width="100%"
+                 height="558"
+                 :src="articles1[0].titleImg"
+                 alt=""
+                 onerror="javascript:this.src='./images/1.png';">
+            <div class="texts">
+              <div class="meta">
+                <p class="date">09</p>
+                <p class="year">2022-03</p>
+              </div>
+              <div>
+                <h6>{{ articles1[0].title }}</h6>
+                <div class="des"
+                     v-html="articles1[0].mainBody"></div>
+              </div>
+            </div>
+          </div>
+          <ul class="card-list wow fadeInRight"
+              data-wow-delay="0.5s">
+            <template v-for="(item, i) in articles1">
+              <li v-if="i"
+                  :key="i"
+                  @click="toArtice(item, modules[5].form)">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <p v-if="item.keynoteSpeaker"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/mine.png"
+                         alt="">
+                    {{ item.keynoteSpeaker }}
+                  </p>
+                  <p v-if="item.activityStartTime"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/time.png"
+                         alt="">
+                    Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                  </p>
+                  <p v-if="item.onlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/online.png"
+                         alt="">
+                    Onlone: {{ item.onlineLocation }}
+                  </p>
+                  <p v-if="item.offlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/location.png"
+                         alt="">
+                    Address: {{ item.offlineLocation }}
+                  </p>
+                </div>
+              </li>
+            </template>
+          </ul>
+        </div>
+        <div class="all-link m-t-10"
+             @click="toAll(modules[5].form)">
+          <span style="color: #fff">{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      curColumn: 0,
+      articles: [],
+      articles1: [],
+      curInd: 0,
+      curArticle: {},
+      timer: null
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
+
+          // 获取文章列表
+          const { list } = json[1]
+          if (list.length) {
+            list.map((e, i) => {
+              if (e.site && e.column.length) {
+                const id = e.column[e.column.length - 1]
+                e.id = id
+                if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
+                this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => {
+                  const list = Util.removeTag(data.slice(0, e.articleNum || 6))
+                  this.$set(e, 'articles', list)
+                  if (list.length && !i) this.curArticle = list[0]
+                }).catch(err => { })
+              } else {
+                this.$set(e, 'articles', [])
+              }
+            })
+          }
+
+          if (json[3].form.column.length) {
+            const { column, site, articleNum } = json[3].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+            }).catch(err => { })
+          }
+          if (json[5].form.column.length) {
+            const { column, site, articleNum } = json[5].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles1 = Util.removeTag(data.slice(0, articleNum || 5))
+            }).catch(err => { })
+          }
+
+          this.modules = json
+          console.log(this.modules)
+          this.carouselInterval()
+        }
+      }).catch(err => { })
+    },
+    // 自动轮播
+    carouselInterval () {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.curInd++
+        if (this.curInd > 2) this.curInd = 0
+        this.curArticle = this.modules[1].list[this.curColumn].articles[this.curInd] || {}
+      }, 5000)
+    },
+    // 手动轮播切换
+    switchCarousel (i) {
+      if (this.curInd !== i) {
+        this.curInd = i
+        this.curArticle = this.modules[1].list[this.curColumn].articles[i] || {}
+      }
+    },
+    // tab回调
+    tabChange (e, i) {
+      const newsTab = this.$refs.newsTab
+      newsTab.scrollLeft = e.target.offsetLeft
+      // e.target.offsetLeft
+      const { column } = this.modules[1].list[i]
+      if (column && column.length) {
+        const id = column[column.length - 1]
+        // 查询栏目详情
+        this.$post(`${this.api.findColumn}?id=${id}`).then(({ data }) => {
+          const { typeId } = data
+          // 跳转链接
+          if (typeId === 2) {
+            let href = data.linkAddress
+            const cType = data.connectionType
+            if (cType !== 2) { // 非站外链接
+              const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+              // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+              const site = cType === 1 ?
+                (this.site) :
+                data.siteSelection
+              if (ids[1]) { // 文章
+                href = '/article?id=' + ids[1]
+              } else { // 栏目
+                const columnIds = ids[0].split(',')
+                href = '/column?id=' + columnIds[columnIds.length - 1]
+              }
+              href = this.$router.resolve(href + '&siteId=' + site).href
+            }
+            // 是否新窗口打开
+            if (data.isOpen) {
+              var userAgent = navigator.userAgent;
+              var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
+              if (isSafari) {
+                window.location.href = href
+              } else {
+                window.open(href)
+              }
+            } else {
+              location.href = href
+            }
+          } else if (typeId === 3) {
+            // 长页栏目直接获取path
+            this.$router.push(`/${data.path}?id=${id}`).catch(err => { })
+          } else {
+            this.curInd = 0
+            this.curColumn = i
+            this.curArticle = this.modules[1].list[i].articles[0] || {}
+            this.carouselInterval()
+          }
+        }).catch(err => { })
+      } else {
+        this.curColumn = i
+      }
+    },
+    // 跳转more
+    toMore () {
+      const { column } = this.modules[1].list[this.curColumn]
+      column.length && this.$router.push(`/column?id=${column[column.length - 1]}`)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 24rem;
+        .el-carousel__container {
+            height: 24rem;
+        }
+        img {
+            height: 24rem;
+        }
+    }
+}
+.banner-item {
+    .banner-name {
+        font-size: 2.16rem;
+    }
+}
+.block {
+    padding: 3.85rem 0;
+}
+.newsTab {
+    box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
+    .scollBox {
+        width: 85.714rem;
+        margin: auto;
+        display: flex;
+        justify-content: center;
+    }
+    li {
+        flex: 1;
+        text-align: center;
+        padding: 1.25rem 0.95rem;
+        margin: 0 10px;
+        font-size: 1.1rem;
+        color: #333;
+        border-bottom: 4px solid transparent;
+        text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
+        cursor: pointer;
+        &.active {
+            color: #1583ff;
+            border-bottom-color: #1583ff;
+        }
+    }
+}
+.lg {
+    width: 85.714rem;
+}
+/deep/.articles {
+    width: 50%;
+    .el-carousel__indicators--horizontal {
+        bottom: 1.25rem;
+        left: 50.25rem;
+    }
+}
+.lg {
+    .intro {
+        margin-bottom: 4.57rem;
+    }
+}
+.news-banner {
+    display: flex;
+    cursor: pointer;
+    .titileImg {
+        height: auto;
+    }
+    .pic {
+        width: 43.75rem;
+        height: 23.75rem;
+    }
+    .right {
+        position: relative;
+        width: 50%;
+        padding: 2.5rem 2.5rem 1.5rem;
+        background: #1583ff;
+        color: #fff;
+        &:hover {
+            background: #465f85;
+            h6,
+            .des,
+            .meta {
+                color: #fff;
+                transform: translateY(15px);
+            }
+        }
+    }
+    .inds {
+        position: absolute;
+        bottom: 2.5rem;
+        left: 3.75rem;
+        display: flex;
+        li {
+            width: 0.625rem;
+            height: 0.625rem;
+            margin-right: 0.75rem;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: 0.2s;
+            &.active {
+                width: 1.875rem;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 5px;
+            }
+        }
+    }
+    h6 {
+        font-size: 1.2rem;
+        transition: 0.3s;
+    }
+    .des {
+        margin: 1.5rem 0;
+        font-size: 0.88rem;
+        line-height: 1.3714rem;
+        transition: 0.3s;
+    }
+    .meta {
+        font-size: 0.88rem;
+        transition: 0.3s;
+    }
+}
+.card {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+    width: 100%;
+
+    li {
+        flex: 1;
+        margin-right: 0.88rem;
+        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+        border-radius: 6px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .pic {
+        width: 100%;
+        height: auto;
+    }
+    .texts {
+        padding: 2rem 1.5rem;
+    }
+    .meta {
+        font-size: 0.88rem;
+        color: #666;
+    }
+    .des {
+        height: 3.75rem;
+        margin: 10px 0;
+        font-size: 1.25rem;
+        font-family: SFProDisplay;
+        font-weight: 500;
+        color: #333;
+        line-height: 1.7rem;
+        -webkit-line-clamp: 2;
+    }
+    .arrow {
+        width: 2.25rem;
+    }
+}
+.more {
+    width: 23.375rem;
+    margin: 3.625rem auto 0;
+    line-height: 64px;
+    font-size: 1.875rem;
+    text-align: center;
+    color: #1583ff;
+    border-radius: 35px;
+    border: 2px solid #2b6cef;
+    cursor: pointer;
+}
+.shop-shows {
+    display: flex;
+    .left {
+        width: 41.25rem;
+        margin-right: 1.25rem;
+        background-color: #fff;
+        cursor: pointer;
+        overflow: hidden;
+        .pic {
+            transition: 0.3s;
+            height: auto;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        .texts {
+            padding: 2rem 1.5rem;
+        }
+        h6 {
+            font-size: 1.2rem;
+            color: #272727;
+        }
+        .des {
+            margin-top: 10px;
+            font-size: 0.88rem;
+            color: #666;
+            line-height: 1.714rem;
+        }
+    }
+    .right {
+        width: 60%;
+        overflow: hidden;
+    }
+    .show-card {
+        display: flex;
+        margin-bottom: 1.25rem;
+        li {
+            position: relative;
+            height: auto;
+            overflow: hidden;
+            cursor: pointer;
+
+            &:first-child {
+                margin-right: 1.375rem;
+            }
+        }
+        .pic {
+            width: 25rem;
+            height: 12.3125rem;
+            transition: 0.3s;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            font-size: 0.88rem;
+            color: #fff;
+            padding: 0 1rem;
+            line-height: 48px;
+            text-align: center;
+            @include ellipsis;
+            background: rgba(0, 0, 0, 0.49);
+            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+        }
+    }
+    .card-list {
+        padding: 1.5rem 1.3rem;
+        background-color: #fff;
+        li {
+            display: inline-flex;
+            align-items: center;
+            margin-bottom: 0.9rem;
+            transition: 0.3s;
+            &:hover {
+                transform: scale(1.05);
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+        .pic {
+            width: 8.25rem;
+            height: auto;
+            margin-right: 1.75rem;
+        }
+        .texts {
+            width: 24.5rem;
+            margin-right: 3.75rem;
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 1rem;
+            color: #272727;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .des {
+            font-size: 0.7rem;
+            color: #666;
+            line-height: 1.3714rem;
+            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+            -webkit-line-clamp: 2;
+        }
+        .arrow {
+            width: 2.25rem;
+        }
+    }
+}
+.conference {
+    background: #072947;
+    .b-title,
+    .intro {
+        color: #fff;
+    }
+    .shows {
+        display: flex;
+    }
+    .left {
+        width: 44.875rem;
+        margin-right: 20px;
+        overflow: hidden;
+        cursor: pointer;
+        .pic {
+            transition: 0.3s;
+            height: auto;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        .texts {
+            display: flex;
+            padding: 3.78rem 1.5rem;
+            background-color: #fff;
+        }
+        .meta {
+            padding: 0.5714rem 1.314rem 0.5714rem 0;
+            margin-right: 1.828rem;
+            text-align: center;
+            border-right: 1px solid #ddd;
+        }
+        .date {
+            font-size: 2.5714rem;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            color: #1f1f1f;
+            line-height: 2.9714rem;
+        }
+        .year {
+            font-size: 0.9142rem;
+            white-space: nowrap;
+            color: #666;
+        }
+        h6 {
+            font-size: 1.1428rem;
+            color: #272727;
+        }
+        .des {
+            margin-top: 10px;
+            font-size: 0.8rem;
+            color: #666;
+            line-height: 1.3714rem;
+        }
+    }
+    .card-list {
+        width: 50%;
+        li {
+            display: flex;
+            padding: 0.8571rem;
+            margin-bottom: 0.7428rem;
+            background-color: #fff;
+            cursor: pointer;
+            align-items: center;
+            transition: 0.3s;
+            height: 9rem;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &:hover {
+                transform: translateX(20px);
+            }
+        }
+        .pic {
+            width: 10.7428rem;
+            height: auto;
+            margin-right: 1.6rem;
+        }
+        h6 {
+            margin-bottom: 0.2714rem;
+            font-size: 1.1428rem;
+            color: #333;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .text {
+            display: flex;
+            align-items: center;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+        .icon {
+            margin-right: 5px;
+        }
+    }
+}
+
+@media (max-width: 1200px) {
+    .newsTab {
+        overflow-x: scroll;
+        display: -webkit-box;
+    }
+    .block {
+        padding: 50px 0;
+        .inner {
+            .more {
+                width: 100%;
+                margin: 20px auto 0;
+            }
+            .news-banner {
+                flex-direction: column;
+                img {
+                    width: 100%;
+                }
+                .right {
+                    margin-top: 10px;
+                    width: 100%;
+                    .inds {
+                        left: 50%;
+                        margin-left: -43px;
+                    }
+                }
+            }
+            .card {
+                flex-direction: column;
+                .wow {
+                    width: 95%;
+                    margin: 20px auto;
+                }
+            }
+            .b-title {
+                font-size: 20px;
+            }
+            .intro {
+                font-size: 15px;
+                margin-bottom: 50px;
+            }
+            .shop-shows {
+                flex-direction: column;
+                .left {
+                    width: 95%;
+                    margin: 0 auto;
+                }
+                .right {
+                    width: 93%;
+                    margin: 20px auto;
+                    .show-card {
+                        flex-direction: column;
+                        li {
+                            width: 100%;
+                            .pic {
+                                width: 100%;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .texts {
+                                margin-right: 30px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+            .el-carousel__container {
+                height: 15rem;
+            }
+            img {
+                height: 15rem;
+            }
+        }
+    }
+    .banner-item .banner-name {
+        font-size: 1.5rem;
+    }
+    .newsTab {
+        li {
+            padding: 15px 10px;
+            font-size: 15px;
+            margin: 0;
+        }
+    }
+    .block {
+        padding: 20px 0;
+        .inner {
+            width: 90%;
+            .news-banner {
+                img {
+                    height: 20rem;
+                }
+            }
+            .b-title {
+                margin-bottom: 20px;
+            }
+            .intro {
+                margin-bottom: 20px;
+            }
+            .shop-shows {
+                .left {
+                    img {
+                        height: 20rem;
+                    }
+                }
+            }
+            .show-card {
+                .text {
+                    font-size: 13px;
+                    line-height: 20px;
+                    white-space: inherit;
+                }
+            }
+            .card-list {
+                padding: 20px 10px;
+                li {
+                    width: 100%;
+                    img {
+                        margin-right: 10px;
+                    }
+                    .texts {
+                        margin-right: 10px;
+                        h6 {
+                            font-size: 15px;
+                            font-weight: bold;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            -webkit-line-clamp: 3;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                            margin-bottom: 5px;
+                        }
+                    }
+                    .des {
+                        line-height: 15px;
+                    }
+                    .arrow {
+                        margin-right: 0;
+                    }
+                }
+            }
+            .shows {
+                flex-direction: column;
+                .left {
+                    width: 100%;
+                    .pic {
+                        height: 20rem;
+                    }
+                }
+                .card-list {
+                    width: 100%;
+                    padding: 20px 0;
+                    li {
+                        .pic {
+                            width: 100px;
+                            height: 7.5rem;
+                        }
+                        .texts {
+                            h6 {
+                                font-size: 15px;
+                                font-weight: bold;
+                                display: -webkit-box;
+                                -webkit-box-orient: vertical;
+                                -webkit-line-clamp: 1;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                            }
+                            .text {
+                                margin: 2px 0;
+                                font-size: 12px;
+                                display: -webkit-box;
+                                -webkit-box-orient: vertical;
+                                -webkit-line-clamp: 1;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 6rem;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 6rem;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                flex-direction: row;
+                img {
+                    width: 50%;
+                    height: auto;
+                }
+                .right {
+                    margin-top: 0;
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 30% !important;
+                    margin-right: 0.5rem;
+                    margin: 0 0.5rem 0 0 !important;
+                    .pic {
+                        height: auto;
+                    }
+                    &:last-child() {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    margin-right: 0.5rem;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    margin-top: 0;
+                    .show-card {
+                        li {
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                            &:nth-child(2) {
+                                margin-top: 0.5rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .card-list {
+                    padding: 0;
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                flex-direction: row;
+                img {
+                    width: 50%;
+                    height: auto;
+                }
+                .right {
+                    margin-top: 0;
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 30% !important;
+                    margin-right: 0.5rem;
+                    margin: 0 0.5rem 0 0 !important;
+                    .pic {
+                        height: auto;
+                    }
+                    &:last-child() {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    margin-right: 0.5rem;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    margin-top: 0;
+                    .show-card {
+                        li {
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                            &:nth-child(2) {
+                                margin-top: 0.5rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .card-list {
+                    padding: 0;
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 21.6rem;
+        }
+        /deep/ .el-carousel__container {
+            height: 21.6rem;
+        }
+        /deep/ .el-carousel__item {
+            height: 21.6rem;
+        }
+    }
+    .banner-item {
+        img {
+            height: 21.6rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
+            li {
+                padding: 1rem;
+                white-space: nowrap;
+            }
+        }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                flex-direction: row;
+                img {
+                    width: 50%;
+                    height: auto;
+                }
+                .right {
+                    margin-top: 0;
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 30% !important;
+                    margin-right: 0.5rem;
+                    margin: 0 0.5rem 0 0 !important;
+                    .pic {
+                        height: auto;
+                    }
+                    &:last-child() {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    margin-right: 0.5rem;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    margin-top: 0;
+                    .show-card {
+                        flex-direction: row;
+                        li {
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                            &:nth-child(2) {
+                                margin-top: 0;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .card-list {
+                    padding: 0;
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue
new file mode 100644
index 0000000..ddba4fa
--- /dev/null
+++ b/src/pages/newsPress/index.vue
@@ -0,0 +1,630 @@
+<template>
+  <div class="wrap">
+    <el-carousel  :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="inner">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <ul class="list">
+        <template v-for="(item, i) in modules[1].list">
+          <li v-if="item.isEnable" :key="i">
+            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
+            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted() {
+    new WOW().init()
+    this.getColumn()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+    // 获取父级所有栏目名称和id
+    getParent(data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn() {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.wrap{
+  /deep/ .el-carousel {
+    height: 24rem;
+    .el-carousel__container{
+      height: 24rem;
+    }
+    img{
+      height: 24rem;
+    }
+  }
+}
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
+.inner {
+  /deep/ .el-breadcrumb__item {
+    font-size: 1.5rem;
+  }
+  padding-top: 35px;
+}
+.list {
+  margin: 2rem 0;
+  li {
+    position: relative;
+    &:nth-child(even) {
+      text-align: right;
+      .texts {
+        left: 0;
+        padding: 3rem 6rem 1.5rem 1.5rem;
+        text-align: left;
+      }
+    }
+  }
+  .pic {
+    width: 47%;
+    height: auto;
+  }
+  .texts {
+    position: absolute;
+    top: 6rem;
+    right: -2rem;
+    width: 61%;
+    // height: 440px;
+    padding: 3rem 1.5rem 1.5rem 5rem;
+    background: rgba(247, 247, 247, .72);
+  }
+  h6 {
+    font-size: 2rem;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    color: #3C3C3C;
+  }
+  .sub {
+    margin: 1rem 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    color: #3C3C3C;
+    line-height: 1.6rem;
+  }
+  img {
+    width: 3.3rem;
+    height: 3.3rem;
+  }
+}
+@media (max-width: 1520px) {
+  .list {
+    li {
+      &:nth-child(even) {
+        .texts {
+          left: 25px;
+        }
+      }
+    }
+    .texts {
+      right: 25px;
+      width: 55%;
+    }
+  }
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+  .wrap{
+  /deep/ .el-carousel {
+    height: 18rem;
+    .el-carousel__container{
+      height: 18rem;
+    }
+    img{
+      height: 18rem;
+    }
+  }
+}
+.banner-item .banner-name[data-v-1525064c] {
+  font-size: 1.5rem;
+}
+  
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 25rem !important;
+        }
+        .texts {
+          padding: 10px 5px 10px  !important;
+          top: 30px;
+          height: auto;
+          h6{
+            font-size: 1.5rem !important;
+          }
+          p {
+            font-size: 1rem;
+            margin: 5px 0 !important;
+            line-height: 1.5rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 500px;
+        }
+        .texts {
+          padding: 20px 10px 10px ;
+          top: 30px;
+          h6{
+            font-size: 2rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          height: auto !important;
+        }
+        .texts  {
+          top: 1rem;
+          h6 {
+            font-size: 1rem !important;
+          }
+          .sub{
+             font-size: .85rem;
+          }
+          .des {
+            font-size: .85rem;
+            line-height: .85rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          height: auto !important;
+        }
+        .texts  {
+          top: 4rem;
+          h6 {
+            font-size: 1.5rem !important;
+          }
+          .sub{
+             font-size: 1.2rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          height: auto !important;
+        }
+        .texts  {
+          top: 4rem;
+          h6 {
+            font-size: 1.5rem !important;
+          }
+          .sub{
+             font-size: 1.2rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 2rem;
+          h6 {
+            font-size: 1.5rem !important;
+          }
+          .sub{
+             font-size: 1.2rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 4rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 6rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px)  {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 8rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/newsProcurement/index.vue b/src/pages/newsProcurement/index.vue
new file mode 100644
index 0000000..848cc90
--- /dev/null
+++ b/src/pages/newsProcurement/index.vue
@@ -0,0 +1,631 @@
+<template>
+  <div class="wrap">
+    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="inner">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <ul class="list">
+        <template v-for="(item, i) in modules[1].list">
+          <li v-if="item.isEnable" :key="i">
+            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
+            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted() {
+    new WOW().init()
+    this.getColumn()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+    // 获取父级所有栏目名称和id
+    getParent(data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn() {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.wrap{
+  /deep/ .el-carousel {
+    height: 24rem;
+    .el-carousel__container{
+      height: 24rem;
+    }
+    img{
+      height: 24rem;
+    }
+  }
+}
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
+.inner {
+  padding-top: 35px;
+  /deep/ .el-breadcrumb__item {
+    font-size: 1.5rem;
+  }
+}
+.list {
+  margin: 2rem 0;
+  li {
+    position: relative;
+    &:nth-child(even) {
+      text-align: right;
+      .texts {
+        left: 0;
+        padding: 3rem 6rem 1.5rem 1.5rem;
+        text-align: left;
+      }
+    }
+  }
+  .pic {
+    width: 47%;
+    height: auto;
+  }
+  .texts {
+    position: absolute;
+    top: 6rem;
+    right: -2rem;
+    width: 61%;
+    // height: 440px;
+    padding: 3rem 1.5rem 1.5rem 5rem;
+    background: rgba(247, 247, 247, .72);
+  }
+  h6 {
+    font-size: 2rem;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    color: #3C3C3C;
+  }
+  .sub {
+    margin: 1rem 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    color: #1C1C1C;
+    line-height: 33px;
+  }
+  .des {
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    color: #3C3C3C;
+    line-height: 1.6rem;
+  }
+  img {
+    width: 3.3rem;
+    height: 3.3rem;
+  }
+}
+@media (max-width: 1520px) {
+  .list {
+    li {
+      &:nth-child(even) {
+        .texts {
+          left: 25px;
+        }
+      }
+    }
+    .texts {
+      right: 25px;
+      width: 55%;
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+  .wrap{
+  /deep/ .el-carousel {
+    height: 18rem;
+    .el-carousel__container{
+      height: 18rem;
+    }
+    img{
+      height: 18rem;
+    }
+  }
+}
+.banner-item .banner-name[data-v-1525064c] {
+  font-size: 1.5rem;
+}
+  
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 25rem !important;
+        }
+        .texts {
+          padding: 10px 5px 10px  !important;
+          top: 30px;
+          height: auto;
+          h6{
+            font-size: 1.5rem !important;
+          }
+          p {
+            font-size: 1rem;
+            margin: 5px 0 !important;
+            line-height: 1.5rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 500px;
+        }
+        .texts {
+          padding: 20px 10px 10px ;
+          top: 30px;
+          h6{
+            font-size: 2rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          height: auto !important;
+        }
+        .texts  {
+          top: 1rem;
+          h6 {
+            font-size: 1rem !important;
+          }
+          .sub{
+             font-size: .85rem;
+          }
+          .des {
+            font-size: .85rem;
+            line-height: .85rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          height: auto !important;
+        }
+        .texts  {
+          top: 4rem;
+          h6 {
+            font-size: 1.5rem !important;
+          }
+          .sub{
+             font-size: 1.2rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          height: auto !important;
+        }
+        .texts  {
+          top: 4rem;
+          h6 {
+            font-size: 1.5rem !important;
+          }
+          .sub{
+             font-size: 1.2rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    /deep/ .el-breadcrumb__item {
+      font-size: 1rem;
+    }
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 2rem;
+          h6 {
+            font-size: 1.5rem !important;
+          }
+          .sub{
+             font-size: 1.2rem;
+          }
+          .des {
+            font-size: 1rem;
+            line-height: 1rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 4rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 6rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px)  {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important;
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .inner {
+    .list {
+      li {
+        .pic {
+          width: 47%;
+          height: auto !important;
+        }
+        .texts  {
+          top: 8rem;
+          h6 {
+            font-size: 2rem !important;
+          }
+          .sub{
+             font-size: 1.5rem;
+          }
+          .des {
+            font-size: 1.3rem;
+            line-height: 1.3rem;
+          }
+          img {
+            width: 2rem;height: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/org/index.vue b/src/pages/org/index.vue
new file mode 100644
index 0000000..da7dfb4
--- /dev/null
+++ b/src/pages/org/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="wrap p-b-30">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="org">
+      <div class="left">
+        <h6>{{ modules[1].form.title }}</h6>
+        <p class="text"
+           v-html="modules[1].form.des"></p>
+      </div>
+      <img class="pic"
+           src="http://10.10.11.7/images/overviewSetup/1.png"
+           alt="">
+    </div>
+    <div class="lg-bg">
+      <img width="100%"
+           :src="modules[2].form.pic"
+           alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.org {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1294px;
+    padding: 9px 86px 29px 116px;
+    margin: 0 auto 50px;
+    background: #fcfcfc;
+    border-radius: 160px;
+    .left {
+        width: 705px;
+    }
+    h6 {
+        font-size: 1.4rem;
+        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+        font-weight: bold;
+        color: #333;
+    }
+    .text {
+        margin-top: 10px;
+        font-size: 1rem;
+        color: #020202;
+        line-height: 2rem;
+    }
+    .pic {
+        width: 320px;
+        height: 282px;
+    }
+}
+.lg-bg {
+    width: 65%;
+    margin: 0 auto;
+}
+@media (max-width: 1300px) {
+    .org {
+        width: 100%;
+        padding: 15px;
+        .left {
+            width: 60%;
+        }
+        .pic {
+            width: 30%;
+            height: auto;
+        }
+    }
+    .lg-bg {
+        width: 85%;
+    }
+}
+@media (max-width: 980px) {
+    .org {
+        flex-direction: column;
+        .pic {
+            width: 100%;
+        }
+        .left {
+            width: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
new file mode 100644
index 0000000..5c35fe9
--- /dev/null
+++ b/src/pages/overview/index.vue
@@ -0,0 +1,536 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block history gray">
+      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
+           @click="openLink(modules[1].form)">
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
+          <div class="left">
+            <h2 v-html="modules[1].form.title"></h2>
+            <div class="line"></div>
+            <div class="des"
+                 v-html="modules[1].form.des"></div>
+          </div>
+          <img class="bg"
+               width="562"
+               height="418"
+               :src="modules[1].form.pic"
+               alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <div :class="['core', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
+             @click="openLink(modules[2].form)">
+          <img :src="modules[2].form.pic"
+               alt=""
+               class="pic">
+          <div class="texts">
+            <h6>{{ modules[2].form.title }}</h6>
+            <div class="line"></div>
+            <div class="text"
+                 v-html="modules[2].form.des"></div>
+          </div>
+        </div>
+        <div :class="['core', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
+             @click="openLink(modules[3].form)">
+          <img :src="modules[3].form.pic"
+               alt=""
+               class="pic">
+          <div class="texts">
+            <h6>{{ modules[3].form.title }}</h6>
+            <div class="line"></div>
+            <div class="text"
+                 v-html="modules[3].form.des"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block gray fac">
+      <div class="inner">
+        <div class="event">
+          <img src="http://10.10.11.7/images/overview/16.png"
+               alt=""
+               class="pic">
+          <div class="texts">
+            <h6 v-html="modules[4].form.title"></h6>
+            <p class="en">{{ modules[4].form.subTitle }}</p>
+            <div class="text"
+                 v-html="modules[4].form.des"></div>
+            <img v-if="isLink(modules[4].form.link.linkName)"
+                 class="arrow"
+                 src="@/assets/images/arrow.png"
+                 alt=""
+                 @click="openLink(modules[4].form)">
+          </div>
+        </div>
+        <ul class="l-card">
+          <li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
+              @click="openLink(modules[5].form)">
+            <img :src="modules[5].form.pic"
+                 alt=""
+                 class="pic" />
+            <div class="texts">
+              <h6>{{ modules[5].form.title }}</h6>
+              <div class="text"
+                   v-html="modules[5].form.des"></div>
+            </div>
+          </li>
+          <li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}"
+              @click="openLink(modules[6].form)">
+            <img :src="modules[6].form.pic"
+                 alt=""
+                 class="pic" />
+            <div class="texts">
+              <h6>{{ modules[6].form.title }}</h6>
+              <div class="text"
+                   v-html="modules[6].form.des"></div>
+            </div>
+          </li>
+          <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}"
+              @click="openLink(modules[7].form)">
+            <img :src="modules[7].form.pic"
+                 alt=""
+                 class="pic" />
+            <div class="texts">
+              <h6>{{ modules[7].form.title }}</h6>
+              <div class="text"
+                   v-html="modules[7].form.des"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block scan gray">
+      <h2 class="b-title wow fadeInUp"
+          v-html="modules[8].form.title"></h2>
+      <p class="intro wow fadeInUp"
+         data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
+      <div class="scan-inner">
+        <div class="left">
+          <template v-for="(item, i) in modules[9].list">
+            <div v-if="item.isEnable"
+                 class="line"
+                 :key="i">
+              <img v-if="item.pic"
+                   :src="item.pic"
+                   alt=""
+                   class="icon">
+              <p class="text">{{ item.title }}</p>
+            </div>
+          </template>
+          <ul class="total">
+            <li>
+              <p class="num">{{ modules[10].form.title }}</p>
+              <p class="text">{{ modules[10].form.des }}</p>
+            </li>
+            <li>
+              <p class="num">{{ modules[11].form.title }}</p>
+              <p class="text">{{ modules[11].form.des }}</p>
+            </li>
+            <li>
+              <p class="num">{{ modules[12].form.title }}</p>
+              <p class="text">{{ modules[12].form.des }}</p>
+            </li>
+          </ul>
+        </div>
+        <img :src="modules[13].form.pic"
+             alt=""
+             class="pic" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    };
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.history {
+    h2 {
+        font-size: 1rem;
+        color: #333;
+    }
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 5.125rem 3.5625rem 1.875rem;
+        margin-top: 20px;
+        background-color: #fff;
+        border-radius: 6.25rem 0px 0px 0px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+    .left {
+        width: 43.4375rem;
+    }
+    .line {
+        width: 53px;
+        height: 3px;
+        margin: 18px 0;
+        background: #0280f1;
+    }
+    .des {
+        font-size: 0.9rem;
+        color: #181818;
+        line-height: 31px;
+        -webkit-line-clamp: 6;
+    }
+    .bg {
+        margin: -115px -80px 0 30px;
+        border-top-right-radius: 40px;
+    }
+}
+.core {
+    position: relative;
+    margin-bottom: 40px;
+    &:last-child {
+        .texts {
+            left: 40px;
+            right: auto;
+        }
+    }
+    .pic {
+        width: 100%;
+    }
+    .texts {
+        position: absolute;
+        top: 80px;
+        right: 40px;
+        width: 500px;
+        color: #fff;
+    }
+    h6 {
+        font-size: 1.4rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .line {
+        width: 136px;
+        height: 3px;
+        margin: 20px 0;
+        background: #ffffff;
+        opacity: 0.56;
+    }
+    .text {
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+}
+.fac {
+    .event {
+        position: relative;
+        .pic {
+            width: 100%;
+        }
+        .texts {
+            position: absolute;
+            top: 70px;
+            right: 300px;
+            bottom: 70px;
+            left: 60px;
+        }
+        h6 {
+            position: relative;
+            font-size: 2.2rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+        }
+        .en {
+            margin-top: -30px;
+            font-size: 2rem;
+            font-family: AppleSystemUIFont;
+            color: #e4e4e4;
+        }
+        .text {
+            margin: 15px 0;
+            font-size: 1rem;
+            color: #333;
+        }
+    }
+    .l-card {
+        display: flex;
+        margin-top: 20px;
+        li {
+            position: relative;
+            width: calc((100% - 40px) / 3);
+            height: 359px;
+            margin-right: 20px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+        .pic {
+            width: 100%;
+            height: 100%;
+        }
+        .texts {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding: 140px 30px 0;
+            color: #fff;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+        h6 {
+            margin-bottom: 15px;
+            font-size: 1.6rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+        }
+        .text {
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            line-height: 2;
+            @include mul-ellipsis(4);
+        }
+    }
+}
+.scan {
+    .scan-inner {
+        display: flex;
+        justify-content: flex-end;
+        padding-left: 19%;
+    }
+    .left {
+        width: 45%;
+        margin-right: 80px;
+    }
+    .line {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+        .icon {
+            width: 50px;
+            height: 50px;
+            margin-right: 20px;
+        }
+        .text {
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+            line-height: 1.6;
+        }
+    }
+    .total {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 50px;
+        .num {
+            margin-bottom: 10px;
+            font-size: 2rem;
+            font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
+            font-weight: 800;
+            color: #1583ff;
+        }
+        .text {
+            font-size: 1rem;
+            color: #333;
+        }
+    }
+    .pic {
+        width: 50%;
+        // height: 700px;
+    }
+}
+@media (min-width: 2000px) {
+    .scan {
+        .scan-inner {
+            justify-content: flex-start;
+            padding-left: 22%;
+        }
+        .left {
+            width: 37%;
+        }
+        .pic {
+            width: 800px;
+        }
+    }
+}
+@media (min-width: 2400px) {
+    .scan {
+        .scan-inner {
+            padding-left: 24%;
+        }
+    }
+}
+@media (min-width: 2500px) {
+    .scan {
+        .scan-inner {
+            padding-left: 26%;
+        }
+    }
+}
+@media (min-width: 2800px) {
+    .scan {
+        .scan-inner {
+            padding-left: 29%;
+        }
+    }
+}
+@media (min-width: 3500px) {
+    .scan {
+        .scan-inner {
+            padding-left: 35%;
+        }
+        .left {
+            width: 32%;
+        }
+    }
+}
+@media (min-width: 5000px) {
+    .scan {
+        .scan-inner {
+            padding-left: 39.5%;
+        }
+        .left {
+            width: 20%;
+        }
+    }
+}
+@media (min-width: 6000px) {
+    .scan {
+        .scan-inner {
+            padding-left: 42%;
+        }
+    }
+}
+@media (max-width: 1800px) {
+    .scan .scan-inner {
+        padding-left: 14%;
+    }
+}
+@media (max-width: 1500px) {
+    .scan .scan-inner {
+        padding-left: 10%;
+    }
+}
+@media (max-width: 1400px) {
+    .history {
+        .texts {
+            flex-direction: column;
+        }
+        .left {
+            width: 100%;
+        }
+        .bg {
+            width: auto;
+            max-width: 100%;
+            height: auto;
+            margin: 20px 0 0 0;
+        }
+    }
+    .scan {
+        .scan-inner {
+            flex-direction: column;
+            padding: 0 10%;
+        }
+        .left {
+            width: 100%;
+        }
+        .pic {
+            width: 100%;
+            height: auto;
+            margin-top: 2rem;
+        }
+    }
+    .fac {
+        .event {
+            .texts {
+                position: static;
+                margin-top: 20px;
+            }
+        }
+    }
+}
+@media (max-width: 920px) {
+    .core {
+        .texts {
+            top: 20px !important;
+            left: 20px !important;
+            right: 20px !important;
+            width: auto;
+        }
+    }
+    .scan {
+        padding: 20px;
+    }
+    .fac {
+        .l-card {
+            flex-direction: column;
+            li {
+                width: 100%;
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}
+@media (max-width: 750px) {
+    .core {
+        .texts {
+            position: static;
+            padding: 20px;
+            color: #333;
+        }
+        .line {
+            background: #333;
+        }
+    }
+}
+</style>
diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue
new file mode 100644
index 0000000..3bddad6
--- /dev/null
+++ b/src/pages/overviewDevHistory/index.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="block history">
+      <div class="inner">
+        <h2 class="wow fadeInLeft"
+            v-html="modules[1].form.title"></h2>
+        <p class="en">{{ modules[1].form.des }}</p>
+        <div v-if="modules[2].list.length"
+             class="event">
+          <ul class="time">
+            <template v-for="(item, i) in modules[2].list">
+              <li v-if="item.isEnable"
+                  :key="i"
+                  :class="{active: curYear == i}"
+                  @click="yearClick(i)">{{ item.title }}</li>
+            </template>
+          </ul>
+          <div v-if="modules[2].list[curYear]"
+               class="right">
+            <h6 class="year">{{ modules[2].list[curYear].title }}</h6>
+            <ul class="list">
+              <template v-for="(e, j) in modules[2].list[curYear].list">
+                <li v-if="e.isEnable"
+                    :key="j"
+                    :class="{'cursor-pointer': isLink(e.link.linkName)}"
+                    @click="openLink(e)">
+                  <div class="texts">
+                    <p class="date">{{ e.title }}</p>
+                    <p class="text">{{ e.des }}</p>
+                  </div>
+                  <img v-if="e.pic"
+                       :src="e.pic"
+                       alt=""
+                       class="pic">
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+      curYear: 0
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 年份点击回调
+    yearClick (i) {
+      this.curYear = i
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
+        url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
+}
+.single-banner {
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
+    }
+}
+.history {
+    padding: 3.85rem 0;
+    h2 {
+        position: relative;
+        font-size: 1.75rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #1c1c1c;
+    }
+    .en {
+        margin: 0 0 2rem;
+        font-size: 1.75rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+        color: #e3e3e3;
+    }
+}
+.event {
+    display: flex;
+    justify-content: center;
+    .time {
+        width: 12.5rem;
+        padding-right: 0.625rem;
+        margin-right: 1.25rem;
+        flex-shrink: 1;
+        border-right: 1px solid #ddd;
+        li {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-right: 2.25rem;
+            line-height: 3rem;
+            font-size: 1.32rem;
+            font-weight: 600;
+            font-family: SFProDisplay-Semibold, SFProDisplay;
+            color: #666;
+            box-shadow: inset 0px -1px 0px 0px #dddddd;
+            cursor: pointer;
+            &.active {
+                font-weight: 800;
+                color: #1a81f4;
+                background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
+                &:before {
+                    content: '';
+                    width: 18px;
+                    height: 18px;
+                    background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+    .right {
+        // width: 1000px;
+        flex-grow: 1;
+    }
+    .year {
+        margin: 0 0 1rem 1rem;
+        font-size: 2.35rem;
+        font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+        font-weight: 800;
+        color: #1a81f4;
+    }
+    .list {
+        border-top: 1px solid #ddd;
+        li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem;
+            border-bottom: 1px solid #ddd;
+        }
+        .texts {
+            width: 31.25rem;
+        }
+        .date {
+            width: 31.25rem;
+            margin-bottom: 0.75rem;
+            font-size: 1.26rem;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #333;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-break: break-all;
+        }
+        .text {
+            font-size: 1.08rem;
+            color: #333;
+            @include mul-ellipsis(3);
+            &:before {
+                content: '';
+                display: inline-block;
+                width: 7px;
+                height: 7px;
+                margin: 0 10px;
+                background-color: #666;
+                transform: rotate(45deg);
+            }
+        }
+        .pic {
+            width: 17.5rem;
+            height: 9.75rem;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 90%;
+        span {
+            font-size: 1.35rem;
+        }
+    }
+
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            width: 90%;
+            h2 {
+                font-size: 1.5rem;
+            }
+            p {
+                font-size: 1rem;
+                margin: 10px 0 1.25rem;
+            }
+            .event {
+                flex-direction: column;
+                .time {
+                    width: 100%;
+                    li {
+                        width: 100%;
+                        justify-content: flex-start;
+                    }
+                }
+                .right {
+                    margin-top: 1.25rem;
+                    width: 100%;
+                    h6 {
+                        font-size: 2rem;
+                    }
+                    .list {
+                        li {
+                            padding: 1.25rem;
+                            flex-direction: column;
+                            align-items: flex-start;
+                            .texts {
+                                width: 100%;
+                            }
+                            .pic {
+                                width: 100%;
+                                height: auto;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overviewIntro/index.vue b/src/pages/overviewIntro/index.vue
new file mode 100644
index 0000000..8287459
--- /dev/null
+++ b/src/pages/overviewIntro/index.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="wrap"
+       v-if="modules.length>=1">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div class="intro">
+        <img class="pic"
+             src="http://10.10.11.7/images/overviewIntro/1.png"
+             alt="">
+        <div class="right">
+          <div class="relative">
+            <h6 v-html="modules[1].form.title"></h6>
+            <img class="title-bg"
+                 src="http://10.10.11.7/images/overviewIntro/2.png"
+                 alt="">
+          </div>
+          <div class="text"
+               v-html="modules[1].form.des"></div>
+        </div>
+      </div>
+      <div class="intro-bg"
+           v-if="modules[2]">
+        <div class="mask"></div>
+        <div class="texts">
+          <h6>{{ modules[2].form.title }}</h6>
+          <div class="des"
+               v-html="modules[2].form.des"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class="ads">
+      <ul class="list">
+        <li>具有高亮度</li>
+        <li>超短脉冲</li>
+        <li>高相干</li>
+        <li>波长连续可调</li>
+      </ul>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
+}
+.single-banner {
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
+    }
+}
+.tab-content {
+    padding-top: 3.85rem;
+    .intro {
+        display: flex;
+        margin-bottom: 5.5rem;
+        .pic {
+            width: 40%;
+            margin-right: 2.5rem;
+        }
+        .right {
+            width: 40%;
+        }
+        h6 {
+            position: relative;
+            font-size: 1.36rem;
+            color: #333;
+        }
+        .title-bg {
+            position: absolute;
+            top: -2rem;
+            left: -1rem;
+        }
+        .text {
+            margin-top: 2rem;
+            font-size: 0.99rem;
+            color: #020202;
+            line-height: 2;
+        }
+    }
+    .intro-bg {
+        position: relative;
+        height: auto;
+        padding-top: 4.5rem;
+        padding-bottom: 2rem;
+        color: #fff;
+        text-align: center;
+        background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
+        .mask {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            content: '';
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        .texts {
+            position: relative;
+        }
+        h6 {
+            margin-bottom: 1.5rem;
+            font-size: 1.6rem;
+            font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+            font-weight: 800;
+        }
+        .des {
+            font-size: 1.2rem;
+        }
+    }
+}
+.ads {
+    position: fixed;
+    top: 30%;
+    right: 1%;
+    padding: 20px;
+    animation: move 20s linear infinite alternate;
+    li {
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        line-height: 26px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #1583ff;
+        &:before {
+            content: '';
+            width: 4px;
+            height: 4px;
+            margin-right: 8px;
+            border-radius: 50%;
+            background-color: #1583ff;
+        }
+    }
+}
+@keyframes move {
+    0% {
+        top: 30%;
+        right: 1%;
+    }
+    50% {
+        top: 40%;
+        right: 40%;
+    }
+    100% {
+        top: 90%;
+        right: 90%;
+    }
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 90%;
+        margin: auto;
+        padding-top: 1.25rem;
+        .intro {
+            flex-direction: column;
+            .pic {
+                width: 100%;
+            }
+        }
+        .intro-bg {
+            padding-top: 3rem;
+            .texts {
+                h6 {
+                    font-size: 1.6rem;
+                }
+            }
+        }
+        .right {
+            width: 100% !important;
+            margin-top: 1.25rem;
+            .text {
+                margin-top: 1.25rem;
+            }
+        }
+        span {
+            font-size: 1.35rem;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overviewLocation/index.vue b/src/pages/overviewLocation/index.vue
new file mode 100644
index 0000000..6cffa3a
--- /dev/null
+++ b/src/pages/overviewLocation/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div v-html="modules[1].form.des"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
+        url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
+}
+.single-banner {
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
+    }
+}
+.tab-content {
+    width: 50rem;
+    padding: 3.85rem 0;
+    margin: 0 auto;
+    span {
+        font-size: 1.35rem;
+    }
+    /deep/ img {
+        width: 100% !important;
+    }
+}
+.video {
+    width: 100%;
+    margin-bottom: 2.75rem;
+}
+.text {
+    font-size: 0.9rem;
+    color: #020202;
+    line-height: 1.6rem;
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 90%;
+        span {
+            font-size: 1.35rem;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overviewSetup/index.vue b/src/pages/overviewSetup/index.vue
new file mode 100644
index 0000000..ab25c6e
--- /dev/null
+++ b/src/pages/overviewSetup/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div class="org">
+        <div class="left">
+          <h6 v-html="modules[1].form.title"></h6>
+          <p class="text"
+             v-html="modules[1].form.des"></p>
+        </div>
+        <img class="pic"
+             src="http://10.10.11.7/images/overviewSetup/1.png"
+             alt="">
+      </div>
+      <div class="lg-bg">
+        <img width="100%"
+             :src="modules[2].form.pic"
+             alt="">
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.single-banner {
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
+    }
+}
+.tab-content {
+    padding: 77px 0;
+}
+.org {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1294px;
+    padding: 9px 86px 29px 116px;
+    margin: 0 auto 50px;
+    background: #fcfcfc;
+    border-radius: 160px;
+    .left {
+        width: 705px;
+    }
+    h6 {
+        font-size: 1.4rem;
+        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+        font-weight: bold;
+        color: #333;
+    }
+    .text {
+        margin-top: 10px;
+        font-size: 1rem;
+        color: #020202;
+        line-height: 2rem;
+    }
+    .pic {
+        width: 320px;
+        height: 282px;
+    }
+}
+.lg-bg {
+    width: 85%;
+    margin: 0 auto;
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        padding: 20px 0;
+        .org {
+            width: 95%;
+            padding: 15px;
+            flex-direction: column;
+            .pic {
+                width: 100%;
+                height: auto;
+            }
+            .left {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overviewTrailer/index.vue b/src/pages/overviewTrailer/index.vue
new file mode 100644
index 0000000..56d6b66
--- /dev/null
+++ b/src/pages/overviewTrailer/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <video v-if="modules[1].form.video"
+             class="video"
+             ref="video"
+             autoplay
+             controls
+             loop>
+        <source :src="modules[1].form.video"
+                type="video/mp4">
+        您的浏览器不支持 video 标签。
+      </video>
+      <div v-html="modules[1].form.des"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
+        url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
+}
+
+.single-banner {
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
+    }
+}
+.tab-content {
+    width: 50rem;
+    padding: 3.85rem 0;
+    margin: 0 auto;
+    span {
+        font-size: 1.08rem;
+    }
+}
+.video {
+    width: 100%;
+    margin-bottom: 2.75rem;
+}
+.text {
+    font-size: 0.9rem;
+    color: #020202;
+    line-height: 1.6rem;
+}
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 95%;
+        margin: 0 auto;
+        .video {
+            max-height: 18rem;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publication/index.vue b/src/pages/publication/index.vue
new file mode 100644
index 0000000..3fb16df
--- /dev/null
+++ b/src/pages/publication/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="wrap">
+    <div class="banner">
+      <img width="100%"
+           height="280"
+           :src="info.columnBanner"
+           alt="" />
+      <div class="texts">
+        <p class="text">{{ info.columnName }}</p>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: item.listStyleId == active}"
+            :key="i"
+            @click="tabChange(item, i)">{{ item.columnName | i18nName($i18n) }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <!-- 根据栏目的listStyleId判断是哪个列表样式，这个出版物页面只显示下面三个列表样式 -->
+      <!-- 论文 -->
+      <Thesis v-if="active === 46"
+              :id.sync="curId" />
+      <!-- 专利 -->
+      <Patent v-if="active === 44"
+              :id.sync="curId" />
+      <!-- 专著 -->
+      <Monograph v-if="active === 45"
+                 :id.sync="curId" />
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/article'
+import Thesis from './thesis'
+import Patent from './patent'
+import Monograph from './monograph'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      info: {},
+      active: 0,
+      curId: '',
+      tab: this.$route.query.tab,
+      tabs: []
+    }
+  },
+  components: {
+    Thesis,
+    Patent,
+    Monograph
+  },
+  mounted () {
+    this.getInfo()
+    this.getColumn()
+  },
+  methods: {
+    // 获取栏目详情
+    getInfo () {
+      this.id &&
+        this.$post(`${this.api.findColumn}?id=${this.id}`)
+          .then(({ data }) => {
+            if (!data.columnBanner) data.columnBanner = require('@/assets/images/publication-bg.png');
+            this.info = data
+          })
+          .catch((res) => { })
+    },
+    // 获取子级栏目
+    getColumn () {
+      this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
+        this.tabs = data
+        // 如果url里有tab参数，则自动切换到这个tab，这个tab就是三个出版页中的其中一个id
+        if (this.tab) {
+          const id = +this.tab
+          const item = data.find(e => e.id == id)
+          this.active = item ? item.listStyleId : ''
+          this.curId = id
+        } else if (data.length) {
+          this.active = data[0].listStyleId
+          this.curId = data[0].id
+        }
+      }).catch(err => { })
+    },
+    // tab回调
+    tabChange (item) {
+      this.active = item.listStyleId
+      this.curId = item.id
+    },
+  },
+  filters: {
+    i18nName (name, type) {
+      switch (name) {
+        case '专利':
+          return type.t('column.patent')
+        case '专著':
+          return type.t('column.monograph')
+        case '论文':
+          return type.t('column.paper')
+        default:
+          return name
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+    background-color: #f9f9f9;
+}
+.banner {
+    position: relative;
+    height: 280px;
+    color: #fff;
+    .texts {
+        position: absolute;
+        top: 123px;
+        left: 243px;
+    }
+
+    .text {
+        font-size: 3.42rem;
+        font-weight: 600;
+        @include ellipsis;
+    }
+
+    .sub {
+        margin-top: 10px;
+        font-size: 2rem;
+    }
+}
+.tabs {
+    display: flex;
+    justify-content: center;
+    box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
+    li {
+        padding: 25px 19px;
+        margin: 0 70px;
+        font-size: 1.1rem;
+        color: #333;
+        white-space: nowrap;
+        border-bottom: 4px solid transparent;
+        text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
+        cursor: pointer;
+        &.active {
+            color: #1583ff;
+            border-bottom-color: #1583ff;
+        }
+    }
+}
+.tab-content {
+    width: 1000px;
+    padding: 20px 0;
+    margin: 0 auto;
+}
+@media (max-width: 1200px) {
+    .banner {
+        .texts {
+            .text {
+                font-size: 1.5rem;
+            }
+        }
+    }
+    .tabs {
+        // flex-direction: column;
+        width: 100%;
+        overflow-x: scroll;
+        li {
+            padding: 1.25rem 0;
+            margin: 0 1.25rem;
+        }
+    }
+    .tab-content {
+        width: 90%;
+        margin: 0 auto;
+    }
+}
+@media (max-width: 320px) {
+    .banner {
+        .texts {
+            left: 6rem;
+            top: 6rem;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publication/monograph.vue b/src/pages/publication/monograph.vue
new file mode 100644
index 0000000..451768c
--- /dev/null
+++ b/src/pages/publication/monograph.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="wrap">
+    <div class="forms">
+      <div class="item">
+        <span class="label">{{$t('column.Publicationtime')}}：</span>
+        <el-date-picker style="width: 300px"
+                        v-model="form.publicationYear"
+                        type="year"
+                        :placeholder="$t('column.pleaseSelectThePublicationTime')"
+                        format="yyyy"
+                        value-format="yyyy"
+                        clearable
+                        @change="initData">
+        </el-date-picker>
+      </div>
+      <div class="search">
+        <input type="text"
+               :placeholder="$t('column.PleasenameoftheAuthor')"
+               v-model="form.monographQueryKeyWord"
+               clearable>
+      </div>
+    </div>
+
+    <el-table :data="list"
+              class="patent-table"
+              ref="table"
+              stripe
+              header-align="center"
+              @row-click="rowClick">
+      <el-table-column prop="title"
+                       :label="$t('column.titleOfWork')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="publishingHouse"
+                       :label="$t('column.press')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="writersAndEditors"
+                       :label="$t('column.authorPersion')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="publicationYear"
+                       :label="$t('column.Publicationtime')"
+                       align="center"
+                       min-width="150"></el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination background
+                     @current-change="currentChange"
+                     :current-page="page"
+                     layout="total, prev, pager, next"
+                     :total="total"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util';
+import ColumnConst from '@/const/column'
+export default {
+  props: ['id'],
+  data () {
+    return {
+      patentClasses: ColumnConst.patentClasses,
+      searchTimer: null,
+      form: {
+        monographQueryKeyWord: '',
+        publicationYear: ''
+      },
+      classifications: [],
+      list: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+  },
+  watch: {
+    id () {
+      this.id && this.initData()
+    },
+    'form.monographQueryKeyWord': function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    // 查询文章列表
+    getArticle () {
+      this.id && this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnIds: this.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        ...this.form
+      })
+        .then(({ data }) => {
+          this.list = Util.removeTag(data.records);
+          this.total = +data.total;
+        })
+        .catch((res) => { });
+    },
+    initData () {
+      this.page = 1
+      this.getArticle()
+    },
+    currentChange (val) {
+      this.page = val
+      this.getData()
+    },
+    // 单行点击回调
+    rowClick (row) {
+      this.$parent.toArtice(row)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/page/publication.scss';
+/deep/.patent-table {
+    thead tr,
+    thead th {
+        color: #fff;
+        background-color: #1583ff;
+    }
+    .el-table__row {
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publication/patent.vue b/src/pages/publication/patent.vue
new file mode 100644
index 0000000..5cd3eaa
--- /dev/null
+++ b/src/pages/publication/patent.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="wrap">
+    <div class="forms">
+      <div class="item">
+        <span class="label">{{$t('column.patentClassification')}}：</span>
+        <el-select v-model="form.patentClassId"
+                   clearable
+                   @change="initData"
+                   :placeholder="$t('column.Pleaseselect')">
+          <el-option v-for="item in patentClasses"
+                     :key="item.id"
+                     :label="item.name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance')"
+                     :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="item">
+        <span class="label">{{$t('column.applicationDate')}}：</span>
+        <el-date-picker v-model="form.applicationDate"
+                        type="date"
+                        :placeholder="$t('column.applicationDate')"
+                        format="yyyy-MM-dd"
+                        value-format="yyyy-MM-dd"
+                        @change="initData">
+        </el-date-picker>
+      </div>
+      <div class="search">
+        <el-tooltip class="item"
+                    effect="dark"
+                    :content="$t('column.pleaseEnterPatentOfficer')"
+                    placement="top-start">
+          <input type="text"
+                 :placeholder="$t('column.pleaseEnterPatentOfficer')"
+                 v-model="form.patentQueryKeyWord"
+                 clearable>
+        </el-tooltip>
+      </div>
+    </div>
+
+    <el-table :data="list"
+              class="patent-table"
+              ref="table"
+              stripe
+              header-align="center"
+              @row-click="rowClick">
+      <el-table-column prop="title"
+                       :label="$t('column.patentName')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column :label="$t('column.patentClassification')"
+                       align="center"
+                       min-width="150">
+        <template slot-scope="scope">
+          {{ scope.row.patentClassId ? patentClasses.find(e => e.id == scope.row.patentClassId).name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance') : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="applicationNumber"
+                       :label="$t('column.ApplicationNumber')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="applicationDate"
+                       :label="$t('column.ApplicationDate')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="dateOfAuthorization"
+                       :label="$t('column.AuthorizationDate')"
+                       align="center"
+                       min-width="150"></el-table-column>
+      <el-table-column prop="inventor"
+                       :label="$t('column.inventor')"
+                       align="center"
+                       min-width="150"></el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination background
+                     @current-change="currentChange"
+                     :current-page="page"
+                     layout="total, prev, pager, next"
+                     :total="total"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util';
+import ColumnConst from '@/const/column'
+export default {
+  props: ['id'],
+  data () {
+    return {
+      patentClasses: ColumnConst.patentClasses,
+      searchTimer: null,
+      form: {
+        patentQueryKeyWord: '',
+        patentClassId: '',
+        applicationDate: ''
+      },
+      classifications: [],
+      list: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+  },
+  watch: {
+    id () {
+      this.id && this.initData()
+    },
+    'form.patentQueryKeyWord': function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    // 查询文章列表
+    getArticle () {
+      this.id && this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnIds: this.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        ...this.form
+      })
+        .then(({ data }) => {
+          this.list = Util.removeTag(data.records);
+          this.total = +data.total;
+        })
+        .catch((res) => { });
+    },
+    initData () {
+      this.page = 1
+      this.getArticle()
+    },
+    currentChange (val) {
+      this.page = val
+      this.getData()
+    },
+    // 单行点击回调
+    rowClick (row) {
+      this.$parent.toArtice(row)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/page/publication.scss';
+/deep/.patent-table {
+    thead tr,
+    thead th {
+        color: #fff;
+        background-color: #1583ff;
+    }
+    .el-table__row {
+        cursor: pointer;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publication/single.vue b/src/pages/publication/single.vue
new file mode 100644
index 0000000..ecebaab
--- /dev/null
+++ b/src/pages/publication/single.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="wrap">
+    <div class="banner">
+      <img width="100%" height="280" src="@/assets/images/publication-bg.png" alt="" />
+      <div class="texts">
+        <p class="text">{{ info.columnName }}</p>
+      </div>
+    </div>
+
+    <div class="tab-content">
+      <!-- <Breadcrumb style="margin-bottom: 30px" ref="breadcrumb" :data.sync="routes"/> -->
+      <!-- 根据栏目的listStyleId判断是哪个列表样式，这个出版物页面只显示下面三个列表样式 -->
+      <!-- 论文 -->
+      <Thesis v-if="type === 46" :id.sync="id" />
+      <!-- 专利 -->
+      <Patent v-if="type === 44" :id.sync="id" />
+      <!-- 专著 -->
+      <Monograph v-if="type === 45" :id.sync="id" />
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/article'
+import Thesis from './thesis'
+import Patent from './patent'
+import Monograph from './monograph'
+import Breadcrumb from '@/components/breadcrumb'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: [
+        {
+          name: '科学研究'
+        },
+        {
+          name: '科研成果'
+        }
+      ],
+      info: {},
+      type: +this.$route.query.type, // 栏目的listStyleId
+      parent: null
+    }
+  },
+  components: {
+    Breadcrumb,
+    Thesis,
+    Patent,
+    Monograph
+  },
+  mounted() {
+    this.getColumn()
+    this.getInfo()
+  },
+  methods: {
+    // 获取栏目详情
+    getInfo() {
+      this.id &&
+        this.$post(`${this.api.findColumn}?id=${this.id}`)
+          .then(({ data }) => {
+            this.info = data
+          })
+          .catch((res) => { })
+    },
+    // 获取所有栏目
+    getColumn() {
+      this.$post(this.api.listWithTreeMenuVisible, {
+        siteId: this.site,
+        columnName: '',
+        templateId: '',
+        typeId: '',
+        isSort: 1
+      })
+        .then(({ data }) => {
+          this.getParent(data)
+          const list = this.parent.children
+          list && list.length && list.every(e => e.templateId == 11) && this.$router.push(`/publication?siteId=${this.site}&id=${this.parent.id}&tab=${this.id}`) // 如果子级每个栏目都是出版物类型
+        })
+        .catch((err) => { });
+    },
+    // 获取父级
+    getParent(data, parent = {}) {
+      for (const e of data) {
+        if (e.id == this.id) {
+          this.parent = parent
+        } else if (e.children.length) {
+          this.getParent(e.children, e)
+        }
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  background-color: #f9f9f9;
+}
+.banner {
+  position: relative;
+  height: 280px;
+  color: #fff;
+  .texts {
+    position: absolute;
+    top: 123px;
+    left: 243px;
+  }
+
+  .text {
+    font-size: 3.42rem;
+    font-weight: 600;
+    @include ellipsis;
+  }
+
+  .sub {
+    margin-top: 10px;
+    font-size: 2rem;
+  }
+}
+.tab-content {
+  width: 1000px;
+  padding: 20px 0;
+  margin: 0 auto;
+}
+@media (max-width: 1200px) {
+  .banner {
+    .texts {
+      .text {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .banner {
+    .texts {
+      left: 6rem;
+      top: 6rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publication/thesis.vue b/src/pages/publication/thesis.vue
new file mode 100644
index 0000000..5452ce4
--- /dev/null
+++ b/src/pages/publication/thesis.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="wrap">
+    <div class="forms">
+      <div class="item">
+        <span class="label">{{$t('column.publicationyear')}}：</span>
+        <el-date-picker
+          style="width: 300px"
+          v-model="form.publicationYear"
+          type="year"
+          :placeholder="$t('column.pleaseSelectThePublicationTime')"
+          format="yyyy"
+          value-format="yyyy"
+          clearable
+          @change="initData">
+        </el-date-picker>
+      </div>
+      <div class="search">
+        <el-tooltip class="item" effect="dark" :content="$t('column.PleaseEnterThePaperName')" placement="top-start">
+          <input type="text" :placeholder="$t('column.PleaseEnterThePaperName')" v-model="form.paperQueryKeyWord" clearable>
+        </el-tooltip>
+      </div>
+    </div>
+
+    <ul class="list">
+      <li v-for="(item, i) in articles" :key="i" @click="$parent.toArtice(item)">
+        <h6>{{ item.title }}</h6>
+        <p class="meta">{{$t('column.author')}}: {{ item.author }}</p>
+        <p class="meta">{{$t('column.journalName')}}: {{ item.periodicalName }}</p>
+        <p class="meta">{{$t('column.yearOfPublication')}}: {{ item.publicationYear }} &nbsp; &nbsp; {{$t('column.rollUp')}}: {{ item.reel }}   &nbsp; &nbsp; {{$t('column.documentNumber')}}: {{ item.documentNumber }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util';
+export default {
+  props: ['id'],
+  data() {
+    return {
+      searchTimer: null,
+      form: {
+        paperQueryKeyWord: '',
+        publicationYear: ''
+      },
+      classifications: [],
+      articles: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+  },
+  watch: {
+    id() {
+      this.id && this.initData()
+    },
+    'form.paperQueryKeyWord': function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    // 查询文章列表
+    getArticle() {
+      this.id && this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnIds: this.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        ...this.form
+      })
+        .then(({ data }) => {
+          this.articles = Util.removeTag(data.records);
+          this.total = +data.total;
+        })
+        .catch((res) => { });
+    },
+    initData() {
+      this.page = 1
+      this.getArticle()
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/publication.scss";
+.list {
+  li {
+    padding: 30px;
+    margin-bottom: 15px;
+    background-color: #fff;
+    cursor: pointer;
+  }
+  h6 {
+    margin-bottom: 10px;
+    font-size: 1.2rem;
+  }
+  .meta {
+    font-size: 1rem;
+    color: #666;
+    line-height: 30px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publish/index.vue b/src/pages/publish/index.vue
new file mode 100644
index 0000000..2e9c027
--- /dev/null
+++ b/src/pages/publish/index.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="wrap">
+    <div v-if="info.columnBanner" class="banner">
+      <img width="100%" height="280" :src="info.columnBanner" alt="">
+      <div class="texts">
+        <p class="text">{{ info.columnName }}</p>
+        <p class="sub">{{ info.subtitle }}</p>
+      </div>
+    </div>
+
+    <div class="inner">
+      <ul class="tabs">
+        <li v-for="(item, i) in tabs" :key="i" :class="{active: active === i}" @click="tabChange(i)">{{ item }}</li>
+      </ul>
+
+      <ul class="list">
+        <li v-for="(item, i) in list" :key="i" @click="toArtice(item)">
+          <img class="pic" :src="item.titleImg" alt="">
+          <div class="texts">
+            <h6>{{ item.title }}</h6>
+            <div v-html="item.quote" class="des"></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/article'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      info: {},
+      active: 0,
+      tabs: ['发表论文', '申请专利'],
+      list: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+  },
+  mounted() {
+    this.getInfo()
+    this.getArticle()
+  },
+  methods: {
+    // 获取栏目详情
+    getInfo() {
+      this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
+        this.info = data
+      }).catch(res => {})
+    },
+    // 查询文章列表
+    getArticle() {
+      this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.site,
+        columnIds: [this.id],
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      }).then(({ data }) => {
+        this.list = Util.removeTag(data.records)
+        this.total = +data.total
+      }).catch(res => {})
+    },
+    tabChange(i) {
+      this.active = i
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  background: #F8F9FB;
+}
+.banner {
+  position: relative;
+  height: 280px;
+  color: #fff;
+  .texts {
+    position: absolute;
+    top: 80px;
+    left: 243px;
+  }
+  .text {
+    font-size: 48px;
+    font-weight: 600;
+    @include ellipsis;
+  }
+  .sub {
+    margin-top: 10px;
+    font-size: 28px;
+  }
+}
+.inner {
+  width: 1200px;
+  margin: 0 auto;
+}
+.tabs {
+  position: relative;
+  display: flex;
+  margin-top: -64px;
+  li {
+    width: 174px;
+    line-height: 64px;
+    text-align: center;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    background-color: #fff;
+    cursor: pointer;
+    &.active {
+      color: #fff;
+      background-color: #1583FF;
+    }
+  }
+}
+.list {
+  padding: 0 30px 50px;
+  background: #fff;
+  li {
+    display: flex;
+    align-items: center;
+    padding: 28px 0;
+    border-bottom: 1px solid #ddd;
+    cursor: pointer;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .pic {
+    width: 90px;
+    height: 122px;
+    margin-right: 20px;
+  }
+  h6 {
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #1583FF;
+    cursor: pointer;
+  }
+  .des {
+    margin-top: 15px;
+    font-size: 16px;
+    color: #666;
+    line-height: 26px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publish/show.vue b/src/pages/publish/show.vue
new file mode 100644
index 0000000..0e5743b
--- /dev/null
+++ b/src/pages/publish/show.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="wrap">
+    <div class="content">
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
+      <div class="article">
+        <div class="left">
+          <h2>{{ form.title }}</h2>
+          <template v-if="form.author">
+            <p class="name">{{ $t('column.author') }}</p>
+            <p class="val">{{ form.author }}</p>
+          </template>
+          <template v-if="form.quote">
+            <p class="name">{{ $t('column.quote') }}</p>
+            <p class="val">{{ form.quote }}</p>
+          </template>
+          <p class="name">{{ $t('column.introduce') }}</p>
+          <div class="flex">
+            <div class="des"
+                 v-html="form.mainBody"></div>
+            <!-- <img v-if="form.titleImg" width="222" height="222" :src="form.titleImg" alt=""> -->
+          </div>
+        </div>
+        <div class="right">
+          <img class="pic"
+               src="@/assets/images/publish3.png"
+               alt="">
+          <div class="texts">
+            <template v-if="form.periodicalName">
+              <p class="name">{{ $t('column.publicationName') }}</p>
+              <p class="val">{{ form.periodicalName }}</p>
+            </template>
+            <p class="name">{{ $t('column.yearOfPublication') }}</p>
+            <p class="val">{{ form.publicationYear }}{{ $t('column.year') }}</p>
+            <div class="flex">
+              <div v-if="form.reel"
+                   class="m-r-20">
+                <p class="name">{{ $t('column.rollUp') }}</p>
+                <p class="val">{{ form.reel }}</p>
+              </div>
+              <div v-if="form.documentNumber">
+                <p class="name">{{ $t('column.documentNumber') }}</p>
+                <p class="val">{{ form.documentNumber }}</p>
+              </div>
+            </div>
+            <template v-if="form.publicationTypeId">
+              <p class="name">{{ $t('column.publicationType') }}</p>
+              <p class="val">{{ form.publicationTypeId && publicationTypes.find(e => e.id == form.publicationTypeId).name }}</p>
+            </template>
+            <template v-if="form.doi">
+              <p class="name">DOI</p>
+              <p class="val">{{ form.doi }}</p>
+            </template>
+
+            <p class="l-title">{{$t('column.hot')}}</p>
+            <ul class="list">
+              <li v-for="(item, i) in hots"
+                  :key="i"
+                  :title="item.title"
+                  @click="toArtice(item)">
+                <p class="text">{{ item.title }}</p>
+                <span class="date">{{ item.releaseTime }}</span>
+              </li>
+            </ul>
+
+            <p class="l-title">{{$t('column.latestNews')}}</p>
+            <ul class="list">
+              <li v-for="(item, i) in news"
+                  :key="i"
+                  @click="toArtice(item)">
+                <p class="text">{{ item.title }}</p>
+                <span class="date">{{ item.releaseTime }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import mixins from '@/mixins/article'
+import ColumnConst from '@/const/column'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      id: this.$route.query.articleId,
+      publicationTypes: ColumnConst.publicationTypes,
+      routes: [],
+      columnId: '',
+      form: {},
+      columnBanner: '',
+      news: [],
+      hots: []
+    }
+  },
+  components: {
+    Breadcrumb
+  },
+  watch: {
+    '$route' () {
+      this.id = this.$route.query.id
+      this.getInfo()
+    }
+  },
+  mounted () {
+    this.getInfo()
+    this.getArticle()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+        // 设置面包屑
+        const { columnName, path, id } = this.$route.query
+        this.routes = [
+          {
+            name: columnName || data.columnName,
+            path: path ? '/' + path : '',
+            query: {
+              id: id || data.columnId
+            }
+          },
+          {
+            name: data.title
+          }
+        ]
+        this.form = data
+        this.columnId = data.columnId
+        // 如果没上传banner
+        if (!data.bannerImg) {
+          this.getBanner(this.columns)
+          this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png')
+        }
+      }).catch(err => { })
+
+      // 浏览量+1
+      // this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
+    },
+    // 获取banner 规则：当前文章有上传的，用上传的，没有上传的话，如果栏目有图片，读取栏目的（上级没有读上上级，以此类推）都没有的读取默认的
+    getBanner (data) {
+      for (const e of data) {
+        if (e.columnBanner) this.columnBanner = e.columnBanner
+        if (e.id == this.columnId) {
+          break
+        } else {
+          this.getBanner(e.children)
+        }
+      }
+    },
+    // 热点内容和最新资讯
+    getArticle () {
+      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
+        this.hots = Util.removeTag(data)
+      }).catch(err => { })
+
+      this.$post(this.api.newlyPublishedArticles, {
+
+
+        pageNum: 1,
+        pageSize: 5,
+        siteId: this.$route.query.siteId || this.$store.state.content.site
+      }).then(({ data }) => {
+        this.news = Util.removeTag(data.records)
+      }).catch(res => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+    background: url(../../assets/images/publish1.png) no-repeat;
+}
+.content {
+    width: 1084px;
+    padding-top: 25px;
+    background: url(../../assets/images/publish2.png) bottom right/auto no-repeat;
+}
+.breadcrumb {
+    margin-bottom: 25px;
+}
+.article {
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 846px;
+        padding: 30px;
+        margin-right: 16px;
+        background: #fff;
+        .name {
+            font-size: 24px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 33px;
+        }
+        .val {
+            margin-bottom: 38px;
+            font-size: 16px;
+            color: #333;
+            line-height: 30px;
+        }
+        .des {
+            width: 100%;
+            // margin-right: 49px;
+        }
+    }
+    h2 {
+        padding-bottom: 27px;
+        margin-bottom: 40px;
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #333;
+        line-height: 50px;
+        border-bottom: 1px solid #ddd;
+    }
+    .right {
+        width: 222px;
+        background: #fff;
+        .texts {
+            padding: 15px;
+        }
+        .name {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            line-height: 20px;
+            color: #666666;
+        }
+        .val {
+            margin: 5px 0 36px;
+            font-size: 14px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 20px;
+        }
+    }
+    .list {
+        margin-bottom: 20px;
+        li {
+            padding: 16px 0;
+            border-bottom: 1px solid #d8d8d8;
+        }
+        .text {
+            margin-bottom: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            &:hover {
+                color: $main-color;
+            }
+        }
+        .date {
+            font-size: 12px;
+            color: #999;
+        }
+    }
+}
+@media (max-width: 1084px) {
+    .content {
+        width: 95%;
+    }
+    .article {
+        flex-direction: column;
+        .left,
+        .right {
+            width: 100%;
+        }
+        .right {
+            margin: 20px 0 0;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/research/index.vue b/src/pages/research/index.vue
new file mode 100644
index 0000000..e4062b1
--- /dev/null
+++ b/src/pages/research/index.vue
@@ -0,0 +1,654 @@
+<template>
+  <div class="wrap" v-if="modules.length>=1">
+    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block">
+      <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+      <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
+      <ul class="area">
+        <li v-for="(item, i) in modules[2].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+          <img :src="item.pic" alt="" class="pic">
+          <div class="texts">
+            <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
+            <h6>{{ item.title }}</h6>
+            <p class="des">{{ item.des }}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <ul class="group">
+          <li v-for="(item, i) in modules[4].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="text">{{ item.title }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner news-inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
+        <ul class="news">
+          <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <div class="des">{{ item.des }}</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.wrap{
+  /deep/ .el-carousel {
+    height: 24rem;
+    .el-carousel__container{
+      height: 24rem;
+    }
+    img{
+      height: 24rem;
+    }
+  }
+}
+.banner-item {
+  .banner-name {
+    font-size: 2.16rem;
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+  .intro  {
+    margin-bottom: 4rem;
+  }
+}
+.area {
+  display: flex;
+  li {
+    position: relative;
+    width: 19%;
+    color: #fff;
+    background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+      .icon {
+        transform: rotateY(360deg);
+      }
+    }
+    &:nth-child(2) {
+      width: 21%;
+      margin-top: 70px;
+      .texts {
+        background: #2B1B1C;
+      }
+    }
+    &:nth-child(3) {
+      .texts {
+        background: #009C91;
+      }
+    }
+    &:nth-child(4) {
+      margin-top: 70px;
+      .texts {
+        background: #005388;
+      }
+    }
+    &:nth-child(5) {
+      width: 22%;
+      .texts {
+        background: #9A4E10;
+      }
+    }
+  }
+  .pic {
+    width: 100%;
+    height: 32.65rem;
+  }
+  .icon {
+    transition: .3s;
+  }
+  .texts {
+    width: 100%;
+    padding: 1rem 2rem;
+    background: #08577B;
+    overflow: hidden;
+  }
+  h6 {
+    font-size: 1.2rem;
+    white-space: nowrap;
+  }
+  .des {
+    font-size: .96rem;
+    color: rgba(255,255,255,0.55);
+  }
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: calc((100% - 56px) / 3);
+    margin: 0 1.4rem 1.95rem 0;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+      .text {
+        color: #fff;
+        background-color: #465f85;
+      }
+    }
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+  .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 7.15rem;
+    padding: 0 1.5rem;
+    font-size: 1.44rem;
+    font-family: SFProDisplay-Bold, SFProDisplay;
+    font-weight: bold;
+    line-height: 2rem;
+    text-align: center;
+    color: #272727;
+    background-color: #fff;
+    transition: .3s;
+  }
+}
+.news {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: calc((100% - 56px) / 3);
+    padding: 11px;
+    margin-right: 1.4rem;
+    color: #333;
+    background-color: #fff;
+    box-shadow: 0px 5px 1rem 0px rgba(98,117,163,0.08);
+    border-radius: 10px;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:hover {
+      color: #fff;
+      background-color: #0252D9;
+    }
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+  .texts {
+    padding: 0 .9rem 2.5rem;
+  }
+  h6 {
+    margin: 1.75rem 0 .6rem;
+    font-size: 1.04rem;
+    line-height: 1.65rem;
+  }
+  .des {
+    font-size: .88rem;
+    line-height: 1.3rem;
+  }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+  .wrap{
+  /deep/ .el-carousel {
+    height: 18rem;
+    .el-carousel__container{
+      height: 18rem;
+    }
+    img{
+      height: 18rem;
+    }
+  }
+}
+ .block{ 
+  padding: 50px 0;
+  .intro {
+    margin-bottom: 30px;
+  }
+  .area{
+    flex-direction: column;
+    li{
+      width: 95%;margin: 1.25rem auto;
+    }
+  }
+  .group,.news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
+ }
+ .area {
+  li {
+    height:  auto;
+    .pic{
+      height: 20rem;
+    }
+    .texts{
+      height: 10rem;
+    }
+  }
+ }
+ .group img {
+  height: 20rem;
+ }
+ .news img{
+  height: 20rem;
+ }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      li {
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      li {
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      li {
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+    .area {
+      li {
+        .pic {
+          height: 22rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      li {
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+    .area {
+      li {
+        .pic {
+          height: auto;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      li {
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+    .area {
+      flex-direction: row;;
+      li {
+        width: 19%;
+        .pic {
+          height: auto;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      flex-direction: row;
+      li {
+        width: calc((100% - 3rem) / 3);
+        margin: 0 .8rem 1.95rem 0;
+        -webkit-transition: .3s;
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+    .area {
+      flex-direction: row;;
+      li {
+        width: 19%;
+        .pic {
+          height: auto;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap  {
+    /deep/ .el-carousel{
+      height: 12rem !important;
+    }
+    /deep/ .el-carousel__container{
+      height: 12rem !important; 
+    }
+    /deep/  .el-carousel__item {
+      height: 12rem !important;
+    }
+  }
+  .banner-item{
+    img {
+      height: 12rem !important;
+    }
+    .banner-name {
+      font-size: 1.5rem;
+      line-height: 1rem;
+      left: 2rem;
+      bottom: 2rem;
+    }
+  }
+  .block {
+    padding: 1.25rem 0 ;
+    .b-title  {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .group ,.news{
+      flex-direction: row;
+      li {
+        width: calc((100% - 3rem) / 3);
+        margin: 0 .8rem 1.95rem 0;
+        -webkit-transition: .3s;
+        img {
+          height: auto;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 1.8rem;
+        }
+      }
+    }
+    .area {
+      flex-direction: row;;
+      li {
+        width: 19%;
+        .pic {
+          height: auto;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/researchTeam/index.vue b/src/pages/researchTeam/index.vue
new file mode 100644
index 0000000..1e423c3
--- /dev/null
+++ b/src/pages/researchTeam/index.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+    <div class="content">
+      <div class="article">
+        <div class="left">
+          <div class="search">
+            <input type="text"
+                   placeholder="请输入搜索内容"
+                   v-model="title"
+                   clearable>
+          </div>
+
+          <div class="team-wrap">
+            <div class="letter">
+              <span v-for="(letter, i) in letters"
+                    :key="i"
+                    :class="['item', {active: curLetter == letter}]"
+                    @click="letterClick(letter)">{{ letter }}</span>
+            </div>
+
+            <ul class="teams">
+              <li v-for="(item, i) in articles"
+                  :key="i"
+                  @click="toArtice(item, modules[1].form)">
+                <div class="line">
+                  <img src="http://10.10.11.7/images/researchTeam/3.png"
+                       alt=""
+                       class="icon">
+                  <span class="bold">{{ item.title }}</span>
+                  <span class="val">/ {{ item.post }}</span>
+                </div>
+                <div class="line">
+                  <img src="http://10.10.11.7/images/researchTeam/4.png"
+                       alt=""
+                       class="icon">
+                  <span class="text">专业 {{ item.major }}</span>
+                </div>
+                <div class="line">
+                  <img src="http://10.10.11.7/images/researchTeam/5.png"
+                       alt=""
+                       class="icon">
+                  <span class="text">荣誉 {{ item.honor }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <RightColumns />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import articleMixins from '@/mixins/article';
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+import RightColumns from '@/components/rightColumns'
+import { pinyin } from 'pinyin-pro'
+export default {
+  mixins: [mixins, articleMixins],
+  data () {
+    return {
+      articles: [],
+      allList: [],
+      title: '',
+      searchTimer: null,
+      curLetter: '全部',
+      letters: ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+    }
+  },
+  components: {
+    RightColumns
+  },
+  watch: {
+    title: function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.filter();
+      }, 500);
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+
+          // 获取文章列表
+          const { column } = json[1].form
+          if (column.length) {
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              const articles = Util.removeTag(data)
+              this.allList = articles
+              this.articles = this.sortList(articles)
+            }).catch(err => { })
+          }
+        }
+      }).catch(err => { })
+    },
+    // 筛选列表
+    filter () {
+      const { title, curLetter } = this
+      this.articles = this.allList.filter(e => {
+        return (e.title.includes(title) || e.post.includes(title) || e.major.includes(title) || e.honor.includes(title)) && (curLetter === '全部' || (curLetter !== '全部' && curLetter === pinyin(e.title, { toneType: 'none' })[0].toUpperCase()))
+      })
+    },
+    // 列表按首字母拼音排序
+    sortList (list) {
+      list.forEach(e => {
+        e.sortTitle = pinyin(e.title, { toneType: 'none' })[0].toUpperCase()
+      })
+      this.letters = ['全部', ...this.letters.filter(e => list.find(n => n.sortTitle == e))]
+      return list.sort((a, b) => a.sortTitle.charCodeAt(0) - b.sortTitle.charCodeAt(0))
+    },
+    // 字母点击回调
+    letterClick (e) {
+      this.curLetter = e
+      this.filter()
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.content {
+    width: 1200px;
+}
+.article {
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 75%;
+        .search {
+            display: inline-flex;
+            width: 34%;
+            input {
+                width: 100%;
+                height: 38px;
+                padding: 0 15px;
+                font-size: 14px;
+                color: #333;
+                background: #f7f7f7;
+                border: 0;
+                border-top-left-radius: 6px;
+                border-bottom-left-radius: 6px;
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
+    .letter {
+        display: flex;
+        margin: 30px 0;
+        border-radius: 4px;
+        .item {
+            padding: 5px 10px;
+            font-size: 1rem;
+            text-align: center;
+            color: #999;
+            cursor: pointer;
+            border: 1px solid #dbdbdb;
+            border-right: 0;
+            &:first-child {
+                border-radius: 4px 0px 0px 4px;
+            }
+            &:last-child {
+                border-right: 1px solid #dbdbdb;
+                border-radius: 0 4px 4px 0;
+            }
+            &:hover {
+                color: #fff;
+                background: #1583ff;
+            }
+            &.active {
+                color: #fff;
+                background: #1583ff;
+            }
+        }
+    }
+    .teams {
+        display: flex;
+        flex-wrap: wrap;
+        li {
+            width: calc((100% - 10px) / 2);
+            padding: 20px 30px;
+            margin: 0 10px 10px 0;
+            background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0 / cover no-repeat;
+            cursor: pointer;
+            &:nth-child(even) {
+                margin-right: 0;
+            }
+        }
+        .line {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        .icon {
+            margin-right: 8px;
+        }
+        .bold {
+            margin-right: 5px;
+            font-size: 1.1rem;
+            color: #333;
+        }
+        .val {
+            font-size: 1rem;
+            color: #999;
+        }
+        .text {
+            font-size: 1rem;
+            color: #666;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .content {
+        width: 95%;
+    }
+    .article {
+        flex-direction: column;
+        .left,
+        .right {
+            width: 100%;
+        }
+        .left {
+            margin-bottom: 30px;
+        }
+    }
+}
+@media (max-width: 980px) {
+    .article {
+        .team-wrap {
+            display: flex;
+            align-items: flex-start;
+        }
+        .letter {
+            flex-direction: column;
+            margin: 16px 10px 0 0;
+            .item {
+                border: 1px solid #dbdbdb;
+                border-top: 0;
+                &:first-child {
+                    border-top: 1px solid #dbdbdb;
+                    border-radius: 4px 4px 0 0;
+                }
+                &:last-child {
+                    border-radius: 0 0 4px 4px;
+                }
+            }
+        }
+        .teams {
+            flex: 1;
+        }
+    }
+}
+@media (max-width: 640px) {
+    .article {
+        .left {
+            .search {
+                width: 50%;
+            }
+        }
+        .teams {
+            flex-direction: column;
+            li {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/science/index.vue b/src/pages/science/index.vue
new file mode 100644
index 0000000..6434904
--- /dev/null
+++ b/src/pages/science/index.vue
@@ -0,0 +1,427 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img" :src="modules[0].form.pic" alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+        <p class="banner-des des">{{ modules[0].form.des }}</p>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <div
+          class="item wow bounceInLeft"
+          data-wow-delay="0.5s"
+          :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+          @click="openLink(modules[1].form)"
+        >
+          <img src="@/assets/images/science/1.png" alt="" />
+          <div class="texts">
+            <h6>{{ modules[1].form.title }}</h6>
+            <div class="des">{{ modules[1].form.des }}</div>
+          </div>
+        </div>
+        <div
+          class="item wow bounceInRight"
+          data-wow-delay="0.8s"
+          :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
+          @click="openLink(modules[2].form)"
+        >
+          <img src="@/assets/images/science/2.png" alt="" />
+          <div class="texts rightText">
+            <h6>{{ modules[2].form.title }}</h6>
+            <div class="des">{{ modules[2].form.des }}</div>
+          </div>
+        </div>
+        <div
+          class="item wow bounceInLeft"
+          data-wow-delay="0.5s"
+          :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
+          @click="openLink(modules[3].form)"
+        >
+          <img src="@/assets/images/science/3.png" alt="" />
+          <div class="texts">
+            <h6>{{ modules[3].form.title }}</h6>
+            <div class="des">{{ modules[3].form.des }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: [],
+    };
+  },
+  mounted() {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                  ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.inner {
+  width: 960px;
+}
+.single-banner {
+  .banner-img {
+    height: 21.6rem;
+  }
+  .texts {
+    h6 {
+      font-size: 2.16rem;
+      margin-bottom: .95rem;
+    }
+    .banner-des {
+      font-size: .96rem;
+    }
+  }
+}
+.block  {
+  padding: 3.85rem 0;
+}
+.item {
+  position: relative;
+  margin-bottom: 2.9rem;
+  width: 100%;
+  &:hover {
+    .texts {
+      color: #fff;
+      transform: scale(1.05);
+      background: #32b6e9 !important;
+    }
+  }
+  img {
+    width: 100%;
+    height: 22rem;
+  }
+  &:nth-child(2) .texts {
+    color: #fff;
+    background: #33b3c1;
+  }
+  &:nth-child(3) .texts {
+    color: #fff;
+    background: #e47c22;
+  }
+  &:nth-child(even) .texts {
+    left: auto;
+    right: -1.6rem;
+  }
+  .texts {
+    position: absolute;
+    top: 3.9rem;
+    left: -1.4rem;
+    width: 26.6rem;
+    padding: 3.5rem 1.9rem;
+    color: #333;
+    background: #fff6e9;
+    transition: 0.5s;
+  }
+  h6 {
+    margin-bottom: .875rem;
+    font-size: 1.6rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+  }
+  .des {
+    font-size: .88rem;
+  }
+}
+@media (max-width: 1200px) {
+  body {
+    width: 100% !important;
+  }
+  .inner {
+    width: 80%;
+  }
+  .item {
+    img {
+    }
+    .rightText {
+      right: 12px !important;
+    }
+    .texts {
+      width: 85%;
+      box-sizing: border-box;
+      left: -1rem;
+      &:nth-child(2) {
+        right: -1.5rem !important;
+      }
+      .des{
+        -webkit-line-clamp: inherit
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+        h6 {
+          font-size: 1.2rem;
+        }
+        .des {
+          font-size: .75rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+        h6 {
+          font-size: 1.4rem;
+        }
+        .des {
+          font-size: .75rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+        h6 {
+          font-size: 1.4rem;
+        }
+        .des {
+          font-size: .75rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 12rem;
+      }
+      .texts {
+        top: 5rem;
+        left: 2rem;
+        .banner-title{
+          font-size: 1.5rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+  .block {
+    .inner {
+      img {
+        height: 18rem;
+      }
+      .texts {
+        padding: 1.25rem;
+        top: 1.5rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/scientific/index.vue b/src/pages/scientific/index.vue
new file mode 100644
index 0000000..395c1dd
--- /dev/null
+++ b/src/pages/scientific/index.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+        <p class="banner-des des">{{ modules[0].form.des }}</p>
+      </div>
+    </div>
+
+    <div class="block gray"
+         style="padding: 2rem 0;">
+      <div class="inner">
+        <Breadcrumb ref="breadcrumb"
+                    :data.sync="routes" />
+        <ul class="items">
+          <li>
+            <img class="pic"
+                 :src="modules[1].form.pic"
+                 alt="">
+            <div class="texts">
+              <h6 v-html="modules[1].form.title"></h6>
+              <div class="text"
+                   v-html="modules[1].form.des"></div>
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(modules[1].form.link.linkName)}"
+                   @click="openLink(modules[1].form)">
+            </div>
+          </li>
+          <li>
+            <img class="pic"
+                 :src="modules[2].form.pic"
+                 alt="">
+            <div class="texts">
+              <h6 v-html="modules[2].form.title"></h6>
+              <div class="text"
+                   v-html="modules[2].form.des"></div>
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(modules[2].form.link.linkName)}"
+                   @click="openLink(modules[2].form)">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="about">
+      <div class="inner">
+        <div class="texts">
+          <div class="title wow fadeInUp"
+               data-wow-delay="0.7s"
+               v-html="modules[3].form.title"></div>
+          <div class="des wow fadeInDown"
+               data-wow-delay="1s"
+               v-html="modules[3].form.des"></div>
+          <img class="m-t-10"
+               width="42"
+               src="@/assets/images/arrow-white.png"
+               alt=""
+               :class="{'arrow': isLink(modules[3].form.link.linkName)}"
+               @click="openLink(modules[3].form)">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import WOW from "wow.js";
+import Breadcrumb from '@/components/breadcrumb'
+import Util from '@/libs/util'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: [],
+    };
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted () {
+    new WOW().init();
+    this.getColumn()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+    // 获取父级所有栏目名称和id
+    getParent (data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn () {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => { })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.items {
+    margin-top: 2rem;
+    li {
+        position: relative;
+        height: 559px;
+        margin-bottom: 60px;
+        &:nth-child(even) {
+            .texts {
+                left: auto;
+                right: 100px;
+            }
+        }
+        .pic {
+            width: 100%;
+            height: 100%;
+        }
+        .texts {
+            position: absolute;
+            top: 100px;
+            left: 80px;
+            width: 500px;
+            padding: 30px;
+            color: #333;
+            background-color: rgba(255, 255, 255, 0.85);
+            border-radius: 0px 0px 100px 0px;
+            border-top: 4px solid #0280f1;
+        }
+        h6 {
+            font-size: 1.2rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+        }
+        .text {
+            margin: 1rem 0;
+            font-size: 1rem;
+            line-height: 1.6;
+        }
+        .icon {
+            width: 40px;
+        }
+    }
+}
+.program {
+    background: #fff;
+    .title {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding-bottom: 25px;
+        margin-bottom: 30px;
+        border-bottom: 1px solid #ddd;
+        align-items: center;
+        h5 {
+            padding-left: 16px;
+            font-size: 1.6rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 1;
+            border-left: 6px solid #2b96ef;
+        }
+        .sub {
+            font-size: 1.1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #afb7bf;
+        }
+        .more {
+            font-size: 0.8rem;
+            color: #666;
+            cursor: pointer;
+        }
+    }
+    .slide {
+        display: flex;
+        margin-bottom: 14px;
+        cursor: pointer;
+    }
+    .texts {
+        width: 51%;
+        padding: 56px;
+        background: #fbfbfb;
+        h6 {
+            font-size: 1.3rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+        }
+        .des {
+            margin: 35px 0 25px;
+            font-size: 1rem;
+            color: #666;
+            line-height: 32px;
+        }
+        .meta {
+            font-size: 0.9rem;
+            color: #666;
+        }
+    }
+    .img-wrap {
+        width: 49%;
+        height: 430px;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    &:hover {
+        .pic {
+            transform: scale(1.3);
+        }
+    }
+    .list {
+        display: flex;
+        li {
+            width: calc((100% - 28px) / 3);
+            height: 204px;
+            padding: 36px 22px;
+            margin-right: 14px;
+            background: url(../../assets/images/sfel/7.png) no-repeat center;
+            background-size: 100% 100%;
+            transition: 0.5s;
+            cursor: pointer;
+            &:nth-child(2) {
+                background-image: url(../../assets/images/sfel/8.png);
+            }
+            &:nth-child(3) {
+                margin-right: 0;
+                background-image: url(../../assets/images/sfel/9.png);
+            }
+            &:hover {
+                transform: translateY(20px);
+            }
+        }
+        .des {
+            height: 90px;
+            margin-bottom: 30px;
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 30px;
+        }
+        .date {
+            font-size: 0.9rem;
+            font-family: LaoSangamMN;
+            color: #ffffff;
+        }
+    }
+}
+.about {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 643px;
+    text-align: center;
+    background: url(../../assets/images/about-bg.png) no-repeat center center;
+    background-size: 100% 100%;
+    .texts {
+        padding: 2.375rem 3.75rem;
+        color: #fff;
+        background: rgba(111, 69, 36, 0.56);
+        border-radius: 17px;
+        transition: 0.3s;
+        &:hover {
+            background: rgba(239, 126, 10, 0.56);
+            transform: translateY(10px);
+        }
+    }
+    .title {
+        margin-bottom: 1rem;
+        font-size: 1.8rem;
+    }
+    .des {
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+}
+@media (max-width: 1200px) {
+    .items {
+        li {
+            .texts {
+                left: 0;
+                width: 98%;
+            }
+            &:nth-child(even) {
+                .texts {
+                    right: auto;
+                }
+            }
+        }
+    }
+    .about {
+        height: 30rem;
+    }
+}
+@media (max-width: 780px) {
+    .program {
+        .slide {
+            flex-direction: column;
+        }
+        .texts {
+            width: 100%;
+        }
+        .img-wrap {
+            width: 100%;
+            height: 250px;
+        }
+        .list {
+            flex-direction: column;
+            li {
+                width: 100%;
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue
new file mode 100644
index 0000000..ec84209
--- /dev/null
+++ b/src/pages/sfel/index.vue
@@ -0,0 +1,2101 @@
+<template>
+  <div class="wrap">
+    <el-carousel class="topImg" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%"  :src="item.pic" alt="" @click="openLink(item)">
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block banner-block" id="part1">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[1].form.title }}
+            <span class="sub">{{ modules[1].form.subTitle }}</span>
+          </h5>
+          <span class="more" @click="toAll(modules[2].form)">MORE</span>
+        </div>
+        <template v-if="articles.length">
+          <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
+            <div style="width: 50%;height: 20.5rem;overflow: hidden;" class="newBox">
+              <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
+            </div>
+            <div class="right">
+              <h6>{{ curArticle.title }}</h6>
+              <div class="des" v-html="curArticle.mainBody"></div>
+              <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
+              <ul class="inds">
+                <li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+              </ul>
+            </div>
+          </div>
+          
+          <ul class="card">
+            <template v-for="(item, i) in articles">
+              <li v-if="i > 3 && i < 7" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+                <img class="pic" :src="item.titleImg" alt="">
+                <div class="texts">
+                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
+                  <div class="des">{{ item.title }}</div>
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
+                </div>
+              </li>
+            </template>
+          </ul>
+        </template>
+      </div>
+    </div>
+
+    <div class="block notice" id="part2">
+      <div class="inner lg">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[3].form.title }}
+            <span class="sub">{{ modules[3].form.subTitle }}</span>
+          </h5>
+          <span class="more" @click="toAll(modules[4].form)">MORE</span>
+        </div>
+        <div class="shop-shows" v-if="articles1.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s">
+            <el-carousel>
+              <template v-for="(item, i) in articles1">
+                <el-carousel-item v-if="i < 4" :key="i">
+                  <div class="item" @click="toArtice(item, modules[4].form)">
+                    <img class="pic" :src="item.titleImg" alt="">
+                    <p class="text">{{ item.title }}</p>
+                  </div>
+                </el-carousel-item>
+              </template>
+            </el-carousel>
+            <div v-if="articles1.length > 4" class="cards" style="margin-top: 18px;" @click="toArtice(articles1[4], modules[4].form)">
+              <h6 class="a-line">{{ articles1[4].title }}</h6>
+              <div class="sum">{{ articles1[4].mainBody }}</div>
+              <p class="date">{{ articles1[4].releaseTime }}</p>
+            </div>
+            <div class="card-wrap">
+              <div v-if="articles1.length > 5" class="cards" style="margin-right: 18px" @click="toArtice(articles1[5], modules[4].form)">
+                <h6>{{ articles1[5].title }}</h6>
+                <p class="date">{{ articles1[5].releaseTime }}</p>
+              </div>
+              <div v-if="articles1.length > 6" class="cards" @click="toArtice(articles1[6], modules[4].form)">
+                <h6>{{ articles1[6].title }}</h6>
+                <p class="date">{{ articles1[6].releaseTime }}</p>
+              </div>
+            </div>
+          </div>
+          <div v-if="articles1.length > 7" class="right wow fadeInRight" data-wow-delay="0.5s">
+            <ul class="card-list">
+              <template v-for="(item, i) in articles1">
+                <li v-if="i > 6 && i < 10" :key="i" @click="toArtice(item, modules[4].form)">
+                  <div class="releaseTime">
+                    <p class="d">{{ item.date }}</p>
+                    <p class="m">{{ item.month }}</p>
+                  </div>
+                  <div class="texts">
+                    <h6>{{ item.title }}</h6>
+                    <div class="des" v-html="item.mainBody"></div>
+                  </div>
+                </li>
+              </template>
+            </ul>
+            <div v-if="articles1.length > 10" class="slide" @click="toArtice(articles1[10], modules[4].form)">
+              <img class="pic" :src="articles1[10].titleImg" alt="">
+              <p class="text">{{ articles1[10].title }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block conference" id="part3">
+      <div class="inner lg">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[5].form.title }}
+            <span class="sub">{{ modules[5].form.subTitle }}</span>
+          </h5>
+          <span class="more" @click="toAll(modules[6].form)">MORE</span>
+        </div>
+        <div class="shows" v-if="articles2.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
+            <img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
+            <div class="text">{{ articles2[0].title }}</div>
+          </div>
+          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
+            <template v-for="(item, i) in articles2">
+              <li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
+                <img class="pic" :src="item.titleImg" alt="">
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <p class="sum">{{ item.mainBody }}</p>
+                  <p v-if="item.keynoteSpeaker" class="text">
+                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                    {{ item.keynoteSpeaker }}
+                  </p>
+                  <p v-if="item.activityStartTime" class="text">
+                    <img class="icon" src="@/assets/images/time.png" alt="">
+                    会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                  </p>
+                  <p v-if="item.onlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/online.png" alt="">
+                    {{ item.onlineLocation }}
+                  </p>
+                  <p v-if="item.offlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/location.png" alt="">
+                    {{ item.offlineLocation }}
+                  </p>
+                </div>
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="block media" id="part4">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[7].form.title }}
+            <span class="sub">{{ modules[7].form.subTitle }}</span>
+          </h5>
+          <span class="more" @click="toAll(modules[8].form)">MORE</span>
+        </div>
+        <div v-if="articles3.length" class="media-wrap">
+          <div class="left">
+            <div class="slides">
+              <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px" @click="toArtice(articles3[0], modules[9].form)">
+                <img width="100%" height="100%" :src="articles3[0].titleImg" alt="">
+                <div class="text">{{ articles3[0].title }}</div>
+              </div>
+              <div v-if="articles3.length > 1" class="item wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles3[1], modules[9].form)">
+                <img width="100%" height="100%" :src="articles3[1].titleImg" alt="">
+                <div class="text">{{ articles3[1].title }}</div>
+              </div>
+            </div>
+            <ul class="list">
+              <template v-for="(item, i) in articles3">
+                <li v-if="i > 1 && i < 5" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[9].form)">
+                  <h6>{{ item.title }}</h6>
+                  <div class="des">{{ item.mainBody }}</div>
+                </li>
+              </template>
+            </ul>
+          </div>
+          <div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s" @click="toArtice(articles3[5], modules[9].form)">
+            <div class="img-wrap">
+              <img :src="articles3[5].titleImg" alt="">
+            </div>
+            <div class="texts">
+              <h6>{{ articles3[5].title }}</h6>
+              <div class="des">{{ articles3[5].mainBody }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block news" id="part5">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[9].form.title }}
+            <span class="sub">{{ modules[9].form.subTitle }}</span>
+          </h5>
+        </div>
+        <ul class="news">
+          <li v-for="(item, i) in modules[10].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <div class="des">{{ item.des }}</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block program" id="part6">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[11].form.title }}
+            <span class="sub">{{ modules[11].form.subTitle }}</span>
+          </h5>
+          <span class="more" @click="toAll(modules[12].form)">MORE</span>
+        </div>
+        <template v-if="articles4.length">
+          <div class="slide" @click="toArtice(articles4[0], modules[12].form)">
+            <div class="texts">
+              <h6>{{ articles4[0].title }}</h6>
+              <div class="des">{{ articles4[0].mainBody }}</div>
+              <div class="meta">发表日期：{{ articles4[0].releaseTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
+            </div>
+            <div class="img-wrap">
+              <img class="pic" :src="articles4[0].titleImg" alt="">
+            </div>
+          </div>
+          <ul class="list">
+            <template v-for="(item, i) in articles3">
+              <li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[12].form)">
+                <div class="des">{{ item.title }}</div>
+                <p class="date">{{ item.releaseTime }}</p>
+              </li>
+            </template>
+          </ul>
+        </template>
+      </div>
+    </div>
+
+    <div class="tools">
+      <div class="logo">
+        <img src="@/assets/images/logo.png" alt="">
+      </div>
+      <ul class="nav">
+        <li v-for="(item, i) in navs" :key="i" class="column" @click="toAnchor(item)">{{ item.name }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      navs: [],
+      articles: [],
+      articles1: [],
+      articles2: [],
+      articles3: [],
+      articles4: [],
+      curInd: 0,
+      curArticle: {},
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
+
+          // 获取文章列表
+          if (json[2].form.column.length) {
+            const { column, articleNum } = json[2].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 7))
+              this.curArticle = this.articles[0]
+            }).catch(err => {})
+          }
+          if (json[4].form.column.length) {
+            const { column, articleNum } = json[4].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              const articles = Util.removeTag(data.slice(0, articleNum || 11))
+              articles.forEach(e => {
+                // 把发布日期分割成年月和日，页面上要展示
+                if (e.releaseTime) {
+                  const date = e.releaseTime.split('-')
+                  e.date = date[2]
+                  e.month = date[0] + '/' + date[1]
+                }
+              })
+              this.articles1 = articles
+            }).catch(err => {})
+          }
+          if (json[6].form.column.length) {
+            const { column, articleNum } = json[6].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
+            }).catch(err => {})
+          }
+          if (json[8].form.column.length) {
+            const { column, articleNum } = json[8].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles3 = Util.removeTag(data.slice(0, articleNum || 6))
+            }).catch(err => {})
+          }
+          if (json[12].form.column.length) {
+            const { column, articleNum } = json[12].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles4 = Util.removeTag(data.slice(0, articleNum || 4))
+            }).catch(err => {})
+          }
+
+          // 获取页面的所有标题，展示到左侧导航
+          const navs = []
+          let id = 0
+          json.forEach((e, i) => {
+            if (i % 2 && e.form.title) navs.push({
+              id: ++id,
+              name: e.form.title
+            })
+          })
+          this.navs = navs
+
+          this.modules = json
+          this.carouselInterval()
+        }
+      }).catch(err => {})
+    },
+    // 自动轮播
+    carouselInterval() {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.curInd++
+        if (this.curInd > 3) this.curInd = 0
+        this.curArticle = this.articles[this.curInd] || {}
+      }, 5000)
+    },
+    // 手动轮播切换
+    switchCarousel(i) {
+      if (this.curInd !== i) {
+        this.curInd = i
+        this.curArticle = this.articles[this.curInd] || {}
+      }
+    },
+    // 左侧导航点击回调
+    toAnchor(e) {
+      const el = document.querySelector(`#part${e.id}`)
+      el && el.scrollIntoView()
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+
+.wrap {
+  /deep/ .el-carousel__container {
+    height: 100vh;
+  }
+  /deep/ .el-carousel__container {
+    height: 100vh;
+  }
+  .topImg {
+    height: 100vh;
+    img {
+      height: 100vh;
+    }
+  }
+}
+.block {
+  padding: 3rem 0;
+}
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid #ddd;
+  align-items: center;
+  h5 {
+    padding-left: .8rem;
+    font-size: 1.62rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 1;
+    border-left: 6px solid #2B96EF;
+  }
+  .sub {
+    font-size: .88rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #AFB7BF;
+  }
+  .more {
+    font-size: .64rem;
+    color: #666;
+    cursor: pointer;
+  }
+}
+.lg {
+  // width: 1505px;
+}
+/deep/.articles {
+  width: 50%;
+  .el-carousel__indicators--horizontal {
+    bottom: 20px;
+    left: 804px;
+  }
+}
+.banner-block {
+  background: url(../../assets/images/sfel/2.png) 0 0/cover no-repeat;
+
+}
+.sfel-banner {
+  display: flex;
+  cursor: pointer;
+  .pic {
+    transition: .5s;
+    &:hover {
+      transform: scale(1.3);
+    }
+  }
+  .right {
+    position: relative;
+    width: 50%;
+    padding: 50px 50px 30px;
+    background: #1583FF;
+    color: #fff;
+    h6 {
+      font-size: 1.34rem;
+    }
+    .des {
+      font-size: 1.02rem;
+    }
+    .meta {
+      font-size: 1.04rem;
+    }
+    &:hover {
+      background: #465f85;
+      h6, .des, .meta {
+        color: #fff;
+        transform: translateY(15px);
+      }
+    }
+  }
+  .inds {
+    position: absolute;
+    bottom: 40px;
+    left: 60px;
+    display: flex;
+    li {
+      width: 10px;
+      height: 10px;
+      margin-right: 12px;
+      background: #FFFFFF;
+      border-radius: 50%;
+      transition: .2s;
+      &.active {
+        width: 30px;
+        background: rgba(255,255,255,0.3);
+        border-radius: 5px;
+      }
+    }
+  }
+  h6 {
+    font-size: 1.3rem;
+    transition: .3s;
+  }
+  .des {
+    margin: 30px 0;
+    font-size: .9rem;
+    line-height: 24px;
+    transition: .3s;
+  }
+  .meta {
+    font-size: .8rem;
+    transition: .3s;
+  }
+}
+.card {
+  li {
+    .texts {
+      .des {
+        min-height: 3rem;
+      }
+    }
+  }
+}
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+  li {
+    width: calc((100% - 56px) / 3);
+    margin-right: 28px;
+    box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
+    border-radius: 6px;
+    transition: .3s;
+    background-color: #fff;
+    &:hover {
+      transform: scale(1.05);
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .pic {
+    width: 100%;
+    height: auto;
+  }
+  .texts {
+    padding: 2rem 1.5rem;
+  }
+  .meta {
+    font-size: .92rem;
+    color: #666;
+  }
+  .des {
+    margin: .5rem 0;
+    font-size: .88rem;
+    font-family: SFProDisplay;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.4rem;
+    -webkit-line-clamp: 2;
+  }
+  .arrow {
+    width: 1.8rem;
+  }
+}
+
+.notice {
+  background: url(../../assets/images/sfel/3.png) 0 0/cover no-repeat;
+}
+.shop-shows {
+  display: flex;
+  .left {
+    width: 50%;
+    margin-right: 1rem;
+    /deep/ .el-carousel__container {
+      height: 20.65rem;
+    }
+    .item {
+      position: relative;
+      height: 100%;
+      cursor: pointer;
+      .pic {
+        width: 100%;
+        height: 100%;
+        transition: .5s;
+      }
+      .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 20px;
+        font-size: .96rem;
+        color: #fff;
+        line-height: 3rem;
+        @include ellipsis;
+        background-color: rgba(0, 0, 0, 0.57);
+      }
+      &:hover {
+        .pic {
+          transform: scale(1.3);
+        }
+      }
+    }
+    .card-wrap {
+      display: flex;
+      margin-top: .9rem;
+      .cards {
+        flex: 1;
+      }
+      h6 {
+        @include mul-ellipsis(2);
+      }
+    }
+    .cards {
+      padding: 2.85rem 1rem;
+      background-color: #fff;
+      transition: .5s;
+      cursor: pointer;
+      &:hover {
+        transform: translateX(10px);
+      }
+      h6 {
+        margin-bottom: 1.2rem;
+        font-size: 1.08rem;
+        color: #48525E;
+      }
+      .a-line {
+        @include ellipsis;
+      }
+      .sum {
+        font-size: .9rem;
+        color: #6D7C8E;
+        @include ellipsis;
+      }
+      .date {
+        margin-top: 1.2rem;
+        font-size: .72rem;
+        color: #C4CCD7;
+      }
+    }
+    h6 {
+      font-size: 24px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 10px;
+      font-size: 16px;
+      color: #666;
+      line-height: 30px;
+    }
+  }
+  .right {
+    width: 50%;
+  }
+  .card-list {
+    li {
+      display: flex;
+      align-items: center;
+      padding: .95rem;
+      margin-bottom: .9rem;
+      background-color: #fff;
+      transition: .3s;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+    .releaseTime {
+      width: 4.4rem;
+      height: 4.4rem;
+      padding: .5rem 0 .8rem;
+      margin-right: 1.2rem;
+      text-align: center;
+    }
+    .d {
+      font-size: 1.9rem;
+      font-family: DINCondensed-Bold, DINCondensed;
+      font-weight: bold;
+      color: #333333;
+      line-height: 2.15rem;
+    }
+    .m {
+      font-size: 1.02rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 1rem;
+    }
+    .texts {
+      width: calc(100% - 110px);
+    }
+    h6 {
+      margin-bottom: .5rem;
+      font-size: 1.08rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1583FF;
+      @include ellipsis;
+    }
+    .des {
+      font-size: .9rem;
+      color: #666;
+      line-height: 1.2rem;
+      -webkit-line-clamp: 2;
+    }
+  }
+  .slide {
+    position: relative;
+    height: 24.4rem;
+    overflow: hidden;
+    cursor: pointer;
+    .pic {
+      width: 100%;
+      height: 100%;
+      transition: .5s;
+    }
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 .6rem;
+      line-height: 3rem;
+      font-size: .8rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      background-color: rgba(0, 0, 0, 0.57);
+    }
+    &:hover {
+      .pic {
+        transform: scale(1.3);
+      }
+    }
+  }
+}
+.conference {
+  background: url(../../assets/images/sfel/4.png) 0 0/cover no-repeat;
+  .shows {
+    display: flex;
+  }
+  .left {
+    position: relative;
+    width: 34.375rem;
+    height: auto;
+    margin-right: 20px;
+    cursor: pointer;
+    overflow: hidden;
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 .6rem;
+      line-height: 3rem;
+      font-size: .8rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      background-color: rgba(0, 0, 0, 0.57);
+    }
+    .pic {
+      transition: .5s;
+    }
+    &:hover {
+      .pic {
+        transform: scale(1.3);
+      }
+    }
+  }
+  .card-list {
+    width: 600px;
+    li {
+      display: flex;
+      align-items: center;
+      padding: 6px;
+      margin-bottom: 7px;
+      background-color: #fff;
+      cursor: pointer;
+      transition: .3s;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:hover {
+        transform: translateX(20px);
+      }
+    }
+    .pic {
+      width: 10.4375rem;
+      height: 10.4375rem;
+      margin-right: 1.8rem;
+    }
+    .texts {
+      width: calc(100% - 12.5rem);
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: .96rem;
+      color: #333;
+      @include ellipsis;
+    }
+    .sum {
+      margin-bottom: 6px;
+      font-size: .8rem;
+      color: #666;
+      @include ellipsis;
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      margin: .5rem 0;
+      font-size: .72rem;
+      @include ellipsis;
+    }
+    .icon {
+      margin-right: 5px;
+    }
+  }
+}
+
+.media {
+  background: #fff;
+  .media-wrap {
+    display: flex;
+  }
+  .left {
+    width: 55%;
+    margin-right: 1%;
+    .slides {
+      display: flex;
+      margin-bottom: 20px;
+    }
+    .item {
+      position: relative;
+      flex: 1;
+      height: 10rem;
+      overflow: hidden;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+        transition: .5s;
+      }
+      .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 1.35rem;
+        line-height: 2.5rem;
+        font-size: .8rem;
+        color: #FFFFFF;
+        @include ellipsis;
+        background-color: rgba(0, 0, 0, 0.49);
+      }
+      &:hover {
+        img {
+          transform: scale(1.3);
+        }
+      }
+    }
+    .list {
+      padding: 1.7rem 1.8rem;
+      background: #fff;
+      box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+      li {
+        margin-bottom: 2rem;
+        transition: .5s;
+        cursor: pointer;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
+      h6 {
+        margin-bottom: .85rem;
+        font-size: .88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #272727;
+        line-height: 1rem;
+        text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
+        @include ellipsis;
+      }
+      .des {
+        font-size: .9rem;
+        color: #666;
+        -webkit-line-clamp: 2;
+      }
+    }
+  }
+  .right {
+    width: 44%;
+    box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+    transition: .5s;
+    cursor: pointer;
+    .img-wrap {
+      width: 100%;
+      height: 21.1rem;
+      overflow: hidden;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      transition: .5s;
+    }
+    .texts {
+      padding: 2rem 1.4rem;
+    }
+    h6 {
+      font-size: .96rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #272727;
+      line-height: 1.95rem;
+      text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
+      @include ellipsis;
+    }
+    .des {
+      margin-top: 1rem;
+      font-size: .8rem;
+      color: #666;
+      -webkit-line-clamp: 2;
+    }
+    &:hover {
+      background: #005388;
+      h6, .des {
+        color: #fff;
+      }
+      img {
+        transform: scale(1.3);
+      }
+    }
+  }
+}
+.news {
+  background: url(../../assets/images/sfel/5.png) (0 504px)/auto no-repeat,
+              url(../../assets/images/sfel/6.png) (bottom right)/auto no-repeat;
+}
+.news {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    // width: calc((100% - 56px) / 3);
+    flex: 1;
+    padding: .55rem;
+    margin-right: 1.4rem;
+    color: #333;
+    background-color: #fff;
+    box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
+    border-radius: 10px;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:hover {
+      color: #fff;
+      background-color: #0252D9;
+    }
+  }
+  img {
+    width: 100%;
+    height: 24.05rem;
+  }
+  .texts {
+    padding: 0 .9rem 2.5rem;
+  }
+  h6 {
+    margin: 1.75rem 0 .6rem;
+    font-size: 1.05rem;
+    line-height: 1.65rem;
+  }
+  .des {
+    font-size: .8rem;
+    line-height: 1.3rem;
+  }
+}
+.program {
+  background: #fff;
+  .slide {
+    display: flex;
+    margin-bottom: .7rem;
+    cursor: pointer;
+  }
+  .texts {
+    width: 51%;
+    padding: 2.8rem;
+    background: #FBFBFB;
+    h6 {
+      font-size: 1.04rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+    }
+    .des {
+      margin: 1.75rem 0 1.25rem;
+      font-size: 1rem;
+      color: #666;
+      line-height: 1.6rem;
+    }
+    .meta {
+      font-size: .72rem;
+      color: #666;
+    }
+  }
+  .img-wrap {
+    width: 49%;
+    height: auto;
+    overflow: hidden;
+  }
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: .5s;
+  }
+  &:hover {
+    .pic {
+      transform: scale(1.3);
+    }
+  }
+  .list {
+    display: flex;
+    li {
+      // width: calc((100% - 28px) / 3);
+      flex: 1;
+      padding: 1.8rem 1.1rem;
+      margin-right: .7rem;
+      background: url(../../assets/images/sfel/7.png)  no-repeat center;
+      background-size: 100% 100%;
+      transition: .5s;
+      cursor: pointer;
+      &:nth-child(2) {
+        background-image: url(../../assets/images/sfel/8.png);
+      }
+      &:nth-child(3) {
+        margin-right: 0;
+        background-image: url(../../assets/images/sfel/9.png);
+      }
+      &:hover {
+        transform: translateY(20px);
+      }
+    }
+    .des {
+      margin-bottom: 1.5rem;
+      font-size: 1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 30px;
+      word-break: break-all;
+    }
+    .date {
+      font-size: .72rem;
+      font-family: LaoSangamMN;
+      color: #FFFFFF;
+    }
+  }
+}
+.tools {
+  z-index: 9;
+  position: fixed;
+  top: 12.5rem;
+  left: 0;
+  width: 9.4rem;
+  text-align: center;
+  .logo {
+    padding: 15px 0;
+    background: #0C60BE;
+    box-shadow: 0px 0px 20px 0px rgba(184,191,200,0.3);
+  }
+  .nav {
+    li {
+      padding: 0 10px;
+      font-size: .88rem;
+      line-height: 2.5rem;
+      color: #fff;
+      background-color: #1D1D1D;
+      cursor: pointer;
+      @include ellipsis;
+      &.active {
+        background-color: #1583FF;
+      }
+      &:hover {
+        background-color: #1583FF;
+      }
+    }
+  }
+}
+@media (max-width: 1520px) {
+  .conference .card-list {
+    width: 734px;
+    .texts {
+      width: 460px;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .tools {
+    display: none;
+  }
+  .sfel-banner{
+    flex-direction: column;
+    .newBox{
+      width: 100% !important;
+    }
+    .right{
+      margin-top: 10px;
+      width: 100%;
+      height: 410px;
+    }
+  }
+  .card {
+    flex-direction: column;
+    li {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
+  .shop-shows{
+    flex-direction: column;
+    .left{
+       width: 100%;
+    }
+    .right{
+      width: 100%;margin-top: 20px;
+    }
+    
+  }
+  .shows{
+    flex-direction: column;
+    .left{
+      width: 100%;
+    }
+    .card-list{
+      width: 100%;margin-top: 20px;
+      li {
+        flex-direction: column;
+        .pic{
+          width: 100% !important;
+          margin-right: 0;
+        }
+        .texts{
+          margin-top: 20px;
+          width: 100%;
+        }
+      }
+    }
+  }
+  .media-wrap{
+    flex-direction: column;
+    .left{
+      width: 100%;
+    }
+    .right {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+  .slide , .list{
+    flex-direction: column;
+    .texts , .img-wrap{
+      width: 100%;
+    }
+  }
+  .list {
+    li { 
+      width: 100% !important; margin-top: 20px;
+    }
+  }
+  .slides{
+    div{
+      flex: 1;
+    }
+  }
+  #part6 {
+    .slide{
+      .texts{
+        height: auto;
+      }
+    }
+  }
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+  .block {
+    padding: 2rem 0;
+  }
+  .shop-shows {
+    .slide {
+      height: 18rem;
+    }
+  }
+  .wrap {
+    /deep/ .el-carousel {
+      height: 18rem;
+      img{
+        height: 18rem;
+      }
+    }
+    /deep/ .el-carousel__container{
+        height: 18rem !important;
+      }
+  }
+  .sfel-banner {
+    .newBox{
+      height: 20rem !important;
+    }
+    .right {
+      padding: 1.25rem;
+      height: 20rem;
+    }
+  }
+  .conference {
+    .left {
+      height: 20rem;
+    }
+  }
+  .card-list  {
+    li {
+      .pic {
+        height: 15rem !important;
+      }
+    }
+  }
+  .slides {
+    .item { 
+      height: 10rem !important;
+    }
+  }
+  .img-wrap {
+    height: 20rem !important;
+  }
+  .news{
+    .wow {
+      img {
+        height: 20rem;
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 12rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 12rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 12rem;
+    img{
+      height: 12rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: auto;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          // height: auto !important;
+          height: 8rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: auto;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          // height: auto !important;
+          height: 8rem;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: auto;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        margin-top: 1.25rem;
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        .left  {
+          height: auto;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        flex-direction: row;
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          margin-top: 0;
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        flex-direction: row;
+        margin-top: 1.25rem;
+        li {
+          width: calc((100% - 56px) / 3);
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        flex-direction: row;
+        .left {
+          width: 50%;
+        }
+        .right  {
+          width: 50%;
+          margin-top: 0;
+        }
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        flex-direction: row;
+        .left  {
+          width: 48%;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          width: 50%;
+          margin-top: 0;
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        .right  {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        flex-direction: row;
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        flex-direction: row;
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+      .list {
+        flex-direction: row;
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        flex-direction: row;
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          margin-top: 0;
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        flex-direction: row;
+        margin-top: 1.25rem;
+        li {
+          width: calc((100% - 56px) / 3);
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        flex-direction: row;
+        .left {
+          width: 50%;
+        }
+        .right  {
+          width: 50%;
+          margin-top: 0;
+        }
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        flex-direction: row;
+        .left  {
+          width: 48%;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          width: 50%;
+          margin-top: 0;
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        flex-direction: row;
+        .right  {
+          margin-top: 0;
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        flex-direction: row;
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        flex-direction: row;
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+      .list {
+        flex-direction: row;
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+   /deep/ .el-carousel{
+    height: 15rem;
+   }
+   /deep/ .el-carousel__container {
+    height: 15rem !important;
+   }
+   /deep/ .el-carousel__item{
+    height: 15rem;
+    img{
+      height: 15rem;
+    }
+   }
+  }
+  .block  {
+    .inner {
+      width: 90%;
+      .title  {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        h5 {
+          font-size: 1rem;
+          span {
+            font-size: .75rem;
+          }
+        }
+        span {
+          font-size: .85rem;
+        }
+      }
+      .sfel-banner {
+        flex-direction: row;
+        .newBox {
+          height: auto !important;
+        }
+        .right {
+          margin-top: 0;
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all
+          }
+          .des {
+            font-size: .9rem;
+            margin: 1rem 0;
+          }
+          .meta {
+            font-size: .8rem;
+          }
+        }
+      }
+      .card {
+        flex-direction: row;
+        margin-top: 1.25rem;
+        li {
+          width: calc((100% - 56px) / 3);
+          .pic {
+            height: auto;
+          }
+        }
+      }
+      .shop-shows{
+        flex-direction: row;
+        .left {
+          width: 50%;
+        }
+        .right  {
+          width: 50%;
+          margin-top: 0;
+        }
+        .slide {
+          height: auto;
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+      .shows {
+        flex-direction: row;
+        .left  {
+          width: 48%;
+          .text {
+            line-height: 2rem;
+            font-size: .95rem;
+          }
+        }
+        .card-list  {
+          width: 50%;
+          margin-top: 0;
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+      .media-wrap {
+        flex-direction: row;
+        .right  {
+          margin-top: 0;
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+      .news {
+        flex-direction: row;
+        li {
+          img {
+            height: auto ;
+          }
+        }
+      }
+      .slide {
+        flex-direction: row;
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+      .list {
+        flex-direction: row;
+      }
+    }
+  }
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/speech/index.vue b/src/pages/speech/index.vue
new file mode 100644
index 0000000..9e48fc8
--- /dev/null
+++ b/src/pages/speech/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="wrap">
+    <!-- 院长致辞 -->
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <img :src="modules[1].form.pic"
+             alt=""
+             class="pic">
+        <div class="texts">
+          <h6 v-html="modules[1].form.title"></h6>
+          <p class="en">{{ modules[1].form.subTitle }}</p>
+          <div class="text"
+               v-html="modules[1].form.des"></div>
+          <div class="sign">
+            <img :src="modules[2].form.pic"
+                 alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    };
+  },
+  mounted () {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.block {
+    background: url(http://10.10.11.7/images/speech/2.png) no-repeat;
+}
+.inner {
+    display: flex;
+    align-items: flex-start;
+    .pic {
+        max-width: 480px;
+        margin-top: 2rem;
+    }
+    .texts {
+        margin-left: 113px;
+    }
+    h6 {
+        position: relative;
+        font-size: 2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 600;
+        color: #333;
+    }
+    .en {
+        margin: -25px 0 40px;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: rgba(216, 216, 216, 0.34);
+    }
+    .text {
+        font-size: 1rem;
+        color: #333;
+        line-height: 1.6;
+    }
+    .sign {
+        margin-top: 20px;
+        text-align: right;
+        img {
+            max-width: 150px;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .inner {
+        width: 95%;
+    }
+}
+@media (max-width: 920px) {
+    .inner {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .pic {
+            max-width: 100%;
+        }
+        .texts {
+            margin: 20px 0 0;
+        }
+    }
+}
+</style>
diff --git a/src/pages/talent/index.vue b/src/pages/talent/index.vue
new file mode 100644
index 0000000..f9e2a26
--- /dev/null
+++ b/src/pages/talent/index.vue
@@ -0,0 +1,656 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+        <p class="banner-des">{{ modules[0].form.des }}</p>
+      </div>
+    </div>
+
+    <div class="block talent">
+      <div class="inner">
+        <div class="item wow bounceInLeft"
+             data-wow-delay="0.5s"
+             :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+             @click="openLink(modules[1].form)">
+          <div class="img-wrap">
+            <img class="pic"
+                 :src="modules[1].form.pic"
+                 alt="">
+          </div>
+          <div class="texts">
+            <h6>{{ modules[1].form.title }}</h6>
+            <div class="des">{{ modules[1].form.des }}</div>
+          </div>
+        </div>
+        <div class="item wow bounceInRight"
+             data-wow-delay="0.6s"
+             :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+             @click="openLink(modules[2].form)">
+          <div class="img-wrap">
+            <img class="pic"
+                 :src="modules[2].form.pic"
+                 alt="">
+          </div>
+          <div class="texts">
+            <h6>{{ modules[2].form.title }}</h6>
+            <div class="des">{{ modules[2].form.des }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="style">
+      <h6 class="wow fadeInUp"
+          v-html="modules[3].form.title"></h6>
+      <el-carousel :interval="4000"
+                   type="card"
+                   height="30rem">
+        <template v-for="(item, i) in modules[4].list">
+          <el-carousel-item v-if="item.isEnable"
+                            :key="i">
+            <div class="item"
+                 @click="openLink(item)">
+              <img :src="item.pic"
+                   alt="">
+              <p class="text">{{ item.title }}</p>
+            </div>
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+    </div>
+
+    <div class="block intro">
+      <div class="inner">
+        <div class="item wow fadeInDown"
+             data-wow-delay="0.1s">
+          <div class="img-wrap">
+            <img class="pic"
+                 :src="modules[5].form.pic"
+                 alt="">
+          </div>
+          <div class="texts">
+            <p class="type">{{ modules[5].form.subTitle }}</p>
+            <h6>{{ modules[5].form.title }}</h6>
+            <div class="des">{{ modules[5].form.des }}</div>
+            <el-button v-if="isLink(modules[5].form.link.linkName)"
+                       type="primary"
+                       @click="openLink(modules[5].form)">{{ $t('column.seeMore') }}</el-button>
+          </div>
+        </div>
+        <div class="item wow fadeInDown"
+             data-wow-delay="0.3s">
+          <div class="img-wrap">
+            <img class="pic"
+                 :src="modules[6].form.pic"
+                 alt="">
+          </div>
+          <div class="texts">
+            <p class="type">{{ modules[6].form.subTitle }}</p>
+            <h6>{{ modules[6].form.title }}</h6>
+            <div class="des">{{ modules[6].form.des }}</div>
+            <el-button v-if="isLink(modules[6].form.link.linkName)"
+                       type="primary"
+                       @click="openLink(modules[6].form)">{{ $t('column.seeMore') }}</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: []
+    }
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background: #f8f9fb;
+}
+.single-banner {
+    .banner-img {
+        height: 21.6rem;
+    }
+    .texts {
+        h6 {
+            font-size: 2.16rem;
+            margin-bottom: 0.95rem;
+        }
+        .banner-des {
+            font-size: 1.08rem;
+        }
+    }
+}
+.block {
+    padding: 3.85rem 0;
+}
+.talent {
+    .inner {
+        width: 1200px;
+        max-width: 1504px;
+    }
+    .item {
+        display: flex;
+        padding: 2.1rem;
+        margin-bottom: 1.8rem;
+        color: #333;
+        background: #fff;
+        transition: 0.5s;
+        &:nth-child(even) {
+            justify-content: space-between;
+            flex-direction: row-reverse;
+            .texts {
+                padding-left: 0;
+            }
+        }
+        &:hover {
+            color: #fff;
+            background: #005388;
+            .pic {
+                transform: scale(1.1);
+            }
+        }
+    }
+    .img-wrap {
+        width: 32rem;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    .texts {
+        width: 44.375rem;
+        padding: 3.9rem 3.6rem 1.5rem 4rem;
+    }
+    h6 {
+        margin-bottom: 1.2rem;
+        font-size: 1.92rem;
+        font-family: PingFangSC-Light, PingFang SC;
+        font-weight: 300;
+    }
+    .des {
+        font-size: 0.88rem;
+        line-height: 1.65rem;
+        -webkit-line-clamp: 5;
+    }
+}
+.style {
+    width: 1200px;
+    margin: 0 auto;
+    h6 {
+        margin-bottom: 2.95rem;
+        font-size: 1.92rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        text-align: center;
+        color: #333333;
+    }
+    .item {
+        position: relative;
+        width: 100%;
+        height: 25.5rem;
+    }
+    img {
+        width: 100%;
+        height: 100%;
+    }
+    .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 1.5rem;
+        line-height: 2.72rem;
+        font-size: 0.96rem;
+        color: #fff;
+        background: rgba(0, 0, 0, 0.38);
+    }
+}
+.intro {
+    .inner {
+        width: 1200px;
+        max-width: 1504px;
+    }
+    .item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 36px;
+        color: #333;
+        background: #fff;
+        transition: 0.5s;
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+        }
+        &:hover {
+            color: #fff;
+            background: #465f85;
+            .pic {
+                transform: scale(1.1);
+            }
+        }
+    }
+    .img-wrap {
+        height: auto;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    .texts {
+        width: 45%;
+        padding: 0 2.9rem;
+    }
+    .type {
+        font-size: 0.88rem;
+    }
+    h6 {
+        margin: 1rem 0;
+        font-size: 1.28rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+    }
+    .des {
+        margin-bottom: 1.5rem;
+        font-size: 0.9rem;
+        line-height: 1.5rem;
+    }
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+    .single-banner {
+        .texts {
+            left: 200px;
+            .banner-title {
+                font-size: 2.2rem;
+            }
+        }
+    }
+    .block {
+        padding: 30px 0;
+        .inner {
+            .item {
+                flex-direction: column;
+                padding: 1.5rem;
+            }
+            .texts {
+                width: 100%;
+                padding: 1.5rem;
+            }
+        }
+    }
+    .style {
+        /deep/ .el-carousel__container {
+            height: 27rem !important;
+        }
+        .wow {
+            margin-bottom: 2rem;
+        }
+        .item {
+            height: 25rem;
+        }
+    }
+}
+
+@media (max-width: 320px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                .img-wrap {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+        .item {
+            height: 13rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                .img-wrap {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+        .item {
+            height: 13rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                .img-wrap {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+        .item {
+            height: 13rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                .img-wrap {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+        .item {
+            height: 13rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                .img-wrap {
+                    width: 100%;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 13rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 13rem !important;
+        }
+        .item {
+            height: 13rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                width: 100%;
+                flex-direction: row;
+                .img-wrap {
+                    width: 60%;
+                    height: auto;
+                }
+                .texts {
+                    width: 80%;
+                    margin-left: 1.5rem;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 18rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 18rem !important;
+        }
+        .item {
+            height: 18rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .single-banner {
+        .banner-img {
+            height: 12rem;
+        }
+        .texts {
+            left: 2rem;
+            top: 3rem;
+            .banner-title {
+                font-size: 1.5rem;
+            }
+            .banner-des {
+                font-size: 1rem;
+            }
+        }
+    }
+    .block {
+        .inner {
+            width: 100%;
+            .item {
+                width: 100%;
+                flex-direction: row;
+                .img-wrap {
+                    width: 60%;
+                    height: auto;
+                }
+                .texts {
+                    width: 80%;
+                    margin-left: 1.5rem;
+                }
+            }
+        }
+    }
+    .style {
+        width: 100%;
+        /deep/ .el-carousel {
+            height: 20rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 20rem !important;
+        }
+        .item {
+            height: 20rem;
+            .text {
+                line-height: 1.5rem;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/talentCenter/index.vue b/src/pages/talentCenter/index.vue
new file mode 100644
index 0000000..d67d2d6
--- /dev/null
+++ b/src/pages/talentCenter/index.vue
@@ -0,0 +1,631 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+    <div class="content">
+      <div class="article">
+        <div class="left">
+          <h6 class="talent-title">{{ modules[1].form.title }}</h6>
+          <div class="talent-text"
+               v-html="modules[1].form.des"></div>
+          <ul class="recruit">
+            <li>
+              <img class="pic"
+                   :src="modules[2].form.pic"
+                   alt="">
+              <div class="texts">
+                <div class="flex j-between a-center">
+                  <h6 class="c-title">{{ modules[3].form.title }}</h6>
+                  <div v-if="isLink(modules[3].form.link.linkName)"
+                       class="more"
+                       @click="openLink(modules[3].form)">查看更多 ></div>
+                </div>
+                <div class="des"
+                     v-html="modules[3].form.des"></div>
+                <p class="hot">热门岗位</p>
+                <div class="labels">
+                  <template v-for="(item, i) in modules[4].list">
+                    <p v-if="item.isEnable"
+                       :key="i"
+                       class="label">{{ item.title }}</p>
+                  </template>
+                </div>
+              </div>
+            </li>
+            <li>
+              <img class="pic"
+                   :src="modules[5].form.pic"
+                   alt="">
+              <div class="texts">
+                <div class="flex j-between a-center">
+                  <h6 class="c-title">{{ modules[6].form.title }}</h6>
+                  <div v-if="isLink(modules[6].form.link.linkName)"
+                       class="more"
+                       @click="openLink(modules[6].form)">查看更多 ></div>
+                </div>
+                <div class="des"
+                     v-html="modules[6].form.des"></div>
+                <p class="hot">热门岗位</p>
+                <div class="labels">
+                  <template v-for="(item, i) in modules[7].list">
+                    <p v-if="item.isEnable"
+                       :key="i"
+                       class="label">{{ item.title }}</p>
+                  </template>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul class="notice">
+            <li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }"
+                @click="openLink(modules[8].form)">
+              <img class="pic"
+                   :src="modules[8].form.pic"
+                   alt="">
+              <p class="text">{{ modules[8].form.title }}</p>
+            </li>
+            <li :class="{ 'cursor-pointer': isLink(modules[9].form.link.linkName) }"
+                @click="openLink(modules[8].form)">
+              <img class="pic"
+                   :src="modules[9].form.pic"
+                   alt="">
+              <p class="text">{{ modules[9].form.title }}</p>
+            </li>
+          </ul>
+        </div>
+        <div class="right">
+          <el-tree class="column"
+                   ref="column"
+                   :data="columns"
+                   highlight-current
+                   :expand-on-click-node="false"
+                   :props="defaultProps"
+                   node-key="id"
+                   @node-click="columnTo"></el-tree>
+
+          <p class="l-title">{{$t('column.hot')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in hots"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+
+          <p class="l-title">{{$t('column.latestNews')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in news"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import articleMixins from '@/mixins/article';
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, articleMixins],
+  data () {
+    return {
+      columnId: '',
+      form: {},
+      columns: [],
+      defaultProps: {
+        value: 'id',
+        label: 'columnName'
+      },
+      news: [],
+      hots: []
+    }
+  },
+  mounted () {
+    this.getColumn()
+    this.getArticle()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
+    },
+    // 资讯
+    getColumn () {
+      this.$post(this.api.listWithTreeMenuVisible, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnName: '',
+        templateId: '',
+        typeId: '',
+        isSort: 1
+      }).then(({ data }) => {
+        this.columns = data
+        this.getInfo()
+      }).catch(err => { })
+
+      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
+        this.hots = Util.removeTag(data)
+      }).catch(err => { })
+    },
+    // 最新资讯
+    getArticle () {
+      this.$post(this.api.newlyPublishedArticles, {
+        pageNum: 1,
+        pageSize: 5,
+        siteId: this.$route.query.siteId || this.$store.state.content.site
+      }).then(({ data }) => {
+        this.news = Util.removeTag(data.records)
+      }).catch(res => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background-color: #f9fafa;
+}
+.content {
+    width: 1400px;
+}
+.article {
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 66%;
+        .talent-title {
+            padding-bottom: 10px;
+            font-size: 1.2rem;
+            color: #666;
+            border-bottom: 1px solid #eaeef2;
+        }
+        .talent-text {
+            margin: 20px 0;
+            font-size: 1.1rem;
+            color: #333;
+            line-height: 28px;
+            p {
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .recruit {
+        li {
+            display: flex;
+            padding: 20px;
+            margin-bottom: 24px;
+            background-color: #fff;
+        }
+        .pic {
+            width: 410px;
+            height: 250px;
+            margin-right: 20px;
+        }
+        .c-title {
+            font-size: 1.2rem;
+            columns: #333;
+        }
+        .more {
+            font-size: 0.8rem;
+            color: #0648a8;
+            cursor: pointer;
+        }
+        .des {
+            margin: 20px 0;
+            font-size: 1rem;
+            color: #666;
+            line-height: 22px;
+        }
+        .hot {
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            color: #333;
+        }
+        .labels {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .label {
+            padding: 5px 15px;
+            margin: 0 15px 15px 0;
+            font-size: 1rem;
+            border-radius: 22px;
+            border: 1px solid #666;
+        }
+    }
+    .notice {
+        display: flex;
+        li {
+            position: relative;
+            width: calc((100% - 20px) / 2);
+            height: 300px;
+            padding: 20px;
+            background-color: #fff;
+        }
+        .pic {
+            width: 100%;
+            height: 100%;
+        }
+        .text {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: calc(100% - 40px);
+            font-size: 1.6rem;
+            line-height: 66px;
+            text-align: center;
+            color: #fff;
+            background: rgba(32, 57, 81, 0.68);
+        }
+    }
+    .right {
+        width: 20%;
+    }
+    .column {
+        width: 100%;
+        margin-bottom: 25px;
+    }
+    /deep/.el-tree-node__content {
+        height: 44px;
+        background-color: #e5edf8;
+        border-bottom: 2px solid #fff;
+    }
+    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        color: #fff;
+        background-color: #0f5698;
+    }
+    .list {
+        margin-bottom: 20px;
+        li {
+            padding: 16px 0;
+            border-bottom: 1px solid #d8d8d8;
+        }
+        .text {
+            margin-bottom: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            &:hover {
+                color: $main-color;
+            }
+        }
+        .date {
+            font-size: 12px;
+            color: #999;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .content {
+        width: 98%;
+    }
+    .article {
+        flex-direction: column;
+        .left,
+        .right {
+            width: 100%;
+        }
+        .left {
+            margin-bottom: 30px;
+        }
+    }
+}
+
+@media (min-width: 280px) and (max-width: 750px) {
+    .article {
+        .recruit {
+            li {
+                flex-direction: column;
+            }
+            .pic {
+                width: 100%;
+                margin-bottom: 10px;
+            }
+        }
+        .notice {
+            flex-direction: column;
+            li {
+                width: 100%;
+            }
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .content {
+        .article {
+            flex-direction: column;
+            .left {
+                width: 100%;
+                .recruit {
+                    li {
+                        flex-direction: column;
+                        .pic {
+                            width: 100%;
+                        }
+                        .texts {
+                            margin-top: 0.8rem;
+                        }
+                    }
+                }
+                .notice {
+                    flex-direction: column;
+                    li {
+                        width: 100%;
+                    }
+                }
+            }
+            .right {
+                width: 100%;
+                .el-tree {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+@media (max-width: 320px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 7rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 13rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 13rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 15rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 7rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 15rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 15rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 18rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 10rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 18rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 18rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 20rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 12rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 22rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 22rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 22rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 14rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 26rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 26rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 26rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 16rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 30rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 30rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 30rem;
+            }
+            .texts {
+                left: 3rem;
+                top: 18rem;
+            }
+        }
+    }
+    .content {
+        .article {
+            .left {
+                .recruit {
+                    li {
+                        .pic {
+                            height: 35rem;
+                        }
+                    }
+                }
+                .notice {
+                    li {
+                        height: auto;
+                        .pic {
+                            height: 35rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/talentCentre/index.vue b/src/pages/talentCentre/index.vue
new file mode 100644
index 0000000..5949e5f
--- /dev/null
+++ b/src/pages/talentCentre/index.vue
@@ -0,0 +1,340 @@
+<template>
+  <!-- 人才中心 -->
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+    <div class="content">
+      <div class="article">
+        <div class="left">
+          <h6 class="talent-title">{{ modules[1].form.title }}</h6>
+          <div class="talent-text"
+               v-html="modules[1].form.des"></div>
+          <ul class="people">
+            <li>
+              <img class="pic"
+                   :src="modules[2].form.pic"
+                   alt="">
+              <div class="texts">
+                <h6>{{ modules[2].form.title }}</h6>
+                <div class="line"></div>
+                <div class="text"
+                     v-html="modules[2].form.des"></div>
+                <img v-if="isLink(modules[2].form.link.linkName)"
+                     class="arrow"
+                     src="@/assets/images/arrow.png"
+                     alt=""
+                     @click="openLink(modules[2].form)">
+              </div>
+            </li>
+            <li>
+              <img class="pic"
+                   :src="modules[3].form.pic"
+                   alt="">
+              <div class="texts">
+                <h6>{{ modules[3].form.title }}</h6>
+                <div class="line"></div>
+                <div class="text"
+                     v-html="modules[3].form.des"></div>
+                <img v-if="isLink(modules[3].form.link.linkName)"
+                     class="arrow"
+                     src="@/assets/images/arrow.png"
+                     alt=""
+                     @click="openLink(modules[3].form)">
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="right">
+          <el-tree class="column"
+                   ref="column"
+                   :data="modules[4].list"
+                   highlight-current
+                   :expand-on-click-node="false"
+                   :props="defaultProps"
+                   node-key="id"
+                   @node-click="columnClick"></el-tree>
+
+          <p class="l-title">人才资讯</p>
+          <ul class="list">
+            <li v-for="(item, i) in articles"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+
+          <p class="l-title">{{$t('column.hot')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in hots"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+
+          <p class="l-title">{{$t('column.latestNews')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in news"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import articleMixins from '@/mixins/article';
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, articleMixins],
+  data () {
+    return {
+      columnId: '',
+      form: {},
+      defaultProps: {
+        value: 'id',
+        label: 'title'
+      },
+      articles: [],
+      news: [],
+      hots: []
+    }
+  },
+  mounted () {
+    this.getColumn()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+
+          json[4].list = json[4].list.filter(e => e.isEnable)
+          json[4].list.unshift({
+            title: '人才中心'
+          })
+          json[4].list.forEach((e, i) => {
+            e.id = i
+          })
+          this.modules = json
+          this.$nextTick(e => {
+            this.$refs.column.setCurrentKey(0)
+          })
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+
+          // 获取文章列表
+          const { column } = json[5].form
+          if (column.length) {
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, 5))
+            }).catch(err => { })
+          }
+        }
+      }).catch(err => { })
+    },
+    columnClick (row) {
+      this.openLink(row)
+      console.log("🚀 ~ file: index.vue:126 ~ columnClick ~ row:", row)
+
+    },
+    // 资讯
+    getColumn () {
+      this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
+        this.hots = Util.removeTag(data)
+      }).catch(err => { })
+
+      this.$post(this.api.newlyPublishedArticles, {
+        pageNum: 1,
+        pageSize: 5,
+        siteId: this.site
+      }).then(({ data }) => {
+        this.news = Util.removeTag(data.records)
+      }).catch(res => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background-color: #fff;
+}
+.content {
+    width: 1200px;
+}
+.article {
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 75%;
+        .talent-title {
+            padding-bottom: 10px;
+            font-size: 1.2rem;
+            color: #666;
+            border-bottom: 1px solid #eaeef2;
+        }
+        .talent-text {
+            margin: 20px 0;
+            font-size: 1.1rem;
+            color: #333;
+            line-height: 28px;
+            p {
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .people {
+        margin-top: 4rem;
+        li {
+            position: relative;
+            height: 433px;
+            margin-bottom: 2rem;
+            &:nth-child(even) {
+                .texts {
+                    left: 50px;
+                    right: auto;
+                    background: rgba(255, 255, 255, 0.43);
+                }
+            }
+        }
+        .pic {
+            width: 100%;
+            height: 100%;
+        }
+        .texts {
+            position: absolute;
+            top: 60px;
+            right: 50px;
+            width: 380px;
+            padding: 50px 25px;
+            background: rgba(243, 251, 255, 0.82);
+        }
+        h6 {
+            font-size: 1.2rem;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #2a4b65;
+        }
+        .line {
+            width: 93px;
+            height: 1px;
+            margin: 1rem 0;
+            background: #3e6473;
+        }
+        .text {
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #2a4b65;
+            line-height: 1.6;
+        }
+    }
+    .right {
+        width: 20%;
+    }
+    .column {
+        width: 100%;
+        margin-bottom: 25px;
+    }
+    /deep/.el-tree-node__content {
+        height: 44px;
+        background-color: #e5edf8;
+        border-bottom: 2px solid #fff;
+    }
+    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        color: #fff;
+        background-color: #0f5698;
+    }
+    .list {
+        margin-bottom: 20px;
+        li {
+            padding: 16px 0;
+            border-bottom: 1px solid #d8d8d8;
+        }
+        .text {
+            margin-bottom: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            &:hover {
+                color: $main-color;
+            }
+        }
+        .date {
+            font-size: 12px;
+            color: #999;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .content {
+        width: 90%;
+    }
+    .article {
+        flex-direction: column;
+        .left {
+            width: 100%;
+            .recruit {
+                li {
+                    flex-direction: column;
+                    .pic {
+                        width: 100%;
+                    }
+                    .texts {
+                        margin-top: 0.8rem;
+                    }
+                }
+            }
+            .notice {
+                flex-direction: column;
+                li {
+                    width: 100%;
+                }
+            }
+        }
+        .right {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 480px) {
+    .article {
+        .left {
+            .people {
+                li {
+                    .texts {
+                        left: 10px;
+                        right: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/team/index.vue b/src/pages/team/index.vue
new file mode 100644
index 0000000..747538d
--- /dev/null
+++ b/src/pages/team/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="wrap p-b-30">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="left">
+        <ul class="list">
+          <li v-for="(item, i) in modules[1].list"
+              :key="i"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt=""
+                 class="pic">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <p class="job">{{ item.subTitle }}</p>
+              <div class="text"
+                   v-html="item.des"></div>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <RightColumns />
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import WOW from 'wow.js'
+import RightColumns from '@/components/rightColumns'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    }
+  },
+  components: {
+    RightColumns
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => { });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.content {
+    display: flex;
+    width: 1200px;
+    justify-content: space-between;
+    .left {
+        width: calc(100% - 300px);
+    }
+    .list {
+        li {
+            display: flex;
+            align-items: center;
+            padding-bottom: 30px;
+            margin-bottom: 30px;
+            border-bottom: 1px solid #ddd;
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+        .pic {
+            width: 224px;
+            height: 268px;
+            margin-right: 25px;
+        }
+        h6 {
+            font-size: 1.2rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+        }
+        .job {
+            margin: 16px 0;
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #333;
+        }
+        .text {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #333;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .content {
+        width: 95%;
+        flex-direction: column;
+        .left,
+        .right {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 640px) {
+    .content {
+        .list {
+            li {
+                flex-direction: column;
+            }
+            .pic {
+                margin: 0 0 20px 0;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/userSharing/index.vue b/src/pages/userSharing/index.vue
new file mode 100644
index 0000000..c10f8bf
--- /dev/null
+++ b/src/pages/userSharing/index.vue
@@ -0,0 +1,563 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+        <p class="banner-des">{{ modules[0].form.des }}</p>
+      </div>
+    </div>
+
+    <div class="block share">
+      <div class="inner">
+        <div class="left">
+          <h6 class="wow fadeInUp"
+              v-html="modules[1].form.title"></h6>
+          <p class="en wow fadeInUp"
+             data-wow-delay="0.5s">USERS SHARE</p>
+          <div class="des wow fadeInUp"
+               data-wow-delay="0.8s">{{ modules[1].form.des }}</div>
+        </div>
+        <img class="pic wow bounceInRight"
+             data-wow-delay="0.8s"
+             src="@/assets/images/userSharing/1.png"
+             alt="">
+        <div class="card wow bounceInLeft"
+             data-wow-delay="0.8s">
+          <p class="title">{{ modules[1].form.subTitle }}</p>
+          <p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <ul class="group">
+        <li class="wow bounceInDown"
+            :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+            @click="openLink(modules[2].form)">
+          <img src="@/assets/images/userSharing/2.png"
+               alt="">
+          <h6>{{ modules[2].form.title }}</h6>
+          <div class="des">{{ modules[2].form.des }}</div>
+        </li>
+        <li class="wow bounceInDown"
+            data-wow-delay="0.1s"
+            :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+            @click="openLink(modules[3].form)">
+          <img src="@/assets/images/userSharing/3.png"
+               alt="">
+          <h6>{{ modules[3].form.title }}</h6>
+          <div class="des">{{ modules[3].form.des }}</div>
+        </li>
+        <li class="wow bounceInDown"
+            data-wow-delay="0.2s"
+            :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
+            @click="openLink(modules[4].form)">
+          <img src="@/assets/images/userSharing/4.png"
+               alt="">
+          <h6>{{ modules[4].form.title }}</h6>
+          <div class="des">{{ modules[4].form.des }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      routes: []
+    }
+  },
+  mounted () {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.single-banner {
+    .banner-img {
+        height: 21.6rem;
+    }
+    .texts {
+        h6 {
+            font-size: 2.16rem;
+            margin-bottom: 0.95rem;
+        }
+        .banner-des {
+            font-size: 0.96rem;
+        }
+    }
+}
+.block {
+    padding: 3.85rem 0;
+}
+.share {
+    position: relative;
+    .inner {
+        display: flex;
+    }
+    .left {
+        width: 40%;
+    }
+    h6 {
+        position: relative;
+        font-size: 1.76rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+    }
+    .en {
+        margin-top: 0;
+        font-size: 1.28rem;
+        font-family: AppleSystemUIFont;
+        color: #e4e4e4;
+    }
+    .des {
+        margin-top: 25px;
+        font-size: 0.81rem;
+        color: #333;
+        line-height: 1.75rem;
+        -webkit-line-clamp: 5;
+    }
+    .pic {
+        width: 60%;
+        height: auto;
+        border-top-left-radius: 20px;
+    }
+    .card {
+        position: absolute;
+        bottom: 5.2rem;
+        left: 0;
+        width: 66.75rem;
+        padding: 1.875rem 0 1.875rem 21.5%;
+        background: #7bacc4;
+        border-radius: 0px 100px 0px 0px;
+        opacity: 0.88;
+    }
+    .title {
+        margin-bottom: 0.625rem;
+        font-size: 1.44rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #fff;
+    }
+    .en-text {
+        font-size: 1.04rem;
+        font-family: AppleSystemUIFont;
+        color: #fff;
+        letter-spacing: 2px;
+    }
+}
+.group {
+    display: flex;
+    justify-content: center;
+    width: 1200px;
+    margin: 0 auto;
+    li {
+        position: relative;
+        flex: 1;
+        height: 15rem;
+        padding: 5.5rem 1rem 0 1.6rem;
+        margin-right: 1rem;
+        color: #fff;
+        overflow: hidden;
+        &:last-child {
+            margin-right: 0;
+        }
+        &:hover {
+            img {
+                transform: scale(1.3);
+            }
+        }
+    }
+    img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+    }
+    h6 {
+        position: relative;
+        font-size: 1.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+    }
+    .des {
+        position: relative;
+        margin-top: 1rem;
+        font-size: 0.72rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        line-height: 31px;
+    }
+}
+@media (max-width: 1200px) {
+    body {
+        width: 100% !important;
+    }
+    .share {
+        width: 100%;
+        .inner {
+            width: 100%;
+            flex-direction: column;
+            .left {
+                width: 100%;
+            }
+        }
+        .des {
+            display: block;
+            padding: 0 10px;
+        }
+        .pic {
+            width: 100%;
+        }
+        .card {
+            width: 100%;
+        }
+    }
+    .group {
+        width: 100%;
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin-top: 20px;
+        }
+    }
+}
+
+@media (max-width: 320px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+    .group {
+        li {
+            height: auto;
+        }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+    .group {
+        li {
+            height: auto;
+        }
+    }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+    .group {
+        li {
+            height: auto;
+        }
+    }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+    .group {
+        flex-direction: row;
+        li {
+            .des {
+                line-height: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+    .group {
+        flex-direction: row;
+        li {
+            .des {
+                line-height: 1rem;
+            }
+        }
+    }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 13rem;
+            }
+            .texts {
+                top: 7rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
+        }
+    }
+    .block {
+        padding: 2rem 0;
+        .inner {
+            .pic {
+                height: auto;
+            }
+            .card {
+                padding: 1.875rem 0 1.875rem 18.5%;
+                bottom: 0;
+                .title {
+                    font-size: 1.4rem;
+                }
+                .en-text {
+                    font-size: 0.9rem;
+                }
+            }
+        }
+    }
+    .group {
+        flex-direction: row;
+        li {
+            .des {
+                line-height: 1rem;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/about.js b/src/router/modules/about.js
new file mode 100644
index 0000000..f707792
--- /dev/null
+++ b/src/router/modules/about.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'about'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/application.js b/src/router/modules/application.js
new file mode 100644
index 0000000..fcc9178
--- /dev/null
+++ b/src/router/modules/application.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'application'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/careers.js b/src/router/modules/careers.js
new file mode 100644
index 0000000..4806a41
--- /dev/null
+++ b/src/router/modules/careers.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'careers'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/contactUs.js b/src/router/modules/contactUs.js
new file mode 100644
index 0000000..1d4860d
--- /dev/null
+++ b/src/router/modules/contactUs.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'contactUs'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '应用产业-联系我们' }
+    }
+  ]
+};
diff --git a/src/router/modules/devHistory.js b/src/router/modules/devHistory.js
new file mode 100644
index 0000000..28d2780
--- /dev/null
+++ b/src/router/modules/devHistory.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'devHistory'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/deviceIntroBeam.js b/src/router/modules/deviceIntroBeam.js
new file mode 100644
index 0000000..ddccbbd
--- /dev/null
+++ b/src/router/modules/deviceIntroBeam.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'deviceIntroBeam'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/deviceIntroLayout.js b/src/router/modules/deviceIntroLayout.js
new file mode 100644
index 0000000..d9ec281
--- /dev/null
+++ b/src/router/modules/deviceIntroLayout.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'deviceIntroLayout'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/deviceIntroLinear.js b/src/router/modules/deviceIntroLinear.js
new file mode 100644
index 0000000..1cc60c2
--- /dev/null
+++ b/src/router/modules/deviceIntroLinear.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'deviceIntroLinear'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/edu.js b/src/router/modules/edu.js
new file mode 100644
index 0000000..beaea3e
--- /dev/null
+++ b/src/router/modules/edu.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'edu'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/estate.js b/src/router/modules/estate.js
new file mode 100644
index 0000000..f5a8987
--- /dev/null
+++ b/src/router/modules/estate.js
@@ -0,0 +1,28 @@
+import BasicLayout from '@/layouts/home'
+const name = 'estate'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      path: `index`,
+      component: () => import(`@/pages/${name}/index`),
+    },
+    {
+      path: `event`,
+      component: () => import(`@/pages/${name}/event`),
+    },
+    {
+      path: `orgSetup`,
+      component: () => import(`@/pages/${name}/orgSetup`),
+    },
+    {
+      path: `survey`,
+      component: () => import(`@/pages/${name}/survey`),
+    },
+    {
+      path: `location`,
+      component: () => import(`@/pages/${name}/location`),
+    },
+  ]
+};
diff --git a/src/router/modules/exp.js b/src/router/modules/exp.js
new file mode 100644
index 0000000..3db9a47
--- /dev/null
+++ b/src/router/modules/exp.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'exp'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/governance.js b/src/router/modules/governance.js
new file mode 100644
index 0000000..698882b
--- /dev/null
+++ b/src/router/modules/governance.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'governance'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/home.js b/src/router/modules/home.js
new file mode 100644
index 0000000..3db5168
--- /dev/null
+++ b/src/router/modules/home.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'home'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/iasf.js b/src/router/modules/iasf.js
new file mode 100644
index 0000000..9fdd001
--- /dev/null
+++ b/src/router/modules/iasf.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'iasf'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/industrial.js b/src/router/modules/industrial.js
new file mode 100644
index 0000000..8f507b1
--- /dev/null
+++ b/src/router/modules/industrial.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'industrial'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/lightSources.js b/src/router/modules/lightSources.js
new file mode 100644
index 0000000..00e7b36
--- /dev/null
+++ b/src/router/modules/lightSources.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'lightSources'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '全球先进光源' }
+    }
+  ]
+};
diff --git a/src/router/modules/mission.js b/src/router/modules/mission.js
new file mode 100644
index 0000000..a5be7db
--- /dev/null
+++ b/src/router/modules/mission.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'mission'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/news.js b/src/router/modules/news.js
new file mode 100644
index 0000000..3571c77
--- /dev/null
+++ b/src/router/modules/news.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'news'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/newsPress.js b/src/router/modules/newsPress.js
new file mode 100644
index 0000000..411b1a7
--- /dev/null
+++ b/src/router/modules/newsPress.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'newsPress'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/newsProcurement.js b/src/router/modules/newsProcurement.js
new file mode 100644
index 0000000..858ca55
--- /dev/null
+++ b/src/router/modules/newsProcurement.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'newsProcurement'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/org.js b/src/router/modules/org.js
new file mode 100644
index 0000000..d4812f9
--- /dev/null
+++ b/src/router/modules/org.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'org'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..e380013
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overview'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overviewDevHistory.js b/src/router/modules/overviewDevHistory.js
new file mode 100644
index 0000000..a87fd98
--- /dev/null
+++ b/src/router/modules/overviewDevHistory.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overviewDevHistory'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overviewIntro.js b/src/router/modules/overviewIntro.js
new file mode 100644
index 0000000..5c075d4
--- /dev/null
+++ b/src/router/modules/overviewIntro.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overviewIntro'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overviewLocation.js b/src/router/modules/overviewLocation.js
new file mode 100644
index 0000000..3a54ae1
--- /dev/null
+++ b/src/router/modules/overviewLocation.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overviewLocation'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overviewSetup.js b/src/router/modules/overviewSetup.js
new file mode 100644
index 0000000..7e1b977
--- /dev/null
+++ b/src/router/modules/overviewSetup.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overviewSetup'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overviewTrailer.js b/src/router/modules/overviewTrailer.js
new file mode 100644
index 0000000..babe046
--- /dev/null
+++ b/src/router/modules/overviewTrailer.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overviewTrailer'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/publication.js b/src/router/modules/publication.js
new file mode 100644
index 0000000..3d379b8
--- /dev/null
+++ b/src/router/modules/publication.js
@@ -0,0 +1,16 @@
+import BasicLayout from '@/layouts/home'
+const name = 'publication'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+    },
+    {
+      path: `single`,
+      component: () => import(`@/pages/${name}/single`),
+    },
+  ]
+};
diff --git a/src/router/modules/publish.js b/src/router/modules/publish.js
new file mode 100644
index 0000000..b6a02fa
--- /dev/null
+++ b/src/router/modules/publish.js
@@ -0,0 +1,19 @@
+import BasicLayout from '@/layouts/home'
+const name = 'publish'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    },
+    {
+      path: `show`,
+      component: () => import(`@/pages/${name}/show`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/research.js b/src/router/modules/research.js
new file mode 100644
index 0000000..bae00de
--- /dev/null
+++ b/src/router/modules/research.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'research'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/researchTeam.js b/src/router/modules/researchTeam.js
new file mode 100644
index 0000000..762cc43
--- /dev/null
+++ b/src/router/modules/researchTeam.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'researchTeam'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/science.js b/src/router/modules/science.js
new file mode 100644
index 0000000..d911996
--- /dev/null
+++ b/src/router/modules/science.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'science'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/scientific.js b/src/router/modules/scientific.js
new file mode 100644
index 0000000..bf20db0
--- /dev/null
+++ b/src/router/modules/scientific.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'scientific'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/sfel.js b/src/router/modules/sfel.js
new file mode 100644
index 0000000..67cd9b0
--- /dev/null
+++ b/src/router/modules/sfel.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'sfel'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/speech.js b/src/router/modules/speech.js
new file mode 100644
index 0000000..5cf6ddd
--- /dev/null
+++ b/src/router/modules/speech.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'speech'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/talent.js b/src/router/modules/talent.js
new file mode 100644
index 0000000..1ae6611
--- /dev/null
+++ b/src/router/modules/talent.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'talent'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/talentCenter.js b/src/router/modules/talentCenter.js
new file mode 100644
index 0000000..0634ebc
--- /dev/null
+++ b/src/router/modules/talentCenter.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'talentCenter'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/talentCentre.js b/src/router/modules/talentCentre.js
new file mode 100644
index 0000000..9f0e59c
--- /dev/null
+++ b/src/router/modules/talentCentre.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'talentCentre'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/team.js b/src/router/modules/team.js
new file mode 100644
index 0000000..512a8cd
--- /dev/null
+++ b/src/router/modules/team.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'team'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/userSharing.js b/src/router/modules/userSharing.js
new file mode 100644
index 0000000..8e80aa2
--- /dev/null
+++ b/src/router/modules/userSharing.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'userSharing'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};