可以帮我把这个轮播图写一些好看的样式再加一个边框阴影的样式使它看起来有立体感 view class=swiper-container swiper class=swiper indicator-dots=true autoplay=true interval=3000 duration=500 swiper-item image src=http12143591198080mdy

可以按照以下方式进行修改：

1. 给轮播图容器添加样式：

.swiper-container { width: 100%; height: 300px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

这样就添加了一个边框和阴影效果。

2. 修改轮播图样式：

.swiper { width: 100%; height: 100%; }

.swiper-item { display: flex; justify-content: center; align-items: center; }

.swiper-item image { width: 80%; height: 80%; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

这样就将轮播图的图片添加了圆角和阴影效果，并且居中显示在轮播图中。

3. 修改轮播图指示器样式：

.swiper-dots { bottom: 20px; }

.swiper-dots .swiper-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; opacity: 0.5; margin: 0 10px; }

.swiper-dots .swiper-dot-active { opacity: 1; }

这样就将轮播图指示器样式改为了圆形白色，激活状态为不透明。

最终的代码如下：

样式代码：

.swiper-container { width: 100%; height: 300px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.swiper { width: 100%; height: 100%; }

.swiper-item { display: flex; justify-content: center; align-items: center; }

.swiper-item image { width: 80%; height: 80%; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.swiper-dots { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: center; }

.swiper-dots .swiper-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; opacity: 0.5; margin: 0 10px; }

.swiper-dots .swiper-dot-active { opacity: 1; }