@@ -77,4 +77,28 @@ export function awsImgUpload(data) { | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
} | |||
/** | |||
* @description 上传背景 / 素材之后需要保存 | |||
* @returns type:=4背景=5素材,material:图片url | |||
*/ | |||
export function saveImgApi(data) { | |||
return request({ | |||
url: `/api/materialMould/save `, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 删除上传的背景或素材 | |||
* @returns type:=4背景=5素材,material:图片url | |||
*/ | |||
export function delImgApi(id) { | |||
return request({ | |||
url: `/api/materialMould/del?id=${id}`, | |||
method: 'get', | |||
}) | |||
} |
@@ -65,6 +65,8 @@ | |||
import { awsImgUpload } from '@/api/editModel' | |||
import { Toast } from 'vant' | |||
import { VueCropper } from 'vue-cropper' | |||
import { saveImgApi } from '../api/editModel' | |||
export default { | |||
name: 'uploadAva', | |||
components: { | |||
@@ -78,6 +80,14 @@ export default { | |||
avaUrl: { | |||
default: '', | |||
type: String | |||
}, | |||
type: { | |||
default: '', | |||
type: Number | |||
}, | |||
videoType: { | |||
default: null, | |||
type: Number | |||
} | |||
}, | |||
data() { | |||
@@ -111,7 +121,7 @@ export default { | |||
}, | |||
methods: { | |||
beforeRead(file) { | |||
console.log(file) | |||
// console.log(file) | |||
if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||
this.$toast('请上传 jpg/png 格式图片') | |||
return false | |||
@@ -141,7 +151,7 @@ export default { | |||
// base64结果 | |||
that.ImgUrl = base64Data | |||
that.loading = false | |||
console.log(that.ImgUrl, 'dasdasd') | |||
// console.log(that.ImgUrl, 'dasdasd') | |||
// 发请求 | |||
const AccessToken = localStorage.getItem('AccessToken') | |||
that | |||
@@ -155,8 +165,26 @@ export default { | |||
}, | |||
data: formData | |||
}) | |||
.then((res) => { | |||
console.log(res) | |||
.then(async (res) => { | |||
// console.log(res.data.data.url) | |||
const res1 = await saveImgApi({ | |||
type: that.type, | |||
videoType: that.videoType, | |||
material: res.data.data.url | |||
}) | |||
// 重新获取列表 | |||
await Promise.all([ | |||
that.$emit('getMyBGIListApi'), | |||
that.$emit('getMyScListApi') | |||
]) | |||
if (this.type == 4) { | |||
that.$parent.$parent.changeShowBGIList(0) | |||
} | |||
if (this.type == 5) { | |||
that.$parent.$parent.changeShowBGIList(2) | |||
} | |||
that.loadingShow = false | |||
that.showCropper = false | |||
Toast.success('上传成功') | |||
@@ -14,21 +14,41 @@ | |||
@touchmove="onMouseMove(index)" | |||
@touchstart="onMouseDown(index)" | |||
@touchend="onMouseUp(index)" | |||
v-for="(item, index) in materialList" | |||
v-for="(item, index) in materialList.scList" | |||
:key="index" | |||
class="material" | |||
:style="{ | |||
transform: 'scale(' + item.scale + ') ', | |||
zIndex: item.zIndex, | |||
transform: 'scale(' + item.w + ') ', | |||
zIndex: item.z, | |||
top: item.y + 'px', | |||
left: item.x + 'px' | |||
}" | |||
> | |||
<div>{{ item.text }}</div> | |||
<img :src="item.url" alt="" /> | |||
<img :src="item.material" alt="" /> | |||
<!-- 边框 --> | |||
<div :class="domIndex == index ? 'active' : ''"></div> | |||
</div> | |||
<!-- 数字人 --> | |||
<div | |||
id="virtual" | |||
@touchmove="onMouseMove1()" | |||
@touchstart="onMouseDown1()" | |||
@touchend="onMouseUp1()" | |||
class="material" | |||
:style="{ | |||
transform: 'scale(' + materialList.virtual.w + ') ', | |||
zIndex: materialList.virtual.z, | |||
top: materialList.virtual.y + 'px', | |||
left: materialList.virtual.x + 'px' | |||
}" | |||
> | |||
<!-- <div>{{ item.text }}</div> --> | |||
<img :src="materialList.virtual.material" alt="" /> | |||
<!-- 边框 --> | |||
<!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
@@ -43,6 +63,12 @@ import { scrollToID } from '../utils' | |||
Vue.use(Toast) | |||
export default { | |||
// watch: { | |||
// materialList(newValue, oldValue) { | |||
// console.log(`count变化了,新值为${newValue},旧值为${oldValue}`) | |||
// this.materialList = newValue | |||
// } | |||
// }, | |||
props: { | |||
imgUrl: { | |||
default: false | |||
@@ -63,49 +89,8 @@ export default { | |||
windowWidth: 0, | |||
windowHeight: 0, | |||
scale: 1, | |||
domIndex: -1 //当前点击的图片 | |||
// materialList: [ | |||
// { | |||
// text: '小div1', | |||
// url: 'img/BG@2x.b0cf224b.png', | |||
// x: 10, // 相对左上角XY坐标 | |||
// y: 190, | |||
// scale: 1, //缩放 | |||
// zIndex: 1 //层级 | |||
// }, | |||
// { | |||
// text: '小div2', | |||
// url: 'img/BG@2x.b0cf224b.png', | |||
// x: 100, | |||
// y: 0, | |||
// scale: 1, | |||
// zIndex: 2 | |||
// }, | |||
// { | |||
// text: '小div3', | |||
// url: require('../assets/img/bg.png'), | |||
// x: 0, | |||
// y: 100, | |||
// scale: 1, | |||
// zIndex: 3 | |||
// }, | |||
// { | |||
// text: '小div4', | |||
// url: require('../assets/img/cn.jpeg'), | |||
// x: 100, | |||
// y: 100, | |||
// scale: 1, | |||
// zIndex: 4 | |||
// }, | |||
// { | |||
// text: '小div5', | |||
// url: require('../assets/img/ft.png'), | |||
// x: 100, | |||
// y: 280, | |||
// scale: 1, | |||
// zIndex: 5 | |||
// } | |||
// ] | |||
domIndex: -1, //当前点击的图片 | |||
domIndex1: -1 //当前点击的数字人 | |||
} | |||
}, | |||
@@ -115,7 +100,7 @@ export default { | |||
//动态计算样式 | |||
bgStyle() { | |||
return { | |||
backgroundImage: `url(${this.imgUrl})`, | |||
backgroundImage: `url(${this.materialList.BGI.material})`, | |||
backgroundSize: 'cover', | |||
backgroundPosition: 'center' | |||
} | |||
@@ -168,14 +153,15 @@ export default { | |||
// 双指缩放 | |||
if (event.touches[1]) { | |||
const distance = this.getDistance(event.touches[0], event.touches[1]) | |||
const scale = distance / this.startDistance | |||
this.materialList[index].scale = scale | |||
const scale = (distance / this.startDistance).toFixed(2) | |||
this.materialList.scList[index].w = scale | |||
this.materialList.scList[index].h = scale | |||
} | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
// console.log(deltaX) | |||
this.materialList[index].x += deltaX | |||
this.materialList[index].y += deltaY | |||
this.materialList.scList[index].x += deltaX | |||
this.materialList.scList[index].y += deltaY | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
@@ -189,21 +175,90 @@ export default { | |||
// 限制X轴 | |||
// console.log(fatherRect) | |||
// console.log(sonRect) | |||
if (this.materialList[index].x < -sonRect.width) { | |||
this.materialList[index].x = 0 | |||
if (this.materialList.scList[index].x < -sonRect.width) { | |||
this.materialList.scList[index].x = 0 | |||
this.exceed() | |||
} | |||
if (this.materialList.scList[index].x > fatherRect.width) { | |||
this.materialList.scList[index].x = 0 | |||
this.exceed() | |||
} | |||
// 限制Y轴 | |||
if (this.materialList.scList[index].y < -sonRect.height) { | |||
this.materialList.scList[index].y = 0 | |||
this.exceed() | |||
} | |||
if (this.materialList.scList[index].y > fatherRect.height) { | |||
this.materialList.scList[index].y = 0 | |||
this.exceed() | |||
} | |||
}, | |||
// 数字人的处理 | |||
// 鼠标按下事件 | |||
onMouseDown1() { | |||
this.domIndex = -2 | |||
this.dragging = true | |||
//双指缩放初始化 | |||
if (event.touches[1]) { | |||
this.startDistance = this.getDistance( | |||
event.touches[0], | |||
event.touches[1] | |||
) | |||
} | |||
// 记录点击瞬间的鼠标坐标 | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
}, | |||
// 鼠标抬起 | |||
onMouseUp1() { | |||
this.dragging = false | |||
}, | |||
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
onMouseMove1() { | |||
// 禁止默认事件--下拉 | |||
event.preventDefault() | |||
if (!this.dragging) return | |||
// console.log(event.touches[0]) | |||
// 双指缩放 | |||
if (event.touches[1]) { | |||
const distance = this.getDistance(event.touches[0], event.touches[1]) | |||
const scale = (distance / this.startDistance).toFixed(2) | |||
this.materialList.virtual.w = scale | |||
this.materialList.virtual.h = scale | |||
} | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
// console.log(deltaX) | |||
this.materialList.virtual.x += deltaX | |||
this.materialList.virtual.y += deltaY | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
// 得到父子盒子信息 | |||
const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||
// 子盒子信息 | |||
const sonRect = document.getElementById(`virtual`).getBoundingClientRect() | |||
// 限制X轴 | |||
// console.log(fatherRect) | |||
// console.log(sonRect) | |||
if (this.materialList.virtual.x < -sonRect.width) { | |||
this.materialList.virtual.x = 0 | |||
this.exceed() | |||
} | |||
if (this.materialList[index].x > fatherRect.width) { | |||
this.materialList[index].x = 0 | |||
if (this.materialList.virtual.x > fatherRect.width) { | |||
this.materialList.virtual.x = 0 | |||
this.exceed() | |||
} | |||
// 限制Y轴 | |||
if (this.materialList[index].y < -sonRect.height) { | |||
this.materialList[index].y = 0 | |||
if (this.materialList.virtual.y < -sonRect.height) { | |||
this.materialList.virtual.y = 0 | |||
this.exceed() | |||
} | |||
if (this.materialList[index].y > fatherRect.height) { | |||
this.materialList[index].y = 0 | |||
if (this.materialList.virtual.y > fatherRect.height) { | |||
this.materialList.virtual.y = 0 | |||
this.exceed() | |||
} | |||
}, | |||
@@ -220,10 +275,34 @@ export default { | |||
this.materialList[this.domIndex].scale -= 0.1 | |||
} | |||
if (type == 3) { | |||
this.materialList[this.domIndex].zIndex += 1 | |||
// 如果是点的数字人 | |||
if (this.domIndex == -2) { | |||
this.materialList.virtual.z += 1 | |||
if (this.materialList.virtual.z >= 10) { | |||
this.materialList.virtual.z = 10 | |||
} | |||
return | |||
} | |||
// 点的素材 | |||
this.materialList.scList[this.domIndex].z += 1 | |||
if (this.materialList.scList[this.domIndex].z >= 10) { | |||
this.materialList.scList[this.domIndex].z = 10 | |||
} | |||
} | |||
if (type == 4) { | |||
this.materialList[this.domIndex].zIndex -= 1 | |||
// 如果是点的数字人 | |||
if (this.domIndex == -2) { | |||
this.materialList.virtual.z -= 1 | |||
if (this.materialList.virtual.z <= 0) { | |||
this.materialList.virtual.z = 0 | |||
} | |||
return | |||
} | |||
// 点的素材 | |||
this.materialList.scList[this.domIndex].z -= 1 | |||
if (this.materialList.scList[this.domIndex].z <= 0) { | |||
this.materialList.scList[this.domIndex].z = 0 | |||
} | |||
} | |||
}, | |||
// 素材超出显示范围 | |||
@@ -233,7 +233,12 @@ | |||
<div v-if="bjAction == 1" class="myTab-show-list-upload"> | |||
<img src="../../assets/icon/icon-upload@2x.png" alt="" /> | |||
<!-- 上传背景组件 --> | |||
<CutImg class="CutImg"></CutImg> | |||
<CutImg | |||
@getMyBGIListApi="getMyBGIListApi" | |||
class="CutImg" | |||
:type="4" | |||
:videoType="videoType" | |||
></CutImg> | |||
</div> | |||
<!-- 图片列表 --> | |||
<div | |||
@@ -249,6 +254,7 @@ | |||
</div> | |||
<!-- 删除上传素材 --> | |||
<div | |||
@click="delImg(item.id)" | |||
class="icon-error" | |||
v-if="bjAction == 1 && bjImgAction == index" | |||
> | |||
@@ -270,7 +276,7 @@ | |||
<img class="img" src="../../assets/icon/icon-material.png" alt="" /> | |||
更换素材 | |||
</div> | |||
<div @click="showTabSheet = !showTabSheet"> | |||
<div @click="sureImg"> | |||
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | |||
</div> | |||
</div> | |||
@@ -279,14 +285,14 @@ | |||
<!-- tab栏 --> | |||
<div class="myTab"> | |||
<div | |||
@click="changeShowBGIList(3)" | |||
@click="changeShowBGIList(2)" | |||
class="myTab-item" | |||
:class="{ active: scAction == 0 }" | |||
> | |||
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 素材库 | |||
</div> | |||
<div | |||
@click="changeShowBGIList(4)" | |||
@click="changeShowBGIList(3)" | |||
class="myTab-item" | |||
:class="{ active: scAction == 1 }" | |||
> | |||
@@ -301,8 +307,12 @@ | |||
<!-- 上传 --> | |||
<div v-if="scAction == 1" class="myTab-show-list-upload"> | |||
<img src="../../assets/icon/icon-upload@2x.png" alt="" /> | |||
<!-- 上传背景组件 --> | |||
<CutImg class="CutImg"></CutImg> | |||
<!-- 上传图片组件 --> | |||
<CutImg | |||
class="CutImg" | |||
:type="5" | |||
@getMyScListApi="getMyScListApi" | |||
></CutImg> | |||
</div> | |||
<!-- 图片列表 --> | |||
<div | |||
@@ -318,6 +328,7 @@ | |||
</div> | |||
<!-- 删除上传素材 --> | |||
<div | |||
@click="delImg(item.id)" | |||
class="icon-error" | |||
v-if="scAction == 1 && scImgAction == index" | |||
> | |||
@@ -365,7 +376,8 @@ import { | |||
systemBGIListApi, | |||
myBGIListApi, | |||
systemScListApi, | |||
myScListApi | |||
myScListApi, | |||
delImgApi | |||
} from '@/api/editModel' | |||
import { getModelDetailById } from '../../api/getPaper.js' | |||
@@ -384,17 +396,12 @@ export default { | |||
audioUrl: null, // 声音试听 | |||
inPage: false, | |||
imgUrl: false, // 背景图 | |||
materialList: {}, // 传给组件的素材,背景,数字人数据 | |||
sclist: [ | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 300, // 相对左上角XY坐标 | |||
y: 300, | |||
scale: 1, //缩放 | |||
zIndex: 3 //层级 | |||
} | |||
], //该作品的素材列表 | |||
materialList: { | |||
BGI: {}, | |||
scList: [], | |||
virtual: {} | |||
}, // 传给组件的素材,背景,数字人数据 | |||
personMouldId: null, //选择数字人id | |||
mouldSmId: null, | |||
saveID: null, // 作品id | |||
@@ -481,17 +488,39 @@ export default { | |||
submit() { | |||
// 组装参数 | |||
console.log(this.soundChoose.id) | |||
// 素材列表处理 | |||
const scList = this.materialList.scList.map((item) => { | |||
return { | |||
id: item.id, | |||
type: 5, | |||
material: item.material, | |||
x: item.x, | |||
y: item.y, | |||
z: item.z, | |||
w: item.w, | |||
h: item.h | |||
} | |||
}) | |||
// 数字人处理 | |||
const shuziren = { | |||
id: this.materialList.virtual.id, | |||
type: 1, | |||
material: this.materialList.virtual.material, | |||
x: this.materialList.virtual.x, | |||
y: this.materialList.virtual.y, | |||
z: this.materialList.virtual.z, | |||
w: this.materialList.virtual.w, | |||
h: this.materialList.virtual.h | |||
} | |||
const data = { | |||
backgroundMouldId: '', // 背景id | |||
backgroundMouldSmId: '', //背景标识 | |||
id: this.saveID, //作品id | |||
paperwork: this.textareaContent, //文本框内容 | |||
personMouldId: this.personMouldId, //模版id | |||
personMouldSmId: this.mouldSmId, //模版标识 | |||
title: this.inputTitle, //文案标题 | |||
type: 1, //写死type | |||
voiceMouldId: this.soundChoose.id, //声音id | |||
voiceMouldSmId: this.soundChoose.mouldSmId //声音标识 | |||
id: this.$route.query.id, | |||
videoType: this.videoType, //横屏竖屏 | |||
personMouldId: this.materialList.virtual.id, //数字人id | |||
voiceMouldIds: [this.soundChoose.id], //声音id | |||
title: this.inputTitle, //标题 | |||
paperwork: this.textareaContent, //语音内容 | |||
backgroundId: this.materialList.BGI.id, //背景id | |||
materialAllJson: JSON.stringify([...scList, shuziren]) | |||
} | |||
console.log(data, '最终提交的参数') | |||
@@ -519,7 +548,8 @@ export default { | |||
try { | |||
const res = await saveOrUpdateUserVideo(data) | |||
console.log(res, '保存或修改用户作品') | |||
this.createVideo({ id: this.saveID }) | |||
// this.createVideo({ id: this.saveID }) | |||
this.createVideo({ id: this.$route.query.id }) | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
@@ -529,6 +559,7 @@ export default { | |||
* @description:生成视频 | |||
*/ | |||
async createVideo(data) { | |||
let that = this | |||
try { | |||
const res = await doCreateVideo(data) | |||
console.log(res, '生成视频') | |||
@@ -539,7 +570,7 @@ export default { | |||
}, 2000) | |||
const timer = setInterval(() => { | |||
// 重复调取此接口直到videoStatus == 2 || 3 | |||
this.getVideo(this.saveID) | |||
this.getVideo(that.$route.query.id) | |||
if (this.timerOver) { | |||
clearInterval(timer) | |||
this.isShowCover = false | |||
@@ -589,6 +620,17 @@ export default { | |||
try { | |||
const res = await getModelDetailById(id) | |||
console.log(JSON.parse(res.data.personMouldSm)) | |||
this.materialList.virtual = JSON.parse(res.data.personMouldSm) | |||
if (!this.materialList.virtual.w) { | |||
this.materialList.virtual = { | |||
...this.materialList.virtual, | |||
x: 100, | |||
y: 0, | |||
z: 0, | |||
w: 1, | |||
h: 1 | |||
} | |||
} | |||
// console.log(JSON.parse(res.data.backgroundSm)) | |||
// console.log(JSON.parse(res.data.materialAllJson)) | |||
this.videoType = res.data.videoType | |||
@@ -645,21 +687,77 @@ export default { | |||
}, | |||
// 点击对钩确定背景或者素材图 | |||
sureImg() { | |||
Dialog.confirm({ | |||
// title: '退出登录', | |||
message: '您确定要用这张背景图吗?' | |||
}) | |||
.then(() => { | |||
console.log('true') | |||
this.showTabSheet = false | |||
let that = this | |||
// 背景 | |||
if (this.bottomTabActive == 2 && this.bjImgAction != -1) { | |||
Dialog.confirm({ | |||
// title: '退出登录', | |||
message: '您确定要用这张背景图吗?' | |||
}) | |||
.catch(() => { | |||
console.log('false') | |||
this.showTabSheet = false | |||
return | |||
.then(() => { | |||
if (that.bjAction == 0) { | |||
that.materialList.BGI = that.systemBGIList.find((item, index) => { | |||
return index == that.bjImgAction | |||
}) | |||
} else if (that.bjAction == 1) { | |||
that.materialList.BGI = that.myBGIList.find((item, index) => { | |||
return index == that.bjImgAction | |||
}) | |||
} | |||
this.showTabSheet = false | |||
}) | |||
.catch(() => { | |||
console.log('false') | |||
this.showTabSheet = false | |||
return | |||
}) | |||
} | |||
// 素材 | |||
else if (this.bottomTabActive == 3 && this.scImgAction != -1) { | |||
Dialog.confirm({ | |||
// title: '退出登录', | |||
message: '您确定要用这张素材图吗?' | |||
}) | |||
.then(() => { | |||
if (that.scAction == 0) { | |||
let scItem = that.systemScList.find((item, index) => { | |||
return index == that.scImgAction | |||
}) | |||
that.materialList.scList.push({ | |||
...scItem, | |||
x: 0, | |||
y: 0, | |||
z: 0, | |||
w: 1, | |||
h: 1 | |||
}) | |||
} else if (that.scAction == 1) { | |||
let scItem = that.myScList.find((item, index) => { | |||
return index == that.scImgAction | |||
}) | |||
that.materialList.scList.push({ | |||
...scItem, | |||
x: 0, | |||
y: 0, | |||
z: 0, | |||
w: 1, | |||
h: 1 | |||
}) | |||
} | |||
this.showTabSheet = false | |||
}) | |||
.catch(() => { | |||
console.log('false') | |||
this.showTabSheet = false | |||
return | |||
}) | |||
} | |||
// 啥没选 | |||
else { | |||
this.showTabSheet = false | |||
} | |||
}, | |||
// 切换背景图的展示列表 | |||
// 切换背景图/素材图的展示列表 | |||
changeShowBGIList(type) { | |||
if (type == 0) { | |||
this.bjAction = 0 | |||
@@ -669,11 +767,11 @@ export default { | |||
this.bjAction = 1 | |||
this.showBGIList = this.myBGIList | |||
} | |||
if (type == 3) { | |||
if (type == 2) { | |||
this.scAction = 0 | |||
this.showScList = this.systemScList | |||
} | |||
if (type == 4) { | |||
if (type == 3) { | |||
this.scAction = 1 | |||
this.showScList = this.myScList | |||
} | |||
@@ -702,6 +800,7 @@ export default { | |||
) | |||
this.myBGIList = res.data.list | |||
}, | |||
/** | |||
* @description:获取系统素材 | |||
*/ | |||
@@ -710,6 +809,7 @@ export default { | |||
this.systemScList = res.data.list | |||
this.showScList = this.systemScList | |||
}, | |||
/** | |||
* @description:获取我上传的素材 | |||
*/ | |||
@@ -717,6 +817,28 @@ export default { | |||
const res = await myScListApi(this.pageNum, this.pageSize) | |||
this.myScList = res.data.list | |||
}, | |||
/** | |||
* @description:删除上传的背景或素材 | |||
*/ | |||
async delImg(id) { | |||
Dialog.confirm({ | |||
message: '确认删除吗?' | |||
}) | |||
.then(async () => { | |||
const res = await delImgApi(id) | |||
if (this.bottomTabActive == 2) { | |||
this.getMyBGIListApi() | |||
this.changeShowBGIList(0) | |||
} | |||
if (this.bottomTabActive == 3) { | |||
this.getMyScListApi() | |||
this.changeShowBGIList(2) | |||
} | |||
}) | |||
.catch(() => {}) | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||
@@ -746,14 +746,12 @@ export default { | |||
// 瀑布流 | |||
.waterFall { | |||
// display: flex; | |||
// flex-wrap: wrap; | |||
// justify-content: space-between; | |||
// width: 100%; | |||
width: 350px; | |||
::v-deep .vue-waterfall-column { | |||
width: 50% !important; | |||
margin: 0 !important; | |||
} | |||
&-item { | |||
// max-width: 150px; | |||
// max-height: 270px; | |||
padding: 5px; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
@@ -761,16 +759,11 @@ export default { | |||
position: relative; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
// width: 160px; | |||
max-width: 162px; | |||
max-height: 288px; | |||
// padding: 5px; | |||
} | |||
img { | |||
max-width: 100%; | |||
max-height: 100%; | |||
object-fit: cover; | |||
// background-color: red; | |||
} | |||
&-mask { | |||
position: absolute; | |||