1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| <template>
| <div class="data-detail-video">
| <div class="videos">
| <video poster="" :src="video.patch" controls="controls">
| 您的浏览器不支持 video 标签。
| </video>
| </div>
| <div class="content">
| <mt-navbar v-model="navIndex">
| <mt-tab-item id="1">关键词</mt-tab-item>
| <mt-tab-item id="2">简介</mt-tab-item>
| </mt-navbar>
| <mt-tab-container v-model="navIndex">
| <mt-tab-container-item id="1">
| {{ video.keyWord }}
| </mt-tab-container-item>
| <mt-tab-container-item id="2">
| {{ video.introduction }}
| </mt-tab-container-item>
| </mt-tab-container>
| </div>
| </div>
| </template>
|
| <script>
| import {GetVideoDetail as Api_GetVideoDetail} from "@/api/apilist";
|
| export default {
| name: "detailVideo",
| data() {
| return {
| navIndex: "1",
| video: {
| id: "",
| name: "",
| path: "",
| keyWord: "",
| introduction: "",
| },
| }
| },
| methods: {
|
| },
| created() {
| let id = this.$route.query.id;
| Api_GetVideoDetail(id).then(res => {
| this.video = res;
| }, rej => {
| alert(rej);
| }).catch(err => {
| console.log(err);
| alert('错误的请求！');
| });
| }
| }
| </script>
|
| <style scoped>
| .data-detail-video {
| width: 100%;
| }
|
| .videos {
| width: 100%;
| height: 31.5vh;
| }
|
| .videos video {
| width: 100%;
| height: 100%;
| background: black;
| }
|
| .content {
| width: 100%;
| height: 66vh;
| box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
| opacity: 1;
| border-radius: 10px;
|
| padding-top: 1vh;
| }
|
| .content > div{
| width: 90%;
| margin-left: 5%;
| }
|
| .mint-navbar{
| margin-bottom: 4vh;
| }
|
| .mint-navbar .mint-tab-item /deep/ .mint-tab-item-label {
| font-size: 2rem;
| font-family: Source Han Sans CN;
| font-weight: 500;
| line-height: 3rem;
| color: #767676;
| opacity: 1;
| }
|
| .mint-navbar .is-selected {
| border-bottom: 0.3rem solid #BC0000;
| }
|
| .mint-navbar .is-selected /deep/ .mint-tab-item-label {
| color: #BC0000;
| font-weight: bold;
| }
|
| .mint-tab-container {
| text-align: left;
| font-size: 1.87rem;
| font-family: Source Han Serif CN;
| font-weight: 400;
| line-height: 3rem;
| color: #585858;
| opacity: 1;
| }
| </style>
|
|
