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

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;
background-color: #000;
text-align: center;
font-weight: 600;
font-weight: 500;
border: 2px solid #000;
cursor: pointer;
box-sizing: border-box;

View File

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

View File

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

View File

@@ -176,6 +176,10 @@ const canvasInit = () => {
// });
};
const frontBackChange =(value)=>{
console.log(value)
}
const isShowLeft = ref(true);
</script>
@@ -195,6 +199,7 @@ const isShowLeft = ref(true);
<RedGreenModeExample
v-if="currentView === 'redGreenExample'"
key="redGreenExample"
@trigger-red-green-mouseup="frontBackChange"
>
</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>
</div>
<div class="item detailRight">
<div class="item detailRight" :class="{canvas:isEditPattern.value}">
<div class="submit">
</div>
<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
@@ -579,10 +579,12 @@ export default defineComponent({
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
&.isEditPattern{width: 0px;}
&.model{
width: 45rem;
flex: 1;
// width: 45rem;
// width: 50rem;
margin: 0 8rem;
// margin: 0 10rem;
@@ -590,7 +592,10 @@ export default defineComponent({
flex-direction: column;
}
&.detailRight{
flex: 1;
width: 30%;
&.canvas{
width: 60%;
}
display: flex;
flex-direction: column;
// padding-bottom: calc(6rem + 1rem);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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