|
|
@@ -1,362 +1,360 @@
|
|
|
-<template>
|
|
|
- <div class="common-update">
|
|
|
- <div v-if="type === 'preview'">
|
|
|
- <div class="no-tips" v-if="fileList.length === 0">暂无附件</div>
|
|
|
- <div class="common-perview-image" v-else>
|
|
|
- <div class="common-update-image-box" v-for="(item,index) in fileList" :key="item.id">
|
|
|
- <div class="el-image video-image" v-if="item.type === 'mp4'">
|
|
|
- <div class="video-icon">
|
|
|
- <i class="el-icon-video-play" @click="openVideo(item)"></i>
|
|
|
- </div>
|
|
|
- <img :src="videoPreviewList[item.id]" class="el-image__inner">
|
|
|
- </div>
|
|
|
- <el-image :src="item.url" :preview-src-list="[item.url]" v-else>
|
|
|
- <div slot="error" class="image-slot">
|
|
|
- <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
|
|
|
- <div class="image-text">
|
|
|
- <span>{{item.type.toUpperCase()}}</span>
|
|
|
- <div class="file-download">
|
|
|
- <i class="el-icon-download" @click="download(item)"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <div class="common-update-image">
|
|
|
- <div class="common-update-image-box" v-for="(item,index) in fileList" :key="item.id">
|
|
|
- <div class="el-image video-image" v-if="item.type === 'mp4'">
|
|
|
- <div class="video-icon">
|
|
|
- <i class="el-icon-video-play" @click="openVideo(item)"></i>
|
|
|
- </div>
|
|
|
- <img :src="videoPreviewList[item.id]" class="el-image__inner">
|
|
|
- </div>
|
|
|
- <el-image :src="item.url" :preview-src-list="[item.url]" v-else>
|
|
|
- <div slot="error" class="image-slot">
|
|
|
- <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
|
|
|
- <div class="image-text">{{item.type.toUpperCase()}}</div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
- <div class="common-update-close" @click="removeFile(index)">
|
|
|
- <i class="el-icon-close"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-upload :action="action" :headers="headers" :show-file-list="false" name="uploadFile"
|
|
|
- :before-upload="beforeUpload" :on-success="successFile" :on-error="errorFile" :accept="accept"
|
|
|
- v-if="fileList.length < maxLen" :on-progress="progress" :limit="maxLen" :on-exceed="handleExceed"
|
|
|
- :multiple="maxLen === 1 ? false : true">
|
|
|
- <div class="common-update-button">
|
|
|
- <i class="iconfont huifont-xinzeng"></i>
|
|
|
- <div class="common-update-button-label">{{text}}</div>
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- <div class="update-image-tips"><span class="color-red">*</span> 请上传小于10M的文件</div>
|
|
|
- </div>
|
|
|
- <el-dialog :close-on-click-modal="false" :title="video.name" custom-class="monitor-dialog" :visible.sync="visible" width="900px"
|
|
|
- height="500px" :append-to-body="true">
|
|
|
- <div class="video-box">
|
|
|
- <video v-if="visible" width="900" height="445" controls>
|
|
|
- <source :src="video.url" type="video/mp4" />
|
|
|
- </video>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import config from '@/config';
|
|
|
- import {
|
|
|
- getToken
|
|
|
- } from '@/uitls/auth';
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- list: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: 'preview'
|
|
|
- },
|
|
|
- maxLen: {
|
|
|
- type: Number,
|
|
|
- default: 5
|
|
|
- },
|
|
|
- text: {
|
|
|
- type: String,
|
|
|
- default: '上传图片'
|
|
|
- },
|
|
|
- accept: {
|
|
|
- type: String,
|
|
|
- default: '.png, .jpg, .jpeg'
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- action: config.baseURL + '/file/filenode/-1', //上传地址
|
|
|
- headers: {
|
|
|
- token: ''
|
|
|
- },
|
|
|
- url: '',
|
|
|
- srcList: [],
|
|
|
- fileList: [],
|
|
|
- videoPreviewList: {},
|
|
|
- visible: false,
|
|
|
- video: {}
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.headers.token = getToken();
|
|
|
- this.fileList = JSON.parse(JSON.stringify(this.list));
|
|
|
- },
|
|
|
- methods: {
|
|
|
- beforeUpload(file) {
|
|
|
- //上传前
|
|
|
- if ((parseInt(file.size) / 1024 / 1024) > 10) {
|
|
|
- //判断上传的文件不大于30M
|
|
|
- this.$message.warning('请上传小于10M的文件');
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- progress(e) {
|
|
|
- let percent = e.percent >= 100 ? 99 : parseInt(e.percent)
|
|
|
- this.$loading({
|
|
|
- percent: (percent + '%')
|
|
|
- });
|
|
|
- },
|
|
|
- successFile(response, file, fileList) {
|
|
|
- //上传成功
|
|
|
- if (!response.data) return this.errorFile();
|
|
|
- this.$message.success('上传成功');
|
|
|
- let data = response.data;
|
|
|
- let typeList = data.name.split('.');
|
|
|
- this.fileList.push({
|
|
|
- id: data.id,
|
|
|
- name: data.name,
|
|
|
- url: data.node.url,
|
|
|
- type: typeList[typeList.length - 1]
|
|
|
- });
|
|
|
- this.$loading.close();
|
|
|
- },
|
|
|
- errorFile() {
|
|
|
- //上传失败
|
|
|
- this.$message.error('上传失败');
|
|
|
- this.$loading.close();
|
|
|
- },
|
|
|
- removeFile(index) {
|
|
|
- this.$confirm('确定要删除该文件?', () => {
|
|
|
- this.fileList.splice(index, 1);
|
|
|
- });
|
|
|
- },
|
|
|
- download(item) {
|
|
|
- window.location.href = config.baseURL + '/file/filenode/' + item.id;
|
|
|
- },
|
|
|
- openVideo(item) {
|
|
|
- this.video = item;
|
|
|
- this.visible = true;
|
|
|
- },
|
|
|
- handleExceed(files, fileList) {
|
|
|
- console.log(files);
|
|
|
- console.log(fileList);
|
|
|
- this.$message.warning('最多上传' + this.maxLen + '个文件,当前已上传' + fileList.length + '个文件，请重新选择');
|
|
|
- },
|
|
|
- mp4Preview(item) {
|
|
|
- const video = document.createElement('video') // 也可以自己创建video
|
|
|
- video.src = item.url // url地址 url跟 视频流是一样的
|
|
|
- video.crossOrigin = '*' // 解决跨域问题，也就是提示污染资源无法转换视频
|
|
|
- video.currentTime = 1 // 第一帧
|
|
|
- video.oncanplay = () => {
|
|
|
- let canvas = document.createElement('canvas') // 获取 canvas 对象
|
|
|
- const ctx = canvas.getContext('2d') // 绘制2d
|
|
|
- canvas.width = video.clientWidth ? video.clientWidth : 320 // 获取视频宽度
|
|
|
- canvas.height = video.clientHeight ? video.clientHeight : 320 //获取视频高度
|
|
|
- // 利用canvas对象方法绘图
|
|
|
- ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
|
|
- // 转换成base64形式
|
|
|
- const videoFirstImgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
|
|
|
- this.videoPreviewList[item.id] = videoFirstImgsrc;
|
|
|
- this.$forceUpdate();
|
|
|
- video.remove()
|
|
|
- canvas.remove();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- list(val) {
|
|
|
- this.fileList = JSON.parse(JSON.stringify(val));
|
|
|
- },
|
|
|
- fileList() {
|
|
|
- for (let i = 0; i < this.fileList.length; i++) {
|
|
|
- if (this.fileList[i].type === 'mp4') {
|
|
|
- this.mp4Preview(this.fileList[i])
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .el-dialog.monitor-dialog {
|
|
|
- height: 500px;
|
|
|
- margin-top: 20vh !important;
|
|
|
- }
|
|
|
-
|
|
|
- .common-update {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .update-image-tips {
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-
|
|
|
- .video-image {
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- .video-icon {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .video-icon {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 200ms;
|
|
|
-
|
|
|
- i {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .common-update-button {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border: 1px dashed $--input-border;
|
|
|
- display: flex;
|
|
|
- color: $--color-common;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- margin: 4px 0;
|
|
|
-
|
|
|
- .huifont-xinzeng {
|
|
|
- line-height: 20px;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .common-update-button-label {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 20px;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .common-perview-image {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .el-image {
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
- border-radius: 2px;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .image-slot {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- background: #253642;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .file-download {
|
|
|
- position: absolute;
|
|
|
- display: none;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .image-text {
|
|
|
- font-size: 20px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- .file-download {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .common-update-image-box {
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .common-update-image {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .common-update-image-box {
|
|
|
- margin: 4px 8px 4px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .el-image {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 2px;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .common-update-close {
|
|
|
- position: absolute;
|
|
|
- right: -7px;
|
|
|
- top: -7px;
|
|
|
- background: #394358;
|
|
|
- color: $--color-common;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- line-height: 14px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 10px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <div class="common-update">
|
|
|
+ <div v-if="type === 'preview'">
|
|
|
+ <div class="no-tips" v-if="fileList.length === 0">暂无附件</div>
|
|
|
+ <div class="common-perview-image" v-else>
|
|
|
+ <div class="common-update-image-box" v-for="(item,index) in fileList" :key="item.id">
|
|
|
+ <div class="el-image video-image" v-if="item.type === 'mp4'">
|
|
|
+ <div class="video-icon">
|
|
|
+ <i class="el-icon-video-play" @click="openVideo(item)"></i>
|
|
|
+ </div>
|
|
|
+ <img :src="videoPreviewList[item.id]" class="el-image__inner">
|
|
|
+ </div>
|
|
|
+ <el-image :src="item.url" :preview-src-list="[item.url]" v-else>
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
|
|
|
+ <div class="image-text">
|
|
|
+ <span>{{item.type.toUpperCase()}}</span>
|
|
|
+ <div class="file-download">
|
|
|
+ <i class="el-icon-download" @click="download(item)"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="common-update-image">
|
|
|
+ <div class="common-update-image-box" v-for="(item,index) in fileList" :key="item.id">
|
|
|
+ <div class="el-image video-image" v-if="item.type === 'mp4'">
|
|
|
+ <div class="video-icon">
|
|
|
+ <i class="el-icon-video-play" @click="openVideo(item)"></i>
|
|
|
+ </div>
|
|
|
+ <img :src="videoPreviewList[item.id]" class="el-image__inner">
|
|
|
+ </div>
|
|
|
+ <el-image :src="item.url" :preview-src-list="[item.url]" v-else>
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
|
|
|
+ <div class="image-text">{{item.type.toUpperCase()}}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ <div class="common-update-close" @click="removeFile(index)">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-upload :action="action" :headers="headers" :show-file-list="false" name="uploadFile"
|
|
|
+ :before-upload="beforeUpload" :on-success="successFile" :on-error="errorFile" :accept="accept"
|
|
|
+ v-if="fileList.length < maxLen" :on-progress="progress" :limit="maxLen" :on-exceed="handleExceed"
|
|
|
+ :multiple="maxLen === 1 ? false : true">
|
|
|
+ <div class="common-update-button">
|
|
|
+ <i class="iconfont huifont-xinzeng"></i>
|
|
|
+ <div class="common-update-button-label">{{text}}</div>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="update-image-tips"><span class="color-red">*</span> 请上传小于10M的文件</div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :close-on-click-modal="false" :title="video.name" custom-class="monitor-dialog"
|
|
|
+ :visible.sync="visible" width="900px" height="500px" :append-to-body="true">
|
|
|
+ <div class="video-box">
|
|
|
+ <video v-if="visible" width="900" height="445" controls>
|
|
|
+ <source :src="video.url" type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import config from '@/config';
|
|
|
+ import {
|
|
|
+ getToken
|
|
|
+ } from '@/uitls/auth';
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: 'preview'
|
|
|
+ },
|
|
|
+ maxLen: {
|
|
|
+ type: Number,
|
|
|
+ default: 5
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ type: String,
|
|
|
+ default: '上传图片'
|
|
|
+ },
|
|
|
+ accept: {
|
|
|
+ type: String,
|
|
|
+ default: '.png, .jpg, .jpeg'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ action: config.baseURL + '/file/filenode/-1', //上传地址
|
|
|
+ headers: {
|
|
|
+ token: ''
|
|
|
+ },
|
|
|
+ url: '',
|
|
|
+ srcList: [],
|
|
|
+ fileList: [],
|
|
|
+ videoPreviewList: {},
|
|
|
+ visible: false,
|
|
|
+ video: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.headers.token = getToken();
|
|
|
+ this.fileList = JSON.parse(JSON.stringify(this.list));
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeUpload(file) {
|
|
|
+ //上传前
|
|
|
+ if ((parseInt(file.size) / 1024 / 1024) > 10) {
|
|
|
+ //判断上传的文件不大于30M
|
|
|
+ this.$message.warning('请上传小于10M的文件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ progress(e) {
|
|
|
+ let percent = e.percent >= 100 ? 99 : parseInt(e.percent)
|
|
|
+ this.$loading({
|
|
|
+ percent: (percent + '%')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ successFile(response, file, fileList) {
|
|
|
+ //上传成功
|
|
|
+ if (!response.data) return this.errorFile();
|
|
|
+ this.$message.success('上传成功');
|
|
|
+ let data = response.data;
|
|
|
+ let typeList = data.name.split('.');
|
|
|
+ this.fileList.push({
|
|
|
+ id: data.id,
|
|
|
+ name: data.name,
|
|
|
+ url: data.node.url,
|
|
|
+ type: typeList[typeList.length - 1]
|
|
|
+ });
|
|
|
+ this.$loading.close();
|
|
|
+ },
|
|
|
+ errorFile() {
|
|
|
+ //上传失败
|
|
|
+ this.$message.error('上传失败');
|
|
|
+ this.$loading.close();
|
|
|
+ },
|
|
|
+ removeFile(index) {
|
|
|
+ this.$confirm('确定要删除该文件?', () => {
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ download(item) {
|
|
|
+ window.location.href = config.baseURL + '/file/filenode/' + item.id;
|
|
|
+ },
|
|
|
+ openVideo(item) {
|
|
|
+ this.video = item;
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning('最多上传' + this.maxLen + '个文件,当前已上传' + fileList.length + '个文件，请重新选择');
|
|
|
+ },
|
|
|
+ mp4Preview(item) {
|
|
|
+ const video = document.createElement('video') // 也可以自己创建video
|
|
|
+ video.src = item.url // url地址 url跟 视频流是一样的
|
|
|
+ video.crossOrigin = '*' // 解决跨域问题，也就是提示污染资源无法转换视频
|
|
|
+ video.currentTime = 1 // 第一帧
|
|
|
+ video.oncanplay = () => {
|
|
|
+ let canvas = document.createElement('canvas') // 获取 canvas 对象
|
|
|
+ const ctx = canvas.getContext('2d') // 绘制2d
|
|
|
+ canvas.width = video.clientWidth ? video.clientWidth : 320 // 获取视频宽度
|
|
|
+ canvas.height = video.clientHeight ? video.clientHeight : 320 //获取视频高度
|
|
|
+ // 利用canvas对象方法绘图
|
|
|
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
|
|
+ // 转换成base64形式
|
|
|
+ const videoFirstImgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
|
|
|
+ this.videoPreviewList[item.id] = videoFirstImgsrc;
|
|
|
+ this.$forceUpdate();
|
|
|
+ video.remove()
|
|
|
+ canvas.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ list(val) {
|
|
|
+ this.fileList = JSON.parse(JSON.stringify(val));
|
|
|
+ },
|
|
|
+ fileList() {
|
|
|
+ for (let i = 0; i < this.fileList.length; i++) {
|
|
|
+ if (this.fileList[i].type === 'mp4') {
|
|
|
+ this.mp4Preview(this.fileList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .el-dialog.monitor-dialog {
|
|
|
+ height: 500px;
|
|
|
+ margin-top: 20vh !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-update {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .update-image-tips {
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-image {
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .video-icon {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 200ms;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-update-button {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px dashed $--input-border;
|
|
|
+ display: flex;
|
|
|
+ color: $--color-common;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 4px 0;
|
|
|
+
|
|
|
+ .huifont-xinzeng {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-update-button-label {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-perview-image {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-slot {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #253642;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .file-download {
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-text {
|
|
|
+ font-size: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .file-download {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-update-image-box {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-update-image {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .common-update-image-box {
|
|
|
+ margin: 4px 8px 4px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-update-close {
|
|
|
+ position: absolute;
|
|
|
+ right: -7px;
|
|
|
+ top: -7px;
|
|
|
+ background: #394358;
|
|
|
+ color: $--color-common;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
