|
|
@@ -0,0 +1,662 @@
|
|
|
+<template>
|
|
|
+ <view class="con" :class="{'no-con':!showLabel}">
|
|
|
+ <view class="con-title" v-if="showLabel">{{label}}</view>
|
|
|
+ <movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">
|
|
|
+ <block v-for="(item, index) in imageList" :key="item.id">
|
|
|
+ <movable-view class="view" :x="item.x" :y="item.y" direction="all" :damping="40" :disabled="item.disable"
|
|
|
+ @change="onChange($event, item)" @touchstart="touchstart(item)" @mousedown="touchstart(item)"
|
|
|
+ @touchend="touchend(item)" @mouseup="touchend(item)"
|
|
|
+ :style="{ width: viewWidth + 'px', height: viewWidth + 'px', 'z-index': item.zIndex, opacity: item.opacity }">
|
|
|
+ <view class="area-con" @click.stop="examineImgOne(index)"
|
|
|
+ :style="{ width: childWidth, height: childWidth, transform: 'scale(' + item.scale + ')' }">
|
|
|
+ <image class="pre-image" :src="item.src+(imgType===1?'':'?x-oss-process=video/snapshot,t_7000,f_jpg,w_600,h_0,m_fast')" mode="aspectFill"></image>
|
|
|
+ <text v-if="imgType===2" class="bf-img iconfont"> </text>
|
|
|
+ <view class="del-con" @click.stop="delImage(item, index)" @touchstart.stop="delImageMp(item, index)"
|
|
|
+ @touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
|
|
|
+ <view class="del-wrap">
|
|
|
+<!-- <image class="del-image"-->
|
|
|
+<!-- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC">-->
|
|
|
+<!-- </image>-->
|
|
|
+ <text class="del-image iconfont"> </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </movable-view>
|
|
|
+ </block>
|
|
|
+ <view class="add" v-if="imageList.length < number"
|
|
|
+ :style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }" @click="showUploadingImg(true,0)">
|
|
|
+ <view class="add-wrap" :style="{ width: childWidth, height: childWidth }">
|
|
|
+ <view class="video-data">
|
|
|
+ <text class="video-img iconfont" ></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-popup ref="popup" :safeArea="false" type="bottom" @change="closePopup">
|
|
|
+ <view class="popup-block">
|
|
|
+ <view class="popup-row" @click="selectMultimedia(1)">拍照</view>
|
|
|
+ <view class="popup-row" @click="selectMultimedia(2)">从手机里面选择</view>
|
|
|
+ <view class="popup-row" @click="showUploadingImg(false,0)">取消</view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </movable-area>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+import tools from "@/service/tools";
|
|
|
+import txUploadFile from "@/service/txOssSts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageList: [],
|
|
|
+ previewList:[],
|
|
|
+ width: 0,
|
|
|
+ add: {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ current: 0,
|
|
|
+ colsValue: 0,
|
|
|
+ viewWidth: 0,
|
|
|
+ tempItem: null,
|
|
|
+ timer: null,
|
|
|
+ changeStatus: true,
|
|
|
+ preStatus: true,
|
|
|
+ ossClient:null,
|
|
|
+ isStart:true,
|
|
|
+ isUploading:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ value:{
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showLabel:{
|
|
|
+ type:Boolean,
|
|
|
+ default:true
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ type: String,
|
|
|
+ default: '标题'
|
|
|
+ },
|
|
|
+ // 返回排序后图片
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imgType: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ fileNum: {
|
|
|
+ type: Number,
|
|
|
+ default: 9
|
|
|
+ },
|
|
|
+ // 选择图片数量限制
|
|
|
+ number: {
|
|
|
+ type: Number,
|
|
|
+ default: 100
|
|
|
+ },
|
|
|
+ // 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx
|
|
|
+ imageWidth: {
|
|
|
+ type: Number,
|
|
|
+ default: 180
|
|
|
+ },
|
|
|
+ // 图片列数（cols > 0 则 imageWidth 无效）
|
|
|
+ cols: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ // 图片周围空白填充，单位 rpx
|
|
|
+ padding: {
|
|
|
+ type: Number,
|
|
|
+ default: 10
|
|
|
+ },
|
|
|
+ // 拖动图片时放大倍数 [0, ∞)
|
|
|
+ scale: {
|
|
|
+ type: Number,
|
|
|
+ default: 1.1
|
|
|
+ },
|
|
|
+ // 拖动图片时不透明度
|
|
|
+ opacity: {
|
|
|
+ type: Number,
|
|
|
+ default: 0.7
|
|
|
+ },
|
|
|
+ // 自定义添加（需配合 @aaddImage 事件使用）
|
|
|
+ custom: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ 'value':function () {
|
|
|
+ this.startValue()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ areaHeight() {
|
|
|
+ if (this.imageList.length < this.number) {
|
|
|
+ return Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth + 'px'
|
|
|
+ } else {
|
|
|
+ return Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ childWidth() {
|
|
|
+ return this.viewWidth - this.rpx2px(this.padding) * 2 + 'px'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.width = uni.getSystemInfoSync().windowWidth
|
|
|
+ this.viewWidth = this.rpx2px(this.imageWidth)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const query = uni.createSelectorQuery().in(this)
|
|
|
+ query.select('.area').boundingClientRect(data => {
|
|
|
+ if(data){
|
|
|
+ this.colsValue = Math.floor(data.width / this.viewWidth)
|
|
|
+ if (this.cols > 0) {
|
|
|
+ this.colsValue = this.cols
|
|
|
+ this.viewWidth = data.width / this.cols
|
|
|
+ }
|
|
|
+ for (let item of this.list) {
|
|
|
+ this.addProperties(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ query.exec()
|
|
|
+ this.startValue()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showUploadingImg(showImg) {
|
|
|
+ if (showImg) {
|
|
|
+ if(this.isUploading){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isUploading=true
|
|
|
+ this.$refs.popup.open("bottom");
|
|
|
+ } else {
|
|
|
+ this.$refs.popup.close();
|
|
|
+ this.isUploading=false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closePopup(e){
|
|
|
+ if(e.show===false){
|
|
|
+ this.isUploading=false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startValue(){
|
|
|
+ if(!this.isStart){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.value.length>0){
|
|
|
+ this.isStart=false
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.startList(this.value)
|
|
|
+ },100)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ examineImgOne( index) {
|
|
|
+ // this.$emit('examineImgOne',index)
|
|
|
+ // this.previewList = this.list
|
|
|
+ // this.current = index
|
|
|
+ // this.$refs.previewImage.open(index);
|
|
|
+ let imgList = []
|
|
|
+ this.imageList.forEach((item)=>{
|
|
|
+ console.log(item)
|
|
|
+ imgList.push(item.src)
|
|
|
+ })
|
|
|
+ uni.previewImage({
|
|
|
+ urls: imgList,
|
|
|
+ current: index,
|
|
|
+ success: () => {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startList(imgList){
|
|
|
+ if(imgList.length<=0){
|
|
|
+ let maxImageNum=this.imageList.length
|
|
|
+ if(maxImageNum>0){
|
|
|
+ for (let i=maxImageNum;i>0;--i){
|
|
|
+ let keyNum=i-1;
|
|
|
+ this.delImage(this.imageList[keyNum],keyNum)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ imgList.forEach((item)=>{
|
|
|
+ this.addProperties(item)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.sortList()
|
|
|
+
|
|
|
+ },
|
|
|
+ onChange(e, item) {
|
|
|
+ if (!item) return
|
|
|
+ item.oldX = e.detail.x
|
|
|
+ item.oldY = e.detail.y
|
|
|
+ if (e.detail.source === 'touch') {
|
|
|
+ if (item.moveEnd) {
|
|
|
+ item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.viewWidth, 2) + Math.pow(item.oldY - item
|
|
|
+ .absY * this.viewWidth, 2))
|
|
|
+ }
|
|
|
+ let x = Math.floor((e.detail.x + this.viewWidth / 2) / this.viewWidth)
|
|
|
+ if (x >= this.colsValue) return
|
|
|
+ let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth)
|
|
|
+ let index = this.colsValue * y + x
|
|
|
+ if (item.index != index && index < this.imageList.length) {
|
|
|
+ this.changeStatus = false
|
|
|
+ for (let obj of this.imageList) {
|
|
|
+ if (item.index > index && obj.index >= index && obj.index < item.index) {
|
|
|
+ this.change(obj, 1)
|
|
|
+ } else if (item.index < index && obj.index <= index && obj.index > item.index) {
|
|
|
+ this.change(obj, -1)
|
|
|
+ } else if (obj.id != item.id) {
|
|
|
+ obj.offset = 0
|
|
|
+ obj.x = obj.oldX
|
|
|
+ obj.y = obj.oldY
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ obj.x = obj.absX * this.viewWidth
|
|
|
+ obj.y = obj.absY * this.viewWidth
|
|
|
+ })
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ item.index = index
|
|
|
+ item.absX = x
|
|
|
+ item.absY = y
|
|
|
+ this.sortList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ change(obj, i) {
|
|
|
+ obj.index += i
|
|
|
+ obj.offset = 0
|
|
|
+ obj.x = obj.oldX
|
|
|
+ obj.y = obj.oldY
|
|
|
+ obj.absX = obj.index % this.colsValue
|
|
|
+ obj.absY = Math.floor(obj.index / this.colsValue)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ obj.x = obj.absX * this.viewWidth
|
|
|
+ obj.y = obj.absY * this.viewWidth
|
|
|
+ })
|
|
|
+ }, 0)
|
|
|
+ },
|
|
|
+ touchstart(item) {
|
|
|
+ this.imageList.forEach(v => {
|
|
|
+ v.zIndex = v.index + 9
|
|
|
+ })
|
|
|
+ item.zIndex = 99
|
|
|
+ item.moveEnd = true
|
|
|
+ this.tempItem = item
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ item.scale = this.scale
|
|
|
+ item.opacity = this.opacity
|
|
|
+ clearTimeout(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ touchend(item) {
|
|
|
+ this.previewImage(item)
|
|
|
+ item.scale = 1
|
|
|
+ item.opacity = 1
|
|
|
+ item.x = item.oldX
|
|
|
+ item.y = item.oldY
|
|
|
+ item.offset = 0
|
|
|
+ item.moveEnd = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ item.x = item.absX * this.viewWidth
|
|
|
+ item.y = item.absY * this.viewWidth
|
|
|
+ this.tempItem = null
|
|
|
+ this.changeStatus = true
|
|
|
+ })
|
|
|
+ }, 0)
|
|
|
+ },
|
|
|
+ previewImage(item) {
|
|
|
+ console.log(item)
|
|
|
+ if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
|
|
|
+ clearTimeout(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ let src = this.list.findIndex(v => v === item.src)
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.list,
|
|
|
+ current: src,
|
|
|
+ success: () => {
|
|
|
+ this.preStatus = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.preStatus = true
|
|
|
+ }, 600)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.timer) {
|
|
|
+ clearTimeout(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mouseenter() {
|
|
|
+ //#ifdef H5
|
|
|
+ this.imageList.forEach(v => {
|
|
|
+ v.disable = false
|
|
|
+ })
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ },
|
|
|
+ mouseleave() {
|
|
|
+ //#ifdef H5
|
|
|
+ if (this.tempItem) {
|
|
|
+ this.imageList.forEach(v => {
|
|
|
+ v.disable = true
|
|
|
+ v.zIndex = v.index + 1
|
|
|
+ v.offset = 0
|
|
|
+ v.moveEnd = false
|
|
|
+ if (v.id == this.tempItem.id) {
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ }
|
|
|
+ v.scale = 1
|
|
|
+ v.opacity = 1
|
|
|
+ v.x = v.oldX
|
|
|
+ v.y = v.oldY
|
|
|
+ this.$nextTick(() => {
|
|
|
+ v.x = v.absX * this.viewWidth
|
|
|
+ v.y = v.absY * this.viewWidth
|
|
|
+ this.tempItem = null
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.changeStatus = true
|
|
|
+ }
|
|
|
+ //#endif
|
|
|
+ },
|
|
|
+ selectMultimedia(fileType) {
|
|
|
+ if (this.imgType === 1) {
|
|
|
+ //图片选择
|
|
|
+ this.uploadingImg(fileType);
|
|
|
+ } else {
|
|
|
+ //视频选择
|
|
|
+ this.uploadingVideo(fileType);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadingImg(sourceType) {
|
|
|
+ if (this.list.length > 100) {
|
|
|
+ tools.error('最多上传100张')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.chooseImage({
|
|
|
+ count: this.fileNum, //默认9
|
|
|
+ sizeType: 'compressed', //可以指定是原图还是压缩图
|
|
|
+ sourceType: [sourceType === 1 ? 'camera' : 'album'],
|
|
|
+ success: (res) => {
|
|
|
+ this.showUploadingImg(false)
|
|
|
+ if (res.tempFiles !== undefined) {
|
|
|
+ res.tempFiles.forEach((file) => {
|
|
|
+ if (file.size > (1048576 * 3)) {
|
|
|
+ tools.error('图片最大3MB')
|
|
|
+ } else {
|
|
|
+ if (this.list.length > 100) {
|
|
|
+ tools.error('最多上传100张')
|
|
|
+ } else {
|
|
|
+ if(tools.getPlatform()==='H5'){
|
|
|
+ this.uploadingFile(file);
|
|
|
+ }else {
|
|
|
+ this.uploadingFile(file.path);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadingVideo(sourceType) {
|
|
|
+ uni.chooseVideo({
|
|
|
+ sourceType: [sourceType === 1 ? 'camera' : 'album'],
|
|
|
+ maxDuration: 60,
|
|
|
+ success: (res) => {
|
|
|
+ this.showUploadingImg(false)
|
|
|
+ console.log(res)
|
|
|
+ this.uploadingFile(res.tempFile);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadingFile(file) {
|
|
|
+ //图片上传
|
|
|
+ tools.showLoading();
|
|
|
+ this.isStart=false
|
|
|
+ txUploadFile(file).then((res) => {
|
|
|
+ if (res.Location) {
|
|
|
+ this.addProperties(res.Location)
|
|
|
+ tools.hideLoading();
|
|
|
+ }else {
|
|
|
+ tools.hideLoading();
|
|
|
+ tools.error('上传失败')
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ tools.hideLoading();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addImages() {
|
|
|
+ if (this.custom) {
|
|
|
+ this.$emit('addImage')
|
|
|
+ } else {
|
|
|
+ let checkNumber = this.number - this.imageList.length
|
|
|
+ uni.chooseImage({
|
|
|
+ count: checkNumber,
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: res => {
|
|
|
+ let count = checkNumber <= res.tempFilePaths.length ? checkNumber : res.tempFilePaths.length
|
|
|
+ for (let i = 0; i < count; i++) {
|
|
|
+ this.addProperties(res.tempFilePaths[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addImage(image) {
|
|
|
+ this.addProperties(image)
|
|
|
+ },
|
|
|
+ delImage(item, index) {
|
|
|
+ this.imageList.splice(index, 1)
|
|
|
+ for (let obj of this.imageList) {
|
|
|
+ if (obj.index > item.index) {
|
|
|
+ obj.index -= 1
|
|
|
+ obj.x = obj.oldX
|
|
|
+ obj.y = obj.oldY
|
|
|
+ obj.absX = obj.index % this.colsValue
|
|
|
+ obj.absY = Math.floor(obj.index / this.colsValue)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ obj.x = obj.absX * this.viewWidth
|
|
|
+ obj.y = obj.absY * this.viewWidth
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + 'px'
|
|
|
+ this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
|
|
|
+ this.sortList()
|
|
|
+ },
|
|
|
+ delImageMp(item, index) {
|
|
|
+ //#ifdef MP
|
|
|
+ this.delImage(item, index)
|
|
|
+ //#endif
|
|
|
+ },
|
|
|
+ sortList() {
|
|
|
+ let list = this.imageList.slice()
|
|
|
+ list.sort((a, b) => {
|
|
|
+ return a.index - b.index
|
|
|
+ })
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ list[i] = list[i].src
|
|
|
+ }
|
|
|
+ // this.$emit('update:list', list)
|
|
|
+ this.$emit('input', list)
|
|
|
+ },
|
|
|
+ addProperties(item) {
|
|
|
+ console.log('------------------addProperties')
|
|
|
+ console.log(item)
|
|
|
+ let absX = this.imageList.length % this.colsValue
|
|
|
+ let absY = Math.floor(this.imageList.length / this.colsValue)
|
|
|
+ let x = absX * this.viewWidth
|
|
|
+ let y = absY * this.viewWidth
|
|
|
+ this.imageList.push({
|
|
|
+ src: item,
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ oldX: x,
|
|
|
+ oldY: y,
|
|
|
+ absX,
|
|
|
+ absY,
|
|
|
+ scale: 1,
|
|
|
+ zIndex: 9,
|
|
|
+ opacity: 1,
|
|
|
+ index: this.imageList.length,
|
|
|
+ id: this.guid(),
|
|
|
+ disable: false,
|
|
|
+ offset: 0,
|
|
|
+ moveEnd: false
|
|
|
+ })
|
|
|
+ this.add.x = (this.imageList.length % this.colsValue) * this.viewWidth + 'px'
|
|
|
+ this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + 'px'
|
|
|
+ this.sortList()
|
|
|
+ },
|
|
|
+ nothing() {},
|
|
|
+ rpx2px(v) {
|
|
|
+ return this.width * v / 750
|
|
|
+ },
|
|
|
+ guid() {
|
|
|
+ function S4() {
|
|
|
+ return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
|
+ }
|
|
|
+ return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import url("../../static/css/en-common.css");
|
|
|
+@import "@/static/css/wh-common";
|
|
|
+.con {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 2rpx solid #F0F0F0;
|
|
|
+ .con-title{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .view {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .area-con {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .pre-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bf-img {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ //margin: -20rpx 0 0 -20rpx;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del-con {
|
|
|
+ position: absolute;
|
|
|
+ top: 5rpx;
|
|
|
+ right: 5rpx;
|
|
|
+ //padding: 0 0 20rpx 20rpx;
|
|
|
+
|
|
|
+ .del-wrap {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ //background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ border-radius: 0 0 0 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .del-image {
|
|
|
+ //width: 20rpx;
|
|
|
+ //height: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .add-wrap {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ .add-img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .names {
|
|
|
+ color: #6F6F6F;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .video-data{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ //background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 160rpx;
|
|
|
+ .video-img {
|
|
|
+ font-size: 80rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.no-con{
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+</style>
|
USER-20230908AJ\Administrator