|
|
@@ -3,7 +3,7 @@
|
|
|
* @Author: 空白格
|
|
|
* @Date: 2022-08-30 13:51:52
|
|
|
* @LastEditors: 空白格
|
|
|
- * @LastEditTime: 2022-12-12 13:54:45
|
|
|
+ * @LastEditTime: 2023-07-03 14:24:35
|
|
|
* @FilePath: \veterans_client_web\src\views\Home\components\PolicyInformation.vue
|
|
|
* @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
-->
|
|
|
@@ -12,7 +12,12 @@
|
|
|
<!-- 政策资讯部分 -->
|
|
|
<el-row :gutter="0" class="home-main-policy">
|
|
|
<el-col :span="24" class="home-main-policy-carousel">
|
|
|
- <el-carousel :interval="5000" arrow="never" height="140px">
|
|
|
+ <el-carousel
|
|
|
+ :interval="5000"
|
|
|
+ arrow="never"
|
|
|
+ height="140px"
|
|
|
+ :indicator-position="bannerList.length > 1 ? '' : 'none'"
|
|
|
+ >
|
|
|
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
|
|
|
<el-image
|
|
|
class="image"
|
|
|
@@ -85,7 +90,7 @@
|
|
|
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
<div class="hmpc-center">
|
|
|
<div class="hmpc-center-title">成果视频</div>
|
|
|
- <div class="hmpc-center-list" v-if="resultVideoList.length">
|
|
|
+ <!-- <div class="hmpc-center-list" v-if="resultVideoList.length">
|
|
|
<div
|
|
|
class="hmpc-center-list-item"
|
|
|
v-for="(item, index) in resultVideoList"
|
|
|
@@ -94,7 +99,21 @@
|
|
|
<el-image class="image" :src="item.imgUrl" fit="cover" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="hmpc-center-empty" v-else>暂时无成果视频</div>
|
|
|
+ <div class="hmpc-center-empty" v-else>暂时无成果视频</div> -->
|
|
|
+ <div class="hmpc-center-video" v-loading="videoLoading">
|
|
|
+ <video
|
|
|
+ ref="videoRef"
|
|
|
+ src="http://118.195.251.148:9090/veterans/工职院创新探索与实践成果汇报20221031_V02.mp4"
|
|
|
+ controls
|
|
|
+ @loadedmetadata="loadedmetadata($event)"
|
|
|
+ ></video>
|
|
|
+ <el-image
|
|
|
+ v-if="!isPlay"
|
|
|
+ class="hmpc-center-video-btn"
|
|
|
+ :src="require('@/assets/images/play-btn.png')"
|
|
|
+ @click="videoClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
|
|
@@ -173,6 +192,8 @@ export default {
|
|
|
"http://www.mva.gov.cn/sy/shipin/202209/W020220918750864451719.png",
|
|
|
},
|
|
|
],
|
|
|
+ isPlay: false,
|
|
|
+ videoLoading: true,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -229,6 +250,32 @@ export default {
|
|
|
this.tabCur = tab.name;
|
|
|
this.getPolicyList();
|
|
|
},
|
|
|
+ videoClick() {
|
|
|
+ if (this.isPlay) {
|
|
|
+ this.$refs.videoRef.pause();
|
|
|
+ } else {
|
|
|
+ this.$refs.videoRef.play();
|
|
|
+ }
|
|
|
+ this.isPlay = !this.isPlay;
|
|
|
+ },
|
|
|
+ loadedmetadata(event) {
|
|
|
+ this.videoLoading = false;
|
|
|
+ let video = event.target;
|
|
|
+ let canvas = document.createElement("canvas"); // 创建 canvas
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+ video.currentTime = 1; // 第一帧
|
|
|
+ video.oncanplay = () => {
|
|
|
+ canvas.width = video.clientWidth; // 获取视频宽度
|
|
|
+ canvas.height = video.clientHeight; //获取视频高度
|
|
|
+ var img = new Image(); // 这里使用img是为了解决视频跨域 canvas.toDataURL会提示错误的问题
|
|
|
+ img.onload = function () {
|
|
|
+ // canvas绘图
|
|
|
+ ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
|
|
|
+ // 转换成base64形式并设置封面
|
|
|
+ video.poster = canvas.toDataURL("image/jpeg", 1); // 截取后的视频封面
|
|
|
+ };
|
|
|
+ };
|
|
|
+ },
|
|
|
/**
|
|
|
* 跳转
|
|
|
* @date 2022-08-30
|
|
|
@@ -453,6 +500,23 @@ export default {
|
|
|
color: #373737;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+ &-video {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 260px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -35px;
|
|
|
+ margin-bottom: -35px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
