front-end/mobile-code/src/pages/admin/components/module/operate.vue

<template>
	<div class="operate-module" :style="{top: top + 'rpx', right: right + 'rpx'}">
		<!-- <div class="operate-icon">
			<i class="iconfont" :class="[ isShow ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
		</div>-->
		<!-- 弹窗 -->
		<!-- <div class="operate-wrap" :style="{top: top + 'rpx', right: right + 'rpx'}" > -->
			<div class="operate-list" v-for="(item, index) in btnData" :key="index" @click="click(item.click)">
				<i class="iconfont" :class="[item.icon]"></i>
				<div class="btn-text">{{ item.text }}</div>
                <!-- <span>{{item.click}}</span> -->
			</div>
		<!-- </div> -->
	</div>
</template>

<script>
export default {
	name: 'operate-module',
	data() {
		return {}
	},
	props: {
		top: {
			type: Number,
			default: 30
		},
		right: {
			type: Number,
			default: 30
		},
		// 按钮列表
		btnData: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		click(fn) {
			fn()
		}
	}
}
</script>

<style lang="scss" scoped>
	.operate-module {
		// position: relative;
		// .operate-icon {
		// 	.iconcaozuojihuo {
		// 		color: $mainColor;
		// 	}
		// }
		// 操作
		// .operate-wrap {
			position: absolute;
			// top: 50px;
			background: rgba(0, 0, 0, 0.8);
			box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
			border-radius: 10px;
			width: max-content;
			height: 100px;
			@include disFlex(center, space-between);
			// padding: 14px 0;
			.operate-list {
				flex-shrink: 0;
				padding: 0 24px;
				text-align: center;
                color: #fff;
                .iconfont {
                    font-size: 36px;
                }
				.btn-text {
					transform: scale(0.8);
					margin-top: 2px;
				}
			}
		// }
	}
</style>