126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
|
<!--
|
||
|
|
* @FilePath: devinfo.vue
|
||
|
|
* @Author: zz
|
||
|
|
* @Date: 2024-04-12 11:25:44
|
||
|
|
* @LastEditors:
|
||
|
|
* @LastEditTime: 2024-04-12 11:25:44
|
||
|
|
* @Descripttion:
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="item-card-container">
|
||
|
|
<div class="box-left">
|
||
|
|
<div class="top-item" v-for="(item, index) in data" :style="{ width }">
|
||
|
|
<span class="key-text">{{ item.key }}:</span>
|
||
|
|
<span class="value-text" :style="item?.value_style">
|
||
|
|
<div
|
||
|
|
class="status"
|
||
|
|
v-if="index == 3"
|
||
|
|
:style="{ background: status_color[item.value] }"
|
||
|
|
></div>
|
||
|
|
<span v-else>{{ item.value }}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box-right">
|
||
|
|
<img :src="imgSrc" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, ref } from "vue";
|
||
|
|
const imgSrc =
|
||
|
|
"https://www.richpeace.cn/uploadfile/thumb/0b94ce08688c6389ce7b68c52ce3f8c7/880x580_auto.jpg";
|
||
|
|
const prop = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Array as any,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
imgSrc: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
rowNum: {
|
||
|
|
type: Number,
|
||
|
|
default: 2,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
let width = computed(() => {
|
||
|
|
return 100 / prop.rowNum + "%";
|
||
|
|
});
|
||
|
|
const status_color = {
|
||
|
|
"0": "#FF6E76",
|
||
|
|
"1": "#FDDD60",
|
||
|
|
"2": "#7CFFB2",
|
||
|
|
"3": "#FDDD60",
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.item-card-container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.box-left {
|
||
|
|
width: 600px;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.box-right {
|
||
|
|
width: 500px;
|
||
|
|
height: 100%;
|
||
|
|
/* background-color: red; */
|
||
|
|
margin-left: 55%;
|
||
|
|
}
|
||
|
|
.box-right img {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100%;
|
||
|
|
}
|
||
|
|
.key-text {
|
||
|
|
width: 60%;
|
||
|
|
font-size: 22px;
|
||
|
|
color: #02c1d7;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.top-item {
|
||
|
|
height: 50%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20px 10px;
|
||
|
|
}
|
||
|
|
.value-text {
|
||
|
|
width: 40%;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #aeeefafe;
|
||
|
|
font-family: "华文新魏", sans-serif;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-left: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: blink 1s infinite; /* 添加动画效果 */
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes blink {
|
||
|
|
0% {
|
||
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|