forked from JointCloud/JCC-RIP
style
This commit is contained in:
parent
33a09edece
commit
24d0205a96
|
|
@ -18,7 +18,7 @@
|
|||
<a> {{ $t('menu.storageMana') }}</a>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<span class="text">应用任务管理</span>
|
||||
<span class="text task">应用任务管理</span>
|
||||
<div class="menu">
|
||||
<div class="item">
|
||||
<div class="color" />
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
<div class="adapter">
|
||||
<img class="point" src="../../assets/images/adapter_1.png" alt="">
|
||||
<span class="text">异构资源适配器</span>
|
||||
<span class="text yigou">异构资源适配器</span>
|
||||
<div class="adapter_item">
|
||||
<div v-for="(item,index) in adapterList" :key="item+index">
|
||||
<img src="../../assets/images/adapter_4.png" alt="">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
<div class="operator">
|
||||
|
||||
<span class="text">云际虚拟运营商</span>
|
||||
<span class="text xuni">云际虚拟运营商</span>
|
||||
<img src="../../assets/images/yunji_2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
components: { Navbar },
|
||||
data() {
|
||||
return {
|
||||
adapterList: ['PCM-AC', 'PCM-OpenStack', 'PCM-modelarts', 'PCM-K8S', 'PCM-SLURM'],
|
||||
adapterList: ['PCM-AC', 'PCM-modelarts', 'PCM-K8S', 'PCM-SLURM', 'PCM-OpenStack'],
|
||||
dataList: [
|
||||
{
|
||||
src: 'new-1',
|
||||
|
|
@ -152,12 +152,28 @@ export default {
|
|||
|
||||
.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%);
|
||||
color: transparent;
|
||||
background: linear-gradient(to top, rgba(119,186,255,0.6), rgba(233,248,255,0.8), rgba(255,255,255,0.8));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
.task:before{
|
||||
content: "应用任务管理";
|
||||
}
|
||||
.yigou:before{
|
||||
content: "异构资源适配器";
|
||||
}
|
||||
.xuni:before{
|
||||
content: "云际虚拟运营商";
|
||||
}
|
||||
.text:before{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
text-shadow: 0.2rem 0.2rem 1rem rgb(0 149 255);
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
|
|
@ -187,12 +203,13 @@ export default {
|
|||
bottom: -8.5vh;
|
||||
}
|
||||
.item{
|
||||
width: 20%;
|
||||
width: 22%;
|
||||
z-index: 1;
|
||||
.color{
|
||||
width: 100%;
|
||||
height: 12vh;
|
||||
height: 14vh;
|
||||
background: rgba(102, 159, 197, 0.288);
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -200,7 +217,7 @@ export default {
|
|||
width: 100vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: 3vh;
|
||||
margin-top: 2.5vh;
|
||||
.point{
|
||||
animation: bounce 2.5s ease-in-out infinite;
|
||||
height: 15vh;
|
||||
|
|
@ -213,12 +230,12 @@ export default {
|
|||
|
||||
}
|
||||
.adapter_item{
|
||||
width: 70vh;
|
||||
width: 80vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
top: -3vh;
|
||||
top: -5vh;
|
||||
>div{
|
||||
width: 20%;
|
||||
height: 8vh;
|
||||
|
|
@ -227,21 +244,31 @@ export default {
|
|||
position: relative;
|
||||
top: -5.7vh;
|
||||
}
|
||||
&:nth-child(3){
|
||||
position: relative;
|
||||
top: 2vh;
|
||||
}
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
width: 9vh;
|
||||
height: 8vh;
|
||||
margin: 0 auto;
|
||||
z-index: 99;
|
||||
}
|
||||
.name{
|
||||
display: block;
|
||||
margin-top: -15vh;
|
||||
margin-top: -15.5vh;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
background: linear-gradient(to right, #4FACFE, #00F2FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.b_img{
|
||||
// animation: bounce2 3s ease-in-out infinite;
|
||||
animation: bounce2 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
top: -11.7vh;
|
||||
}
|
||||
|
|
@ -264,10 +291,17 @@ export default {
|
|||
width: 105vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: -5vh;
|
||||
margin-top: -8vh;
|
||||
.text{
|
||||
position: relative;
|
||||
top: 10vh;
|
||||
}
|
||||
img{
|
||||
width: 103.7vh;
|
||||
width: 104vh;
|
||||
animation: blinking 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
right: -0.3vh;
|
||||
bottom: -0.1vh;
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
|
|
@ -294,6 +328,7 @@ export default {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
display: block ;
|
||||
background: url('../../assets/images/btn-bg.png') no-repeat center;
|
||||
|
|
@ -319,24 +354,24 @@ export default {
|
|||
}
|
||||
@keyframes bounce {
|
||||
0%{
|
||||
transform: translateY(-3vh)
|
||||
transform: translateY(-0.5vh)
|
||||
}
|
||||
50%{
|
||||
transform: translateY(0vh)
|
||||
transform: translateY(2vh)
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-3vh)
|
||||
transform: translateY(-0.5vh)
|
||||
}
|
||||
}
|
||||
@keyframes bounce2 {
|
||||
0%{
|
||||
transform: translateY(-0.5vh)
|
||||
transform: translateY(0.5vh)
|
||||
}
|
||||
50%{
|
||||
transform: translateY(0vh)
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-0.5vh)
|
||||
transform: translateY(0.5vh)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue