{"version":3,"file":"page-photo.css","mappings":";AAwEA;EACE,aAAa;EACb,eAAe;EACf,6BAA6B;AAC/B;AAEA;EACE,kBAAkB;EAClB;;wBAEsB;EACtB,sBAAsB;EACtB,gBAAgB;EAChB,mBAAmB;EACnB;4CAC0C;EAC1C,oDAAoD;AACtD;AAEA;EACE,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,WAAW;EACX,YAAY;EACZ,aAAa;EACb,4BAA4B;EAC5B,2BAA2B;EAC3B,sBAAsB;EACtB;uDACqD;EACrD,oBAAoB;AACtB;AAEA;EACE,aAAa;EACb,kBAAkB;EAClB,SAAS;EACT,WAAW;EACX,0BAA0B;EAC1B,yDAAyD;AAC3D;AAEA;EACE,UAAU;EACV,4BAA4B;EAC5B,yDAAyD;AAC3D;AAEA;EACE,kBAAkB;EAClB,UAAU;AACZ;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;EACV,WAAW;EACX,YAAY;EACZ;;;;GAIC;EACD,8BAA8B;EAC9B,UAAU;EACV,2BAA2B;EAC3B,uDAAuD;AACzD;AAEA;EACE,+BAA+B;EAC/B,eAAe;EACf,gBAAgB;EAChB,2CAA2C;AAC7C;;;AC1DA;EACE,YAAY;EACZ,6BAA6B;EAC7B,4BAA4B;EAC5B,eAAe;AACjB;AAEA;EACE,wBAAwB;AAC1B;AAEA;EACE,UAAU;AACZ;AAEA;;EAEE,+CAA+C;AACjD;AAEA;EACE,6CAA6C;EAC7C,UAAU;EACV,wBAAwB;AAC1B;AAEA;EACE;6CAC2C;EAC3C,YAAY;AACd;AAEA;EACE;gDAC8C;EAC9C;;yBAEuB;AACzB","sources":["webpack://sakurairo-scripts/./src/page-photo/app.vue","webpack://sakurairo-scripts/./src/page-photo/siroi.vue"],"sourcesContent":["<template>\n  <div class=\"container-siroi\">\n    <template v-if=\"showError === false\">\n      <siroi\n        v-for=\"img in imgs\"\n        v-bind:data-image=\"img.img\"\n        v-bind:key=\"img.img\"\n        v-bind:vertical=\"\n          (function () {\n            if (img.vertical == null || img.vertical === true) {\n              return true;\n            } else {\n              return false;\n            }\n          })()\n        \"\n      >\n        <h1>{{ img.header }}</h1>\n        <p>{{ img.info }}</p>\n      </siroi>\n    </template>\n    <template v-if=\"showError\">\n      <div>\n        <h1>未上传图片或图片设置异常</h1>\n        <p>请在模板页设置如下类似如下格式的 img 标签,支持本地上传和外部引入</p>\n        <p>\n          如下代码会被渲染成\n          <a href=\"https://www.siroi.top/photo/\" target=\"_blank\">展示页</a>\n        </p>\n        <pre>\n        &lt;src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" data-header=\"标题\" data-info=\"信息\" &gt;\n        &lt;img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" &gt;\n        &lt;img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" data-info=\"信息\" &gt;\n        &lt;img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" vertical=false data-info=\"信息\" &gt;\n        &lt;img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" vertical=false data-header=\"标题\" data-info=\"信息\" &gt;\n            </pre>\n        <ol>\n          img 参数说明\n          <li>data-header:标题</li>\n          <li>data-info:内容</li>\n          <li>vertical:是否竖向排列(默认竖向即vertical=true)</li>\n        </ol>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script>\nexport default {\n  async mounted() {\n    const resp = await fetch(\n      \"/wp-admin/admin-ajax.php?action=getPhoto&post=\" + this.$data.id\n    );\n    try {\n      if (resp.ok) {\n        const { imgs, code } = await resp.json();\n        if (code == 200) {\n          this.imgs = imgs;\n          this.showError = imgs.length <= 0;\n        } else {\n          console.error(code);\n        }\n      } else {\n        console.error(\"HTTP \" + resp.status);\n      }\n    } catch (e) {\n      console.error(e);\n    }\n  },\n};\n</script>\n<style>\n.container-siroi {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-around;\n}\n\n.siroi {\n  position: relative;\n  /* flex: 0 0 240px;\n        width: 240px;\n        height: 320px; */\n  background-color: #333;\n  overflow: hidden;\n  border-radius: 10px;\n  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px,\n    inset rgba(255, 255, 255, 0.5) 0 0 0 6px;\n  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n\n.siroi-bg {\n  opacity: 0.5;\n  position: absolute;\n  top: -20px;\n  left: -20px;\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95),\n    opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  pointer-events: none;\n}\n\n.siroi-info {\n  padding: 20px;\n  position: absolute;\n  bottom: 0;\n  color: #fff;\n  transform: translateY(40%);\n  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.siroi-info p {\n  opacity: 0;\n  text-shadow: black 0 2px 3px;\n  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.siroi-info * {\n  position: relative;\n  z-index: 1;\n}\n\n.siroi-info:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-image: linear-gradient(\n    to bottom,\n    transparent 0%,\n    rgba(0, 0, 0, 0.6) 100%\n  );\n  background-blend-mode: overlay;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);\n}\n\n.siroi-info h1 {\n  font-family: \"Playfair Display\";\n  font-size: 36px;\n  font-weight: 700;\n  text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;\n}\n</style>","<template>\n  <div\n    class=\"siroi-wrap\"\n    @mousemove=\"handleMouseMove\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    ref=\"siroi\"\n  >\n    <div class=\"siroi\" :style=\"siroiStyle\" ref=\"siroichild\">\n      <div class=\"siroi-bg\" :style=\"[siroiBgTransform, siroiBgImage]\"></div>\n      <div class=\"siroi-info\">\n        <slot name=\"header\"></slot>\n        <slot name=\"content\"></slot>\n      </div>\n    </div>\n  </div>\n</template>\n    <script>\nexport default {\n  props: [\"dataImage\", \"vertical\"],\n  mounted() {\n    if (this.vertical) {\n      this.$refs.siroichild.style.width = \"240px\";\n      this.$refs.siroichild.style.height = \"320px\";\n    } else {\n      this.$refs.siroichild.style.width = \"320px\";\n      this.$refs.siroichild.style.height = \"240px\";\n    }\n    this.width = this.$refs.siroi.offsetWidth;\n    this.height = this.$refs.siroi.offsetHeight;\n  },\n  data: () => ({\n    width: 0,\n    height: 0,\n    mouseX: 0,\n    mouseY: 0,\n    mouseLeaveDelay: null,\n  }),\n  computed: {\n    mousePX() {\n      return this.mouseX / this.width;\n    },\n    mousePY() {\n      return this.mouseY / this.height;\n    },\n    siroiStyle() {\n      const rX = this.mousePX * 30;\n      const rY = this.mousePY * -30;\n      return {\n        transform: `rotateY(${rX}deg) rotateX(${rY}deg)`,\n      };\n    },\n    siroiBgTransform() {\n      const tX = this.mousePX * -40;\n      const tY = this.mousePY * -40;\n      return {\n        transform: `translateX(${tX}px) translateY(${tY}px)`,\n      };\n    },\n    siroiBgImage() {\n      if (this.vertical) {\n        return {\n          width: \"280px\",\n          height: \"360px\",\n          backgroundImage: `url(${this.dataImage})`,\n        };\n      } else {\n        return {\n          width: \"360px\",\n          height: \"280px\",\n          backgroundImage: `url(${this.dataImage})`,\n        };\n      }\n    },\n  },\n  methods: {\n    handleMouseMove(e) {\n      this.mouseX = e.pageX - this.$refs.siroi.offsetLeft - this.width / 2;\n      this.mouseY = e.pageY - this.$refs.siroi.offsetTop - this.height / 2;\n    },\n    handleMouseEnter() {\n      clearTimeout(this.mouseLeaveDelay);\n    },\n    handleMouseLeave() {\n      this.mouseLeaveDelay = setTimeout(() => {\n        this.mouseX = 0;\n        this.mouseY = 0;\n      }, 1000);\n    },\n  },\n};\n</script>\n<style>\n.siroi-wrap {\n  margin: 10px;\n  transform: perspective(800px);\n  transform-style: preserve-3d;\n  cursor: pointer;\n}\n\n.siroi-wrap:hover .siroi-info {\n  transform: translateY(0);\n}\n\n.siroi-wrap:hover .siroi-info p {\n  opacity: 1;\n}\n\n.siroi-wrap:hover .siroi-info,\n.siroi-wrap:hover .siroi-info p {\n  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.siroi-wrap:hover .siroi-info:after {\n  transition: 5s cubic-bezier(0.23, 1, 0.32, 1);\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.siroi-wrap:hover .siroi-bg {\n  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1),\n    opacity 5s cubic-bezier(0.23, 1, 0.32, 1);\n  opacity: 0.8;\n}\n\n.siroi-wrap:hover .siroi {\n  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1),\n    box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);\n  box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px,\n    rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px,\n    inset white 0 0 0 6px;\n}\n</style>"],"names":[],"sourceRoot":""}