语言适配英文

src/component/HomePage/ExportModel.vue

@@ -1,6 +1,6 @@
 <template>
     <a-modal
-        class="modal_component Export"
+        class="modal_component Export generalModelOperate"
         v-model:visible="showUpgradePlan"
         :footer="null"
         width="78%"
@@ -9,29 +9,29 @@
         :closable="false"
         :keyboard="false"
     >
-        <div class="UpgradePlan_closeIcon">
+        <div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
             <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
         </div>
-        <div class="UpgradePlan_content">
-            <div>Edit & Export</div>
+        <div class="UpgradePlan_content generalModelOperate">
+            <div>{{ $t('exportModel.EditExport') }}</div>
         </div>
         <!-- <div>
 			<canvas ref="exportCanvas"></canvas>
 		</div> -->
         <div class="exportCanvasBox">
             <div class="exportCanvasBox_left">
-                <div class="exportCanvasBox_title">Canvas Size</div>
+                <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div>
                
-				<label>
+				<!-- <label>
 					<div>Width:</div>
 					<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
-				</label>
+				</label> -->
 				<label>
-				<div>Height:</div>
+				<div>{{ $t('exportModel.Height') }}:</div>
 					<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
 				</label>
                 <div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
-					Canvas Nav
+					{{ $t('exportModel.CanvasNav') }}
 					<div
                         :class="[
                             'icon',
@@ -46,8 +46,13 @@
                     <div
                         class="exportCanvasBox_allItem"
                         v-for="(item,key) in allBoardData"
-                    >
-                        <div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
+                    >	
+
+                        <div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
+                        <div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
+                        <div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
+                        <div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
+                        <div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
 						<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'"  v-for="colorItem in item" draggable="true" @dragstart="onDragstart(key,colorItem)">
 							<img src="" alt="">
 							<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
@@ -62,12 +67,14 @@
 							draggable
 							@dragstart="onDragstart(key,imgItem)"
                         >
-                            <img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
+							<div class="exportCanvasBox_img">
+								<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
+							</div>
                         </div>
                     </div>
                 </div>
 				<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
-					Canvas Tool
+					{{ $t('exportModel.CanvasTool') }}
 					<div
                         :class="[
                             'icon',
@@ -91,15 +98,15 @@
 					
 					<div class="exportCanvasBox_left_tool_item">
 						<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-							<div >Color</div>
+							<div >{{ $t('exportModel.Color') }}</div>
 							<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
 						</label>
 						<label v-show="operation != 'move'">
-							<div >Size:</div>
+							<div >{{ $t('exportModel.Size') }}:</div>
 							<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
 						</label>
 						<label v-show="operation == 'pencil'">
-							<div >Brushwork:</div>
+							<div >{{ $t('exportModel.Brushwork') }}:</div>
 							<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
 								style="flex: 1"
 								@change="brushworkChange"
@@ -111,7 +118,7 @@
 							</a-select>
 						</label>
 						<label v-show="operation == 'texture'" class="texture">
-							<div >Texture:</div>
+							<div >{{ $t('exportModel.Texture') }}:</div>
 							<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
 								style="flex: 1"
 								@change="textureValueChange"
@@ -123,14 +130,14 @@
 							</a-select>
 						</label>
 						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'texture'">
-							<div >FillBack:</div>
+							<div >{{ $t('exportModel.FillBack') }}:</div>
 							<div class="exportCanvasBox_left_tool_item leftAlign">
 								<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
 								<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
 							</div>
 						</label>
 						<label v-show="operation === 'move'">
-							<div >Layer:</div>
+							<div >{{ $t('exportModel.Layer') }}:</div>
 							<div class="exportCanvasBox_left_tool_item">
 								<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
 								<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
@@ -141,7 +148,7 @@
 					</div>
 				</div>
 				<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
-					More
+					{{ $t('exportModel.More') }}
 					<div
                         :class="[
                             'icon',
@@ -160,15 +167,27 @@
 						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
 						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
 						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
+						<label class="uploadImage">
+							<i class="icon iconfont icon-shangchuantupian" :class="{active:operation == 'ellipse'}"></i>
+							<input type="file" @change="uploadImage">
+						</label>
 					</div>
 					
 				</div>
