| @@ -36,28 +36,34 @@ | |||||
| right: 0; | right: 0; | ||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(1) .cont p::after{ | .itemList .rotation3D__item:nth-child(1) .cont p::after{ | ||||
| content: "云脑一号"; | |||||
| content: "鹏城云脑一号"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(2) .cont p::after{ | .itemList .rotation3D__item:nth-child(2) .cont p::after{ | ||||
| content: "云脑二号"; | |||||
| content: "鹏城云脑二号"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(3) .cont p::after{ | .itemList .rotation3D__item:nth-child(3) .cont p::after{ | ||||
| content: "北大分中心"; | |||||
| content: "北大人工智能集群系统"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(4) .cont p::after{ | .itemList .rotation3D__item:nth-child(4) .cont p::after{ | ||||
| content: "合肥分中心"; | |||||
| content: "合肥类脑智能开放平台"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(5) .cont p::after{ | .itemList .rotation3D__item:nth-child(5) .cont p::after{ | ||||
| content: "武汉AI中心"; | |||||
| content: "武汉人工智能计算中心"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(6) .cont p::after{ | .itemList .rotation3D__item:nth-child(6) .cont p::after{ | ||||
| content: "西安AI中心"; | |||||
| content: "西安未来人工智能计算中心"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(7) .cont p::after{ | .itemList .rotation3D__item:nth-child(7) .cont p::after{ | ||||
| content: "中原AI中心"; | |||||
| content: "中原人工智能计算中心"; | |||||
| } | } | ||||
| .itemList .rotation3D__item:nth-child(8) .cont p::after{ | .itemList .rotation3D__item:nth-child(8) .cont p::after{ | ||||
| content: "成都AI中心"; | |||||
| content: "成都人工智能计算中心"; | |||||
| } | |||||
| .itemList .rotation3D__item:nth-child(9) .cont p::after{ | |||||
| content: "横琴先进智能计算中心"; | |||||
| } | |||||
| .itemList .rotation3D__item:nth-child(10) .cont p::after{ | |||||
| content: "国家超级计算济南中心"; | |||||
| } | } | ||||
| .rotation3D__item.blue{ color: #01e9fc; } | .rotation3D__item.blue{ color: #01e9fc; } | ||||
| @@ -130,9 +136,9 @@ | |||||
| /*颜色*/ | /*颜色*/ | ||||
| .rotation3D__line.blue { color: #07b2f9; } | .rotation3D__line.blue { color: #07b2f9; } | ||||
| .rotation3D__line.green { color: #b4b3ca; } | |||||
| .rotation3D__line.green { color: #ac94ee; } | |||||
| .rotation3D__line.yellow { color: #ffd500; } | .rotation3D__line.yellow { color: #ffd500; } | ||||
| .rotation3D__line.blue svg path { stroke: #07b2f9; } | .rotation3D__line.blue svg path { stroke: #07b2f9; } | ||||
| .rotation3D__line.green svg path { stroke: #b4b3ca; } | |||||
| .rotation3D__line.green svg path { stroke: #ac94ee; } | |||||
| .rotation3D__line.yellow svg path { stroke: #ffd500; } | .rotation3D__line.yellow svg path { stroke: #ffd500; } | ||||
| @@ -57,14 +57,16 @@ | |||||
| //数据 blue, green, yellow | //数据 blue, green, yellow | ||||
| data: { | data: { | ||||
| itemList: [ | itemList: [ | ||||
| { name:'鹏城云脑I', type:'blue', icon:'', }, | |||||
| { name:'鹏城云脑II', type:'blue', icon:'', }, | |||||
| { name:'北京', type:'green', icon:'', }, | |||||
| { name:'合肥', type:'green', icon:'', }, | |||||
| { name:'西安', type:'green', icon:'', }, | |||||
| { name:'武汉', type:'green', icon:'', }, | |||||
| { name:'中原', type:'green', icon:'', }, | |||||
| { name:'横琴', type:'green', icon:'', }, | |||||
| { name:'鹏城云脑一号', type:'blue', icon:'', }, | |||||
| { name:'鹏城云脑二号', type:'blue', icon:'', }, | |||||
| { name:'北大人工智能集群系统', type:'green', icon:'', }, | |||||
| { name:'合肥类脑智能开放平台', type:'green', icon:'', }, | |||||
| { name:'武汉人工智能计算中心', type:'green', icon:'', }, | |||||
| { name:'西安未来人工智能计算中心', type:'green', icon:'', }, | |||||
| { name:'中原人工智能计算中心', type:'green', icon:'', }, | |||||
| { name:'成都人工智能计算中心', type:'green', icon:'', }, | |||||
| { name:'横琴先进智能计算中心', type:'green', icon:'', }, | |||||
| { name:'国家超级计算济南中心', type:'green', icon:'', }, | |||||
| ], | ], | ||||
| }, | }, | ||||
| mounted: function () { | mounted: function () { | ||||
| @@ -12,7 +12,7 @@ | |||||
| <div class="rotation3D-baseMap"></div> | <div class="rotation3D-baseMap"></div> | ||||
| <!--旋转3D--> | <!--旋转3D--> | ||||
| <div id="rotation3D" class="rotation3D"> | <div id="rotation3D" class="rotation3D"> | ||||
| <button class="center">中心</button> | |||||
| <button class="center">中心</button> | |||||
| <div class="itemList"> | <div class="itemList"> | ||||
| <div class="rotation3D__item" :class="item.type" v-for="item in itemList"> | <div class="rotation3D__item" :class="item.type" v-for="item in itemList"> | ||||