<template>
|
<div class="AlgCard">
|
<img :src="alg.img" alt="" />
|
<div class="name">{{ alg.name }}</div>
|
<div class="dot" v-if="alg.hasNewVersion"></div>
|
|
<!-- 悬停遮罩层 -->
|
<div class="version">
|
<!-- 有新版本 -->
|
<div class="isOld" v-if="alg.hasNewVersion">
|
<div class="row">当前版本: {{ alg.version }}</div>
|
<div class="row">最新版本: {{ alg.newVersion }}</div>
|
<div class="btns">
|
<div class="button update">升级</div>
|
<div class="button delete">卸载</div>
|
</div>
|
</div>
|
<!-- 无新版本 -->
|
<div class="isNew" v-else>
|
<div class="row">当前为最新版本</div>
|
<div class="row">{{ alg.version }}</div>
|
<div class="btns">
|
<div class="button delete">卸载</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
alg: {},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.AlgCard {
|
position: relative;
|
margin-right: 20px;
|
margin-bottom: 20px;
|
width: 142px;
|
height: 142px;
|
border: 1px solid #e9ebee;
|
border-radius: 5px;
|
text-align: center;
|
|
img {
|
margin-top: 19px;
|
margin-bottom: 4px;
|
width: 82px;
|
height: 82px;
|
}
|
.name {
|
font-size: 12px;
|
}
|
.dot {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
width: 8px;
|
height: 8px;
|
border-radius: 4px;
|
background: #ff9600;
|
}
|
|
.version {
|
position: absolute;
|
box-sizing: border-box;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: none;
|
background: rgba(0, 0, 0, 0.4);
|
backdrop-filter: blur(3px);
|
border-radius: 5px;
|
text-align: center;
|
font-size: 12px;
|
font-weight: 700;
|
color: #fff;
|
|
.row {
|
margin-top: 6px;
|
}
|
|
.isOld {
|
padding-top: 4px;
|
}
|
|
.isNew {
|
padding-top: 13px;
|
}
|
|
.btns {
|
position: absolute;
|
display: flex;
|
justify-content: end;
|
bottom: 10px;
|
right: 10px;
|
|
.update {
|
margin-right: 10px;
|
width: 40px;
|
height: 24px;
|
line-height: 24px;
|
background: #ff9600;
|
}
|
|
.delete {
|
width: 40px;
|
height: 24px;
|
line-height: 24px;
|
background: #ff4b33;
|
}
|
}
|
}
|
|
&:hover .version {
|
display: block;
|
}
|
}
|
</style>
|
