jhnine
/
JCC-RIP
forked from JointCloud/JCC-RIP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style

This commit is contained in:
jhnine 2024-09-25 17:42:10 +08:00
parent 33a09edece
commit 24d0205a96
1 changed files with 57 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/monitorSelect/index-new.vue
View File

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