{"version":3,"sources":["webpack:///./src/components/timer/Hourglass.vue?f520","webpack:///./src/components/timer/Hourglass.vue","webpack:///./src/components/timer/Hourglass.vue?0671"],"names":["_createElementBlock","class","style","_normalizeStyle","$options","animationSpeed","watercolor","$props","tbackground","name","props","duration","type","Number","default","validator","value","String","waterColor","computed","console","log","this","__exports__","render"],"mappings":"kHAAA,W,0ICCIA,gCAqCM,OArCDC,MAAM,YAAeC,MAAKC,4BAAA,C,oBAAgCC,EAAAC,e,cAAsCD,EAAAE,W,gBAAoCC,EAAAC,e,6zBAyC5H,OACbC,KAAM,YACNC,MAAO,CACLC,SAAU,CACRC,KAAMC,OACNC,QAAS,GACTC,UAAYC,GAAUA,EAAQ,GAEhCR,YAAY,CACVI,KAAKK,OACLH,QAAQ,SAEVI,WAAW,CACTN,KAAKK,OACLH,QAAQ,SAGZK,SAAU,CACRd,iBAGE,OAFAe,QAAQC,IAAI,cACZD,QAAQC,IAAIC,KAAKX,UACPW,KAAKX,SAAR,KAGTL,aAGE,OAFAc,QAAQC,IAAI,cAEL,GAAGC,KAAKJ,c,iCC9DvB,MAAMK,EAA2B,IAAgB,EAAQ,CAAC,CAAC,SAASC,GAAQ,CAAC,YAAY,qBAE1E","file":"js/chunk-3f64daa2.421acf47.js","sourcesContent":["export * from \"-!../../../node_modules/_mini-css-extract-plugin@0.9.0@mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/_vue-loader@16.8.3@vue-loader/dist/stylePostLoader.js!../../../node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/_sass-loader@10.5.2@sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/_vue-loader@16.8.3@vue-loader/dist/index.js??ref--1-1!./Hourglass.vue?vue&type=style&index=0&id=4e232fb0&scoped=true&lang=scss\"","<template>\r\n    <div class=\"container\"   :style=\"{\r\n      '--animation-speed': animationSpeed,\r\n      '--sandColor': watercolor,\r\n      '--tbackground': tbackground\r\n    }\">\r\n      <div class=\"hourglass\">\r\n        <!-- 沙漏上部 -->\r\n        <div class=\"top\"></div>\r\n  \r\n        <!-- 沙漏下部 -->\r\n        <div class=\"bottom\">\r\n          <div class=\"bottom_sand\"></div>\r\n        </div>\r\n  \r\n        <!-- 沙漏中间连接 -->\r\n        <div class=\"mid\"></div>\r\n  \r\n        <!-- 沙粒动画 -->\r\n        <div class=\"drops\">\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n            <div class=\"drop\"></div>\r\n        </div>\r\n  \r\n        <!-- 沙漏的木架 -->\r\n        <div class=\"woods\">\r\n          <div class=\"wood\"></div>\r\n          <div class=\"wood\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </template>\r\n  \r\n  <script>\r\n  export default {\r\n    name: \"Hourglass\",\r\n    props: {\r\n      duration: {\r\n        type: Number,\r\n        default: 60, // 默认倒计时 60 秒\r\n        validator: (value) => value > 0,\r\n      },\r\n      tbackground:{\r\n        type:String,\r\n        default:\"white\"\r\n      },\r\n      waterColor:{\r\n        type:String,\r\n        default:\"blue\",\r\n      }\r\n    },\r\n    computed: {\r\n      animationSpeed() {\r\n        console.log(\"⬆️⬆️⬆️⬆️⬆️\")\r\n        console.log(this.duration)\r\n        return `${this.duration}s`; // 将持续时间转换为 CSS 的动画时间\r\n      },\r\n\r\n      watercolor() {\r\n        console.log(\"⬆️⬆️⬆️⬆️⬆️\")\r\n  \r\n        return `${this.waterColor}`; // 将持续时间转换为 CSS 的动画时间\r\n      },\r\n    },\r\n  };\r\n  </script>\r\n  \r\n  <style  scoped lang=\"scss\"> \r\n\r\n  .container {\r\n    position: absolute;\r\n    width: 420px;\r\n    height: 420px;\r\n   \r\n    border: 2px solid #fff;\r\n    border-radius: 4px;\r\n    background:var(--tbackground);\r\n  }\r\n  \r\n  .hourglass {\r\n    position: relative;\r\n    height: 100%;\r\n  }\r\n  \r\n  .wood {\r\n    position: absolute;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background-color:var(--woodColor);\r\n    width: 220px;\r\n    height: 30px;\r\n    &:nth-child(1) {\r\n      top: 20px;\r\n    }\r\n    &:nth-child(2) {\r\n      bottom: 20px;\r\n    }\r\n  }\r\n  \r\n  .top {\r\n    position: absolute;\r\n    bottom: 50%;\r\n    left: 50%;\r\n    width: 200px;\r\n    height: 110px;\r\n    border: 2px solid  rgb(226, 222, 200);\r\n    border-radius: 20px 20px 200px 200px;\r\n    transform: translateX(-50%) scale(1, 1.5);\r\n    transform-origin: bottom;\r\n    overflow: hidden;\r\n  \r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 0%;\r\n      background-color: var(--sandColor);\r\n      animation: sandHeightTop var(--animation-speed) linear 1;\r\n    }\r\n  \r\n    @keyframes sandHeightTop {\r\n      0% {\r\n        height: 100%;\r\n      }\r\n      100% {\r\n        height: 0%;\r\n      }\r\n    }\r\n  }\r\n  \r\n  .bottom {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 200px;\r\n    height: 110px;\r\n    border: 2px solid rgb(226, 222, 200);\r\n    border-radius: 200px 200px 20px 20px;\r\n    transform: translateX(-50%) scale(1, 1.5);\r\n    transform-origin: top;\r\n    overflow: hidden;\r\n  \r\n    .bottom_sand {\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0%;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color:var(--sandColor);\r\n      transform: scale(3, 1);\r\n      animation: sandTop var(--animation-speed) linear 1;\r\n      animation-fill-mode: forwards;\r\n      // &::before {\r\n      //   content: '';\r\n      //   position: absolute;\r\n      //   top: 0;\r\n      //   left: 50%;\r\n      //   width: 100px;\r\n      //   height: 100px;\r\n      //   border-radius: 5px;\r\n      //   background-color: var(--sandColor);\r\n      //   transform: translateX(-50%) rotate(45deg);\r\n      //   animation: sandAngle var(--animation-speed) linear 1;\r\n      //   // filter: blur(2px);\r\n      // }\r\n    }\r\n  \r\n    @keyframes sandTop {\r\n      0% {\r\n        top: 100%;\r\n      }\r\n      80% {\r\n        top: 20%;\r\n      }\r\n\r\n      100% {\r\n        top: 0%;\r\n      }\r\n    }\r\n  \r\n    @keyframes sandAngle {\r\n      0% {\r\n        border-radius: 5px;\r\n      }\r\n      100% {\r\n        border-radius: 50px;\r\n      }\r\n    }\r\n  }\r\n  \r\n  .mid {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 18px;\r\n    height: 6px;\r\n    border: solid var(--woodColor);\r\n    border-width: 0 3px;\r\n    transform: translate(-50%, -50%);\r\n    transform-origin: center;\r\n    background-color: var(--sandColor);\r\n  \r\n    &::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      background-color: var(--sandColor);\r\n      width: 12px;\r\n      height: 14px;\r\n      border-radius: 50%;\r\n      // filter: blur(3px);\r\n    }\r\n  }\r\n  \r\n  .drop {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  background-color: var(--sandColor); /* 使用相同的沙粒颜色 */\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 50%;\r\n  \r\n  --dropx: -50%;\r\n  opacity: 1; /* 初始时保持沙粒颜色一致，不透明 */\r\n  animation: sandDrop 5s ease-in infinite, dropVis var(--animation-speed) linear infinite;\r\n\r\n  @for $i from 0 through 9 {\r\n    &:nth-child(#{$i + 1}) {\r\n      animation-delay: #{1 * $i}s; /* 每个沙粒有不同的延迟时间 */\r\n      --dropx: #{(($i * 230) % 100) - 100}%;\r\n    }\r\n  }\r\n\r\n  @keyframes sandDrop {\r\n    from {\r\n      top: 50%;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n    to {\r\n      top: calc(50% + 160px);\r\n      transform: translate(var(--dropx), -50%) scale(0.25);\r\n    }\r\n  }\r\n\r\n  @keyframes dropVis {\r\n    0% {\r\n      opacity: 1; /* 确保动画开始时，沙粒颜色和透明度一致 */\r\n    }\r\n    100% {\r\n      opacity: 1; /* 保持透明度不变 */\r\n    }\r\n  }\r\n}\r\n\r\n\r\n  </style>\r\n  ","import { render } from \"./Hourglass.vue?vue&type=template&id=4e232fb0&scoped=true\"\nimport script from \"./Hourglass.vue?vue&type=script&lang=js\"\nexport * from \"./Hourglass.vue?vue&type=script&lang=js\"\n\nimport \"./Hourglass.vue?vue&type=style&index=0&id=4e232fb0&scoped=true&lang=scss\"\n\nimport exportComponent from \"D:\\\\startup\\\\gtdhtml5\\\\node_modules\\\\_vue-loader@16.8.3@vue-loader\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-4e232fb0\"]])\n\nexport default __exports__"],"sourceRoot":""}