+				<div class="exportCanvasBox_left_bottom">
+					<div class="exportCanvasBox_left_credits" v-show="credits<1">
+						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
+					</div>
+					<div class="exportCanvasBox_left_btn">
+						<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
+						<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</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="exportCanvasBox_right">
                 <div class="exportCanvasBox_title">
 					High-definition Download
 				</div>
@@ -178,19 +197,52 @@
 						<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
 					</label>
 				</div>
-				<!-- <div class="" @click="multiselect">all</div> -->
+				<div class="" @click="multiselect">all</div>
 				<div class="exportCanvasBox_right_credits" v-show="credits<1">
 					<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
 				</div>
-				<div class="exportCanvasBox_right_btn">
-					<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">HD Export</div>
-					<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">Export</div>
-				</div>
-            </div>
+            </div> -->
             <div class="mark_loading" v-show="isShowMark">
                 <a-spin size="large" />
             </div>
         </div>
+		<a-modal 
+			v-model:visible="showSRExport"
+			class="modal_component SRExport generalModelOperate"
+			width="48%"
+			:maskClosable="false"
+			:centered="true"
+			:closable="false"
+			:keyboard="false"
+        	:footer="null"
+			:mask="false"
+		>
+			<div class="generalModelOperate_closeIcon">
+				<i class="fi fi-rr-cross-small" @click.stop="cancelSRExport()"></i>
+			</div>
+			<div class="modal_title_text">
+				<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
+				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits') }}</div>
+			</div>
+			<div class="SRExport_operate">
+				<label>
+					<div>{{ $t('exportModel.Scale') }}:</div>
+					<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
+				</label>
+				<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
+					<div class="check_block"><div class="check_block_body"></div></div>
+					<div>all</div>
+				</div>
+			</div>
+			
+			<div class="SRExport_img">
+				<img v-for="item in allExportSR" @click="selectImg(item)" class="SRExport_img_item" :class="[item.checked? 'active':'']" :src="item.imgUrl" alt="">
+			</div>
+			<div class="generalModelOperate_endBtn">
+				<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
+				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*30)?'active':'']" @click="setExportSR">OK</div>
+			</div>
+		</a-modal>
     </a-modal>
 </template>
 <script>
@@ -204,9 +256,11 @@ import { useStore } from "vuex";
 import JSZip, { forEach } from "jszip";
 // import fabric from 'fabric';
 import { message, Modal } from "ant-design-vue";
