{"version":3,"sources":["webpack:///./src/views/CloudClass.vue?90e0","webpack:///src/views/CloudClass.vue","webpack:///./src/views/CloudClass.vue?5f48","webpack:///./src/views/CloudClass.vue?3341","webpack:///./node_modules/core-js/modules/es6.date.now.js","webpack:///./src/views/CloudClass.vue?18a5"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","isPlayback","on","goBack","attrs","_e","togglePlay","isPlaying","playing","_v","_s","currentTime","ref","seek","style","width","percent","duration","directives","name","rawName","value","expression","$event","$$selectedVal","Array","prototype","filter","call","target","options","o","selected","map","val","_value","speed","multiple","onPlaybackRateChange","domProps","streamingUrl","staticStyle","staticRenderFns","formatTime","time","minute","second","components","data","isShowControls","timeoutId","isLoaded","player","lastUpdateProgressAt","startTouchPositionX","startTouchPositionY","startTouchTime","touchMinHorizontalMove","touchMaxVerticalMove","touchWithin","lastUpdateProgressTime","methods","$store","state","app","$pub","appAction","$router","go","showControls","clearTimeout","setTimeout","onPlayerReady","pause","then","ended","play","playbackRate","onTouchStart","event","touches","pageX","pageY","Date","now","onTouchEnd","moveY","setupTouchEvent","container","addEventListener","onTimeUpdate","updateProgress","$http","post","meetingId","destroyed","mounted","component","$export","S","getTime"],"mappings":"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","file":"js/chunk-42a0f482.534e8351.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"cloud-class\",class:{ 'is-playback': _vm.isPlayback }},[(_vm.isShowControls)?_c('div',{staticClass:\"back\",on:{\"click\":_vm.goBack}},[_c('img',{attrs:{\"src\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAwCAYAAAAGlsrkAAADgUlEQVRYR8XY+6ulUxzH8dcYYsglGteI/OASpsYPrkXKdRq5TogIM5Mf5D8RPx23URTygzCuTcYouSU1Ipo0buMSEWJCGPpMa9eeZ9az97P3efbxrdM5nf3s9V7ftb6Xz/dZ5H+yRQvEPQCnIb8/wdaFAAe2GidjL/yMuVmC98BRuAtHNk723VmB98T5uAIHV65z8yzA8fQ6XIAlaDL+nMVRH4JbcHpL0G7H09jQp8cnFU+PR7xu2md4Bu9hRx/grJH7vAYHVY72X7yPx/D1YDfzBe+NFViJ/N20vwr0Afw2/OF8wEfgSpxR8rMJ/REv4hVkA7vYtOATcROOrRxtACkS9+ND/FMLtEnBixHoHS35Gcg23IPvR5XjScAH4kJchn1a7vNVrMdP43pAV/C+uL3kZ+pt0/7G43gNf4yD5vNx4Hx+GO7EcZUFkyo/4OESvV2YO58ZBc59noOrcGjLigmeJ/EpsonO1gbO/5MqlyLH3HwuQbSxlL9fOtOGHqyBU31uxNktC/6O58vPbvnZdRNNcOrs9TgBOeqmfVXq7Ttt+TkN+CzcUPKzuaHc38d4FF92XXxcHqdpX4yrW/IzqfIR7isVqQ/uzqBJUYintSKfQrABLyMNvDcL+F4srayYbpKushnxulcL+G4cXlk10ZvCkECaCfhc3Iz9KvBIlU14Dr/26XI8TtpEmK1qgcfbLXhwXMeZZGPDaROlv7ZFvmTNrXiopNNE5bG2oWa+RoBHmi5D0qxpaQhpe6/PN8prJTN9N40haVaztL2kWBRjpxbYxePhZy4pRaXWJPLcG6WSTRV0o9pitPFyXIujW7xPO3yilNMd0wZX24lECNyKUyoPJMiiJgN/q0/wYK2U09tGSNls4Cm80DXoxkmfYSdy15kYLi8DdtPB5PvbZQPfjfN+EnDWSrFJr47wq5XZKJP07Gjqz0fBJwUP1orwy5R/TMuAllI7VwRgL4J+2IkM3Dn281paarRYxpeMMWk4u9i0Hg8H3UVl8s8Q3rRosg+wriny5wsegCKb0uH2bxlTI5vSYr8ZfKEvcNbLABclkwG9JhS/xbN4M/29T3DgeRWRJpNBoGYJukjjl/oGD2ARjhnYU3hqw8C6WYFz1GeWJlPL922zAsfzwQu2NcigMGxfzBI8AEXLBR6FkxE3Of3IQoCzgcBPLcGX105bFgq8W4T/B/tloBIPNqWNAAAAAElFTkSuQmCC\"}})]):_vm._e(),_c('div',{attrs:{\"id\":\"viewport\"},on:{\"click\":_vm.togglePlay}},[(!_vm.isPlaying)?_c('span',{staticClass:\"play-icon\"}):_vm._e()]),(_vm.isPlayback)?_c('div',{staticClass:\"player\"},[(_vm.isShowControls)?_c('div',{attrs:{\"id\":\"toolbar\"}},[_c('div',{staticClass:\"play-pause\",class:{ playing: _vm.isPlaying },on:{\"click\":_vm.togglePlay}},[_c('span',{staticClass:\"play-icon\"})]),_c('div',{staticClass:\"played\"},[_vm._v(_vm._s(_vm.currentTime))]),_c('div',{ref:\"scrubber\",staticClass:\"scrubber\",on:{\"click\":_vm.seek}},[_c('div',{staticClass:\"progress\",style:({ width: (_vm.percent + \"%\") })},[_c('span',{staticClass:\"fish\"})])]),_c('div',{staticClass:\"duration\"},[_vm._v(_vm._s(_vm.duration))]),_c('select',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.speed),expression:\"speed\"}],staticClass:\"speed\",attrs:{\"name\":\"speed\"},on:{\"change\":[function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = \"_value\" in o ? o._value : o.value;return val}); _vm.speed=$event.target.multiple ? $$selectedVal : $$selectedVal[0]},_vm.onPlaybackRateChange]}},[_c('option',{domProps:{\"value\":0.5}},[_vm._v(\"0.5\")]),_c('option',{domProps:{\"value\":0.75}},[_vm._v(\"0.75\")]),_c('option',{attrs:{\"selected\":\"\"},domProps:{\"value\":1}},[_vm._v(\"正常\")]),_c('option',{domProps:{\"value\":1.25}},[_vm._v(\"1.25\")]),_c('option',{domProps:{\"value\":1.5}},[_vm._v(\"1.5\")]),_c('option',{domProps:{\"value\":2}},[_vm._v(\"2\")])])]):_vm._e()]):_vm._e(),(!_vm.isPlayback && _vm.streamingUrl)?_c('iframe',{staticStyle:{\"height\":\"100vh\",\"width\":\"100vw\"},attrs:{\"src\":_vm.streamingUrl,\"frameborder\":\"0\"}}):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"cloud-class\" :class=\"{ 'is-playback': isPlayback }\">\n    <div class=\"back\" v-if=\"isShowControls\" @click=\"goBack\">\n      <img\n        src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAwCAYAAAAGlsrkAAADgUlEQVRYR8XY+6ulUxzH8dcYYsglGteI/OASpsYPrkXKdRq5TogIM5Mf5D8RPx23URTygzCuTcYouSU1Ipo0buMSEWJCGPpMa9eeZ9az97P3efbxrdM5nf3s9V7ftb6Xz/dZ5H+yRQvEPQCnIb8/wdaFAAe2GidjL/yMuVmC98BRuAtHNk723VmB98T5uAIHV65z8yzA8fQ6XIAlaDL+nMVRH4JbcHpL0G7H09jQp8cnFU+PR7xu2md4Bu9hRx/grJH7vAYHVY72X7yPx/D1YDfzBe+NFViJ/N20vwr0Afw2/OF8wEfgSpxR8rMJ/REv4hVkA7vYtOATcROOrRxtACkS9+ND/FMLtEnBixHoHS35Gcg23IPvR5XjScAH4kJchn1a7vNVrMdP43pAV/C+uL3kZ+pt0/7G43gNf4yD5vNx4Hx+GO7EcZUFkyo/4OESvV2YO58ZBc59noOrcGjLigmeJ/EpsonO1gbO/5MqlyLH3HwuQbSxlL9fOtOGHqyBU31uxNktC/6O58vPbvnZdRNNcOrs9TgBOeqmfVXq7Ttt+TkN+CzcUPKzuaHc38d4FF92XXxcHqdpX4yrW/IzqfIR7isVqQ/uzqBJUYintSKfQrABLyMNvDcL+F4srayYbpKushnxulcL+G4cXlk10ZvCkECaCfhc3Iz9KvBIlU14Dr/26XI8TtpEmK1qgcfbLXhwXMeZZGPDaROlv7ZFvmTNrXiopNNE5bG2oWa+RoBHmi5D0qxpaQhpe6/PN8prJTN9N40haVaztL2kWBRjpxbYxePhZy4pRaXWJPLcG6WSTRV0o9pitPFyXIujW7xPO3yilNMd0wZX24lECNyKUyoPJMiiJgN/q0/wYK2U09tGSNls4Cm80DXoxkmfYSdy15kYLi8DdtPB5PvbZQPfjfN+EnDWSrFJr47wq5XZKJP07Gjqz0fBJwUP1orwy5R/TMuAllI7VwRgL4J+2IkM3Dn281paarRYxpeMMWk4u9i0Hg8H3UVl8s8Q3rRosg+wriny5wsegCKb0uH2bxlTI5vSYr8ZfKEvcNbLABclkwG9JhS/xbN4M/29T3DgeRWRJpNBoGYJukjjl/oGD2ARjhnYU3hqw8C6WYFz1GeWJlPL922zAsfzwQu2NcigMGxfzBI8AEXLBR6FkxE3Of3IQoCzgcBPLcGX105bFgq8W4T/B/tloBIPNqWNAAAAAElFTkSuQmCC\"\n      />\n    </div>\n    <div id=\"viewport\" @click=\"togglePlay\">\n      <span class=\"play-icon\" v-if=\"!isPlaying\"></span>\n    </div>\n\n    <div class=\"player\" v-if=\"isPlayback\">\n      <div id=\"toolbar\" v-if=\"isShowControls\">\n        <div\n          class=\"play-pause\"\n          :class=\"{ playing: isPlaying }\"\n          @click=\"togglePlay\"\n        >\n          <span class=\"play-icon\"></span>\n        </div>\n        <div class=\"played\">{{ currentTime }}</div>\n        <div class=\"scrubber\" ref=\"scrubber\" @click=\"seek\">\n          <div class=\"progress\" :style=\"{ width: `${percent}%` }\">\n            <span class=\"fish\"></span>\n          </div>\n        </div>\n        <div class=\"duration\">{{ duration }}</div>\n        <select\n          name=\"speed\"\n          v-model=\"speed\"\n          class=\"speed\"\n          @change=\"onPlaybackRateChange\"\n        >\n          <option :value=\"0.5\">0.5</option>\n          <option :value=\"0.75\">0.75</option>\n          <option :value=\"1\" selected>正常</option>\n          <option :value=\"1.25\">1.25</option>\n          <option :value=\"1.5\">1.5</option>\n          <option :value=\"2\">2</option>\n        </select>\n      </div>\n    </div>\n\n    <iframe\n      v-if=\"!isPlayback && streamingUrl\"\n      :src=\"streamingUrl\"\n      frameborder=\"0\"\n      style=\"height: 100vh; width: 100vw\"\n    />\n  </div>\n</template>\n\n<script>\nfunction formatTime(time) {\n  const m = Math.floor(time / 60);\n  const s = Math.floor(time % 60);\n  const minute = m > 9 ? m : \"0\" + m;\n  const second = s > 9 ? s : \"0\" + s;\n  return minute + \":\" + second;\n}\n\nexport default {\n  components: {},\n  name: \"PlasoCloudClass\",\n  data() {\n    return {\n      isShowControls: true,\n      timeoutId: null,\n      isLoaded: false,\n      currentTime: 0,\n      duration: 0,\n      isPlaying: false,\n      player: null,\n      isPlayback: false,\n      streamingUrl: \"\",\n      percent: 0,\n      lastUpdateProgressAt: 0,\n      startTouchPositionX: 0,\n      startTouchPositionY: 0,\n      startTouchTime: 0,\n      touchMinHorizontalMove: 30,\n      touchMaxVerticalMove: 30,\n      touchWithin: 3000,\n      lastUpdateProgressTime: 0,\n      speed: 1,\n    };\n  },\n  methods: {\n    goBack() {\n      if (this.$store.state.app) {\n        this.$pub.appAction(\"closeAppPage\");\n      } else {\n        this.$router.go(-1);\n      }\n    },\n    showControls() {\n      if (this.timeoutId) {\n        clearTimeout(this.timeoutId);\n      }\n      this.isShowControls = true;\n      this.timeoutId = setTimeout(() => {\n        this.isShowControls = false;\n      }, 3000);\n    },\n    onPlayerReady(player) {\n      this.isLoaded = true;\n      this.player = player;\n    },\n    togglePlay() {\n      if (!this.isLoaded || !this.player) {\n        return;\n      }\n      const player = this.player;\n      const isPlaying = this.isPlaying;\n\n      if (isPlaying) {\n        player.pause().then(() => {\n          this.isPlaying = false;\n        });\n      } else {\n        if (player.ended) {\n          this.player.currentTime = 0;\n        }\n        player.play().then(() => {\n          this.isPlaying = true;\n        });\n      }\n    },\n    onPlaybackRateChange() {\n      this.player.playbackRate = this.speed;\n    },\n    onTouchStart(event) {\n      this.startTouchPositionX = event.touches[0].pageX;\n      this.startTouchPositionY = event.touches[0].pageY;\n      this.startTouchTime = Date.now();\n      this.showControls();\n    },\n    onTouchEnd(event) {\n      const x = event.changedTouches[0].pageX;\n      const y = event.changedTouches[0].pageY;\n      const endTime = Date.now();\n      const moveX = x - this.startTouchPositionX;\n      const moveY = y - this.startTouchPositionY;\n      const elapsedTime = endTime - this.startTouchTime;\n      if (\n        Math.abs(moveX) < this.touchMinHorizontalMove &&\n        Math.abs(moveY) > this.touchMaxVerticalMove &&\n        elapsedTime < this.touchWithin\n      ) {\n        if (moveY < 0) {\n          this.player.currentTime -= 10;\n        } else {\n          this.player.currentTime += 10;\n        }\n      }\n    },\n    setupTouchEvent(container) {\n      container.addEventListener(\"touchstart\", this.onTouchStart);\n      container.addEventListener(\"touchend\", this.onTouchEnd);\n    },\n    seek(event) {\n      if (!this.isLoaded || !this.player) {\n        return;\n      }\n      const scrubber = this.$refs.scrubber;\n      const top = scrubber.getBoundingClientRect().top;\n      const percent =\n        (event.clientY - top) / scrubber.getBoundingClientRect().height;\n      this.player.currentTime = percent * this.player.duration;\n    },\n    onTimeUpdate() {\n      if (!this.isLoaded || !this.player) {\n        return;\n      }\n      const currentTime = this.player.currentTime;\n      this.currentTime = formatTime(currentTime);\n      this.duration = formatTime(this.player.duration);\n      this.percent = (this.player.currentTime / this.player.duration) * 100;\n      const now = Date.now();\n      const diff = now - this.lastUpdateProgressAt;\n      const interval = 5 * 1000;\n      if (\n        this.lastUpdateProgressTime !== currentTime &&\n        diff >= interval &&\n        currentTime >= 1\n      ) {\n        this.updateProgress(currentTime);\n        this.lastUpdateProgressAt = now;\n        this.lastUpdateProgressTime = currentTime;\n      }\n    },\n    updateProgress(currentTime) {\n      const meetingId = this.$route.query.meetingId;\n      this.$http.post(\"/api/app/course/class_progress\", {\n        meetingId,\n        currentTime,\n      });\n    },\n  },\n  destroyed() {\n    if (this.player) {\n      this.player.pause();\n      this.player = null;\n    }\n  },\n  mounted() {\n    const meetingId = this.$route.query.meetingId;\n\n    this.$http\n      .get(\"/api/app/course/class_info\", {\n        meetingId,\n        appType: \"liveclassSDK\",\n        userType: \"listener\",\n        meetingType: \"private\",\n        mediaType: \"audio\",\n      })\n      .then((result) => {\n        const classUrl = result.class_url;\n        this.isPlayback = result.is_playback;\n        if (this.isPlayback) {\n          const container = document.getElementById(\"viewport\");\n          container.style.display = \"block\";\n          this.setupTouchEvent(container);\n          const sdkPlayer = new window.PlasoUpimePlayer(container);\n          const query = result.query;\n          const option = {};\n          const currentTime = result.current_time;\n\n          sdkPlayer.setSrc(query, option);\n          sdkPlayer.on(\"canplay\", () => {\n            if (currentTime) {\n              sdkPlayer.currentTime = currentTime;\n            }\n\n            this.onPlayerReady(sdkPlayer);\n            this.onTimeUpdate();\n          });\n          sdkPlayer.on(\"timeupdate\", this.onTimeUpdate);\n          sdkPlayer.on(\"click\", this.togglePlay);\n        } else {\n          this.streamingUrl = classUrl;\n        }\n      });\n\n    this.showControls();\n  },\n};\n</script>\n<style>\n.cloud-class {\n  height: 100vh;\n  width: 100vw;\n}\n@media screen and (orientation: portrait) {\n  /*要横屏显示的内容的外层盒子*/\n  .is-playback {\n    /* 设置基准点为左上角 */\n    transform-origin: top left;\n    /* 以左上角为基准点，顺时针旋转90度 然后沿Y轴反方向平移100% */\n    /* 为什么沿Y轴，因为旋转使坐标轴方向发生了变化 */\n    transform: rotate(90deg) translateY(-100%);\n    /*设置元素的宽度为 100%父元素的高度 并提高样式优先级 */\n    width: 100vh !important;\n    /*设置元素的宽度为 100%父元素的宽度  并提高样式优先级 */\n    height: 100vw !important;\n  }\n}\n\n.player {\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  position: relative;\n}\n\n#viewport {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n  display: none;\n}\n\n#viewport .play-icon {\n  position: absolute;\n  top: calc(50vw - 50px);\n  left: calc(50vh - 50px);\n  width: 100px;\n  height: 100px;\n  z-index: 6;\n  filter: brightness(0.8);\n}\n\n#toolbar {\n  position: absolute;\n  z-index: 10;\n  width: 100%;\n  height: 120px;\n  left: 0;\n  bottom: 0;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  transform: translate(0px, 0px) translateZ(0px);\n}\n\n#toolbar::before {\n  content: \"\";\n  position: absolute;\n  height: 120px;\n  width: 100%;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  pointer-events: none;\n  background-image: linear-gradient(\n    rgba(128, 128, 128, 0) 0%,\n    rgba(115, 115, 115, 0.04) 22%,\n    rgba(19, 19, 19, 0.15) 75%,\n    rgba(0, 0, 0, 0.25) 100%\n  );\n}\n\n.play-pause {\n  width: 60px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.play-icon {\n  width: 20px;\n  height: 20px;\n  background-size: 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-image: url(data:image/png;base64,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);\n  transform: translate(0px, 0px) translateZ(0px);\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.playing .play-icon {\n  background-image: url(data:image/png;base64,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);\n}\n\n.played {\n  text-align: left;\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.duration {\n  text-align: center;\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.played,\n.duration {\n  height: 20px;\n  line-height: 20px;\n  font-size: 14px;\n  color: #ffffff;\n  width: 60px;\n}\n\n.scrubber {\n  flex-grow: 1;\n  position: relative;\n  height: 44px;\n  margin: 0px;\n  border-left: 0px;\n  border-bottom: 0px;\n  overflow: visible;\n}\n\n.scrubber::after {\n  content: \"\";\n  position: absolute;\n  height: 6px;\n  top: 19px;\n  left: 0;\n  right: 0;\n  border-radius: 3px;\n  border: none;\n  background: rgba(255, 255, 255, 0.6);\n}\n\n.progress {\n  position: absolute;\n  left: 0px;\n  top: calc(50% - 3px);\n  height: 2vw;\n  background: #03c777;\n  border-radius: 3px;\n  overflow: visible;\n  z-index: 1;\n}\n\n.fish {\n  position: absolute;\n  top: -7px;\n  right: -10px;\n  width: 20px;\n  display: inline-block;\n  height: 20px;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);\n}\n\n.speed {\n  border: none;\n  outline: none;\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.inlineblock {\n  display: inline-block;\n}\n\n.btn {\n  color: #fff;\n  background-color: #2ea44f;\n  border-color: rgba(27, 31, 35, 0.15);\n  box-shadow: 0 1px 0 rgba(27, 31, 35, 0.1),\n    inset 0 1px 0 hsla(0, 0%, 100%, 0.03);\n  margin: 10px 0;\n  position: relative;\n  padding: 5px 16px;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  white-space: nowrap;\n  vertical-align: middle;\n  cursor: pointer;\n  user-select: none;\n  border: 1px solid;\n  border-radius: 6px;\n  appearance: none;\n}\n\n.back {\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  width: 80px;\n  text-align: center;\n  transform: translate(0px, 0px) translateZ(0px);\n  z-index: 20;\n}\n\n.back img {\n  width: 18px;\n  height: 32px;\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../node_modules/style-vw-loader/index.js!./CloudClass.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../node_modules/style-vw-loader/index.js!./CloudClass.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CloudClass.vue?vue&type=template&id=0df71fae&\"\nimport script from \"./CloudClass.vue?vue&type=script&lang=js&\"\nexport * from \"./CloudClass.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CloudClass.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","// 20.3.3.1 / 15.9.4.4 Date.now()\nvar $export = require('./_export');\n\n$export($export.S, 'Date', { now: function () { return new Date().getTime(); } });\n","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../node_modules/style-vw-loader/index.js!./CloudClass.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../node_modules/style-vw-loader/index.js!./CloudClass.vue?vue&type=style&index=0&lang=css&\""],"sourceRoot":""}