a77/components/my/menu_filter.vue

<template>
	<view class="menu-card" v-if="fls" @touchmove.stop.prevent @click="fls=false">
		<view class="filter" @touchmove.stop.prevent>
			<scroll-view scroll-y="true" style="height: 30vh;background: #1D1F1E;width: 686rpx;margin: auto;border-radius: 24rpx;">
				<view class="a">
					<view class="" v-for="item,i in list" :key="i" @click="click(item)">
						<image v-if="item.id==index" src="/static/market/3.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
						<view :class="item.id==index?'b':''" class="item" >{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			arr: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				list: [],
				fls: false,
				index:''
			}
		},
		watch: {
			arr: {
				handler(newValue, oldValue) {
					if (newValue.length == 0) return
					this.list = newValue;
				},
				deep: true
			},
		},
		methods: {
			open() {
				this.fls = true;
			},
			close() {
				this.fls = false;
			},
			click(item) {
				// console.log(item.id)
				this.index =item.id
				this.$emit("click", item)
				this.fls = false;
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.menu-card {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 300rpx;
		height: calc(100vh - 100rpx) !important;
		left: 0rpx;
		z-index: 666;
		width: 100%;
		padding: 0 !important;
	}


	.filter {
		background-color: #171918;
		// display: flex;
		align-items: center;
		// flex-wrap: wrap;
		padding: 20rpx 0;
		width: 100%;
		overflow: scroll;

		.a {
			// display: flex;
			flex-wrap: wrap;
			.item {
				// width: 320rpx;
				margin: 15rpx 20rpx;
				padding: 10rpx 0;
				font-size: 28rpx;
				text-align: center;
			}
			
			>view {
				display: flex;
				align-items: center;
				padding-left: 32rpx;
			}
		}
		.b {
			font-size: 22rpx;
			font-family: Tahoma-Bold, Tahoma;
			font-weight: bold;
			background: linear-gradient(180deg, #69FF60 0%, #0C9D5B 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

	}
</style>