<div class="product">
<Popover placement="right">
<template #content>
<div class="w-[200px] h-[200px]">
<img
:src="record?.mainImages?.[0]?.url"
class="w-full h-full object-scale-down"
/>
</div>
</template>
<div class="mr-[9px] w-[35px] h-[35px]">
<img
:src="record?.mainImages?.[0]?.url"
class="cursor-pointer object-scale-down w-full h-full"
/>
</div>
</Popover>
<div class="productText">
<span>
<a class="product_link" target="_blank" :href="record?.productLink">
<span class="productTitle">
{{ record?.productTitle }}
</span>
</a>
</span>
<span class="copy_style">
<Copy placement="right" :keyword="record?.id"> ASIN:{{ record?.id }} </Copy></span
>
</div>
</div>
.product {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
align-items: center;
justify-content: space-between;
color: @primary-color !important;
}
.productText {
display: flex;
flex-direction: column;
overflow: hidden;
}
.product_link {
color: @primary-color !important;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.productTitle {
text-overflow: ellipsis;
overflow: hidden;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?