调整画布添加图片按钮样式

This commit is contained in:
X1627315083
2025-09-26 15:18:26 +08:00
parent 2d63a48526
commit 3e1054a4c7
11 changed files with 69 additions and 58 deletions

View File

@@ -237,7 +237,7 @@ li {
color: #fff; color: #fff;
background-color: #000; background-color: #000;
text-align: center; text-align: center;
font-weight: 600; font-weight: 500;
border: 2px solid #000; border: 2px solid #000;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;

View File

@@ -241,7 +241,7 @@ input:focus{
color: #fff; color: #fff;
background-color: #000; background-color: #000;
text-align: center; text-align: center;
font-weight: 600; font-weight: 500;
border: 2px solid #000; border: 2px solid #000;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;

View File

@@ -174,6 +174,7 @@ const handleImageError = (event) => {
//提交选中的T图片 //提交选中的T图片
const confirm = ()=>{ const confirm = ()=>{
selectList.value = []
emits("select", selectList.value); emits("select", selectList.value);
showPanel.value = false; showPanel.value = false;
} }
@@ -482,6 +483,10 @@ const confirm = ()=>{
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
> .image-submit{
font-size: 1.2rem;
line-height: 4rem;
}
} }
.image-count { .image-count {

View File

@@ -176,6 +176,10 @@ const canvasInit = () => {
// }); // });
}; };
const frontBackChange =(value)=>{
console.log(value)
}
const isShowLeft = ref(true); const isShowLeft = ref(true);
</script> </script>
@@ -195,6 +199,7 @@ const isShowLeft = ref(true);
<RedGreenModeExample <RedGreenModeExample
v-if="currentView === 'redGreenExample'" v-if="currentView === 'redGreenExample'"
key="redGreenExample" key="redGreenExample"
@trigger-red-green-mouseup="frontBackChange"
> >
</RedGreenModeExample> </RedGreenModeExample>

View File

@@ -68,7 +68,7 @@
<div v-show="isEditPattern.value" style="margin-left: 2rem;" class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div> <div v-show="isEditPattern.value" style="margin-left: 2rem;" class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
</div> </div>
</div> </div>
<div class="item detailRight"> <div class="item detailRight" :class="{canvas:isEditPattern.value}">
<div class="submit"> <div class="submit">
</div> </div>
<div class="contentRight" v-if="currentDetailType && !isEditPattern.value"> <div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
@@ -579,10 +579,12 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
overflow: hidden;
} }
&.isEditPattern{width: 0px;} &.isEditPattern{width: 0px;}
&.model{ &.model{
width: 45rem; flex: 1;
// width: 45rem;
// width: 50rem; // width: 50rem;
margin: 0 8rem; margin: 0 8rem;
// margin: 0 10rem; // margin: 0 10rem;
@@ -590,7 +592,10 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
} }
&.detailRight{ &.detailRight{
flex: 1; width: 30%;
&.canvas{
width: 60%;
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// padding-bottom: calc(6rem + 1rem); // padding-bottom: calc(6rem + 1rem);

View File

@@ -347,7 +347,7 @@ export default defineComponent({
margin-top: 1rem; margin-top: 1rem;
justify-content: space-between; justify-content: space-between;
align-content: flex-start; align-content: flex-start;
&::-webkit-scrollbar{display: none;} // &::-webkit-scrollbar{display: none;}
> .content_img_item{ > .content_img_item{
width: calc((50% - 1rem)); width: calc((50% - 1rem));
> .content_img_item_block{ > .content_img_item_block{

View File

@@ -40,8 +40,7 @@
</div> </div>
</div> </div>
<a-dropdown> <a-dropdown>
<!-- <i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i> --> <i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i>
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item> <a-menu-item>
@@ -61,7 +60,7 @@
@change="(file) => fileUploadChange(file)" @change="(file) => fileUploadChange(file)"
> >
<div class="drop-container"> <div class="drop-container">
<folder-outlined /> <i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
<div>{{ $t('PrintboardUpload.Upload') }}</div> <div>{{ $t('PrintboardUpload.Upload') }}</div>
</div> </div>
</a-upload> </a-upload>
@@ -155,13 +154,13 @@
(type_.type2 == 'Printboard' && scene.value == 'Pattern') || type_.type2 == 'Moodboard'" :class="{active:speedState}" @click.stop="openSpeed"></div> (type_.type2 == 'Printboard' && scene.value == 'Pattern') || type_.type2 == 'Moodboard'" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState && scene?.value != 'extract'"> <div class="content" v-show="speedState && scene?.value != 'extract'">
<div v-for="item in speedList" <div v-for="item in speedList"
v-show="(type_.type2 == 'Moodboard' && item?.value != 'flux') || v-show="(type_.type2 == 'Moodboard') ||
(type_.type2 == 'Sketchboard' && item?.value != 'flux' && item?.value != 'wx') || (type_.type2 == 'Sketchboard' && item?.value != 'high') ||
(type_.type2 == 'Printboard' && item?.value != 'wx')" (type_.type2 == 'Printboard')"
:key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div> :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div> </div>
<div class="content" v-show="speedState && scene?.value == 'extract'"> <div class="content" v-show="speedState && scene?.value == 'extract'">
<div v-for="item in extractList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div> <div v-for="item in extractList" :class="{active:item.value == speedData.value}" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div> </div>
</div> </div>
<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate"> <div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
@@ -228,9 +227,7 @@
ref="selectImages" ref="selectImages"
@select="handleImageSelect" @select="handleImageSelect"
:api="Https.httpUrls.queryLibraryPage" :api="Https.httpUrls.queryLibraryPage"
isLibrary isLibrary/>
:libraryType="type_.type2"
/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -251,7 +248,6 @@ import createSlogan from "@/component/HomePage/createSlogan.vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import sketchCategory from "@/component/HomePage/sketchCategory.vue"; import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import SelectImages from '@/component/common/SelectImages.vue' import SelectImages from '@/component/common/SelectImages.vue'
import { FolderOutlined } from '@ant-design/icons-vue';
export default defineComponent({ export default defineComponent({
components: { components: {
@@ -259,8 +255,7 @@ export default defineComponent({
generalMenu, generalMenu,
createSlogan, createSlogan,
sketchCategory, sketchCategory,
SelectImages, SelectImages
FolderOutlined
}, },
props: ["msg",'sketchCatecoryList','scene','gender'], props: ["msg",'sketchCatecoryList','scene','gender'],
emits:['setLibrary'], emits:['setLibrary'],
@@ -321,7 +316,7 @@ export default defineComponent({
{ {
title:'', title:'',
label:t('speedList.generateWx'), label:t('speedList.generateWx'),
value:'wx', value:'advanced',
},{ },{
title:'', title:'',
label:t('speedList.toproductFlus'), label:t('speedList.toproductFlus'),
@@ -329,13 +324,13 @@ export default defineComponent({
},{ },{
title:'', title:'',
label:t('speedList.generateNormal'), label:t('speedList.generateNormal'),
value:'fast', value:'normal',
},{
title:'',
label:t('speedList.generateFlux'),
value:'flux',
}, },
// {
// title:'',
// label:t('speedList.generateFlux'),
// value:'flux',
// },
], ],
extractList:[ extractList:[
{ {
@@ -348,7 +343,7 @@ export default defineComponent({
speedData:{ speedData:{
title:'', title:'',
label:t('speedList.generateWx'), label:t('speedList.generateWx'),
value:'wx', value:'advanced',
}, },
}) })
const openSpeed = ()=>{ const openSpeed = ()=>{
@@ -370,11 +365,12 @@ export default defineComponent({
speed.speedData.value = '' speed.speedData.value = ''
speed.speedData.label = '' speed.speedData.label = ''
}else{ }else{
if(newVal.value == "Pattern" || props.msg == 'Sketchboard'){ // if(newVal.value == "Pattern" || props.msg == 'Sketchboard'){
speed.speedData = speed.speedList[1] // speed.speedData = speed.speedList[1]
}else{ // }else{
speed.speedData = speed.speedList[0] // speed.speedData = speed.speedList[0]
} // }
speed.speedData = speed.speedList[0]
} }
}) })
const setSpeed = (item:any)=>{ const setSpeed = (item:any)=>{
@@ -382,9 +378,9 @@ export default defineComponent({
} }
onMounted(() => { onMounted(() => {
instance.appContext.config.globalProperties.$dropdownEvents.onClose(removeOpenSpeed) instance.appContext.config.globalProperties.$dropdownEvents.onClose(removeOpenSpeed)
if(props.msg == 'Sketchboard'){ // if(props.msg == 'Sketchboard'){
speed.speedData = speed.speedList[1] // speed.speedData = speed.speedList[1]
} // }
}) })
onUnmounted(() => { onUnmounted(() => {

View File

@@ -707,6 +707,10 @@ defineExpose({
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
> .image-submit{
font-size: 1.2rem;
line-height: 4rem;
}
} }
.image-count { .image-count {

View File

@@ -1341,7 +1341,7 @@ export default {
toproductBasic:'基础', toproductBasic:'基础',
generateWx:'高级', generateWx:'高级',
generateFlux:'进阶', generateFlux:'进阶',
generateNormal:'基础', generateNormal:'标准',
}, },
liquifyPanel:{ liquifyPanel:{
push:'推', push:'推',

View File

@@ -1339,8 +1339,8 @@ export default {
changeBackground:'Change the background', changeBackground:'Change the background',
toproductFlus:'High', toproductFlus:'High',
toproductBasic:'Basic', toproductBasic:'Basic',
generateWx:'Premium', generateWx:'Advanced',
generateFlux:'Advanced', generateFlux:'Premium',
generateNormal:'Normal', generateNormal:'Normal',
}, },
liquifyPanel:{ liquifyPanel:{

View File

@@ -435,9 +435,9 @@
</div> </div>
<div class="content" v-if="scene?.value != 'extract'" v-show="speedState"> <div class="content" v-if="scene?.value != 'extract'" v-show="speedState">
<div v-for="item in speedList" :class="{active:item.value == speedData.value}" <div v-for="item in speedList" :class="{active:item.value == speedData.value}"
v-show="(selectCode == 'Moodboard' && item?.value != 'flux') || v-show="(selectCode == 'Moodboard') ||
(selectCode == 'Sketchboard' && item?.value != 'flux' && item?.value != 'wx') || (selectCode == 'Sketchboard' && item?.value != 'high') ||
(selectCode == 'Printboard' && item?.value != 'wx')" (selectCode == 'Printboard')"
:key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div> :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div> </div>
<div class="content" v-else v-show="speedState"> <div class="content" v-else v-show="speedState">
@@ -720,10 +720,10 @@ export default defineComponent({
let printModelList:any = ref([]) let printModelList:any = ref([])
let speed = reactive({ let speed = reactive({
speedList:[ speedList:[
{ {
title:'', title:'',
label:t('speedList.generateWx'), label:t('speedList.generateWx'),
value:'wx', value:'advanced',
},{ },{
title:'', title:'',
label:t('speedList.toproductFlus'), label:t('speedList.toproductFlus'),
@@ -731,26 +731,21 @@ export default defineComponent({
},{ },{
title:'', title:'',
label:t('speedList.generateNormal'), label:t('speedList.generateNormal'),
value:'fast', value:'normal',
},{
title:'',
label:t('speedList.generateFlux'),
value:'flux',
}, },
], ],
extractList:[ extractList:[
{ {
title:'', title:'',
label:t('speedList.generateFlux'), label:t('speedList.generateWx'),
value:'flux', value:'advanced',
}, },
], ],
speedState:false, speedState:false,
speedData:{ speedData:{
title:'', title:'',
label:t('speedList.generateWx'), label:t('speedList.generateWx'),
value:'wx', value:'advanced',
}, },
}) })
const openSpeed = ()=>{ const openSpeed = ()=>{
@@ -994,11 +989,12 @@ export default defineComponent({
label:'' label:''
} }
}else{ }else{
if(newVal.value == "Pattern" || this.selectCode == 'Sketchboard'){ // if(newVal.value == "Pattern" || this.selectCode == 'Sketchboard'){
this.speedData = this.speedList[1] // this.speedData = this.speedList[1]
}else{ // }else{
this.speedData = this.speedList[0] // this.speedData = this.speedList[0]
} // }
this.speedData = this.speedList[0]
} }
this.speedState = false this.speedState = false
} }