小程序swiper右下角数字

工作用到，自己写了一个。核心代码如下：

<view class="container">
    <swiper indicator-dots="{{indicatorDots}}" indicator-color="#fff" indicator-active-color="#f4c281"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class=
        "swiper">
        <block wx:for="{{banner}}" wx:key="{{unique}}">
            <swiper-item>
                <image src="{{item.pic_url}}" class="slide-image" />
                <view  class="swiper_number">{{index+1}}/{{banner.length}} </view>
                <view  class="swiper_number2">{{index+1}}/{{banner.length}} </view>
            </swiper-item>
        </block>
    </swiper>
</view>

var app = getApp()
Page({
    data: {
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 100,
        banner: [
            {
                "pic_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569210032&di=6590083458bd937173e90d5b47e7c949&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c35d55dc390e32f875a1329142d3.jpg%40900w_1l_2o_100sh.jpg",
            },
            {
                "pic_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568615313015&di=96becdfa8a486c5b55fa7660a04211b7&imgtype=0&src=http%3A%2F%2Fpicyun.90sheji.com%2Fdesign%2F00%2F01%2F81%2F79%2Fs_1024_54cae988d911f.jpg",
            },
        ],
    },
})


page {
    position: relative;
    background: #f3f3f3;
}
.swiper{
    height:410rpx;
}
.slide-image {
    display: block;
    width: 100%;
    height:410rpx;
}
.swiper_number{
    position:absolute;right:23rpx;bottom:23rpx;background:#000;text-align:center;padding:9rpx 31rpx;border-radius:35rpx;opacity:.3;color:#fff;font-size:26rpx;
}
.swiper_number2{
    position:absolute;right:23rpx;bottom:23rpx;text-align:center;padding:9rpx 31rpx;border-radius:35rpx;color:#fff;font-size:26rpx;
}
说明：第一个swiper_number加了透明度，这样文字也就透明了。所以再加一层没有透明度和背景的文字内容。