|
- <template>
- <div>
- <HeadTop />
- <div class="video">
- <video :src="videoDetail.videoPathUri + videoDetail.videoPath" />
- <div class="desc">
- 视频已保存到 <span @click="go('/myPage')">我的视频作品</span>
- </div>
- <img src="../../assets/img/play.png" @click="play" />
- </div>
- <div class="bottomBtn">
- <div class="back" @click="backToIndex">返回首页</div>
- <div class="next" @click="play">下载视频</div>
- </div>
- </div>
- </template>
-
- <script>
- import Vue from "vue";
- import { Toast } from "vant";
- import baseUrl from "../../api/baseUrl";
- import { mapState, mapActions } from "vuex";
- import HeadTop from "./../../components/common/head.vue";
-
- Vue.use(Toast);
- export default {
- components: {
- HeadTop,
- },
- data() {
- return {
- videoDetail: {},
- };
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
-
- methods: {
- ...mapActions(["setCharacters"]),
-
- go(url) {
- this.$router.push(url);
- },
- backToIndex() {
- this.$router.push("/myPage");
- },
- play() {
- location.href =
- this.videoDetail.videoPathUri + this.videoDetail.videoPath;
- },
-
- download() {},
- },
- created() {
- this.videoDetail = this.$route.query.videoDetail;
- console.log(this.videoDetail);
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .video {
- position: relative;
- padding: 30px;
- text-align: center;
- .title {
- font-size: 18px;
- margin-bottom: 20px;
- }
- video {
- width: 80%;
- }
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .desc {
- font-size: 16px;
- margin-top: 20px;
- span {
- color: #00ccff;
- text-decoration: underline;
- }
- }
- }
- .bottomBtn {
- display: flex;
- justify-content: space-between;
- padding: 0 75px;
- margin-top: 20px;
- margin-bottom: 20px;
- div {
- width: 100px;
- height: 30px;
- color: #484848;
- line-height: 30px;
- text-align: center;
- border: 1px solid #484848;
- border-radius: 7px;
- &.next {
- color: #fff;
- border: 1px solid #00ccff;
- background-color: #00ccff;
- }
- }
- }
- </style>
|