<style>
.app-style-multi-map .goods-one, .goods-two, .goods-three, .goods-four {
    height: 100%;
    width: 100%;
}
 .app-style-multi-map .goods-three .el-image:nth-child(1) {
    height: 50%;
    width: 100%;
 }
  .app-style-multi-map .goods-three .el-image:nth-child(2) {
    height: 50%;
    width: 50%;
 }
.app-style-multi-map .goods-three .el-image:nth-child(3) {
    height: 50%;
    width: 50%;
}
.goods-four .el-image{
    width:50%;
    height:50%;
}
 .postimage_inner{
    vertical-align: top;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .goods-two .el-image{
    height: 50%;
    width: 100%;
 }
  .goods_one img{
    width:100%;
    height:100%;
  }
  .app-style-multi-map {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .app-style-multi-map > div {
    flex-wrap: wrap;
  }
.app-style-multi-map .goods-five {
    height: 100%;
    width: 100%;
    position: relative;
}
.app-style-multi-map .goods-five .el-image:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 0;
    height: 50%;
    width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(3) {
    position: absolute;
    top: 0;
    left: 50%;
    height: 33.333%;
    width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(4) {
    position: absolute;
    top: 33.33%;
    left: 50%;
    height: 33.333%;
    width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(5) {
    position: absolute;
    top: 66.66%;
    left: 50%;
    height: 33.333%;
    width: 50%;
}
</style>
<template>
    <div class="app-style-multi-map">
        <template v-if="GoodsImgCount==1">
            <div class="goods_one">
                <img src="../../assets/img/storeDesign/goods-url.png" alt=""/>
            </div>
        </template>
        <template v-else-if="GoodsImgCount==2">
            <div flex="dir:left" class="goods-two">
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
            </div>
        </template>
        <template v-else-if="GoodsImgCount==3">
            <div flex="dir:left" class="goods-three">
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
            </div>
        </template>
        <template v-else-if="GoodsImgCount==4">
            <div flex="dir:left" class="goods-four">
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
            </div>
        </template>
        <template v-else-if="GoodsImgCount==5">
            <div flex="dir:left" class="goods-five">
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
                <div class="el-image">
                    <img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
                </div>   
            </div>
        </template>
    </div>
</template>
<script>
  export default {
    props: ["GoodsImgCount"],
    data() {
      return {

      };
    },
    created() {

    },
    methods: {
    },
    mounted() {
    }
  };

</script>
