Compare commits
2 Commits
4a28789464
...
f26afc84c7
Author | SHA1 | Date |
---|---|---|
guoyue | f26afc84c7 | |
guoyue | 1d61355bc6 |
|
@ -500,7 +500,7 @@ else if (newLocation === 'xihaian') {
|
|||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
{ name: '能力云图', key: 'capabilityCloud' },
|
||||
{ name: '能力统计', key: 'abilityStatistics' },
|
||||
{ name: '技术文档', key: 'instructionManual' },
|
||||
// { name: '技术文档', key: 'instructionManual' },
|
||||
// { name: '开发指南', key: 'developmentGuide' },
|
||||
{ name: '需求中心', key: 'demandCenter' },
|
||||
// { name: '个人中心', key: 'personalCenter' },
|
||||
|
|
|
@ -11,28 +11,18 @@
|
|||
<span class="title">基础设施</span>
|
||||
</div>
|
||||
<div class="infrastructure-content">
|
||||
<div
|
||||
class="infrastructure-content-son"
|
||||
v-for="(item, index) in myDataList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="num-class"
|
||||
:style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
|
||||
>
|
||||
<div class="infrastructure-content-son" v-for="(item, index) in myDataList" :key="index">
|
||||
<div class="num-class"
|
||||
:style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`">
|
||||
<div>{{ item.title }}</div>
|
||||
<div>{{ item.snum }}</div>
|
||||
</div>
|
||||
<div class="health-degree">
|
||||
<div class="health-degree-title">健康度</div>
|
||||
<a-progress
|
||||
:stroke-color="{
|
||||
<a-progress :stroke-color="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}"
|
||||
:percent="item.percentage"
|
||||
:show-info="false"
|
||||
/>
|
||||
}" :percent="item.percentage" :show-info="false" />
|
||||
</div>
|
||||
<div class="percentage" :style="fontFormat(item.title)">
|
||||
{{ item.percentage }}%
|
||||
|
@ -52,15 +42,17 @@
|
|||
img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
|
||||
},
|
||||
{
|
||||
title: '云资源',
|
||||
snum: '0',
|
||||
percentage: '0',
|
||||
// title: '云资源',
|
||||
title: '单兵设备',
|
||||
snum: '2',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
|
||||
},
|
||||
{
|
||||
title: '感知资源',
|
||||
snum: '0',
|
||||
percentage: '0',
|
||||
// title: '感知资源',
|
||||
title: '无人机',
|
||||
snum: '2',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
|
||||
},
|
||||
])
|
||||
|
@ -69,10 +61,17 @@
|
|||
case '视频资源数量':
|
||||
return 'color: #32ff91;'
|
||||
break
|
||||
case '云资源':
|
||||
// case '云资源':
|
||||
// return 'color: #f4fd25;'
|
||||
// break
|
||||
// case '感知资源':
|
||||
// return 'color: #ff1d18;'
|
||||
// break
|
||||
|
||||
case '单兵设备':
|
||||
return 'color: #f4fd25;'
|
||||
break
|
||||
case '感知资源':
|
||||
case '无人机':
|
||||
return 'color: #ff1d18;'
|
||||
break
|
||||
}
|
||||
|
@ -95,6 +94,8 @@
|
|||
val.snum = obj.amount
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log('err------------>', err);
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
@ -112,24 +113,27 @@
|
|||
-webkit-transition: all 100ms ease-out;
|
||||
-moz-transition: all 100ms ease-out;
|
||||
transition: all 100ms ease-out;
|
||||
|
||||
.infrastructure-top {
|
||||
width: 4.4rem;
|
||||
height: 0.44rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: url('~@/assets/capabilityCloud/infrastructure_title.png')
|
||||
no-repeat;
|
||||
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
line-height: 0.44rem;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.infrastructure-content {
|
||||
width: 4rem;
|
||||
margin-top: 0.62rem;
|
||||
|
||||
.infrastructure-content-son {
|
||||
display: flex;
|
||||
width: 4rem;
|
||||
|
@ -139,11 +143,13 @@
|
|||
margin-bottom: 0.14rem;
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
|
||||
.num-class {
|
||||
width: 1.5rem;
|
||||
height: 1rem;
|
||||
text-align: center;
|
||||
margin-right: 0.2rem;
|
||||
|
||||
&>div:first-child {
|
||||
font-size: 0.18rem;
|
||||
color: #ffffff;
|
||||
|
@ -151,32 +157,39 @@
|
|||
line-height: 0.18rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
&>div:last-child {
|
||||
font-size: 0.36rem;
|
||||
line-height: 0.36rem;
|
||||
color: #1ce2e5;
|
||||
}
|
||||
}
|
||||
|
||||
.health-degree {
|
||||
width: 1.35rem;
|
||||
|
||||
.health-degree-title {
|
||||
font-size: 0.14rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
:deep(.ant-progress-outer) {
|
||||
height: 0.27rem;
|
||||
}
|
||||
|
||||
:deep(.ant-progress-inner) {
|
||||
height: 0.27rem;
|
||||
border-radius: 0.14rem;
|
||||
border: 0.01rem solid rgba(8, 153, 231, 0.6);
|
||||
background: rgba(21, 65, 123, 0.6);
|
||||
|
||||
div {
|
||||
height: 0.27rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .health-degree:
|
||||
.percentage {
|
||||
height: 0.57rem;
|
||||
|
@ -189,23 +202,29 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infrastructure:hover {
|
||||
border: 2px solid;
|
||||
animation: turn 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes turn {
|
||||
0% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||
}
|
||||
|
||||
75% {
|
||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue