baiyuApp/pages_live/components/liveActionButtons.vue

<template>
	<view class="live-action-buttons" :class="'live-action-buttons--' + size">
		<view class="live-action-buttons__item live-action-buttons__item--more" @click.stop="handleMore">
			<image class="live-action-buttons__more-icon" :src="moreIconSrc" mode="aspectFit" />
		</view>
		<view class="live-action-buttons__item live-action-buttons__item--cart" @click.stop="handleCart">
			<image class="live-action-buttons__cart-icon" :src="cartIconSrc" mode="aspectFit" />
		</view>
	</view>
</template>

<script>
	const MORE_ICON_VERTICAL =
		'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png';
	const MORE_ICON_HORIZONTAL = '/static/images/live/more2.png';
	const CART_ICON =
		'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/fs/20251231/8376c769d7154f04b13cbec4a76bacf0.png';

	export default {
		name: 'LiveActionButtons',
		props: {
			showType: {
				type: Number,
				default: 2
			},
			// normal：聊天栏小图标；large：竖屏视频叠加层大图标
			size: {
				type: String,
				default: 'normal'
			}
		},
		computed: {
			moreIconSrc() {
				return this.showType === 1 ? MORE_ICON_HORIZONTAL : MORE_ICON_VERTICAL;
			},
			cartIconSrc() {
				return CART_ICON;
			}
		},
		methods: {
			handleMore() {
				this.$emit('more');
			},
			handleCart() {
				this.$emit('cart');
			}
		}
	};
</script>

<style scoped lang="scss">
	.live-action-buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-shrink: 0;
	}

	.live-action-buttons__item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.live-action-buttons--normal {
		justify-content: flex-end;

		.live-action-buttons__item--more {
			margin-right: 40rpx;
		}

		.live-action-buttons__item--cart {
			margin-right: 20rpx;
		}

		.live-action-buttons__more-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.live-action-buttons__cart-icon {
			width: 46rpx;
			height: 58rpx;
		}
	}

	.live-action-buttons--large {
		.live-action-buttons__item + .live-action-buttons__item {
			margin-left: 16rpx;
		}

		.live-action-buttons__more-icon,
		.live-action-buttons__cart-icon {
			width: 88rpx;
			height: 88rpx;
		}
	}
</style>