1.商品风格切换图片圆角优化

sws 2024-08-27
v1.0.0
sws 2024-08-27 19:27:13 +08:00
parent 7c1801cc0b
commit 205429e506
1 changed files with 8 additions and 2 deletions

View File

@ -4,8 +4,12 @@
<ul class="flex-row jc-sa align-c w">
<li v-for="(item, index) in footerData?.content?.nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index + 1" @mouseleave="is_hover = 0">
<div v-if="footerData.content.nav_style !== '2'" class="img re">
<img class="img-item abs radius-xs animate-linear w" :class="is_hover != index + 1 ? 'active' : ''" :src="item.src[0]?.url" width="22" height="22" />
<img class="img-item abs radius-xs animate-linear w" :class="is_hover == index + 1 || index == 0 ? 'active' : ''" :src="item.src_checked[0]?.url" width="22" height="22" />
<div class="img-item abs radius-xs animate-linear w" :class="is_hover != index + 1 || (index !== 0 && is_hover != index + 1) ? 'active' : ''">
<image-empty v-model="item.src[0]" error-img-style="width:1.5rem;height:1.5rem;"></image-empty>
</div>
<div class="img-item abs radius-xs animate-linear w" :class="is_hover == index + 1 || index == 0 ? 'active' : ''">
<image-empty v-model="item.src_checked[0]" error-img-style="width:1.5rem;height:1.5rem;"></image-empty>
</div>
</div>
<span v-if="footerData.content.nav_style !== '1'" class="animate-linear size-12" :style="is_hover == index + 1 || index == 0 ? text_color_checked : default_text_color">{{ item.name }}</span>
</li>
@ -69,6 +73,8 @@ const footer_nav_event = () => {
width: 2rem;
height: 2rem;
.img-item {
width: 2.2rem;
height: 2.2rem;
opacity: 0;
&.active {
opacity: 1;