zhxy-desk/components/editHomeApply.vue

<template>
	<view class="home-apply">
		<view class="home-apply-title">
			首页应用
		</view>
		<view class="home-edit">
			<view class="home-edit-item" v-for="(item,index) in homeList" :key="index">
				<view class="home-edit-item-img">
					<image style="width: 100%;height: 100%;" :src="item.img" mode=""></image>
					<view class="home-edit-item-img-icon" @click="decrease(item)">
						-
					</view>
				</view>
				<view class="home-edit-item-text">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		name: "editHomeApply",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			decrease(item) {
				item.show = !item.show
				  this.$emit('update:list',this.list)
			}
		},
		computed: {
			homeList() {
				let arr = []
				this.list.forEach(item => {
					item.childer.forEach(item1 => {
						if (item1.show) {
							arr.push(item1)
						}
					})

				})
				return arr
			}
		}
	}
</script>

<style lang="scss">
	.home-apply {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 5.33px;
		box-shadow: 0px 0px 6.67px 0px rgba(147, 147, 147, 0.20);
	}

	.home-apply-title {
		margin-bottom: 32rpx;
		font-size: 32rpx;
	}

	.home-edit {
		width: 100%;
		display: flex;

		.home-edit-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}
	}

	.home-edit-item-img {
		width: 50rpx;
		height: 50rpx;
		position: relative;

		.home-edit-item-img-icon {
			width: 30rpx;
			height: 30rpx;
			background-color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
			border-radius: 50%;
			position: absolute;
			right: -15rpx;
			top: -15rpx;
		}
	}
</style>