+import domTurnImg from '@/tool/domTurnImg'
 import { openGuide,driverObj__ } from "@/tool/guide";
 const FileSaver = require("file-saver");
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import { useI18n } from "vue-i18n";
 export default defineComponent({
     components: {
         scaleImage,
@@ -214,6 +268,7 @@ export default defineComponent({
     },
     props: ["msg", "sketchCatecoryList"],
     setup(props,{emit}) {
+		const {t} = useI18n()
 		let driver__ = computed(()=>{
 			return store.state.Guide.guide
 		})
@@ -226,8 +281,9 @@ export default defineComponent({
             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];
+		
+		// canvasWH.value.width = [window.innerWidth/2.4]
+		// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
         let credits = computed(() => {
             return store.state.UserHabit.credits.value;
         });
@@ -260,6 +316,8 @@ export default defineComponent({
 			reverseCanvasState.value = []
             showUpgradePlan.value = true;
             nextTick().then(async () => {
+				let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
+				canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
                 allBoardData.value.likeDesignCollectionList =
                     likeDesignCollectionList;
                 let canvasBox = document.querySelector(
@@ -631,17 +689,28 @@ export default defineComponent({
         };
         //关闭画布
         let cancelDsign = () => {
-            showUpgradePlan.value = false;
-			position = {
-				//设置每个图形位置的初始值
-				x: 0,
-				y: 0,
-				height: 0,
-			};
-			operation.value = 'move'
-			operation.value = 'fill'
-
-			
+			Modal.confirm({
+				title: 'Canvas edit content is not saved, whether to leave the page',
+				okText: 'Yes',
+				cancelText: 'No',
+				mask:false,
+				centered:true,
+				onOk() {
+					showUpgradePlan.value = false;
+					position = {
+						//设置每个图形位置的初始值
+						x: 0,
+						y: 0,
+						height: 0,
+					};
+					operation.value = 'move'
+					operation.value = 'fill'
+				},
+				// onCancel(){
+				// 	_this.isShowMark = false
+				// 	resolve(false)
+				// }
+			});
         };
         //设置画布宽高
         let setMaxInput = (str, maxNum) => {
@@ -944,6 +1013,23 @@ export default defineComponent({
 		let setOperationMode = (str) =>{
 			operationMode.value = str
 		}
+		let uploadImage = (event)=>{
+			console.log(event);
+			let input = document.querySelector('.uploadImage input')
+			const file = event.target.files[0];
+			console.log(file);
+			if (file) {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					fabric.Image.fromURL(e.target.result,(img) => {
+						setCanvasImage(img,"sketchboardFiles",0,canvas.wrapperEl.parentNode.scrollTop)
+						canvas.add(img);
+					},{ crossOrigin: "Anonymous" })
+					input.value = ''
+				};
+				reader.readAsDataURL(file);
+			}
+		}
 		let setLayerIndex = (str) =>{//设置优先级
 			var activeObject = canvas.getActiveObject();
 			switch (str) {
@@ -1230,59 +1316,147 @@ export default defineComponent({
 			}
 		}
 		let setHDExport = async ()=>{//获取选中内容的位置信息
-			let {url,imageType} = await exportSele(canvas,'jpeg')
-			if(!imageType){
-				message.info('Please select the region of SR')
+			if(allBoardData.value.printboardFiles.length <= 0){
+				message.info('Your print is empty')
 				return
 			}
-			let img = new Image
-			img.src = url
-			let imgStyle = {
-				'width': '80%',
-				'max-height': '30rem',
-				'object-fit': 'contain',
-				'position': 'relative',
-				'left': '50%',
-				'transform': 'translateX(-50%)',
+			if(credits.value < 30){
+				message.info('Your points are less than one SR')
+				// return
 			}
-			let imgElement = createVNode('img',{src:url,style:imgStyle})
-			img.onload = ()=>{
-				Modal.confirm({
-					title: 'SR needs 300 points, whether to continue？',
-					icon: false,
-					okText: 'Yes',
-					cancelText: 'No',
-					content: imgElement,
-					mask:false,
-					centered:true,
-					onOk() {
-						if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
-							message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
-							return
-						}
-						let data = {
-							images: url,
-							scale: scaleSR.value,
-							uniqueId: "",
-							imageType:imageType,
-						}
-						Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
-							console.log(rv);
-							store.dispatch('getCredits')
-							emit('setTask')
-						});
-					},
-					// onCancel(){
-					// 	_this.isShowMark = false
-					// 	resolve(false)
-					// }
-				});
+			showSRExport.value = true
+			let arr = []
+			if(allBoardData.value.printboardFiles){
+				allBoardData.value.printboardFiles.forEach((item)=>{
+					arr.push({
+						imgUrl:item.imgUrl,
+						checked:true,
+					})
+				})
+			}
+			allExportSR.value = arr
+			allChecked.value = true
+
+			//多选导出转高清暂时不用
+
+			// let {url,imageType} = await exportSele(canvas,'jpeg')
+			// if(!imageType){
+			// 	message.info('Please select the region of SR')
+			// 	return
+			// }
+			// let img = new Image
+			// img.src = url
+			// let imgStyle = {
+			// 	'width': '80%',
+			// 	'max-height': '30rem',
+			// 	'object-fit': 'contain',
+			// 	'position': 'relative',
+			// 	'left': '50%',
+			// 	'transform': 'translateX(-50%)',
+			// }
+			// let imgElement = createVNode('img',{src:url,style:imgStyle})
+			// img.onload = ()=>{
+			// 	Modal.confirm({
+			// 		title: 'SR needs 300 points, whether to continue？',
+			// 		icon: false,
+			// 		okText: 'Yes',
+			// 		cancelText: 'No',
+			// 		content: imgElement,
+			// 		mask:false,
+			// 		centered:true,
+			// 		onOk() {
+			// 			if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
+			// 				message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
+			// 				return
+			// 			}
+			// 			let data = {
+			// 				images: url,
+			// 				scale: scaleSR.value,
+			// 				uniqueId: "",
+			// 				imageType:imageType,
+			// 			}
+			// 			Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+			// 				console.log(rv);
+			// 				store.dispatch('getCredits')
+			// 				emit('setTask')
+			// 			});
+			// 		},
+			// 		// onCancel(){
+			// 		// 	_this.isShowMark = false
+			// 		// 	resolve(false)
+			// 		// }
+			// 	});
+			// }
+		}
+		let allExportSR = ref([])
+		let scaleSR = ref(2);
+		let showSRExport = ref(false)
+		let cancelSRExport = ()=>{
+			allExportSR.value = []
+			showSRExport.value = false
+		}
+		let allChecked = ref(false)
+		let selectImg = (item)=>{
+			item.checked = !item.checked
+			let arr = allExportSR.value.filter((item)=>item.checked)
+			if(arr.length == allExportSR.value.length){
+				allChecked.value = true
+			}else{
+				allChecked.value = false
 			}
 		}
-		let scaleSR = ref(2);
+		let selectAllImg = ()=>{
+			allChecked.value = !allChecked.value
+			allExportSR.value.forEach((item)=>{
+				item.checked = allChecked.value
+			})
+		}
+		let setExportSR = ()=>{
+			let arr = []
+			let data = []
+			console.log(allExportSR.value);
+			if(allExportSR.value.filter(item=> item.checked ).length <= 0){
+				message.info('Your print is empty')
+				return
+			}
+			if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
+				message.info('Your points balance is insufficient')
+				return
+			}
+			allExportSR.value.forEach(async (item,index)=>{
+				let obj = {}
+				await new Promise((resolve,reject)=>{
+					if(item.checked){
+						obj = {
+							images:item.imgUrl,
+							scale: scaleSR.value,
+							uniqueId: "",
+						}
+						data.push(obj)
+						let img = new Image
+						img.onload = ()=>{
+							if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
+								arr.push(index)
+							}
+						}
+						img.src = item.imgUrl
+					}
+				})
+			})
+			if(arr.length > 0){
+				let str = arr.join(',')
+				message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
+				return
+			}
+			Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+				store.dispatch('getCredits')
+				emit('setTask')
+				cancelSRExport()
+			});
+		}
         onMounted(() => {});
-
         return {
+			t,
             showUpgradePlan,//当前弹窗是否打开
             canvasWH,//画布初始宽高
 			credits,//积分 用来判断HD导出积分是否够用
@@ -1301,6 +1475,7 @@ export default defineComponent({
 			operationMode,//设置矩形是边框还是填充
 			setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
 			setOperationMode,//设置矩形是边框还是填充方法
+			uploadImage,//上传图帕
 			setLayerIndex,//设置选中元素的层级
 			brushList,//笔触列表
 			textureList,//材质列表
@@ -1314,6 +1489,14 @@ export default defineComponent({
 			brushworkValue,//当前笔触
 			textureValue,//当前材质
 			scaleSR,
+			//SR页面
+			showSRExport,
+			allExportSR,
+			cancelSRExport,//关闭高清导出
+			allChecked,//全选
+			selectAllImg,//控制全选
+			selectImg,//选中单个图片
+			setExportSR,//设置SR导出
         };
     },
     data(prop) {
@@ -1340,41 +1523,12 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
+
 .Export {
     flex: 1;
     // height: 30rem;
     // overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid #e5e5e5;
-    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);
-        cursor: pointer;
-        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;
@@ -1448,7 +1602,28 @@ export default defineComponent({
 		.exportCanvasBox_left::-webkit-scrollbar,
 		.exportCanvasBox_right::-webkit-scrollbar{display: none;}
         .exportCanvasBox_left {
-				padding-right: 1rem;
+			padding-right: 1rem;
+			margin-right: 2rem;
+			.exportCanvasBox_left_bottom{
+				position: sticky;
+				background: #fff;
+				z-index: 2;
+				bottom: 0;
+				.exportCanvasBox_left_btn{
+					display: flex;
+					justify-content: space-between;
+					padding-top: 2rem;
+					.subitOkPreviewBtn{
+						position: initial;
+						transform: none;
+						&.active{
+							opacity: .7;
+							cursor: not-allowed;
+						}
+					}
+					
+				}
+			}
 			.exportCanvasBox_title {
 				padding-right: 2rem;
 			}
@@ -1467,13 +1642,29 @@ export default defineComponent({
                     flex-wrap: wrap;
                     .exportCanvasBox_item {
                         text-align: center;
-                        img {
-                            max-width: 7rem;
-                            max-height: 7rem;
-                            object-fit: contain;
+						.exportCanvasBox_img{
+							position: relative;
 							margin-right: 2rem;
 							margin-bottom: 2rem;
-                        }
+							img {
+								max-width: 7rem;
+								max-height: 7rem;
+								object-fit: contain;
+								
+							}
+							.exportCanvasBox_img_SR{
+								position: absolute;
+								bottom: 0;
+								height: 2rem;
+								background: rgba(0, 0, 0, 0.3);
+								color: #fff;
+								width: 100%;
+								text-align: center;
+								font-weight: 600;
+								cursor: pointer;
+							}
+						}
+                       
                     }
 					.exportCanvasBox_item_color{
 						width: 8rem;
@@ -1521,37 +1712,34 @@ export default defineComponent({
 							border-radius: .4rem;
 						}
 					}
+					.uploadImage{
+						width: 4rem;
+						height: 4rem;
+						input{
+							height: 0;
+							border: none;
+						}
+					}
+					
 				}
 			}
         }
-		.exportCanvasBox_right{
-			display: flex;
-			flex-direction: column;
-			padding-left: 1rem;
-			position: relative;
-			.exportCanvasBox_right_definition{
-				// display: flex;
-				flex: 1;
-			}
-			.exportCanvasBox_right_credits{
-				margin-bottom: 2rem;
-			}
-			.exportCanvasBox_right_btn{
-				display: flex;
-				justify-content: space-between;
-				.subitOkPreviewBtn{
-					position: initial;
-					transform: none;
-					&.active{
-						opacity: .7;
-						cursor: not-allowed;
-						pointer-events:none;
-					}
-				}
-				
-			}
-		}
+		// .exportCanvasBox_right{
+		// 	display: flex;
+		// 	flex-direction: column;
+		// 	padding-left: 1rem;
+		// 	position: relative;
+		// 	.exportCanvasBox_right_definition{
+		// 		// display: flex;
+		// 		flex: 1;
+		// 	}
+		// 	.exportCanvasBox_right_credits{
+		// 		margin-bottom: 2rem;
+		// 	}
+			
+		// }
         .exportCanvasBox_center {
+			flex: 1;
             height: 100%;
             overflow-x: hidden;
         }
@@ -1566,36 +1754,11 @@ export default defineComponent({
 <style lang="less">
 .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);
         }
     }
-	.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
-		border-color: #d9d9d9;
-		box-shadow: none;
-	}
-	.ant-select:hover .ant-select-selector{
-		border-color: #d9d9d9;
-	}
+	
 }
 .label_select_item{
 	img{
@@ -1604,4 +1767,87 @@ export default defineComponent({
 		object-fit: contain;
 	}
 }
+</style>
+<style lang="less">
+.SRExport{
+	.ant-modal-body{
+		height: calc(35rem* 1.2);
+	}
+	.SRExport_img{
+		margin-bottom: 2rem;
+		flex: 1;
+		overflow-x: hidden;
+		img{
+			width: 10rem;
+			max-height: 10rem;
+			object-fit: contain;
+			text-align: center;
+			margin-right: 2rem;
+			cursor: pointer;
+			&.active{
+				transform: scale(.8);
+				opacity: .6;
+			}
+		}
+	}
+	.check_all_block{
+		display: flex;
+		align-items: center;
+		font-size: 1.6rem;
+		color: #64686D;
+		cursor: pointer;
+		justify-content: flex-end;
+		&.check_all{
+			color: #1A1A1A;
+			.check_block{
+				.check_block_body{
+					opacity: 1;
+				}
+			}
+
+		}
+
+		.check_block{
+			width: 2.4rem;
+			height: 2.4rem;
+			background: #EBECF4;
+			border: 0.1rem solid #64686D;
+			padding: 0.3rem;
+			margin-right: 0.7rem;
+			.check_block_body{
+				width: 100%;
+				opacity: 0;
+				height: 100%;
+				background: #343579;
+			}
+		}
+	}
+	.SRExport_operate{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		label {
+			display: flex;
+			align-items: center;
+			margin-bottom: 1rem;
+			width: 100%;
+			div {
+				width: 8rem;
+			}
+			input {
+				// width: 10em;
+				overflow: hidden;
+			}
+		}
+	}
+	.generalModelOperate_endBtn{
+		.generalModelOperate_btn_ok{
+			&.active{
+				opacity: .6;
+				cursor: no-drop;
+			}
+		}
+	}
+	
+}
 </style>