832 lines
20 KiB
Vue
832 lines
20 KiB
Vue
<template>
|
||
<view class="htz-image-upload-list">
|
||
<view class="htz-image-upload-Item" v-for="(item,index) in uploadLists" :key="index">
|
||
<view class="htz-image-upload-Item-video" v-if="isVideo(item)">
|
||
<!-- #ifndef APP-PLUS -->
|
||
<video :disabled="false" :controls="false" :src="getFileUrl(item)">
|
||
<cover-view class="htz-image-upload-Item-video-fixed" @tap.stop="previewVideo(getFileUrl(item))">
|
||
</cover-view>
|
||
|
||
<cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc==''" @tap.stop="imgDel(index)">×</cover-view>
|
||
|
||
</video>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view class="htz-image-upload-Item-video-fixed" @tap.stop="previewVideo(getFileUrl(item))"></view>
|
||
<image v-if="dataType==1 && item.cover" class="htz-image-upload-Item-video-app-poster" mode="widthFix" :src="item.cover"></image>
|
||
<image v-else class="htz-image-upload-Item-video-app-poster" mode="widthFix" :src="appVideoPoster"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<image v-else :src="getFileUrl(item)" @tap.stop="imgPreview(getFileUrl(item))"></image>
|
||
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view class="htz-image-upload-Item-del" v-if="remove" @tap.stop="imgDel(index)">×</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length<max && add" @click="chooseFile">
|
||
+
|
||
</view>
|
||
<view class="preview-full" v-if="previewVideoSrc!=''">
|
||
<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
|
||
<cover-view class="preview-full-close" @click="previewVideoClose"> ×
|
||
</cover-view>
|
||
</video>
|
||
</view>
|
||
|
||
|
||
<!-- -->
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
.ceshi {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
background-color: #FFFFFF;
|
||
color: #2C405A;
|
||
opacity: 0.5;
|
||
z-index: 100;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'htz-image-upload',
|
||
props: {
|
||
max: { //展示图片最大值
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
chooseNum: { //选择图片数
|
||
type: Number,
|
||
default: 9,
|
||
},
|
||
name: { //发到后台的文件参数名
|
||
type: String,
|
||
default: 'file',
|
||
},
|
||
dataType: { //v-model的数据结构类型
|
||
type: Number,
|
||
default: 0, // 0: ['http://xxxx.jpg','http://xxxx.jpg'] 1:[{type:0,url:'http://xxxx.jpg'}] type 0 图片 1 视频 url 文件地址 此类型是为了给没有文件后缀的状况使用的
|
||
},
|
||
remove: { //是否展示删除按钮
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
add: { //是否展示添加按钮
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
disabled: { //是否禁用
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
sourceType: { //选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】
|
||
type: Array,
|
||
default: () => ['album', 'camera'],
|
||
},
|
||
action: { //上传地址 如需使用uniCloud服务，设置为uniCloud即可
|
||
type: String,
|
||
default: '',
|
||
},
|
||
headers: { //上传的请求头部
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
formData: { //HTTP 请求中其他额外的 form data
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
compress: { //是否需要压缩
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
quality: { //压缩质量，范围0～100
|
||
type: Number,
|
||
default: 80,
|
||
},
|
||
// #ifndef VUE3
|
||
value: { //受控图片列表
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
modelValue: { //受控图片列表
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// #endif
|
||
uploadSuccess: {
|
||
default: (res) => {
|
||
return {
|
||
success: false,
|
||
url: ''
|
||
}
|
||
},
|
||
},
|
||
mediaType: { //文件类型 image/video/all
|
||
type: String,
|
||
default: 'image',
|
||
},
|
||
maxDuration: { //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 (只针对拍摄视频有用)
|
||
type: Number,
|
||
default: 60,
|
||
},
|
||
camera: { //'front'、'back'，默认'back'(只针对拍摄视频有用)
|
||
type: String,
|
||
default: 'back',
|
||
},
|
||
appVideoPoster: { //app端视频展示封面 只对app有效
|
||
type: String,
|
||
default: '/static/htz-image-upload/play.png',
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
uploadLists: [],
|
||
mediaTypeData: ['image', 'video', 'all'],
|
||
previewVideoSrc: '',
|
||
}
|
||
},
|
||
mounted: function() {
|
||
this.$nextTick(function() {
|
||
// #ifndef VUE3
|
||
this.uploadLists = this.value;
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.uploadLists = this.modelValue;
|
||
// #endif
|
||
if (this.mediaTypeData.indexOf(this.mediaType) == -1) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: 'mediaType参数不正确',
|
||
showCancel: false,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
//console.log('用户点击确定');
|
||
} else if (res.cancel) {
|
||
//console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
watch: {
|
||
// #ifndef VUE3
|
||
value(val, oldVal) {
|
||
//console.log('value',val, oldVal)
|
||
this.uploadLists = val;
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
modelValue(val, oldVal) {
|
||
//console.log('value',val, oldVal)
|
||
this.uploadLists = val;
|
||
},
|
||
// #endif
|
||
|
||
},
|
||
methods: {
|
||
isVideo(item) {
|
||
let isPass = false
|
||
if ((!/.(gif|jpg|jpeg|png|gif|jpg|png)$/i.test(item) && this.dataType == 0) || (this.dataType == 1 && item
|
||
.type == 1)) {
|
||
isPass = true
|
||
}
|
||
return isPass
|
||
},
|
||
getFileUrl(item) {
|
||
var url = item;
|
||
if (this.dataType == 1) {
|
||
url = item.url
|
||
}
|
||
//console.log('url', url)
|
||
return url
|
||
},
|
||
previewVideo(src) {
|
||
this.previewVideoSrc = src;
|
||
// this.previewVideoSrc =
|
||
// 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fbd63a76-dc76-485c-b711-f79f2986daeb/ba804d82-860b-4d1a-a706-5a4c8ce137c3.mp4'
|
||
},
|
||
previewVideoClose() {
|
||
this.previewVideoSrc = ''
|
||
//console.log('previewVideoClose', this.previewVideoSrc)
|
||
},
|
||
imgDel(index) {
|
||
// this.uploadLists.splice(index, 1)
|
||
// this.$emit("input", this.uploadLists);
|
||
// this.$emit("imgDelete", this.uploadLists);
|
||
let delUrl = this.uploadLists[index]
|
||
this.uploadLists.splice(index, 1)
|
||
// #ifndef VUE3
|
||
this.$emit("input", this.uploadLists);
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.$emit("update:modelValue", this.uploadLists);
|
||
// #endif
|
||
this.$emit("imgDelete", {
|
||
del: delUrl,
|
||
tempFilePaths: this.uploadLists
|
||
});
|
||
},
|
||
imgPreview(index) {
|
||
|
||
var imgData = []
|
||
|
||
this.uploadLists.forEach(item => {
|
||
if (!this.isVideo(item)) {
|
||
imgData.push(this.getFileUrl(item))
|
||
}
|
||
})
|
||
|
||
|
||
//console.log('imgPreview', imgData)
|
||
uni.previewImage({
|
||
urls: imgData,
|
||
current: index,
|
||
loop: true,
|
||
});
|
||
|
||
|
||
},
|
||
chooseFile() {
|
||
if (this.disabled) {
|
||
return false;
|
||
}
|
||
switch (this.mediaTypeData.indexOf(this.mediaType)) {
|
||
case 1: //视频
|
||
this.videoAdd();
|
||
break;
|
||
case 2: //全部
|
||
uni.showActionSheet({
|
||
itemList: ['相册', '视频'],
|
||
success: (res) => {
|
||
if (res.tapIndex == 1) {
|
||
this.videoAdd();
|
||
} else if (res.tapIndex == 0) {
|
||
this.imgAdd();
|
||
}
|
||
},
|
||
fail: (res) => {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
break;
|
||
default: //图片
|
||
this.imgAdd();
|
||
break;
|
||
}
|
||
|
||
|
||
//if(this.mediaType=='image'){
|
||
|
||
|
||
},
|
||
videoAdd() {
|
||
//console.log('videoAdd')
|
||
let nowNum = Math.abs(this.uploadLists.length - this.max);
|
||
let thisNum = (this.chooseNum > nowNum ? nowNum : this.chooseNum) //可选数量
|
||
uni.chooseVideo({
|
||
compressed: this.compress,
|
||
sourceType: this.sourceType,
|
||
camera: this.camera,
|
||
maxDuration: this.maxDuration,
|
||
success: (res) => {
|
||
// console.log('videoAdd', res)
|
||
// console.log(res.tempFilePath)
|
||
this.chooseSuccessMethod([res.tempFilePath], 1)
|
||
//this.imgUpload([res.tempFilePath]);
|
||
//console.log('tempFiles', res)
|
||
// if (this.action == '') { //未配置上传路径
|
||
// this.$emit("chooseSuccess", res.tempFilePaths);
|
||
// } else {
|
||
// if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
|
||
// this.imgCompress(res.tempFilePaths);
|
||
// } else {
|
||
// this.imgUpload(res.tempFilePaths);
|
||
// }
|
||
// }
|
||
}
|
||
});
|
||
},
|
||
imgAdd() {
|
||
//console.log('imgAdd')
|
||
let nowNum = Math.abs(this.uploadLists.length - this.max);
|
||
let thisNum = (this.chooseNum > nowNum ? nowNum : this.chooseNum) //可选数量
|
||
//console.log('nowNum', nowNum)
|
||
//console.log('thisNum', thisNum)
|
||
// #ifdef APP-PLUS
|
||
if (this.sourceType.length > 1) {
|
||
uni.showActionSheet({
|
||
itemList: ['拍摄', '从手机相册选择'],
|
||
success: (res) => {
|
||
if (res.tapIndex == 1) {
|
||
this.appGallery(thisNum);
|
||
} else if (res.tapIndex == 0) {
|
||
this.appCamera();
|
||
}
|
||
},
|
||
fail: (res) => {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
}
|
||
if (this.sourceType.length == 1 && this.sourceType.indexOf('album') > -1) {
|
||
this.appGallery(thisNum);
|
||
}
|
||
|
||
if (this.sourceType.length == 1 && this.sourceType.indexOf('camera') > -1) {
|
||
this.appCamera();
|
||
}
|
||
// #endif
|
||
//#ifndef APP-PLUS
|
||
uni.chooseImage({
|
||
count: thisNum,
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: this.sourceType,
|
||
success: (res) => {
|
||
this.chooseSuccessMethod(res.tempFilePaths, 0)
|
||
//console.log('tempFiles', res)
|
||
// if (this.action == '') { //未配置上传路径
|
||
// this.$emit("chooseSuccess", res.tempFilePaths);
|
||
// } else {
|
||
// if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
|
||
// this.imgCompress(res.tempFilePaths);
|
||
// } else {
|
||
// this.imgUpload(res.tempFilePaths);
|
||
// }
|
||
// }
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
appCamera() {
|
||
var cmr = plus.camera.getCamera();
|
||
var res = cmr.supportedImageResolutions[0];
|
||
var fmt = cmr.supportedImageFormats[0];
|
||
//console.log("Resolution: " + res + ", Format: " + fmt);
|
||
cmr.captureImage((path) => {
|
||
//alert("Capture image success: " + path);
|
||
this.chooseSuccessMethod([path], 0)
|
||
},
|
||
(error) => {
|
||
//alert("Capture image failed: " + error.message);
|
||
console.log("Capture image failed: " + error.message)
|
||
}, {
|
||
resolution: res,
|
||
format: fmt
|
||
}
|
||
);
|
||
},
|
||
appGallery(maxNum) {
|
||
plus.gallery.pick((res) => {
|
||
this.chooseSuccessMethod(res.files, 0)
|
||
}, function(e) {
|
||
//console.log("取消选择图片");
|
||
}, {
|
||
filter: "image",
|
||
multiple: true,
|
||
maximum: maxNum
|
||
});
|
||
},
|
||
chooseSuccessMethod(filePaths, type) {
|
||
if (this.action == '') { //未配置上传路径
|
||
this.$emit("chooseSuccess", filePaths, type); //filePaths 路径 type 0 为图片 1为视频
|
||
} else {
|
||
if (type == 1) {
|
||
this.imgUpload(filePaths, type);
|
||
} else {
|
||
if (this.compress) { //设置了需要压缩
|
||
this.imgCompress(filePaths, type);
|
||
} else {
|
||
this.imgUpload(filePaths, type);
|
||
}
|
||
}
|
||
|
||
}
|
||
},
|
||
imgCompress(tempFilePaths, type) { //type 0 为图片 1为视频
|
||
uni.showLoading({
|
||
title: '压缩中...'
|
||
});
|
||
|
||
let compressImgs = [];
|
||
let results = [];
|
||
tempFilePaths.forEach((item, index) => {
|
||
compressImgs.push(new Promise((resolve, reject) => {
|
||
// #ifndef H5
|
||
uni.compressImage({
|
||
src: item,
|
||
quality: this.quality,
|
||
success: res => {
|
||
//console.log('compressImage', res.tempFilePath)
|
||
results.push(res.tempFilePath);
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: (err) => {
|
||
//console.log(err.errMsg);
|
||
reject(err);
|
||
},
|
||
complete: () => {
|
||
//uni.hideLoading();
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
this.canvasDataURL(item, {
|
||
quality: this.quality / 100
|
||
}, (base64Codes) => {
|
||
//this.imgUpload(base64Codes);
|
||
results.push(base64Codes);
|
||
resolve(base64Codes);
|
||
})
|
||
// #endif
|
||
}))
|
||
})
|
||
Promise.all(compressImgs) //执行所有需请求的接口
|
||
.then((results) => {
|
||
uni.hideLoading();
|
||
//console.log('imgCompress', type)
|
||
this.imgUpload(results, type);
|
||
})
|
||
.catch((res, object) => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
imgUpload(tempFilePaths, type) { //type 0 为图片 1为视频
|
||
// if (this.action == '') {
|
||
// uni.showToast({
|
||
// title: '未配置上传地址',
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
// return false;
|
||
// }
|
||
if (this.action == 'uniCloud') {
|
||
this.uniCloudUpload(tempFilePaths, type)
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
});
|
||
//console.log('imgUpload', tempFilePaths)
|
||
let uploadImgs = [];
|
||
tempFilePaths.forEach((item, index) => {
|
||
uploadImgs.push(new Promise((resolve, reject) => {
|
||
//console.log(index, item)
|
||
const uploadTask = uni.uploadFile({
|
||
url: this.action, //仅为示例，非真实的接口地址
|
||
filePath: item,
|
||
name: this.name,
|
||
fileType: 'image',
|
||
formData: this.formData,
|
||
header: this.headers,
|
||
success: (uploadFileRes) => {
|
||
//uni.hideLoading();
|
||
//console.log(typeof this.uploadSuccess)
|
||
//console.log('')
|
||
uploadFileRes.fileType = type
|
||
if (typeof this.uploadSuccess == 'function') {
|
||
|
||
let thisUploadSuccess = this.uploadSuccess(
|
||
uploadFileRes)
|
||
if (thisUploadSuccess.success) {
|
||
let keyName = '';
|
||
// #ifndef VUE3
|
||
keyName = 'value'
|
||
// #endif
|
||
// #ifdef VUE3
|
||
keyName = 'modelValue'
|
||
// #endif
|
||
if (this.dataType == 0) {
|
||
this[keyName].push(thisUploadSuccess.url)
|
||
} else {
|
||
this[keyName].push({
|
||
type: type,
|
||
url: thisUploadSuccess.url,
|
||
...thisUploadSuccess
|
||
})
|
||
}
|
||
|
||
//this.$emit("input", this.uploadLists);
|
||
// #ifndef VUE3
|
||
this.$emit("input", this.uploadLists);
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.$emit("update:modelValue", this.uploadLists);
|
||
// #endif
|
||
}
|
||
}
|
||
resolve(uploadFileRes);
|
||
this.$emit("uploadSuccess", uploadFileRes);
|
||
},
|
||
fail: (err) => {
|
||
console.log(err);
|
||
//uni.hideLoading();
|
||
reject(err);
|
||
this.$emit("uploadFail", err);
|
||
},
|
||
complete: () => {
|
||
//uni.hideLoading();
|
||
}
|
||
});
|
||
}))
|
||
})
|
||
Promise.all(uploadImgs) //执行所有需请求的接口
|
||
.then((results) => {
|
||
uni.hideLoading();
|
||
})
|
||
.catch((res, object) => {
|
||
uni.hideLoading();
|
||
this.$emit("uploadFail", res);
|
||
});
|
||
// uploadTask.onProgressUpdate((res) => {
|
||
// //console.log('',)
|
||
// uni.showLoading({
|
||
// title: '上传中' + res.progress + '%'
|
||
// });
|
||
// if (res.progress == 100) {
|
||
// uni.hideLoading();
|
||
// }
|
||
// });
|
||
},
|
||
uniCloudUpload(tempFilePaths, type) {
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
});
|
||
console.log('uniCloudUpload', tempFilePaths);
|
||
let uploadImgs = [];
|
||
tempFilePaths.forEach((item, index) => {
|
||
uploadImgs.push(new Promise((resolve, reject) => {
|
||
|
||
uniCloud.uploadFile({
|
||
filePath: item,
|
||
cloudPath: this.guid() + '.' + this.getFileType(item, type),
|
||
success(uploadFileRes) {
|
||
if (uploadFileRes.success) {
|
||
resolve(uploadFileRes.fileID);
|
||
}
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
reject(err);
|
||
},
|
||
complete() {}
|
||
});
|
||
|
||
}))
|
||
})
|
||
Promise.all(uploadImgs) //执行所有需请求的接口
|
||
.then((results) => {
|
||
uni.hideLoading();
|
||
// console.log('then', results)
|
||
|
||
uniCloud.getTempFileURL({
|
||
fileList: results,
|
||
success: (res) => {
|
||
//console.log('success',res.fileList)
|
||
res.fileList.forEach(item => {
|
||
//console.log(item.tempFileURL)
|
||
//this.value.push(item.tempFileURL)
|
||
// #ifndef VUE3
|
||
this.value.push(item.tempFileURL)
|
||
this.$emit("input", this.value);
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.modelValue.push(item.tempFileURL)
|
||
this.$emit("update:modelValue", this.modelValue);
|
||
// #endif
|
||
})
|
||
},
|
||
fail() {},
|
||
complete() {}
|
||
});
|
||
})
|
||
.catch((res, object) => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
getFileType(path, type) { //手机端默认图片为jpg 视频为mp4
|
||
// #ifdef H5
|
||
var result = type == 0 ? 'jpg' : 'mp4';
|
||
// #endif
|
||
|
||
|
||
// #ifndef H5
|
||
var result = path.split('.').pop().toLowerCase();
|
||
// #ifdef MP
|
||
if (this.compress) { //微信小程序压缩完没有后缀
|
||
result = type == 0 ? 'jpg' : 'mp4';
|
||
}
|
||
// #endif
|
||
// #endif
|
||
return result;
|
||
},
|
||
guid() {
|
||
return 'xxxxxxxx-date-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||
var r = Math.random() * 16 | 0,
|
||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||
return v.toString(16);
|
||
}).replace(/date/g, function(c) {
|
||
return Date.parse(new Date());
|
||
});
|
||
},
|
||
canvasDataURL(path, obj, callback) {
|
||
var img = new Image();
|
||
img.src = path;
|
||
img.onload = function() {
|
||
var that = this;
|
||
// 默认按比例压缩
|
||
var w = that.width,
|
||
h = that.height,
|
||
scale = w / h;
|
||
w = obj.width || w;
|
||
h = obj.height || (w / scale);
|
||
var quality = 0.8; // 默认图片质量为0.8
|
||
//生成canvas
|
||
var canvas = document.createElement('canvas');
|
||
var ctx = canvas.getContext('2d');
|
||
// 创建属性节点
|
||
var anw = document.createAttribute("width");
|
||
anw.nodeValue = w;
|
||
var anh = document.createAttribute("height");
|
||
anh.nodeValue = h;
|
||
canvas.setAttributeNode(anw);
|
||
canvas.setAttributeNode(anh);
|
||
ctx.drawImage(that, 0, 0, w, h);
|
||
// 图像质量
|
||
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
|
||
quality = obj.quality;
|
||
}
|
||
// quality值越小，所绘制出的图像越模糊
|
||
var base64 = canvas.toDataURL('image/jpeg', quality);
|
||
// 回调函数返回base64的值
|
||
callback(base64);
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.preview-full {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1002;
|
||
}
|
||
|
||
.preview-full video {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1002;
|
||
}
|
||
|
||
.preview-full-close {
|
||
position: fixed;
|
||
right: 32rpx;
|
||
top: 25rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
z-index: 1003;
|
||
/* background-color: #808080; */
|
||
color: #fff;
|
||
font-size: 65rpx;
|
||
font-weight: bold;
|
||
text-shadow: 1px 2px 5px rgb(0 0 0);
|
||
}
|
||
|
||
|
||
|
||
/* .preview-full-close-before,
|
||
.preview-full-close-after {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
content: '';
|
||
height: 60rpx;
|
||
margin-top: -30rpx;
|
||
width: 6rpx;
|
||
margin-left: -3rpx;
|
||
background-color: #FFFFFF;
|
||
z-index: 20000;
|
||
}
|
||
|
||
.preview-full-close-before {
|
||
transform: rotate(45deg);
|
||
|
||
}
|
||
|
||
.preview-full-close-after {
|
||
transform: rotate(-45deg);
|
||
|
||
} */
|
||
|
||
.htz-image-upload-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.htz-image-upload-Item {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 13rpx;
|
||
border-radius: 10rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.htz-image-upload-Item image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.htz-image-upload-Item-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.htz-image-upload-Item-video-fixed {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
z-index: 996;
|
||
|
||
}
|
||
|
||
.htz-image-upload-Item video {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
|
||
}
|
||
|
||
.htz-image-upload-Item-add {
|
||
font-size: 105rpx;
|
||
/* line-height: 160rpx; */
|
||
text-align: center;
|
||
border: 1px dashed #d9d9d9;
|
||
color: #d9d9d9;
|
||
}
|
||
|
||
.htz-image-upload-Item-del {
|
||
background-color: var(--ui-BG-Main);
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
text-align: center;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 997;
|
||
color: #fff;
|
||
border-top-right-radius: 10rpx;
|
||
}
|
||
|
||
.htz-image-upload-Item-del-cover {
|
||
background-color: var(--ui-BG-Main);
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
text-align: center;
|
||
top: 0;
|
||
right: 0;
|
||
color: #fff;
|
||
/* #ifdef APP-PLUS */
|
||
line-height: 25rpx;
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS */
|
||
line-height: 35rpx;
|
||
/* #endif */
|
||
z-index: 997;
|
||
border-top-right-radius: 10rpx;
|
||
}
|
||
|
||
.htz-image-upload-Item-video-app-poster {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|