@@ -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"> | ||||