aida_front/src/component/HomePage/NewCollectionReview.vue

<template>
    <!-- 生成collention缩略图用的 -->
    <div class="collection_review">
        <div class="collection_review_mark"></div>
        <!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
            <MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
        </div> -->
        <div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
            <div  v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
                </div>
            </div>
        </div>
		<div class="img_block_item" v-else>
			<div  v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
                </div>
            </div>
        </div>

        <div class="img_block_item">
            <div class="small_img_item"  v-for="(print) in allBoardData?.printboardFiles" :key="print">
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="print?.imgUrl"> 
                </div>
            </div>
            <div class="small_img_item"  v-for="(generate) in allBoardData?.generatePrintFiles" :key="generate">
                <div class="all_img_item_block">
                    <img class="all_img_content cover_img" :src="generate.imgUrl"> 
                </div>
            </div>
        </div>

        <div class="img_block_item">
            <div class="color_item"  v-for="(color) in allBoardData?.colorBoards" :key="color">
                <div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
                <div class="color_content_body">
                    <div class="color_des">{{color.tcx}}</div>
                    <div class="color_des">{{color.name}}</div>
                </div>
            </div>
        </div>

        <div class="img_block_item img_block_item_sketch">
            <div class="lager_img_item"  v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
                <div class="all_img_item_block">
                    <img class="all_img_content" :src="skecth.imgUrl"> 
                </div>
            </div>
        </div>

        <div class="img_block_item">
            <div class="lager_img_item"  v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
                <div class="all_img_item_block">
                    <img class="all_img_content" :src="marketing.imgUrl"> 
                </div>
            </div>
        </div>
        
    </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
import { useStore } from "vuex";
export default defineComponent({
    components:{MoodTemplate},
    setup() {
        const store = useStore();
        let allBoardData:any = computed(()=>{
			return store.state.UploadFilesModule.allBoardData})
        return {
            allBoardData,
        }
    },
	mounted () {
	}
})
</script>
<style lang="less" scoped>
.collection_review{
    // width: 40.8rem;
	width: 100%;
    background: #fff;
    position: relative;
	

    .collection_review_mark{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
		
    }

    .img_block_item{
        margin-bottom: 2rem;
        // &.color_block_item{
        //     padding: 0 0.5rem 0 0.3rem;
        // }
        .lager_img_item{
            display: inline-block;
            width: 20.4rem;
            height: 20.4rem;
            vertical-align: top;
			&.lager_img_disposeMoodboard{
				width: 100%;
				height: auto;
			}
			&.lager_img_moodboard{
				height: 17rem;
				img{
				}
			}
        }

        .sketch_img_item{
            display: inline-block;
            width: 20.4rem;
            height: 42.2rem;
            vertical-align: top;
        }

        .small_img_item{
            width: 6.8rem;
            height: 6.8rem;
            display: inline-block;
            vertical-align: top;
        }
        .color_item{
            display: inline-block;
            vertical-align: top;
            // padding: 0 0.5rem;
            margin-right: 1.6rem;
            margin-bottom: 0.5rem;

            &:nth-child(4n){
                margin-right: 0;
            }
        }

        .color_content{
            width: 10rem;
            height:6.2rem
        }
        .color_content_body{
            width: 10rem;
            padding: 0.7rem 0.2rem;
            background: #FEFEFE;
            border: 1px solid #E6E6E6;

            .color_des{
				font-size: 1rem;
				font-family: Roboto;
				font-weight: 500;
				color: #000;
				margin-bottom: .5rem;
				line-height: 1.3rem;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

                &:last-child{
                    margin-bottom: 0;
                }
            }
        }

        .all_img_item_block{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;

            .all_img_content{
                max-height: 100%;
                max-width: 100%;

                &.cover_img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
		&.img_block_item_sketch{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			>div{
				width: 45%;	
				height: 25rem;
			}
		}
    }

}
</style>