73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<template>
|
|
<div class="item flex items-center" @click="gotoLink(item.value)" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
|
|
<div class="icon flex items-center justify-center">
|
|
<img :src="getImageSrc()" alt="" />
|
|
</div>
|
|
<div class="text">{{ item.key || '' }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isHovered: false
|
|
}
|
|
},
|
|
methods: {
|
|
// 跳转链接
|
|
gotoLink(url) {
|
|
if (!url) {
|
|
return false;
|
|
}
|
|
window.open(url, '_blank');
|
|
},
|
|
|
|
// 获取图标路径
|
|
getImageSrc() {
|
|
if (this.isHovered && this.item.key) {
|
|
return `/launches/link/icon_${this.item.key}_selected.png`;
|
|
}
|
|
return this.item.key ? `/launches/link/icon_${this.item.key}.png` : '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.item {
|
|
border-radius: 12px;
|
|
padding: 14px 10px;
|
|
gap: 16px;
|
|
margin-bottom: 6px;
|
|
color: #64748B;
|
|
font-size: 18px;
|
|
font-family: 'Poppins-Medium';
|
|
cursor: pointer;
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: #f5f5f5;
|
|
color: #7B61FF;
|
|
}
|
|
}
|
|
</style>
|