邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

113 行
2.1 KiB

  1. <template>
  2. <div>
  3. <HeadTop />
  4. <div class="video">
  5. <video :src="videoDetail.videoPathUri + videoDetail.videoPath" />
  6. <div class="desc">
  7. 视频已保存到 <span @click="go('/myPage')">我的视频作品</span>
  8. </div>
  9. <img src="../../assets/img/play.png" @click="play" />
  10. </div>
  11. <div class="bottomBtn">
  12. <div class="back" @click="backToIndex">返回首页</div>
  13. <div class="next" @click="play">下载视频</div>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import Vue from "vue";
  19. import { Toast } from "vant";
  20. import baseUrl from "../../api/baseUrl";
  21. import { mapState, mapActions } from "vuex";
  22. import HeadTop from "./../../components/common/head.vue";
  23. Vue.use(Toast);
  24. export default {
  25. components: {
  26. HeadTop,
  27. },
  28. data() {
  29. return {
  30. videoDetail: {},
  31. };
  32. },
  33. computed: {
  34. ...mapState({
  35. characters: (state) => state.publicObj.characters,
  36. }),
  37. },
  38. methods: {
  39. ...mapActions(["setCharacters"]),
  40. go(url) {
  41. this.$router.push(url);
  42. },
  43. backToIndex() {
  44. this.$router.push("/myPage");
  45. },
  46. play() {
  47. location.href =
  48. this.videoDetail.videoPathUri + this.videoDetail.videoPath;
  49. },
  50. download() {},
  51. },
  52. created() {
  53. this.videoDetail = this.$route.query.videoDetail;
  54. console.log(this.videoDetail);
  55. },
  56. };
  57. </script>
  58. <style lang="scss" scoped>
  59. .video {
  60. position: relative;
  61. padding: 30px;
  62. text-align: center;
  63. .title {
  64. font-size: 18px;
  65. margin-bottom: 20px;
  66. }
  67. video {
  68. width: 80%;
  69. }
  70. img {
  71. position: absolute;
  72. top: 50%;
  73. left: 50%;
  74. transform: translate(-50%, -50%);
  75. }
  76. .desc {
  77. font-size: 16px;
  78. margin-top: 20px;
  79. span {
  80. color: #00ccff;
  81. text-decoration: underline;
  82. }
  83. }
  84. }
  85. .bottomBtn {
  86. display: flex;
  87. justify-content: space-between;
  88. padding: 0 75px;
  89. margin-top: 20px;
  90. margin-bottom: 20px;
  91. div {
  92. width: 100px;
  93. height: 30px;
  94. color: #484848;
  95. line-height: 30px;
  96. text-align: center;
  97. border: 1px solid #484848;
  98. border-radius: 7px;
  99. &.next {
  100. color: #fff;
  101. border: 1px solid #00ccff;
  102. background-color: #00ccff;
  103. }
  104. }
  105. }
  106. </style>