Jquery Vue v-用于在幻灯片中未正确渲染阴影

我正在尝试在我的Vue项目中使用Swiper。除了幻灯片中的阴影外，一切正常。每次分页后，阴影变得越来越大，越来越暗。圆圈结束后，我回到秒幻灯片上，阴影会再次重置为正常

这是一个例子，说明了发生了什么：

这就是我正在做的：

<template>
  <div class="product-slider">
    <div class="product-slider__wrp swiper-wrapper">
      <product-slide :item="item" v-for="item in items" :key="item.id"/>
    </div>
  <div class="product-slider__pagination"></div>
</div>
</template>



  data() {
    return {

      swiperOptions: {
        vertical: true,
        spaceBetween: 30,
        effect: 'fade',
        loop: true,
        mousewheel: {
          invert: false,
        },
        // autoHeight: true,
        pagination: {
          el: '.product-slider__pagination',
          clickable: true,
        }
      },
    };
  },

  mounted(){
    const swiper = new Swiper('.product-slider', {
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: '.product-slider__pagination',
        clickable: true,
      }
    });
    swiper.slideTo(3, 1000, false)
  },

数据（）{
返回{
开关选项：{
是的，
空间期:30,，
效果：“褪色”，
循环：对，
鼠标滚轮：{
颠倒：错，
},
//自动高度：正确，
分页：{
el:“.产品滑块分页”，
可点击：正确，
}
},
};
},
安装的（）{
常量开关=新开关（“.product slider”{
空间期:30,，
效果：“褪色”，
循环：对，
鼠标滚轮：{
颠倒：错，
},
//自动高度：正确，
分页：{
el:“.产品滑块分页”，
可点击：正确，
}
});
滑动开关（31000，假）
},

这是幻灯片组件：

<template>
<div class="product-slider__item swiper-slide">

  <div class="product-slider__img">
    <inner-slick-slider :images="item.imageUrl" :imageTitle="item.title | decrypt"/>
  </div>

  <div class="product-slider__content">
    <span class="product-slider__code"> test </span>
  </div>

</div>
</template>

试验

这是幻灯片组件上的阴影：

box阴影：4px 13px 30px 1px rgba（112137249,0.2）

我尝试了从谷歌上能找到的一切。还尝试在更新时和更新前重新渲染等。。我做错了什么？非常感谢您的帮助

嗨，事实上，这个问题是因为过渡和盒子阴影而来的
CSS

在代码中，CSS应用于所有div，所以我删除了它，并仅在当前处于活动状态的img上添加了框阴影

我在这里添加了框阴影css

&.swiper-slide-active {
  .blog-slider__img {
    box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
    img {
      opacity: 1;
    transition-delay: .3s;

    }
  }

并从下面的类中删除了框阴影css

&__img {
     // width: 40%;
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);

    border-radius: 20px;
    transform: translateX(-80px);

    overflow: hidden;

    &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
      border-radius: 20px;
    opacity: 0.8;
}

这里是更新的链接。
嘿，你能在这里添加产品幻灯片模板代码吗？你的盒子可能会堆叠起来。你在哪里申请的？快速浏览api，我发现活动幻灯片有一个名为
swiper slide active
的类。尝试为这个类设置框阴影。@joy-Hey！我还添加了幻灯片组件的代码。它几乎只有html结构，没有脚本逻辑。我将阴影应用到
.product-slider\uuu img
中，同样在您应用此框阴影的类中，css？？？@joy几乎是完整的示例，它有相同的问题，即使它根本不使用v-for和vue。你的建议很有帮助，非常感谢。正是我要找的。@TarvoMäesepp更新的描述请查看。由于过渡和框影CSS，问题不断出现。。您可以使用browser inspect选项并查看CSS的应用位置……因此您基本上将
&\uu img
块移出了
&.swiper幻灯片的活动状态
？我不明白，因为那些
和uu img
之前也没有
&.swiper幻灯片处于活动状态
，如果我错了，请纠正我。我就是找不到区别：我知道在那种情况下我听起来很愚蠢。但我很高兴你的版本可以完美地工作：）基本上，我只为活动图像添加了框阴影，现在可以看到，并从所有图像中删除@TarvoMäeseppok，我现在明白了。再次非常感谢