book-shop/components/img-swiper.vue

<template>
	<view class="slot">
		<u-swiper height="750" border-radius="0" indicator-pos="bottomRight" mode="number" img-mode="aspectFit" :list="list">
		</u-swiper>
		
		<button class="shareBtn" open-type="share">
			<u-icon size="36" name="zhuanfa"></u-icon>
		</button>
	</view>
</template>

<script>
export default {
	name: 'goods-img-swiper',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
	}
};
</script>

<style scoped lang="scss">
	.slot{
		position: relative;
	}
	.shareBtn{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: rgba(0,0,0,.6);
		color: #fff;
		position: absolute;
		right: 10rpx;
		top: 30rpx;
		z-index: $app-zIndex-normal;
		padding: 0;
		&::after{
			content: '';
			border:none;
		}
	}
</style>