caimei-video.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="video" :class="show ? 'video-show' : ''">
  3. <video :src="videoSrc" class="videoRef"></video>
  4. <view style="display: flex;width: 100%;flex-direction: row-reverse;" @click="cancel">
  5. <image
  6. src="@/static/supplier-login/close.png"
  7. mode=""
  8. class="iconfont icon-guanbi close"
  9. :class="show ? 'video-show' : ''"
  10. ></image>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. show: {
  18. type: Boolean,
  19. default: () => false
  20. },
  21. videoObj: {
  22. type: Object,
  23. default: () => {}
  24. }
  25. },
  26. data() {
  27. return {}
  28. },
  29. methods: {
  30. cancel() {
  31. this.$emit('closeClick')
  32. }
  33. }
  34. }
  35. </script>
  36. <style lang="scss" scoped>
  37. .video {
  38. width: 100vw;
  39. height: 100vh;
  40. box-sizing: border-box;
  41. background-color: rgba(0, 0, 0, 0.5);
  42. justify-content: center;
  43. align-items: center;
  44. flex-direction: column-reverse;
  45. z-index: 999;
  46. position: fixed;
  47. opacity: 0;
  48. display: none;
  49. left: 0;
  50. top: 0;
  51. .videoRef {
  52. width: 80%;
  53. height: 400rpx;
  54. }
  55. }
  56. .video-show {
  57. opacity: 1;
  58. display: flex !important;
  59. }
  60. .close {
  61. width: 80rpx;
  62. height: 80rpx;
  63. margin-bottom: 30rpx;
  64. margin-right: 8%;
  65. }
  66. </style>