aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
aa5f2e4208a75c18c22aa1361032a585f9561949
aida_front/src/component/HomePage/ExportModel.vue

863 lines
34 KiB
Vue
Raw Normal View History

支付退款
2024-02-23 14:32:33 +08:00
<template>
fix
2024-02-29 17:16:51 +08:00
<a-modal
class="modal_component Export"
v-model:visible="showUpgradePlan"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:keyboard="false"
>
支付退款
2024-02-23 14:32:33 +08:00
<div class="UpgradePlan_closeIcon">
fix
2024-02-29 17:16:51 +08:00
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<div class="UpgradePlan_content">
<div>Export</div>
</div>
<!-- <div>
支付退款
2024-02-23 14:32:33 +08:00
<canvas ref="exportCanvas"></canvas>
</div> -->
fix
2024-02-29 17:16:51 +08:00
<div class="exportCanvasBox">
<div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">Canvas Title</div>
<label>
<div>Width:</div>
<input
type="number"
@input="setMaxInput('width', 500)"
v-model="canvasWH.width"
/>
</label>
<label>
<div>Height:</div>
<input
type="number"
@input="setMaxInput('height', 1000)"
v-model="canvasWH.height"
/>
</label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav()">
Canvas Nav
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav?'icon-rotate':''
]"
>
</div>
导出可拖拽功能
2024-02-27 15:15:38 +08:00
</div>
fix
2024-02-29 17:16:51 +08:00
<div class="exportCanvasBox_img" :class="{closeNav:'closeNav'}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
</div>
<div
class="exportCanvasBox_item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'']"
v-for="imgItem in item"
draggable
@dragstart="onDragstart(key)"
>
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
</div>
</div>
</div>
</div>
<div class="exportCanvasBox_center">
<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
</div>
<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
<div class="exportCanvasBox_right">
<div class="" @click="setExport">export</div>
<div class="" @click="multiselect">all</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
</a-modal>
支付退款
2024-02-23 14:32:33 +08:00
</template>
导出可拖拽功能
2024-02-27 15:15:38 +08:00
<script>
fix
2024-02-29 17:16:51 +08:00
import {
defineComponent,
computed,
h,
ref,
nextTick,
inject,
reactive,
onMounted,
} from "vue";
支付退款
2024-02-23 14:32:33 +08:00
import { Https } from "@/tool/https";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
导出可拖拽功能
2024-02-27 15:15:38 +08:00
import { useStore } from "vuex";
fix
2024-02-29 17:16:51 +08:00
import JSZip, { forEach } from "jszip";
import { message, Modal } from "ant-design-vue";
const FileSaver = require("file-saver");
支付退款
2024-02-23 14:32:33 +08:00
export default defineComponent({
fix
2024-02-29 17:16:51 +08:00
components: {
scaleImage,
ExportNewCoolection,
},
props: ["msg", "sketchCatecoryList"],
支付退款
2024-02-23 14:32:33 +08:00
setup() {
导出可拖拽功能
2024-02-27 15:15:38 +08:00
const store = useStore();
fix
2024-02-29 17:16:51 +08:00
let showUpgradePlan = ref(false);
let canvas = reactive({});
// let canvasDom = ref()
let canvasWH = ref({
width: 400,
height: 1200,
});
canvasWH.value.width = [window.innerWidth/2.4]
canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
console.log(canvasWH.value.width);
let sketch = computed(() => {
return store.state.HomeStoreModule.showSketchList;
});
let sketchList = computed(() => {
return store.state.UploadFilesModule.showSketchboard;
});
let allBoardData = computed(() => {
return store.state.UploadFilesModule.allBoardData;
});
let likeDesignCollectionList = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let isShowMark = false;
// let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
let position = {
//设置每个图形位置的初始值
x: 0,
y: 0,
height: 0,
};
let init = () => {
showUpgradePlan.value = true;
console.log(position);
nextTick().then(async () => {
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
let canvasBox = document.querySelector(
".Export .exportCanvasBox_center"
);
canvasBox.innerHTML = ""; // 清空原有内容
var canvasDom = document.createElement("canvas");
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255)",
// fill: '#ffde7d',
// selection: false, //设置多选
width: canvasWH.value.width,
height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式
});
canvasOnDrop()
let disposeMoodboardShow = true;
let arr = [
"disposeMoodboard",
"moodboardFiles",
"printboardFiles",
"colorBoards",
"sketchboardFiles",
"likeDesignCollectionList",
];
let sketchGrouping = 3; //sketch分组
let likeDesign = 4; //整体图分组
let oldKey = "";
let margin = 20; //每个图形边距
// arr.forEach((item,index)=>{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let setImgWidth = canvasWH.value.width; //这是设置画布等宽
let sketchGroupingItem = [];
if (
disposeMoodboardShow &&
item == "disposeMoodboard" &&
allBoardData.value[key].length != 0 &&
allBoardData.value[key][0] != null
) {
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
}
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
if (item == "printboardFiles") {
setImgWidth = canvasWH.value.width / 8;
}
if (item == "sketchboardFiles") {
setImgWidth =
(canvasWH.value.width -
(sketchGrouping - 1) * 20) /
sketchGrouping;
}
if (item == "likeDesignCollectionList") {
setImgWidth =
(canvasWH.value.width -
(likeDesign - 1) * 20) /
likeDesign;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if (key == "colorBoards") {
var text = new fabric.Text(
allItem.tcx,
{
left: 0,
top: 60,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
}
);
let text1 = new fabric.Text(
allItem.name,
{
left: 0,
top: 80,
width: 20,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
}
);
let width =
110 > text1.width
? 110
: text1.width;
var color = new fabric.Rect({
width: width,
height: 60,
textAlign: "left",
fill: `rgb(${allItem.rgbValue.r},${allItem.rgbValue.g},${allItem.rgbValue.b})`,
});
if (
position.x + width >
canvasWH.value.width ||
oldKey != key
) {
position.x = 0;
position.y += position.height;
}
var group = new fabric.Group(
[color, text, text1],
{
left: position.x,
top: position.y,
width: width,
fill: "rgb(255,255,255)",
cornerSize: 10, // 选中时，角的大小为20
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
stroke: "#212121",
strokeWidth: 1,
}
);
// 将矩形对象添加到 canvas 中
canvas.add(group);
oldKey = key;
position.x += width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(
itemCanvasImg,
(img) => {
let proportion = img.height / img.width; //计算图形宽高比例
let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y += position.height;
}
img.set({
// width: setImgWidth/img.width,
// height: canvasWH.value.height/img.height,
left: position.x,
top: position.y,
scaleX:
setImgWidth / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
cornerSize: 10, // 选中时，角的大小为20
// lockRotation:true,
// lockScalingX:true,
lockRotation: true,
crossOrigin: "anonymous",
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
});
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
position.x +=
img.width * scaleWH +
margin;
if (
sketchGroupingItem.length >=
3
) {
} else {
sketchGroupingItem.push(
JSON.parse(
JSON.stringify(
position
)
)
);
}
if (sketchGroupingItem.length >=3) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 9999999999,
minNum: 0,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.height <sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.height;
sketchXyIndex.maxIndex = sketchIndex;
}
if (sketchItem.height > sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.height;
sketchXyIndex.minIndex = sketchIndex;
}
}
);
if (allBoardData.value[key].length == allItemIndex + 1) {
position = sketchGroupingItem[sketchXyIndex.minIndex];
} else {
position = sketchGroupingItem[ sketchXyIndex.maxIndex];
position.y += position.height;
position.x -= img.width * scaleWH + margin;
}
}
} else {
position.x += img.width * scaleWH;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
resolve();
},
{ crossOrigin: "Anonymous" }
);
}
});
}
}
}
}
});
};
let setCanvasImage = (itemCanvasImg)=>{
fabric.Image.fromURL(
itemCanvasImg,
(img) => {
let proportion = img.height / img.width; //计算图形宽高比例
let scaleWH = setImgWidth / img.width; //计算放到画布上缩小倍率
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y += position.height;
}
img.set({
// width: setImgWidth/img.width,
// height: canvasWH.value.height/img.height,
left: position.x,
top: position.y,
scaleX:
setImgWidth / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
cornerSize: 10, // 选中时，角的大小为20
// lockRotation:true,
// lockScalingX:true,
lockRotation: true,
crossOrigin: "anonymous",
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
});
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
position.x +=
img.width * scaleWH +
margin;
if (
sketchGroupingItem.length >=
3
) {
} else {
sketchGroupingItem.push(
JSON.parse(
JSON.stringify(
position
)
)
);
}
if (sketchGroupingItem.length >=3) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 9999999999,
minNum: 0,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.height <sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.height;
sketchXyIndex.maxIndex = sketchIndex;
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
if (sketchItem.height > sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.height;
sketchXyIndex.minIndex = sketchIndex;
}
}
);
if (allBoardData.value[key].length == allItemIndex + 1) {
position = sketchGroupingItem[sketchXyIndex.minIndex];
} else {
position = sketchGroupingItem[ sketchXyIndex.maxIndex];
position.y += position.height;
position.x -= img.width * scaleWH + margin;
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
}
fix
2024-02-29 17:16:51 +08:00
} else {
position.x += img.width * scaleWH;
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
resolve();
},
{ crossOrigin: "Anonymous" }
);
}
//设置导出
let setExport = async () => {
var imageDataURL = canvas.toDataURL({
format: "png", // 导出格式为 PNG
quality: 1, // 图片质量为 1（最高质量）
});
let a = document.createElement("a");
let img = [];
let index = 0;
img.push({
imgUrl: imageDataURL,
name: "collection.png",
});
let num = 0;
for (let key in allBoardData.value) {
if (key !== "colorBoards" && key !== "moodTemplateId") {
for (let item of allBoardData.value[key]) {
if (
key == "disposeMoodboard" &&
allBoardData.value[key][0] == undefined
) {
break;
}
导出可拖拽功能
2024-02-27 15:15:38 +08:00
fix
2024-02-29 17:16:51 +08:00
let nameTail = item?.imgUrl
?.split(".")
.pop()
.split("?")
.shift();
let data = {
imgUrl: item.imgUrl,
name: item?.resData?.name + index + "." + nameTail,
};
if (key == "likeDesignCollectionList") {
data.imgUrl = item.designOutfitUrl;
data.name = "result" + index + "." + nameTail;
}
img.push(data);
index++;
}
num++;
}
}
let dataList = [];
likeDesignCollectionList.value.forEach((item) => {
// let nameTail = item?.designOutfitUrl
// ?.split(".")
// .pop()
// .split("?")
// .shift();
// let data = {
// imgUrl: item.designOutfitUrl,
// name: "result" + index + "." + nameTail,
// };
dataList.push(item.designItemId);
// img.push(data);
index++;
});
let mannequinList = [];
await Https.axiosPost(Https.httpUrls.designGetModel, dataList)
.then((rv) => {
mannequinList = rv;
})
.catch((rv) => {});
mannequinList.forEach((item) => {
let nameTail = item?.split(".").pop().split("?").shift();
let data = {
imgUrl: item,
name: "mannequin" + index + "." + nameTail,
};
img.push(data);
index++;
});
downImg(img);
};
let getImgArrayBuffer = (url) => {
return new Promise((resolve, reject) => {
//通过请求获取文件blob格式
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
if (this.status == 200) {
resolve(this.response);
} else {
reject(this.status);
}
};
xmlhttp.send();
});
};
let downImg = (imagesParams) => {
let zip = new JSZip();
let cache = {};
let promises = [];
for (let item of imagesParams) {
const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.name, data, { binary: true }); // 逐个添加文件
cache[item.title] = data;
});
promises.push(promise);
}
Promise.all(promises)
.then(() => {
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
isShowMark = false;
});
})
.catch((res) => {
// message.warning(t('HomeView.jsContent3'));
isShowMark = false;
});
};
//关闭画布
let cancelDsign = () => {
showUpgradePlan.value = false;
position = {
//设置每个图形位置的初始值
x: 0,
y: 0,
height: 0,
};
};
//设置画布宽高
let setMaxInput = (str, maxNum) => {
if (str == "width") {
// maxNum = window.innerWidth < 1100 ? 400 : maxNum;
maxNum = [window.innerWidth/2.4]
maxNum = maxNum.map(num => Math.round(num / 10) * 10)[0];
}
if (str == "width" && canvasWH.value.width >= maxNum) {
canvasWH.value.width = maxNum;
} else if (str == "height" && canvasWH.value.height >= maxNum) {
canvasWH.value.height = maxNum;
}
canvas.setHeight(canvasWH.value.height);
canvas.setWidth(canvasWH.value.width);
};
let closeNav = ref(false)
let setCloseNav = ()=>{
closeNav.value = !closeNav.value
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
function multiselect() {
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
canvas
})
// console.log(sel)
canvas.setActiveObject(sel)
canvas.requestRenderAll()
const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
if (activeObject && activeObject.type === 'activeSelection') {
const totalWidth = activeObject.width * activeObject.scaleX;
const totalHeight = activeObject.height * activeObject.scaleY;
console.log('Total Width:', totalWidth);
console.log('Total Height:', totalHeight);
}
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
let currentType = ref()
let onDragstart = (type)=>{
console.log(type);
currentType.value = type
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
let canvasOnDrop = ()=>{
canvas.on('drop', function(opt) {
// 省略部分代码......
let offset = {
left: canvas.getSelectionElement().getBoundingClientRect().left,
top: canvas.getSelectionElement().getBoundingClientRect().top
}
let point = {
x: opt.e.x - offset.left,
y: opt.e.y - offset.top,
}
let pointerVpt = canvas.restorePointerVpt(point)
switch (currentType.value) {
case 'disposeMoodboard':
createRect(pointerVpt.y, pointerVpt.x)
break
case 'circle':
createCircle(pointerVpt.y, pointerVpt.x)
break
case 'img':
createImg(pointerVpt.y, pointerVpt.x)
break
}
// 创建完元素，把当前操作的元素类型设置回 null
currentType.value = null
})
// 创建矩形
function createRect(top, left) {
canvas.add(new fabric.Rect({
top,
left,
width: 60,
height: 60,
fill: 'pink'
}))
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
}
fix
2024-02-29 17:16:51 +08:00
onMounted(() => {});
导出可拖拽功能
2024-02-27 15:15:38 +08:00
支付退款
2024-02-23 14:32:33 +08:00
return {
fix
2024-02-29 17:16:51 +08:00
showUpgradePlan,
canvasWH,
init,
setExport,
cancelDsign,
setMaxInput,
isShowMark,
allBoardData,
closeNav,
setCloseNav,
multiselect,
onDragstart,
支付退款
2024-02-23 14:32:33 +08:00
};
},
data(prop) {
fix
2024-02-29 17:16:51 +08:00
return {};
支付退款
2024-02-23 14:32:33 +08:00
},
fix
2024-02-29 17:16:51 +08:00
mounted() {},
watch: {
// driver__:{
// handler(newVal,oldVal){
// if(this.type_.type2 == 'Printboard'){
// if(newVal.index >= 14 && newVal.index < 15){
// this.setKeyword(newVal.index-14)
// }else{
// }
// }else if(this.type_.type2 == 'Sketchboard'){
// }
// }
// },
支付退款
2024-02-23 14:32:33 +08:00
},
fix
2024-02-29 17:16:51 +08:00
methods: {},
支付退款
2024-02-23 14:32:33 +08:00
});
</script>
<style lang="less" scoped>
.Export {
fix
2024-02-29 17:16:51 +08:00
flex: 1;
支付退款
2024-02-23 14:32:33 +08:00
// height: 30rem;
// overflow-x: hidden;
fix
2024-02-29 17:16:51 +08:00
display: flex;
支付退款
2024-02-23 14:32:33 +08:00
flex-direction: column;
border-right: 1px solid #e5e5e5;
fix
2024-02-29 17:16:51 +08:00
position: relative;
.UpgradePlan_content {
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
}
.UpgradePlan_closeIcon {
top: calc(2rem * 1.2);
right: calc(2rem * 1.2);
支付退款
2024-02-23 14:32:33 +08:00
cursor: pointer;
fix
2024-02-29 17:16:51 +08:00
width: calc(4rem * 1.2);
height: calc(4rem * 1.2);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before {
padding: calc(0.2rem * 1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before {
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.exportCanvasBox {
flex: 1;
overflow-x: hidden;
display: flex;
margin-top: 2rem;
justify-content: space-between;
.exportCanvasBox_title {
margin-bottom: .5rem;
font-size: 1.8rem;
font-weight: 600;
margin-top: 2rem;
display: flex;
justify-content: space-between;
padding-right: 2rem;
cursor: pointer;
.icon{
transition: all .3s;
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
&.icon-rotate{
transform: rotate(90deg);
}
}
.exportCanvasBox_intro{
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: 600;
width: 100%;
导出可拖拽功能
2024-02-27 15:15:38 +08:00
}
fix
2024-02-29 17:16:51 +08:00
.exportCanvasBox_right,
.exportCanvasBox_left {
width: 25rem;
导出可拖拽功能
2024-02-27 15:15:38 +08:00
height: 100%;
overflow-x: hidden;
fix
2024-02-29 17:16:51 +08:00
}
.exportCanvasBox_left {
label {
cursor: pointer;
display: flex;
div {
width: 5rem;
}
input {
width: 10em;
}
}
.exportCanvasBox_img {
transition: .3s all;
overflow: hidden;
height: auto;
&.closeNav{
// height: 0;
}
.exportCanvasBox_allItem {
display: flex;
flex-wrap: wrap;
.exportCanvasBox_item {
text-align: center;
img {
max-width: 7rem;
max-height: 7rem;
object-fit: contain;
margin-right: 2rem;
margin-bottom: 2rem;
}
}
.exportCanvasBox_item_color{
width: 8rem;
margin-right: 2rem;
margin-bottom: 2rem;
.exportCanvasBox_item_BGcolor{
height: 5rem;
}
}
.exportCanvasBox_item_dispose{
img{
max-width: 100%;
max-height: 100%;
}
}
}
}
}
.exportCanvasBox_center {
height: 100%;
overflow-x: hidden;
}
.export_new_collection_review {
position: initial;
margin: 10rem auto;
margin-bottom: 0;
}
}
支付退款
2024-02-23 14:32:33 +08:00
}
</style>
<style lang="less">
fix
2024-02-29 17:16:51 +08:00
.Export {
.ant-modal-content {
border-radius: calc(1rem * 1.2);
overflow: hidden;
.ant-modal-header {
background-color: #fff;
border-bottom: none;
}
.ant-modal-body {
display: flex;
flex-direction: column;
padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
// height: calc(65vh - 6.4rem);
height: calc(65rem * 1.2);
background: #f9fafb;
}
//进度完成字体颜色
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
color: #000;
}
.ant-progress-circle .ant-progress-text {
color: rgba(0, 0, 0, 0.55);
font-size: calc(1.6rem * 1.2);
}
}
支付退款
2024-02-23 14:32:33 +08:00
}
</style>
Reference in New Issue Copy Permalink