| 1 |
- {"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 <src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" data-header=\"标题\" data-info=\"信息\" >\n <img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" >\n <img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" data-info=\"信息\" >\n <img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" vertical=false data-info=\"信息\" >\n <img src=\"https://www.wahaotu.com/uploads/allimg/202010/1602912171649821.jpg\" alt=\"\" vertical=false data-header=\"标题\" data-info=\"信息\" >\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":""}
|
