{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/home/childComps/listfirst.vue?vue&type=style&index=0&id=59ef5a44&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/home/childComps/listfirst.vue","mtime":1618847032324},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5Ib21lVmVkaW8gewogIGhlaWdodDogMTAwdmg7Cn0KCi5iYWNrIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgd2lkdGg6IDMwcHg7CiAgaGVpZ2h0OiAzMHB4OwogIGxlZnQ6MTBweDsKICB0b3A6IDUwJTsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLCAtNTAlKTsKfQoKLmJhY2sgaW1nIHsKICBjb2xvcjogI2ZmZjsKfQoKLm5hdi1iYXIgewogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICNkZjM4MzI7Cn0KCi5saXN0IHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKfQoKLmxpc3QgaW1nIHsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDMwJTsKfQoKLmxpc3Qgc3BhbiB7CiAgd2lkdGg6IDEwMCU7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGhlaWdodDogNDBweDsKICBsaW5lLWhlaWdodDogNDBweDsKICBjb2xvcjogIzMzMzsKfQoKLmNvbnRlbnQgewogIGxlZnQ6IDA7CiAgcmlnaHQ6IDA7CiAgdG9wOiA0NHB4OwogIGJvdHRvbTogMHB4OwogIG92ZXJmbG93OiBoaWRkZW47CiAgcG9zaXRpb246IGFic29sdXRlOwp9Cgo="},{"version":3,"sources":["listfirst.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"listfirst.vue","sourceRoot":"src/views/home/childComps","sourcesContent":["<template>\n  <div class=\"HomeVedio\">\n    <NavBar class=\"nav-bar\">\n      <div slot=\"left\" class=\"back\" @click=\"backClick\">\n        <img src=\"@/assets/img/home/back.svg\" alt=\"\" />\n      </div>\n      <div slot=\"center\">白酒宣传</div>\n    </NavBar>\n    <scroll\n      class=\"content\"\n      ref=\"scroll\"\n      :probe-type=\"3\"\n      :pull-up-load=\"true\"\n      @pullingUp=\"loadMore\"\n      @pullingDown=\"pullingDown\"\n    >\n    <div>\n            <videoPlayer\n        class=\"video-player vjs-custom-skin\"\n        ref=\"videoPlayer\"\n        :playsinline=\"true\"\n        :options=\"playerOptions\"\n      ></videoPlayer>\n      <div class=\"list\">\n        <img src=\"@/assets/img/listfirst/detail1.jpg\" alt=\"\" @load=\"computerheight\" />\n        <img src=\"@/assets/img/listfirst/detail2.jpg\" alt=\"\" @load=\"computerheight\"  />\n        <img src=\"@/assets/img/listfirst/detail3.jpg\" alt=\"\" @load=\"computerheight\"  />\n        <img src=\"@/assets/img/listfirst/detail4.jpg\" alt=\"\" @load=\"computerheight\"  />\n        <img src=\"@/assets/img/listfirst/detail5.jpg\" alt=\"\" @load=\"computerheight\"  />\n      </div>\n    </div>\n    </scroll>\n  </div>\n</template>\n\n<script>\nimport NavBar from \"@/components/common/navbar/NavBar\";\nimport { videoPlayer } from \"vue-video-player\";\nimport \"video.js/dist/video-js.css\";\nimport scroll from \"@/components/common/Scroll/Scroll\";\n\nexport default {\n  name: \"HomeVedioView\",\n  components: {\n    NavBar,\n    videoPlayer,\n    scroll\n  },\n  methods: {\n    backClick() {\n      this.$router.push(\"/home\");\n    },\n    loadMore() {\n      this.$refs.scroll.refresh();\n    },\n    pullingDown() {\n      this.pullingdown = true;\n      setTimeout(() => {\n        this.pullingdown = false;\n        this.$refs.scroll.finishPullDown();\n      }, 0);\n    },\n    computerheight() {\n        this.$refs.scroll.refresh()\n    }\n  },\n  data() {\n    return {\n      playerOptions: {\n        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度\n        autoplay: true, //如果true,浏览器准备好时开始回放。\n        muted: false, // 默认情况下将会消除任何音频。\n        loop: false, // 导致视频一结束就重新开始。\n        preload: \"auto\", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）\n        language: \"zh-CN\",\n        aspectRatio: \"16:9\", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如\"16:9\"或\"4:3\"）\n        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。\n        sources: [\n          {\n            type: \"video/mp4\",\n            src:\n              \"http://47.108.153.30:7878/vedio/baijiu.mp4\"\n          }\n        ],\n        poster: \"@/assets/img/cart/logo.jpg\", //你的封面地址\n        // width: document.documentElement.clientWidth,\n        notSupportedMessage: \"此视频暂无法播放，请稍后再试\", //允许覆盖Video.js无法播放媒体源时显示的默认信息。\n        controlBar: {\n          timeDivider: true,\n          durationDisplay: true,\n          remainingTimeDisplay: false,\n          fullscreenToggle: true //全屏按钮\n        }\n      }\n    };\n  },\n  mounted() {\n  },\n  created(){\n  //  const obutton = document.querySelector(\".video-js .vjs-big-play-button\");\n  //  console.log(obutton);\n  //   obutton.style.top = \"50%\";\n  //   obutton.style.left = \"50%\";\n  //   obutton.style.transform = \"translate(-50%,-50%)\";\n  }\n};\n</script>\n\n<style scoped>\n.HomeVedio {\n  height: 100vh;\n}\n\n.back {\n  position: relative;\n  width: 30px;\n  height: 30px;\n  left:10px;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n\n.back img {\n  color: #fff;\n}\n\n.nav-bar {\n  color: #fff;\n  background-color: #df3832;\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.list img {\n  width: 100%;\n  height: 30%;\n}\n\n.list span {\n  width: 100%;\n  text-align: center;\n  height: 40px;\n  line-height: 40px;\n  color: #333;\n}\n\n.content {\n  left: 0;\n  right: 0;\n  top: 44px;\n  bottom: 0px;\n  overflow: hidden;\n  position: absolute;\n}\n\n</style>"]}]}