|
|
@@ -3,11 +3,11 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="style">
|
|
|
<el-col :span="24" class="top">
|
|
|
- <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
|
|
|
+ <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="back"> </NavBar>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="main">
|
|
|
<el-col :span="24" class="video">
|
|
|
- <video autoplay controls :src="videoUrl" style="width:100%;height:100%"></video>
|
|
|
+ <video autoplay controls :src="videoUrl"></video>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="text">
|
|
|
<van-collapse v-model="activeNames">
|
|
|
@@ -29,15 +29,15 @@
|
|
|
<span>选集</span>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="two">
|
|
|
- <van-swipe :loop="false" :width="300">
|
|
|
+ <van-swipe :loop="false" :width="150">
|
|
|
<van-swipe-item
|
|
|
class="videodata"
|
|
|
v-for="(item, index) in form.videodata"
|
|
|
:key="index"
|
|
|
- @click.native="change(index, item)"
|
|
|
+ @click="searchvideo(index, item)"
|
|
|
:class="{ active: changeColor == index }"
|
|
|
>
|
|
|
- {{ item.name }}
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
</van-swipe-item>
|
|
|
</van-swipe>
|
|
|
</el-col>
|
|
|
@@ -77,6 +77,7 @@ export default {
|
|
|
},
|
|
|
async created() {
|
|
|
await this.search();
|
|
|
+ this.searchvideo('0', this.form.videodata[0]);
|
|
|
},
|
|
|
methods: {
|
|
|
...channel(['query', 'fetch']),
|
|
|
@@ -86,8 +87,9 @@ export default {
|
|
|
this.$set(this, `form`, res.data);
|
|
|
}
|
|
|
},
|
|
|
- change(index, item) {
|
|
|
- console.log(index, item);
|
|
|
+ searchvideo(index, item) {
|
|
|
+ this.changeColor = index;
|
|
|
+ this.$set(this, `videoUrl`, item.url);
|
|
|
},
|
|
|
back() {
|
|
|
this.$router.push({ path: 'index' });
|
|
|
@@ -124,6 +126,13 @@ export default {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.main {
|
|
|
+ .video {
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
.text {
|
|
|
padding: 5px 10px;
|
|
|
.title {
|
|
|
@@ -160,13 +169,10 @@ export default {
|
|
|
.two {
|
|
|
margin-top: 5px;
|
|
|
.videodata {
|
|
|
- height: 100px;
|
|
|
- background-color: #f1f1f1;
|
|
|
- margin-right: 10px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- line-height: 100px;
|
|
|
+ min-height: 80px;
|
|
|
+ background: #f1f1f1;
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ padding: 10px;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
}
|
