<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;
}
标签:flex,hidden,缩放,color,宽高,overflow,display,图片
From: https://www.cnblogs.com/zhengzhijian/p/17794290.html