This commit is contained in:
X1627315083
2025-09-12 14:58:07 +08:00
parent f760478594
commit 1df3458ac5
20 changed files with 85 additions and 57 deletions

View File

@@ -16,11 +16,12 @@
imageMode:'contains',
}"
ref="editCanvas">
<template #customTools="{ toolButtonProps }">
<template #customToolsBottom="{ toolButtonProps }">
<!-- 也可以直接使用普通的按钮 -->
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
<i class="fi fi-sr-layers"></i>
<div class="tool-tooltip">Edit the front and back sections</div>
<div class="tool-tooltip">{{ $t('Canvas.editFrontBack') }}</div>
</div>
</template>
</editCanvas>
@@ -42,6 +43,13 @@
imageMode:'contains',
}"
ref="editCanvasBackFront">
<template #customToolsTop="{ toolTopProps }">
<!-- 也可以直接使用普通的按钮 -->
<div class="custom-tool-btn" @click="()=>currentView = 'canvasEditor'">
<i class="fi fi-ss-arrow-small-left" style="font-size: 3.5rem;"></i>
<div class="tool-tooltip">{{ $t('Canvas.back') }}</div>
</div>
</template>
<template #customTools="{ toolButtonProps }">
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
<i class="fi fi-sr-layers"></i>
@@ -117,6 +125,7 @@ export default defineComponent({
},{immediate: true})
provide('isShowMark',detailData.isShowMark)
provide('canvasType',detailData.canvasType)
const editFront = (str:any)=>{//编辑前后片
let canvasJSON = '' as any

View File

@@ -122,10 +122,11 @@ export default defineComponent({
padding: 1rem;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
display: flex;
flex-wrap: wrap;
overflow: hidden;

View File

@@ -100,11 +100,12 @@ export default defineComponent({
padding: 1rem 0;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
> img{
width: 100%;
height: 100%;

View File

@@ -105,9 +105,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
@@ -119,16 +119,6 @@ export default defineComponent({
}
}
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
align-items: center;
justify-content: center;
}
}
}

View File

@@ -349,9 +349,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
cursor: pointer;
@@ -364,7 +364,7 @@ export default defineComponent({
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
overflow: hidden;
> img{
width: 100%;

View File

@@ -1,6 +1,6 @@
<template>
<div class="selectList">
<div class="selectList_header">
<div class="selectList_header" :class="{'element': type == 'element'}">
<div class="switch_type_list" v-if="type != 'element'">
<div
@click.stop="openCurrent()"
@@ -161,10 +161,16 @@ export default defineComponent({
height: auto;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
border: 1px solid #000;
padding: 1rem;
> .selectList_header{
margin-bottom: 2.5rem;
display: flex;
align-items: center;
&.element{
margin-bottom: 0rem;
}
> .switch_type_list{
display: flex;
> .switch_type_item:last-child{

View File

@@ -199,9 +199,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
@@ -215,11 +215,11 @@ export default defineComponent({
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: calc((50% - 1rem));
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
}

View File

@@ -262,9 +262,10 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: 100%;
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
margin: 1rem;
@@ -279,11 +280,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: calc((50% - 1rem));
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
.upload{

View File

@@ -145,9 +145,9 @@ export default defineComponent({
align-content: flex-start;
&::-webkit-scrollbar{display: none;}
> .content_img_item{
width: calc((50% - 1rem));
> .content_img_item_block{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
position: relative;
margin-bottom: 2rem;
@@ -174,11 +174,11 @@ export default defineComponent({
}
> .material_content_list_loding{
width: 100%;
height: calc((34rem - 2rem) / 2);
aspect-ratio: 1/1;
}
> .upload_item{
width: calc((34rem - 2rem) / 2);
height: calc((34rem - 2rem) / 2);
width: calc((50% - 1rem));
aspect-ratio: 1/1;
align-items: center;
justify-content: center;
.upload{

View File

@@ -120,11 +120,11 @@ export default defineComponent({
height: 23.5rem;
padding: 1rem;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
display: flex;
flex-wrap: wrap;
overflow: hidden;

View File

@@ -126,11 +126,12 @@ export default defineComponent({
padding: 1rem 0;
text-align: center;
border-radius: .5rem;
// border: 1px dashed #202020;
border: 1px dashed transparent;
border: 1px solid #000;
// border: 1px dashed transparent;
border-radius: 1.5rem;
position: relative;
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
margin-bottom: 3rem;
margin-bottom: 1.4rem;
> img{
width: 100%;
height: 100%;