xinyilu/NurseStationOperateUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
曹辉 2023-05-09 14:46:14 +08:00
parent d3c160308d
commit 61d0ba3373
1 changed files with 24 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/system/trainingAvatar/index.vue
View File

@ -1,65 +1,32 @@
<template>
<div>
<div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
<video
style="width: 208px; height: 208px"
v-bind:src="video.VideoPath"
v-if="video.VideoPath"
class="avatar video-avatar"
controls="controls"
>您的浏览器不支持视频播放</video>
<i
class="el-icon-plus avatar-uploader-icon"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"
></i>
<video style="width: 208px; height: 208px" v-bind:src="video.VideoPath" v-if="video.VideoPath"
class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
<i class="el-icon-plus avatar-uploader-icon" style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"></i>
</div>
<el-dialog
:title="title"
:visible.sync="openimg"
width="950px"
append-to-body
@opened="modalOpened"
@close="closeDialog"
>
<el-dialog :title="title" :visible.sync="openimg" width="950px" append-to-body @opened="modalOpened"
@close="closeDialog">
<el-row>
<el-col :xs="24" :md="24" :style="{ height: '350px' }">
<div class="avatar-upload-preview">
<video
v-if="openimg"
style="width: 100%; height: 100%"
v-bind:src="videoForm.showVideoPath"
class="avatar video-avatar"
controls="controls"
>您的浏览器不支持视频播放</video>
<video v-if="openimg" style="width: 100%; height: 100%" v-bind:src="videoForm.showVideoPath"
class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video>
</div>
</el-col>
</el-row>
<br />
<el-progress
v-if="progressFlag"
:percentage="loadProgress"
style="height:30px;padding-bottom:20px"
></el-progress>
<el-progress v-if="progressFlag" :percentage="loadProgress" style="height:30px;padding-bottom:20px"></el-progress>
<el-row style="padding-bottom:0px">
<el-col :lg="3" :md="2">
<el-upload
:show-file-list="false"
class="upload-demo"
ref="upload"
:action="uploadurl"
:on-preview="handlePreview"
:auto-upload="false"
:on-change="loadJsonFromFile"
:data="filedata"
:headers="headers"
:on-progress="uploadVideoProcess"
:on-success="handleAvatarSuccess"
>
<el-upload :show-file-list="false" class="upload-demo" ref="upload" :action="uploadurl"
:on-preview="handlePreview" :auto-upload="false" :on-change="loadJsonFromFile" :data="filedata"
:headers="headers" :on-progress="uploadVideoProcess" :on-success="handleAvatarSuccess">
<el-button slot="trigger" size="small" type="primary" style="float:left">选取文件</el-button>
</el-upload>
</el-col>
@ -140,8 +107,10 @@ export default {
this.uploadbtn = true;
if (newimg == null) {
this.video.VideoPath = null;
this.videoForm.showVideoPath = null
} else if (newimg == "") {
this.video.VideoPath = null;
this.videoForm.showVideoPath = null
} else {
this.videoForm.showVideoPath = process.env.VUE_APP_BASE_API + newimg;
this.video.VideoPath = process.env.VUE_APP_BASE_API + newimg;
@ -184,7 +153,7 @@ export default {
this.uploadbtn = false;
this.$refs.upload.submit();
},
handlePreview(file) {},
handlePreview(file) { },
// 编辑头像
editCropper() {
this.openimg = true;
@ -194,7 +163,7 @@ export default {
this.visible = true;
},
// 覆盖默认的上传行为
requestUpload() {},
requestUpload() { },
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
@ -277,6 +246,7 @@ export default {
left: 50%;
transform: translate(-50%, 0%);
}
.avatar-upload-preview {
position: absolute;
top: 0%;
@ -288,6 +258,7 @@ export default {
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
.user-info-head {
position: relative;
display: inline-block;
@ -313,11 +284,13 @@ export default {
line-height: 110px;
border-radius: 50%;
}
.wihi {
background-color: #fff;
width: 100px;
height: 100px;
}
.wihi:hover:after {
transform: translate(50%, 50%);
}