<template>
<div class="video-doc">
<div>
<label>基础</label>
<div></div>
<button><img /><label>文档视频</label></button>
</div>
<div>
<video :src="videoUrl" controls />
</div>
</div>
</template>
<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
export default {
data() {
return {
videoUrl: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]'
};
},
methods: {
},
created() {
this.videoUrl = this.$route.params.videoUrl;
}
};
</script>
<style lang="scss" scoped>
.video-doc {
color: #444444;
font-size: 18px;
padding-right: 20px;
height: calc(100vh - 100px);
// overflow: scroll;
scrollbar-width: none;
/* firefox */
-ms-overflow-style: none;
/* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
>div {
display: flex;
flex-direction: row;
margin-top: 20px;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
}
>div:nth-of-type(1) {
>label:nth-of-type(1) {
font-weight: 600;
}
>div:nth-of-type(1) {
width: 1px;
background-color: #cccccc;
height: 15px;
margin: 0px 20px;
}
>button:nth-of-type(1) {
background-image: url(../../assets/img/customer-1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 5px 10px;
border: 0px;
display: flex;
color: #ffffff;
flex-direction: row;
align-items: center;
font-weight: 800;
>img {
margin-right: 7px;
width: 15px;
height: 15px;
content: url(../../assets/img/customer-2.png);
}
}
}
>div:nth-of-type(2) {
>video {
height: 700px;
width: 100%;
}
}
}
</style>
vue 自带video
猜你喜欢
转载自blog.csdn.net/qq_25430563/article/details/120868801
今日推荐
周排行