{"remainingRequest":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\babel-loader\\lib\\index.js!E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\src\\views\\ShoppingMall\\AppDesign\\PDComponents\\MagicImg.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\src\\views\\ShoppingMall\\AppDesign\\PDComponents\\MagicImg.vue","mtime":1655374732000},{"path":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\babel.config.js","mtime":1655374732000},{"path":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\item\\千鸟\\千鸟云商前端源代码\\源点计划\\jindouyunNewFront\\node_modules\\vue-loader\\lib\\index.js","mtime":1655715099000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KaW1wb3J0IHJlcGxhY2VJbWcgZnJvbSAiQC9hc3NldHMvaW1nL3JlcGxhY2UtaW1nLnBuZyI7CmV4cG9ydCBkZWZhdWx0IHsKICBuYW1lOiAiTWFnaWNJbWciLAogIHByb3BzOiB7CiAgICBzZXRGb3JtOiB7CiAgICAgIHR5cGU6IE9iamVjdCwKICAgICAgZGVmYXVsdDogKCkgPT4gewogICAgICAgIHJldHVybiB7fTsKICAgICAgfQogICAgfQogIH0sCgogIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICByZXBsYWNlSW1nOiByZXBsYWNlSW1nLAogICAgICBzRm9ybToge30KICAgIH07CiAgfSwKCiAgd2F0Y2g6IHsKICAgIHNldEZvcm0odmFsKSB7CiAgICAgIHRoaXMuc0Zvcm0gPSB2YWw7CiAgICB9CgogIH0sCgogIGNyZWF0ZWQoKSB7CiAgICB0aGlzLnNGb3JtID0gdGhpcy5zZXRGb3JtOwogIH0KCn07"},{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2JA;AACA;EACAA,gBADA;EAEAC;IACAC;MACAC,YADA;MAEAC;QACA;MACA;IAJA;EADA,CAFA;;EAUAC;IACA;MACAC,sBADA;MAEAC;IAFA;EAIA,CAfA;;EAgBAC;IACAN;MACA;IACA;;EAHA,CAhBA;;EAqBAO;IACA;EACA;;AAvBA","names":["name","props","setForm","type","default","data","replaceImg","sForm","watch","created"],"sourceRoot":"src/views/ShoppingMall/AppDesign/PDComponents","sources":["MagicImg.vue"],"sourcesContent":["<template>\n  <div class=\"MagicImg\">\n    <div v-if=\"sForm.imgStyle !== 5\" class=\"Magic-style\">\n      <el-row :gutter=\"sForm.paddingLR\">\n        <el-col\n          v-for=\"(item, index) in sForm.imagesList\"\n          :key=\"index\"\n          :span=\"24 / sForm.imgStyle\"\n          :style=\"{\n            paddingBottom: sForm.paddingTB + 'px',\n            paddingTop: sForm.paddingTB + 'px',\n          }\"\n        >\n          <el-image\n            :src=\"item.image.url || replaceImg\"\n            class=\"banner-img\"\n            :class=\"[\n              sForm.imagesList === 1 || sForm.imgStyle === 1 ? 'one-img' : '',\n            ]\"\n            :fit=\"sForm.imagesList === 1 || sForm.imgStyle === 1 ? '' : 'cover'\"\n          ></el-image>\n        </el-col>\n      </el-row>\n    </div>\n    <div v-if=\"sForm.imgStyle === 5\">\n      <!--    单张图-->\n      <el-image\n        v-if=\"sForm.imagesList.length === 1\"\n        :src=\"sForm.imagesList[0].image.url || replaceImg\"\n        class=\"banner-img\"\n        :class=\"[\n          sForm.imagesList === 1 || sForm.imgStyle === 1 ? 'one-img' : '',\n        ]\"\n        :fit=\"sForm.imagesList === 1 || sForm.imgStyle === 1 ? '' : 'cover'\"\n      ></el-image>\n      <!--    两张-->\n      <div\n        v-if=\"sForm.imagesList.length === 2\"\n        class=\"Magic-view\"\n        :style=\"{\n          paddingBottom: sForm.paddingTB + 'px',\n          paddingTop: sForm.paddingTB + 'px',\n        }\"\n      >\n        <el-image\n          v-for=\"(item, index) in sForm.imagesList\"\n          :key=\"index\"\n          :src=\"item.image.url || replaceImg\"\n          alt=\"\"\n          class=\"two-img\"\n          fit=\"cover\"\n          :style=\"{\n            paddingRight: (index === 0 ? sForm.paddingLR / 2 : 0) + 'px',\n            paddingLeft: (index === 1 ? sForm.paddingLR / 2 : 0) + 'px',\n          }\"\n        ></el-image>\n      </div>\n      <!--      三张图片-->\n      <div\n        v-if=\"sForm.imagesList.length === 3\"\n        :style=\"{\n          paddingBottom: sForm.paddingTB + 'px',\n          paddingTop: sForm.paddingTB + 'px',\n        }\"\n        class=\"Magic-view\"\n      >\n        <el-image\n          :src=\"sForm.imagesList[0].image.url || replaceImg\"\n          alt=\"\"\n          class=\"float_left tree-big-img\"\n          fit=\"cover\"\n          :style=\"{ paddingRight: sForm.paddingLR / 2 + 'px' }\"\n        ></el-image>\n        <div\n          class=\"float_left tree-small-view\"\n          :style=\"{ paddingLeft: sForm.paddingLR / 2 + 'px' }\"\n        >\n          <el-image\n            :src=\"sForm.imagesList[1].image.url || replaceImg\"\n            alt=\"\"\n            class=\"tree-small-img\"\n            fit=\"cover\"\n            :style=\"{ paddingBottom: sForm.paddingTB / 2 + 'px' }\"\n          ></el-image>\n          <el-image\n            :src=\"sForm.imagesList[2].image.url || replaceImg\"\n            alt=\"\"\n            class=\"tree-small-img\"\n            fit=\"cover\"\n            :style=\"{ paddingTop: sForm.paddingTB / 2 + 'px' }\"\n          ></el-image>\n        </div>\n      </div>\n      <!--      四张-->\n      <div\n        v-if=\"sForm.imagesList.length === 4\"\n        class=\"Magic-view\"\n        :style=\"{\n          paddingBottom: sForm.paddingTB + 'px',\n          paddingTop: sForm.paddingTB + 'px',\n        }\"\n      >\n        <el-image\n          :src=\"sForm.imagesList[0].image.url || replaceImg\"\n          alt=\"\"\n          class=\"tree-big-img\"\n          fit=\"cover\"\n          :style=\"{ paddingRight: sForm.paddingLR / 2 + 'px' }\"\n        ></el-image>\n        <div\n          class=\"tree-small-view\"\n          :style=\"{ paddingLeft: sForm.paddingLR / 2 + 'px' }\"\n        >\n          <el-image\n            :src=\"sForm.imagesList[1].image.url || replaceImg\"\n            alt=\"\"\n            class=\"tree-small-img\"\n            fit=\"cover\"\n            :style=\"{\n              paddingBottom: sForm.paddingTB / 2 + 'px',\n              height: 60 - sForm.paddingTB / 4 + 'px',\n            }\"\n          ></el-image>\n          <div\n            class=\"four-small-view\"\n            :style=\"{ paddingTop: sForm.paddingTB / 2 + 'px' }\"\n          >\n            <el-image\n              :src=\"sForm.imagesList[2].image.url || replaceImg\"\n              alt=\"\"\n              class=\"four-small-img\"\n              fit=\"cover\"\n              :style=\"{\n                paddingRight: sForm.paddingLR / 2 + 'px',\n                height: 60 - sForm.paddingTB / 4 + 'px',\n              }\"\n            ></el-image>\n            <el-image\n              :src=\"sForm.imagesList[3].image.url || replaceImg\"\n              alt=\"\"\n              class=\"four-small-img\"\n              fit=\"cover\"\n              :style=\"{\n                paddingLeft: sForm.paddingLR / 2 + 'px',\n                height: 60 - sForm.paddingTB / 4 + 'px',\n              }\"\n            ></el-image>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n  import replaceImg from \"@/assets/img/replace-img.png\";\n  export default {\n    name: \"MagicImg\",\n    props: {\n      setForm: {\n        type: Object,\n        default: () => {\n          return {};\n        },\n      },\n    },\n    data() {\n      return {\n        replaceImg: replaceImg,\n        sForm: {},\n      };\n    },\n    watch: {\n      setForm(val) {\n        this.sForm = val;\n      },\n    },\n    created() {\n      this.sForm = this.setForm;\n    },\n  };\n</script>\n\n<style scoped>\n  .MagicImg {\n    margin: 0 auto;\n    width: 364px;\n  }\n  .banner-img {\n    width: 100%;\n    height: 86px;\n    display: block;\n    border-radius: 4px;\n  }\n  .one-img {\n    height: auto;\n  }\n  .two-img {\n    width: 50%;\n    height: 120px;\n    border-radius: 4px;\n  }\n  .tree-big-img {\n    width: 50%;\n    border-radius: 4px;\n    height: 120px;\n  }\n  .tree-small-view {\n    width: 50%;\n  }\n  .tree-small-img {\n    width: 100%;\n    height: 60px;\n    display: block;\n    border-radius: 4px;\n  }\n  .four-small-view {\n    width: 100%;\n    display: -webkit-flex;\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n  .four-small-img {\n    width: 50%;\n    height: 60px;\n    border-radius: 4px;\n  }\n  .Magic-view {\n    display: -webkit-flex;\n    display: flex;\n    width: 100%;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n</style>\n"]}]}