页面调整

src/component/WorksPage/Falls.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="Falls">
-		<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
+		<div class="falls_item" :class="{'active':!isText}" v-fadeIn="{isScroll:isScroll,isGsap:isGsap}" v-for="item,index in list" :key="item.id"
 			:style="{
 				width: item.style.width + 'px',
 				height: item.style.height + 'px',
@@ -9,14 +9,16 @@
 			}"
 		>
 			<!-- 图片 -->
-			<div class="falls_item_img">
+			<div class="falls_item_img" :class="{active:deleteList.indexOf(item.id) > -1}">
 				<img
 					v-lazy="item.canvasUrl"
 					@click="setItemDetail(item)"
 					:style="{
 						height: item.style.imgHeihgt + 'px',
 					}"
+					
 				/>	
+				<i class="fi fi-rr-trash icon_delete" @click="deleteSinglePic(item,index)"></i>
 				<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
 			</div>
 			
@@ -75,12 +77,25 @@ export default defineComponent({
 			 type:Boolean,
 			 default:true,
 		 },
+		 isGsap:{
+			 type:Boolean,
+			 default:true,
+		 },
 		 itemWidth:{
 			 type:Number,
 			 default:300,
-		 }
+		 },
+		 isDelete:{
+			 type:Boolean,
+			 default:false,
+		 },
+		 deleteList:{
+			 type:Array,
+			 default:()=>[],
+		 },
 	},
-	setup(){
+	emit:['deleteSinglePic','getImgScale'],
+	setup(props,{emit}){
 		let list = ref([])
 		let wait_list = ref([])
 		let width = ref(300)
@@ -91,6 +106,25 @@ export default defineComponent({
 		let loading = ref(false)
 		let computedHeight = 0
 		let imgDom = ref()
+		const selectImg = (item)=>{
+			if(!props.isDelete)return
+			let index = props.deleteList.indexOf(item.id)
+			if(index > -1){
+				props.deleteList.splice(index,1)
+			}else{
+				props.deleteList.push(item.id)
+			}
+		}
+		const deleteSinglePic = (data,index)=>{
+			emit('deleteSinglePic',{data,index})
+		}
+		const setItemDetail = (data)=>{
+			if(props.isDelete){
+				selectImg(data)
+			}else{
+				emit('getImgScale',data)
+			}
+		}
 		return{
 		    list,
 			wait_list,
@@ -102,13 +136,17 @@ export default defineComponent({
 			loading,
 			computedHeight,
 			imgDom,
+			selectImg,
+			setItemDetail,
+			deleteSinglePic,
 		}
 	},
 	directives:{
 		fadeIn:{
 			mounted (el,binding) {
+				if(!binding.value.isGsap)return
 				let dom
-				if(binding.value){
+				if(binding.value.isScroll){
 					dom = document.querySelector('.works_page .page_content')
 				}else{
 					dom = document.querySelector('.homeRecommend_content_body')
@@ -304,27 +342,45 @@ export default defineComponent({
 			border-radius: 2rem;
 			overflow: hidden;
 			padding-bottom: var(--paddingBottom);
+			&.active{
+				padding: 0;
+			}
 			&.falls_item:hover{
 				.falls_item_img{
 					img{
 						transform: scale(1.1);
 					}
+					> i{
+						display: flex;
+					}
 				}
 			}
 			.falls_item_img{
 				cursor: pointer;
 				width: 100%;
 				overflow: hidden;
+				border-radius: 2rem;
+				&.active{
+					border: 2px solid;
+				}
+				> i{
+					position: absolute;
+					top: 1rem;
+					right: 1rem;
+					display: none;
+					font-size: 2rem;
+				}
 				img{
 					width: 100%;
 					object-fit: cover;
 					height: 100%;
 					transition: all .3s;
+					
 				}
 				.falls_item_user_Original{
 					font-weight: 600;
 					font-size: 12px;
-					color: #39215b;
+					color: #000;
 					background: #c9a2ff;
 					padding: 0 5px;
 					border-radius: 4px;