parent
744bdf79e4
commit
1cdbf00c97
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
|
|
@ -0,0 +1 @@
|
|||
a1fa0b14364f0d9357d728200a588e639df627f2
|
||||
|
|
@ -17,6 +17,43 @@
|
|||
<a> {{ $t('menu.dataSafe') }}</a>
|
||||
<a> {{ $t('menu.storageMana') }}</a>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<span class="text">应用任务管理</span>
|
||||
<div class="menu">
|
||||
<div class="item">
|
||||
<div class="color" />
|
||||
算力供需交易撮合
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="color" />
|
||||
云际计算基础平台
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="color" />
|
||||
算网融合计算平台
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="color" />
|
||||
云际一朵云
|
||||
</div>
|
||||
</div>
|
||||
<div class="adapter">
|
||||
<img class="point" src="../../assets/images/adapter_1.png" alt="">
|
||||
<span class="text">异构资源适配器</span>
|
||||
<div class="adapter_item">
|
||||
<div v-for="(item,index) in adapterList" :key="item+index">
|
||||
<img src="../../assets/images/adapter_4.png" alt="">
|
||||
<img class="b_img" src="../../assets/images/adapter_5.png" alt="">
|
||||
<span class="name">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operator">
|
||||
|
||||
<span class="text">云际虚拟运营商</span>
|
||||
<img src="../../assets/images/yunji_2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a> {{ $t('menu.appObserve') }}</a>
|
||||
<a href="/monitorSelect"> {{ $t('menu.monitorSelect') }}</a>
|
||||
|
|
@ -36,6 +73,7 @@ export default {
|
|||
components: { Navbar },
|
||||
data() {
|
||||
return {
|
||||
adapterList: ['PCM-AC', 'PCM-OpenStack', 'PCM-modelarts', 'PCM-K8S', 'PCM-SLURM'],
|
||||
dataList: [
|
||||
{
|
||||
src: 'new-1',
|
||||
|
|
@ -102,30 +140,203 @@ export default {
|
|||
}
|
||||
}
|
||||
.center{
|
||||
height: calc(100vh - 26vh);
|
||||
background: url('../../assets/images/new-bg.png') no-repeat center;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
background: url('../../assets/images/menu_bg.png') no-repeat center;
|
||||
background-size: 97% 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.middle{
|
||||
width: 110vh;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
.text{
|
||||
font-size: 1.8rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 1rem;
|
||||
text-shadow: 0rem 0rem 0rem rgba(19,80,143,0.66);
|
||||
background: linear-gradient(0deg, rgba(119,186,255,0.45) 0%, rgba(233,248,255,0.45) 73.3154296875%, rgba(255,255,255,0.45) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: 4vh;
|
||||
position: relative;
|
||||
&:before{
|
||||
content: '';
|
||||
width: 110vh;
|
||||
height: 14vh;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: url(../../assets/images/pic_1.png) no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
top: -1.5vh;
|
||||
}
|
||||
&:after{
|
||||
content: '';
|
||||
width: 110vh;
|
||||
height: 13vh;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: url(../../assets/images/pic_2.png) no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
bottom: -8.5vh;
|
||||
}
|
||||
.item{
|
||||
width: 20%;
|
||||
z-index: 1;
|
||||
.color{
|
||||
width: 100%;
|
||||
height: 12vh;
|
||||
background: rgba(102, 159, 197, 0.288);
|
||||
}
|
||||
}
|
||||
}
|
||||
.adapter{
|
||||
width: 100vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: 3vh;
|
||||
.point{
|
||||
animation: bounce 2.5s ease-in-out infinite;
|
||||
height: 15vh;
|
||||
}
|
||||
.text{
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -13vh;
|
||||
z-index: 9;
|
||||
|
||||
}
|
||||
.adapter_item{
|
||||
width: 70vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: -3vh;
|
||||
>div{
|
||||
width: 20%;
|
||||
height: 8vh;
|
||||
text-align: center;
|
||||
&:first-child,&:last-child{
|
||||
position: relative;
|
||||
top: -5.7vh;
|
||||
}
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
width: 9vh;
|
||||
height: 8vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.name{
|
||||
display: block;
|
||||
margin-top: -15vh;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
.b_img{
|
||||
// animation: bounce2 3s ease-in-out infinite;
|
||||
position: relative;
|
||||
top: -11.7vh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
width: 100vh;
|
||||
height: 32vh;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: url(../../assets/images/adapter_2.png) no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
bottom: 1.5vh;
|
||||
}
|
||||
}
|
||||
.operator{
|
||||
width: 105vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: -5vh;
|
||||
img{
|
||||
width: 103.7vh;
|
||||
animation: blinking 2s ease-in-out infinite;
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
width: 105vh;
|
||||
height: 13.5vh;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: url(../../assets/images/yunji_logo.png) no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
top: 6.5vh;
|
||||
}
|
||||
&:after{
|
||||
content: '';
|
||||
width: 105vh;
|
||||
height: 25vh;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: url(../../assets/images/yunji_1.png) no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
bottom: 1.8vh;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
a{
|
||||
display: block ;
|
||||
background: url('../../assets/images/btn-bg.png') no-repeat center;
|
||||
background-size: contain;
|
||||
width: 18rem;
|
||||
width: 14rem;
|
||||
margin-top: 6vh;
|
||||
font-size: 1.3rem;
|
||||
height: 5.7rem;
|
||||
line-height: 5.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.left{
|
||||
position: absolute;
|
||||
left: 7vh;
|
||||
top: 3vh;
|
||||
}
|
||||
@keyframes blinking {
|
||||
0% {
|
||||
opacity:0;
|
||||
}
|
||||
.right{
|
||||
position: absolute;
|
||||
right: 7vh;
|
||||
top: 3vh;
|
||||
50% {
|
||||
opacity:1;
|
||||
}
|
||||
100% {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%{
|
||||
transform: translateY(-3vh)
|
||||
}
|
||||
50%{
|
||||
transform: translateY(0vh)
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-3vh)
|
||||
}
|
||||
}
|
||||
@keyframes bounce2 {
|
||||
0%{
|
||||
transform: translateY(-0.5vh)
|
||||
}
|
||||
50%{
|
||||
transform: translateY(0vh)
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-0.5vh)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue