.xtx-carousel{宽度：100%；高度：100%；最小宽度：300px；最小高度：150px；位置：相对；.carousel{&-body{宽度：100%；高度：100%；}&-item{宽度：100%；高度：100%；位置：绝对；左：0；顶部：0；不透明度：0；transition:opacity0.5slinear;&.fade{不透明度：1;z-索引：1；}img{宽度：100%；高度：100%；}}&-indicator{位置：绝对；左：0；底部：20px；z-指数：2；宽度：100%；文本对齐：居中；span{显示：内联块；宽度：12px；高度：12px；背景：rgba（0,0,0,0.2）；边界半径：50%；游标：指针；~span{左边距：12px;}&.active{背景：#fff;}}}&-btn{宽度：44px；高度：44px；背景：rgba(0,0,0,.2);颜色：#fff；边界半径：50%；位置：绝对；顶部：228px；z-指数：2；44px；不透明度：0；过渡：全部0.5s；&.prev{左：20px；}&.next{右：20px；}}}&:hover{.carousel-btn{不透明度：1;}}}由于项目的特殊情况，需要手动封装一个轮播图。大致步骤：准备一个Xtx-carousel组件的基本布局，准备首页-banner组件使用Xtx-carousel组件，注册到首页。深度效果选择器会覆盖Xtx-carousel组件的默认样式。具体步骤如下：第一步：现在在src下的components文件夹下新建一个文件夹，用来打包项目的组件，方便管理。例如：library/xtx-carousel.vue轮播基础设施代码
