部分页面样式调整
This commit is contained in:
X1627315083
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/homePage/loginLeftImg1.png
Normal file
BIN
src/assets/images/homePage/loginLeftImg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
BIN
src/assets/images/homePage/loginLeftImg2.png
Normal file
BIN
src/assets/images/homePage/loginLeftImg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/images/homePage/squareLeftImg.png
Normal file
BIN
src/assets/images/homePage/squareLeftImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
1
src/assets/images/icon/alipay.svg
Normal file
1
src/assets/images/icon/alipay.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721207879119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2179" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="2180"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/icon/paymentIntroduce1.png
Normal file
BIN
src/assets/images/icon/paymentIntroduce1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/icon/paymentIntroduce2.png
Normal file
BIN
src/assets/images/icon/paymentIntroduce2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/icon/paymentIntroduce3.png
Normal file
BIN
src/assets/images/icon/paymentIntroduce3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/icon/paymentIntroduce4.png
Normal file
BIN
src/assets/images/icon/paymentIntroduce4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/icon/paymentVideo.mp4
Normal file
BIN
src/assets/images/icon/paymentVideo.mp4
Normal file
Binary file not shown.
3
src/assets/images/icon/stripe.svg
Normal file
3
src/assets/images/icon/stripe.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
@@ -2247,7 +2247,12 @@ textarea:focus {
|
||||
.generage_btn_box .fi-bs-magic-wand.forbidden {
|
||||
cursor: no-drop;
|
||||
}
|
||||
.generage_btn_box.white .generage_btn {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
.generage_btn_box .generage_btn {
|
||||
border: 2px solid #000;
|
||||
margin-left: 2rem;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
@@ -2257,9 +2262,6 @@ textarea:focus {
|
||||
line-height: 5.4rem;
|
||||
height: 5.4rem;
|
||||
}
|
||||
.generage_btn_box .generage_btn {
|
||||
width: 10rem;
|
||||
}
|
||||
.generage_btn_box .icon-xiala {
|
||||
margin-left: 1rem;
|
||||
transition: all 0.3s;
|
||||
@@ -2271,24 +2273,26 @@ textarea:focus {
|
||||
.generage_btn_box .content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
left: 0rem;
|
||||
width: min-content;
|
||||
min-width: 8rem;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
margin-top: 0.2rem;
|
||||
margin-left: 2rem;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.generage_btn_box .content > div {
|
||||
background: #cccccc;
|
||||
line-height: 2;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
padding: 0.4rem 1.2rem;
|
||||
}
|
||||
.generage_btn_box .content > div.active {
|
||||
background-color: #000;
|
||||
|
||||
@@ -2169,8 +2169,15 @@ textarea:focus{
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
&.white{
|
||||
.generage_btn{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.generage_btn{
|
||||
// margin: 0 auto;
|
||||
border: 2px solid #000;
|
||||
margin-left: 2rem;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
@@ -2181,7 +2188,7 @@ textarea:focus{
|
||||
height: 5.4rem;
|
||||
}
|
||||
.generage_btn{
|
||||
width: 10rem;
|
||||
// width: 10rem;
|
||||
}
|
||||
.icon-xiala{
|
||||
margin-left: 1rem;
|
||||
@@ -2194,23 +2201,26 @@ textarea:focus{
|
||||
.content{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
left: 0rem;
|
||||
// width: calc(100% - 2rem);
|
||||
width: min-content;
|
||||
min-width: 8rem;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem* 1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
margin-top: .2rem;
|
||||
margin-left: 2rem;
|
||||
right: 0;
|
||||
left: auto;
|
||||
>div{
|
||||
background: #cccccc;
|
||||
line-height: 2;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
padding: .4rem 1.2rem;
|
||||
&.active{
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@@ -80,7 +80,8 @@ const loadImageUrlToLayer = async () => {
|
||||
try {
|
||||
const imageUrl =
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABrQAAAZNCAYAAACENbGaAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3Yt208YaBtCflkuhhXLv+z/e4X6HQiFnfbYmTIwDsRM7srS91ixJY8WW9kjjVh8jXS";
|
||||
const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl);
|
||||
const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl,{layerId:canvasEditor?.value.layers[0].id});
|
||||
// const layerId = await canvasEditor?.value?.addImageToLayer?.(imageUrl);
|
||||
console.log("新图层ID：", layerId);
|
||||
} catch (error) {
|
||||
console.error("加载图片到图层失败：", error);
|
||||
|
||||
@@ -19,13 +19,22 @@
|
||||
</div> -->
|
||||
<div class="contet">
|
||||
<div class="canvas" v-if="!isEditFrontBack" @click.stop>
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig"
|
||||
:clothingImageUrl="selectDetail.undividedLayer"
|
||||
isFixedErasable
|
||||
:clothing-image-opts="{
|
||||
imageMode:'contains',
|
||||
}"
|
||||
ref="editCanvas"></editCanvas>
|
||||
ref="editCanvas">
|
||||
<template #customTools="{ toolButtonProps }">
|
||||
<!-- 也可以直接使用普通的按钮 -->
|
||||
{{toolButtonProps}}
|
||||
<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
|
||||
<i class="fi fi-sr-layers"></i>
|
||||
<div class="tool-tooltip">Edit the front and back sections</div>
|
||||
</div>
|
||||
</template>
|
||||
</editCanvas>
|
||||
<!-- <canvasContent ref="canvasContent"></canvasContent> -->
|
||||
</div>
|
||||
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
|
||||
@@ -35,7 +44,7 @@
|
||||
|
||||
ref="editFrontBack">
|
||||
</editFrontBack> -->
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig"
|
||||
:enabledRedGreenMode="true"
|
||||
:clothingImageUrl="selectDetail.undividedLayer"
|
||||
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
|
||||
@@ -43,7 +52,14 @@
|
||||
:clothing-image-opts="{
|
||||
imageMode:'contains',
|
||||
}"
|
||||
ref="editCanvasBackFront"></editCanvas>
|
||||
ref="editCanvasBackFront">
|
||||
<template #customTools="{ toolButtonProps }">
|
||||
<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
|
||||
<i class="fi fi-sr-layers"></i>
|
||||
<div class="tool-tooltip">Edit the front and back sections</div>
|
||||
</div>
|
||||
</template>
|
||||
</editCanvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,6 +127,7 @@ export default defineComponent({
|
||||
canvasLoad:false,
|
||||
canvasConfig:{
|
||||
} as any,
|
||||
currentView:'canvasEditor',
|
||||
})
|
||||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||
@@ -215,6 +232,9 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
}
|
||||
const setCurrentView = (str:string)=>{
|
||||
detailData.currentView = str
|
||||
}
|
||||
onBeforeUnmount(()=>{
|
||||
console.log(12312)
|
||||
sessionStorage.removeItem('frontBackEdit');
|
||||
@@ -237,6 +257,7 @@ export default defineComponent({
|
||||
privewDetail,
|
||||
setFrontBackColor,
|
||||
frontBackChange,
|
||||
setCurrentView,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -338,4 +359,56 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.custom-tool-btn {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.custom-tool-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.custom-tool-btn:hover .tool-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tool-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tool-tooltip:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -48,6 +48,9 @@
|
||||
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
|
||||
<detailLeft v-if="currentDetailType"></detailLeft>
|
||||
<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
|
||||
<div class="btn" v-show="currentDetailType == 'color'">
|
||||
<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item model">
|
||||
@@ -59,9 +62,9 @@
|
||||
@revocation="revocation"
|
||||
@oppositeRevocation="oppositeRevocation"
|
||||
></model>
|
||||
<div class="btn">
|
||||
<div class="btn" style="margin-left: 0;">
|
||||
<div class="gallery_btn" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
|
||||
<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
|
||||
<!-- <div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="item detailRight">
|
||||
@@ -69,6 +72,17 @@
|
||||
</div>
|
||||
<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
|
||||
<detailRight ref="detailRight"></detailRight>
|
||||
<div class="btn"
|
||||
v-show="
|
||||
currentDetailType !== 'color' &&
|
||||
(currentDetailType === 'element' ||
|
||||
currentDetailType === 'print' ||
|
||||
(currentDetailType === 'sketch' && selectDetail?.newDetail?.[currentDetailType])||
|
||||
(currentDetailType === 'models' && designDetail?.newModel))
|
||||
"
|
||||
>
|
||||
<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
|
||||
<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
|
||||
@@ -76,8 +90,6 @@
|
||||
<!-- 画布 -->
|
||||
<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
|
||||
</div> -->
|
||||
<div class="submit bottom">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -500,6 +512,8 @@ export default defineComponent({
|
||||
overflow: hidden;
|
||||
&.detailLeft{
|
||||
width: 34rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&.isEditPattern{width: 0px;}
|
||||
&.model{
|
||||
@@ -512,14 +526,19 @@ export default defineComponent({
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: calc(6rem + 1rem);
|
||||
// padding-bottom: calc(6rem + 1rem);
|
||||
overflow: hidden;
|
||||
> .contentRight{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
margin-top: auto;
|
||||
}
|
||||
> .submit{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@@ -24,9 +24,10 @@
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" placeholder="Tcx value（e.g:19-4052)" v-model="tcxToColor" style="width: 100%;" @keydown.enter="getTcxColor()">
|
||||
<i class="fi fi-br-search" @click="getTcxColor"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div>
|
||||
<!-- <div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -106,54 +107,113 @@ export default defineComponent({
|
||||
}else{
|
||||
return
|
||||
}
|
||||
|
||||
let isNoSelect = false
|
||||
let isOneChecked = false
|
||||
let pushIndex = 0
|
||||
for (let index = 0; index < 9; index++) {
|
||||
colorData.allBoardData.colorBoards
|
||||
let item:any = {}
|
||||
item = colorData.allBoardData.colorBoards[index]
|
||||
let color = colorData.allBoardData.colorBoards?.[index]
|
||||
if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
|
||||
|
||||
if(
|
||||
colorData.allBoardData.colorBoards?.[index] &&
|
||||
colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
|
||||
colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
|
||||
colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
|
||||
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
|
||||
colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
|
||||
colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
|
||||
colorData.selectDetail.color.rgba?.b == color?.rgba?.b &&
|
||||
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient)
|
||||
&& colorData.selectDetail.color.rgba?.r
|
||||
){
|
||||
if(!isOneChecked){
|
||||
isOneChecked = true
|
||||
if(colorData.allBoardData.colorBoards?.[index].gradient){
|
||||
item.gradient = colorData.allBoardData.colorBoards?.[index].gradient
|
||||
}
|
||||
colorData.selectColor = item
|
||||
colorData.colorList.index = index
|
||||
}
|
||||
}else if(colorData.selectDetail.color.rgba?.r){
|
||||
if(!isNoSelect){
|
||||
item = {
|
||||
hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
|
||||
id:colorData.selectDetail.color.id,
|
||||
rgba:{
|
||||
r:colorData.selectDetail.color.rgba.r,
|
||||
g:colorData.selectDetail.color.rgba.g,
|
||||
b:colorData.selectDetail.color.rgba.b,
|
||||
},
|
||||
tcx:colorData.selectDetail.color.tcx,
|
||||
name:colorData.selectDetail.color.name,
|
||||
}
|
||||
if(colorData.selectDetail.color.gradient){
|
||||
item.gradient = colorData.selectDetail.color.gradient
|
||||
}
|
||||
colorData.colorList.index = index
|
||||
colorData.selectColor = item
|
||||
isNoSelect = true
|
||||
}else{
|
||||
item = {}
|
||||
isNoSelect = true
|
||||
colorData.selectColor = item
|
||||
colorData.colorList.index = index
|
||||
}else if(color?.rgba?.r){
|
||||
pushIndex = index
|
||||
item = {
|
||||
hex:rgbaToHex([color?.rgba.r,color?.rgba.g,color?.rgba.b]),
|
||||
id:color?.id,
|
||||
rgba:{
|
||||
r:color?.rgba.r,
|
||||
g:color?.rgba.g,
|
||||
b:color?.rgba.b,
|
||||
},
|
||||
tcx:color?.tcx,
|
||||
name:color?.name,
|
||||
}
|
||||
if(color?.gradient){
|
||||
item.gradient = color?.gradient
|
||||
}
|
||||
colorData.colorList.index = index
|
||||
colorData.selectColor = item
|
||||
}
|
||||
colorData.colorList.list[newVal].push(item)
|
||||
}
|
||||
if(!isNoSelect){
|
||||
let item = {
|
||||
hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
|
||||
id:colorData.selectDetail.color.id,
|
||||
rgba:{
|
||||
r:colorData.selectDetail.color.rgba.r,
|
||||
g:colorData.selectDetail.color.rgba.g,
|
||||
b:colorData.selectDetail.color.rgba.b,
|
||||
},
|
||||
tcx:colorData.selectDetail.color.tcx,
|
||||
name:colorData.selectDetail.color.name,
|
||||
} as any
|
||||
if(colorData.selectDetail.color.gradient){
|
||||
item.gradient = colorData.selectDetail.color.gradient
|
||||
}
|
||||
colorData.selectColor = item
|
||||
colorData.colorList.index = pushIndex + 1
|
||||
colorData.colorList.list[newVal][pushIndex + 1] = item
|
||||
}
|
||||
|
||||
// for (let index = 0; index < 9; index++) {
|
||||
// colorData.allBoardData.colorBoards
|
||||
// let item:any = {}
|
||||
// item = colorData.allBoardData.colorBoards[index]
|
||||
// if(
|
||||
// colorData.allBoardData.colorBoards?.[index] &&
|
||||
// colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.r &&
|
||||
// colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.g &&
|
||||
// colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.b &&
|
||||
// JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
|
||||
// && colorData.selectDetail.color.rgba?.r
|
||||
// ){
|
||||
// console.log(13212)
|
||||
// if(!isOneChecked){
|
||||
// isOneChecked = true
|
||||
// if(colorData.allBoardData.colorBoards?.[index].gradient){
|
||||
// item.gradient = colorData.allBoardData.colorBoards?.[index].gradient
|
||||
// }
|
||||
// colorData.selectColor = item
|
||||
// colorData.colorList.index = index
|
||||
// }
|
||||
// }else if(colorData.selectDetail.color.rgba?.r){
|
||||
// if(!isNoSelect){
|
||||
// item = {
|
||||
// hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
|
||||
// id:colorData.selectDetail.color.id,
|
||||
// rgba:{
|
||||
// r:colorData.selectDetail.color.rgba.r,
|
||||
// g:colorData.selectDetail.color.rgba.g,
|
||||
// b:colorData.selectDetail.color.rgba.b,
|
||||
// },
|
||||
// tcx:colorData.selectDetail.color.tcx,
|
||||
// name:colorData.selectDetail.color.name,
|
||||
// }
|
||||
// if(colorData.selectDetail.color.gradient){
|
||||
// item.gradient = colorData.selectDetail.color.gradient
|
||||
// }
|
||||
// colorData.colorList.index = index
|
||||
// colorData.selectColor = item
|
||||
// isNoSelect = true
|
||||
// }else{
|
||||
// item = {}
|
||||
// }
|
||||
// }
|
||||
// colorData.colorList.list[newVal].push(item)
|
||||
// }
|
||||
},{immediate: true})
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
@@ -316,7 +376,22 @@ export default defineComponent({
|
||||
> .generalModel_state_item{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
input{
|
||||
border: none;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
i{
|
||||
width: 5rem;
|
||||
border-left: 1px solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,5 +70,7 @@ export default defineComponent({
|
||||
width: 34rem;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -51,7 +51,6 @@ export default defineComponent({
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
|
||||
})
|
||||
|
||||
const getDetailListData = reactive({
|
||||
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="libraryList">
|
||||
<div class="generalModel_state" v-if="type != 'element'">
|
||||
<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" style="width: 40%;">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" :style="{'width':(level1Type == 'DesignElements'?'100%':'40%')}">
|
||||
<a-select
|
||||
v-model:value="designType"
|
||||
:options="(designTypeList || catecoryList)"
|
||||
@@ -87,10 +87,10 @@
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="generalModel_state_item" style="width: 35%; flex: 1;margin-right: 2%;" v-if="level1Type != 'Models'">
|
||||
<div class="generalModel_state_item" style="width: 35%; flex: 1;margin-right: 2%;" v-if="level1Type != 'Models' && level1Type != 'DesignElements'">
|
||||
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
</div>
|
||||
<div class="generalModel_state_item" style="width: auto;">
|
||||
<div class="generalModel_state_item" style="width: auto;" v-show="level1Type != 'DesignElements'">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<!-- clothesPrint -->
|
||||
@@ -98,8 +98,8 @@
|
||||
<div class="libraryList_box">
|
||||
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
|
||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||
<img v-lazy="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
|
||||
<sketchCategory v-if="level1Type != 'Models'" :isSpread="catecoryList.length == 0" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||
<img :src="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
|
||||
<sketchCategory v-if="level1Type != 'Models' && level1Type != 'DesignElements'" :isSpread="catecoryList.length == 0" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
||||
v-if="deReconstructionList.length == 0"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.inProject') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isUpload"
|
||||
|
||||
@@ -28,6 +28,19 @@
|
||||
</a-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div class="printElementList" ref="printElementList">
|
||||
<div class="itemList" :style="{width:prentWidth || 0}">
|
||||
<div class="imgItem"
|
||||
v-for="item in printStyleList[type][stateOverallSingle]"
|
||||
:key="item"
|
||||
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
|
||||
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
|
||||
>
|
||||
<img :src="item.path" alt="">
|
||||
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editPrintElementBox">
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
||||
@@ -122,6 +135,24 @@ export default defineComponent({
|
||||
scale:0,
|
||||
},
|
||||
loadingShow:false,
|
||||
printElementList:null as any,
|
||||
})
|
||||
const collItemSize = reactive({
|
||||
collValue:18,
|
||||
num:1,
|
||||
prentWidth:0 as any,
|
||||
padding:10,
|
||||
likeStyle:{
|
||||
|
||||
},
|
||||
itemStyle:{
|
||||
width:0,
|
||||
height:0,
|
||||
},
|
||||
collTime:null as any,
|
||||
isMove:false,
|
||||
elList:[] as any,
|
||||
selectIndex:0,
|
||||
})
|
||||
|
||||
const setOveralSingle = ()=>{
|
||||
@@ -177,6 +208,7 @@ export default defineComponent({
|
||||
scale,
|
||||
}
|
||||
getItemPosition(item)
|
||||
setItemPosition()
|
||||
store.commit('DesignDetailCopy/setCurrentPrintElement',null)
|
||||
}
|
||||
const previewDetailPrintData = ()=>{
|
||||
@@ -256,16 +288,13 @@ export default defineComponent({
|
||||
let pattern = {
|
||||
centers:{left:0,top:0},
|
||||
style:{
|
||||
// left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
|
||||
// top:(boor?top:Math.trunc(Math.random()*y)+1)+"px",
|
||||
left:left+'px',
|
||||
top:top+'px',
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:editPrintElementData.sketchWH.width*item.scale[0]+'px',
|
||||
height:editPrintElementData.sketchWH.height*item.scale[1]+'px',
|
||||
zIndex:item.priority,
|
||||
// zIndex:this.printZIndex++
|
||||
// zIndex:item.priority,
|
||||
},
|
||||
transform:{
|
||||
rotateZ:item.angle?item.angle:0
|
||||
@@ -280,6 +309,7 @@ export default defineComponent({
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
editPrintElementData.printStyleList[props.type].overall.push(item)
|
||||
}
|
||||
|
||||
}
|
||||
const setPosition = ()=>{
|
||||
nextTick(()=>{
|
||||
@@ -309,6 +339,7 @@ export default defineComponent({
|
||||
}
|
||||
getItemPosition(item)
|
||||
})
|
||||
setItemPosition()
|
||||
}
|
||||
if(props.type == 'print'){
|
||||
editPrintElementData.overallSingle = state
|
||||
@@ -345,7 +376,7 @@ export default defineComponent({
|
||||
let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
|
||||
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
@@ -479,10 +510,8 @@ export default defineComponent({
|
||||
top:editPrintElementDom.imgDom.offsetTop+'px',
|
||||
height:editPrintElementDom.imgDom.offsetHeight+'px',
|
||||
width:editPrintElementDom.imgDom.offsetWidth+'px',
|
||||
zIndex:editPrintElementData.printZIndex
|
||||
// zIndex:editPrintElementData.printZIndex
|
||||
}
|
||||
// document.removeEventListener("mouseup", sizeMouseup);
|
||||
// document.removeEventListener("mousemove", sizeMousemove);
|
||||
document.removeEventListener('mousemove',sizeMouseMove)
|
||||
document.removeEventListener('touchmove',sizeTouchmove)
|
||||
document.removeEventListener('mouseup',sizeMouseup)
|
||||
@@ -490,8 +519,6 @@ export default defineComponent({
|
||||
}
|
||||
const mouseup = (e:any)=>{
|
||||
|
||||
// document.removeEventListener("mouseup", mouseup);
|
||||
// document.removeEventListener("mousemove", moveMousemove);
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
@@ -500,6 +527,191 @@ export default defineComponent({
|
||||
const clearOverall = ()=>{
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
}
|
||||
|
||||
|
||||
const designMousedown = (e:any,uniqueId:number,str:string)=>{
|
||||
let item:any = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
|
||||
if(!item)return
|
||||
const pEl = editPrintElementData.printElementList;
|
||||
item.el.style.zIndex = 2;
|
||||
item.el.style.transition = 'all 0s';
|
||||
let startX = e.clientX,
|
||||
startY = e.clientY,
|
||||
startSL = + pEl.scrollLeft,
|
||||
left = item.el.offsetLeft,
|
||||
top = item.el.offsetTop;
|
||||
collItemSize.isMove = false;
|
||||
const elWidth = item.el.offsetWidth;
|
||||
|
||||
|
||||
var toMovePx = 1;
|
||||
var toMoveType = "";//left right
|
||||
let moveFun = (e:any) => {
|
||||
collItemSize.isMove = true
|
||||
let X = e.clientX - startX + (pEl.scrollLeft - startSL) + left;
|
||||
let Y = 0;
|
||||
if(X < 0) X = 0;
|
||||
const maxLeft = parseInt(collItemSize.prentWidth) - elWidth - collItemSize.padding ;
|
||||
if(X > maxLeft) X = maxLeft;
|
||||
item.el.style.left = `${X}px`;
|
||||
item.el.style.top = `${Y}px`;
|
||||
|
||||
const pElBCR = pEl.getBoundingClientRect();
|
||||
var num = 2;
|
||||
if(X < pEl.scrollLeft){
|
||||
toMoveType = "left";
|
||||
num = pElBCR.x-e.clientX;
|
||||
}else if(X > pEl.scrollLeft + pEl.clientWidth - elWidth){
|
||||
toMoveType = "right";
|
||||
num = e.clientX - pElBCR.x - pElBCR.width;
|
||||
}else{
|
||||
toMoveType = "";
|
||||
}
|
||||
toMovePx = num / 20;
|
||||
if(toMovePx < 2) toMovePx = 2;
|
||||
|
||||
|
||||
reRange(item, X, Y,str);
|
||||
};
|
||||
|
||||
const updataFun = ()=>{
|
||||
if(toMoveType == "left"){
|
||||
let left = pEl.scrollLeft - toMovePx;
|
||||
if(left < 0)left = 0;
|
||||
item.el.style.left = `${left}px`;
|
||||
pEl.scrollLeft = left;
|
||||
reRange(item, left, 0);
|
||||
}else if(toMoveType == "right"){
|
||||
let left = pEl.scrollLeft + toMovePx;
|
||||
if(left > pEl.scrollWidth - pEl.clientWidth)left = pEl.scrollWidth - pEl.clientWidth;
|
||||
const elLeft = left + pEl.clientWidth - elWidth - collItemSize.padding;
|
||||
item.el.style.left = `${elLeft}px`;
|
||||
pEl.scrollLeft = left;
|
||||
reRange(item, elLeft, 0);
|
||||
}else if(toMoveType == "stop"){
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(updataFun);
|
||||
}
|
||||
updataFun();
|
||||
|
||||
let mouseUpFun = ()=>{
|
||||
toMoveType = "stop"
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
|
||||
document.removeEventListener('mouseup',mouseUpFun)
|
||||
document.removeEventListener('touchend',mouseUpFun)
|
||||
item.el.style.zIndex = 1;
|
||||
item.el.style.transition = 'top .5s';
|
||||
moveItem();
|
||||
sortDesignCollection()
|
||||
}
|
||||
let mouseMove = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
moveFun(e)
|
||||
}
|
||||
let touchmove = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
moveFun(e)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove',mouseMove)
|
||||
document.addEventListener('touchmove',touchmove)
|
||||
|
||||
document.addEventListener('mouseup',mouseUpFun)
|
||||
document.addEventListener('touchend',mouseUpFun)
|
||||
}
|
||||
//排序 从大到小
|
||||
const sortDesignCollection = ()=> {
|
||||
|
||||
}
|
||||
const reRange = (item:any, x:number, y:number,str?:string)=>{
|
||||
let elList:any = collItemSize.elList
|
||||
let index = collItemSize.selectIndex
|
||||
let width,height,num
|
||||
num = collItemSize.num
|
||||
width = collItemSize.itemStyle.width
|
||||
height = collItemSize.itemStyle.height
|
||||
|
||||
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
|
||||
moveIndex = elList.length - 1 - moveIndex
|
||||
moveIndex = moveIndex < 0 ? 0 : moveIndex;
|
||||
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
|
||||
if(moveIndex != index){
|
||||
collItemSize.selectIndex = moveIndex;
|
||||
let currentSort = item.sort;
|
||||
for(let i = 0;i < elList.length;i++){
|
||||
if(currentSort < moveIndex){
|
||||
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
|
||||
elList[i].sort -= 1;
|
||||
};
|
||||
}else if(currentSort > moveIndex){
|
||||
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
|
||||
elList[i].sort += 1;
|
||||
};
|
||||
}
|
||||
};
|
||||
elList[item.index].sort = moveIndex;
|
||||
moveItem();
|
||||
}
|
||||
}
|
||||
const moveItem = ()=>{
|
||||
let value = collItemSize.num
|
||||
for(let i = 0;i < collItemSize.elList.length;i++){
|
||||
let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.width +collItemSize.padding) + 'px';
|
||||
collItemSize.elList[i].el.style.left = height
|
||||
}
|
||||
setZIndex()
|
||||
}
|
||||
const navDelete = (item:any)=>{
|
||||
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
||||
let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
|
||||
arr.splice(index,1)
|
||||
setItemPosition()
|
||||
}
|
||||
const setZIndex = ()=>{
|
||||
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
||||
collItemSize.elList.forEach((elItem:any)=>{
|
||||
let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
|
||||
arr[clothesIndex].pattern.style.zIndex = elItem.sort
|
||||
// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
|
||||
// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
|
||||
// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
|
||||
// editPrintElementData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
|
||||
})
|
||||
}
|
||||
const setItemPosition = async ()=>{
|
||||
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
|
||||
await nextTick()
|
||||
let parent = editPrintElementData.printElementList.offsetWidth
|
||||
let elArr = editPrintElementData.printElementList.querySelectorAll('.imgItem')
|
||||
let value = collItemSize.num
|
||||
const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const remValue = 8 * htmlFontSize;
|
||||
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
|
||||
collItemSize.itemStyle.width = remValue
|
||||
collItemSize.elList = []
|
||||
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
||||
|
||||
arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`});
|
||||
|
||||
const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
|
||||
const sortMap = {} as any;
|
||||
sortedArray.forEach((item, index) => {
|
||||
sortMap[item.priority] = index ; // 1, 2, 3, 4...
|
||||
});
|
||||
for(let i = 0;i < elArr.length;i++){
|
||||
collItemSize.elList.push({
|
||||
el: elArr[i],
|
||||
// sort: elArr.length - i -1,
|
||||
sort: sortMap[arr[i].priority],
|
||||
index: i,
|
||||
uniqueId:arr[i]?.uniqueId || 99999,
|
||||
});
|
||||
}
|
||||
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
|
||||
}
|
||||
onMounted(()=>{
|
||||
if(props.type == 'element'){
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
@@ -513,6 +725,7 @@ export default defineComponent({
|
||||
getMousePosition,
|
||||
...toRefs(editPrintElementDom),
|
||||
...toRefs(editPrintElementData),
|
||||
...toRefs(collItemSize),
|
||||
setOveralSingle,
|
||||
formatter,
|
||||
itemMoveMousedown,
|
||||
@@ -520,6 +733,8 @@ export default defineComponent({
|
||||
deletePrint,
|
||||
previewDetailPrintData,
|
||||
clearOverall,
|
||||
designMousedown,
|
||||
navDelete,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
@@ -656,6 +871,35 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
> .printElementList{
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
.itemList{
|
||||
height: 100%;
|
||||
}
|
||||
.imgItem{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
> i{
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .editPrintElementBox{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="sketchType">
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchType{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,6 @@
|
||||
</div> -->
|
||||
<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
|
||||
<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
|
||||
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
|
||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
|
||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
|
||||
<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
|
||||
@@ -20,15 +19,15 @@ import { useStore } from "vuex";
|
||||
import sketchType from './sketchType.vue'
|
||||
import printType from './printType.vue'
|
||||
import editPrintElement from './editPrintElement.vue'
|
||||
import elementType from './elementType.vue'
|
||||
import modelsType from './modelsType.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchType,printType,elementType,editPrintElement,modelsType
|
||||
sketchType,printType,editPrintElement,modelsType
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||
editPrintElement:null as any,
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
@@ -55,6 +54,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sketchType" v-show="designDetail?.newModel">
|
||||
<div class="detailText">{{$t('DesignPrintOperation.NewPrint')}}</div>
|
||||
<div class="detailText">{{$t('DesignPrintOperation.NewModel')}}</div>
|
||||
<div class="sketchContent">
|
||||
<img :src="designDetail.newModel?.url" alt="">
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
<template>
|
||||
<div class="modelNav">
|
||||
<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
|
||||
<div class="modelNavBox">
|
||||
<div class="modelNav" ref="modelNav" :style="{height:prentHeight}">
|
||||
<div class="modelNav_item item"
|
||||
v-for="item,index in designDetail.clothes"
|
||||
:class="{active:(selectDetail && item.id == selectDetail.id)}"
|
||||
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
|
||||
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
|
||||
@click="selectDetailItem(item,index)">
|
||||
<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
|
||||
<img :src="item.path" alt="">
|
||||
</div>
|
||||
<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
|
||||
@@ -18,6 +25,7 @@ import { Modal,message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import position from './modelPosition.vue';
|
||||
import { getMousePosition } from "@/tool/mdEvent"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
position,
|
||||
@@ -31,15 +39,33 @@ export default defineComponent({
|
||||
frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
|
||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
frontBack:{} as any,
|
||||
isEditPattern:inject('isEditPattern') as any,
|
||||
singleOveral:inject('singleOveral') as any,
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
|
||||
modelNav:null as any,
|
||||
})
|
||||
watch(()=>detailData.frontBack_,(newFollowVue)=>{
|
||||
detailData.frontBack = newFollowVue
|
||||
const collItemSize = reactive({
|
||||
collValue:18,
|
||||
num:1,
|
||||
prentHeight:0 as any,
|
||||
padding:10,
|
||||
likeStyle:{
|
||||
|
||||
},
|
||||
itemStyle:{
|
||||
width:0,
|
||||
height:0,
|
||||
},
|
||||
collTime:null as any,
|
||||
isMove:false,
|
||||
elList:[] as any,
|
||||
selectIndex:0,
|
||||
})
|
||||
watch(()=>detailData.designDetail.clothes.length,(newVal)=>{
|
||||
nextTick(()=>{
|
||||
setItemPosition()
|
||||
})
|
||||
},{immediate:true})
|
||||
const selectDetailItem = (item:any,index:number)=>{
|
||||
new Promise((resolve, reject) => {
|
||||
if(detailData.isEditPattern.value &&
|
||||
@@ -80,14 +106,147 @@ export default defineComponent({
|
||||
store.commit('DesignDetailCopy/addDesignColthes')
|
||||
emit('addSketch')
|
||||
}
|
||||
|
||||
|
||||
|
||||
const designMousedown = (e:any,uniqueId:number,str:string)=>{
|
||||
let item:any = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
|
||||
if(!item)return
|
||||
item.el.style.zIndex = 2;
|
||||
item.el.style.transition = 'all 0s';
|
||||
let startX = e.clientX,
|
||||
startY = e.clientY,
|
||||
top = item.el.offsetTop;
|
||||
collItemSize.isMove = false
|
||||
let moveFun = (e:any) => {
|
||||
collItemSize.isMove = true
|
||||
let X = 0;
|
||||
let Y = e.clientY - startY + top;
|
||||
item.el.style.left = `${X}px`;
|
||||
item.el.style.top = `${Y}px`;
|
||||
reRange(item, X, Y,str);
|
||||
};
|
||||
let mouseUpFun = ()=>{
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
|
||||
document.removeEventListener('mouseup',mouseUpFun)
|
||||
document.removeEventListener('touchend',mouseUpFun)
|
||||
item.el.style.zIndex = 1;
|
||||
item.el.style.transition = 'top .5s';
|
||||
moveItem();
|
||||
sortDesignCollection()
|
||||
}
|
||||
let mouseMove = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
moveFun(e)
|
||||
}
|
||||
let touchmove = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
moveFun(e)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove',mouseMove)
|
||||
document.addEventListener('touchmove',touchmove)
|
||||
|
||||
document.addEventListener('mouseup',mouseUpFun)
|
||||
document.addEventListener('touchend',mouseUpFun)
|
||||
}
|
||||
//排序 从大到小
|
||||
const sortDesignCollection = ()=> {
|
||||
|
||||
}
|
||||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||||
let elList:any = collItemSize.elList
|
||||
let index = collItemSize.selectIndex
|
||||
let width,height,num
|
||||
num = collItemSize.num
|
||||
width = collItemSize.itemStyle.width
|
||||
height = collItemSize.itemStyle.height
|
||||
|
||||
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
|
||||
moveIndex = elList.length - 1 - moveIndex
|
||||
moveIndex = moveIndex < 0 ? 0 : moveIndex;
|
||||
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
|
||||
if(moveIndex != index){
|
||||
collItemSize.selectIndex = moveIndex;
|
||||
let currentSort = item.sort;
|
||||
for(let i = 0;i < elList.length;i++){
|
||||
if(currentSort < moveIndex){
|
||||
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
|
||||
elList[i].sort -= 1;
|
||||
};
|
||||
}else if(currentSort > moveIndex){
|
||||
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
|
||||
elList[i].sort += 1;
|
||||
};
|
||||
}
|
||||
};
|
||||
elList[item.index].sort = moveIndex;
|
||||
moveItem();
|
||||
}
|
||||
}
|
||||
const moveItem = ()=>{
|
||||
let value = collItemSize.num
|
||||
for(let i = 0;i < collItemSize.elList.length;i++){
|
||||
let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +collItemSize.padding) + 'px';
|
||||
collItemSize.elList[i].el.style.top = height
|
||||
}
|
||||
setZIndex()
|
||||
}
|
||||
const setZIndex = ()=>{
|
||||
collItemSize.elList.forEach((elItem:any)=>{
|
||||
let clothesIndex = detailData.designDetail.clothes.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
|
||||
let clothesId = detailData.designDetail.clothes[clothesIndex].id
|
||||
detailData.designDetail.clothes[clothesIndex].priority = elItem.sort
|
||||
let frontIndex = detailData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
|
||||
detailData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
|
||||
// detailData.frontBack_.back[frontIndex].style.zIndex = elItem.sort + 1
|
||||
})
|
||||
}
|
||||
const setItemPosition = ()=>{
|
||||
let parent = detailData.modelNav.offsetWidth
|
||||
let elArr = detailData.modelNav.querySelectorAll('.item')
|
||||
let value = collItemSize.num
|
||||
const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const remValue = 12 * htmlFontSize;
|
||||
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
|
||||
collItemSize.itemStyle.height = remValue
|
||||
collItemSize.elList = []
|
||||
let arr:any = detailData.designDetail.clothes
|
||||
arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`});
|
||||
|
||||
const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
|
||||
const sortMap = {} as any;
|
||||
sortedArray.forEach((item, index) => {
|
||||
sortMap[item.priority] = index ; // 1, 2, 3, 4...
|
||||
});
|
||||
for(let i = 0;i < elArr.length;i++){
|
||||
collItemSize.elList.push({
|
||||
el: elArr[i],
|
||||
// sort: elArr.length - i -1,
|
||||
sort: sortMap[arr[i].priority],
|
||||
index: i,
|
||||
uniqueId:arr[i]?.uniqueId || 99999,
|
||||
});
|
||||
}
|
||||
collItemSize.prentHeight = (collItemSize.padding + remValue) * elArr.length + 'px'
|
||||
moveItem()
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
// onBeforeUnmount(()=>{
|
||||
// detailData.selectIndex = -1
|
||||
// })
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(collItemSize),
|
||||
selectDetailItem,
|
||||
deleteDetailItem,
|
||||
designMousedown,
|
||||
addSketch,
|
||||
getMousePosition,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -99,8 +258,8 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.modelNav{
|
||||
> .modelNav_item{
|
||||
.modelNavBox{
|
||||
.modelNav_item{
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
padding: 1rem;
|
||||
@@ -108,7 +267,9 @@ export default defineComponent({
|
||||
border: 2px solid #B4B4B4;
|
||||
margin-bottom: 1.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
transition: top .3s;
|
||||
&:hover{
|
||||
> i{
|
||||
display: block;
|
||||
@@ -137,8 +298,14 @@ export default defineComponent({
|
||||
font-size: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modelNav{
|
||||
position: relative;
|
||||
width: 12rem;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask" v-else>
|
||||
<img :src="selectDetail.undividedLayer" alt="">
|
||||
<img :src="selectDetail.undividedLayer" style="object-fit: cover;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="molepositon" :class="{active:imgDesignImg}">
|
||||
@@ -144,9 +144,10 @@ export default defineComponent({
|
||||
top:selectItem.imgDom.offsetTop+'px',
|
||||
height:selectItem.imgDom.offsetHeight+'px',
|
||||
width:selectItem.imgDom.offsetWidth+'px',
|
||||
zIndex:selectItem.printZIndex
|
||||
zIndex:selectItem.imgDom.style.zIndex,
|
||||
// zIndex:selectItem.printZIndex
|
||||
}
|
||||
detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
|
||||
// detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
|
||||
document.removeEventListener('mousemove',sizeMouseMove)
|
||||
document.removeEventListener('touchmove',sizeTouchmove)
|
||||
document.removeEventListener('mouseup',sizeMouseup)
|
||||
@@ -271,8 +272,8 @@ export default defineComponent({
|
||||
let event = e||window.event
|
||||
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
|
||||
detailData.frontBack.front[index].designOpenrtionBtn = true
|
||||
detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
||||
detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
||||
// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
||||
let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
|
||||
let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
|
||||
@@ -346,8 +347,8 @@ export default defineComponent({
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
detailData.frontBack.front[index].designOpenrtionBtn = true
|
||||
detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
||||
detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
||||
// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
clothesOpenActive(index)
|
||||
}
|
||||
const updataPosition = ()=>{
|
||||
@@ -473,11 +474,6 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.designOpenrtion_print{
|
||||
img{
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.detail_modal_item_front,.designOpenrtion_print{
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
|
||||
@@ -915,6 +915,7 @@ export default defineComponent({
|
||||
position: relative;
|
||||
padding-right: calc(3rem*1.2);
|
||||
margin-right: 2.4rem;
|
||||
width: 24rem;
|
||||
.upload_centetn{
|
||||
// overflow-x: hidden;
|
||||
height: calc(100% - 4.4rem*1.2);
|
||||
|
||||
@@ -334,6 +334,7 @@ export default defineComponent({
|
||||
})
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedState = false
|
||||
document.removeEventListener('click',openSpeed)
|
||||
speed.speedData = item
|
||||
}
|
||||
return {
|
||||
|
||||
@@ -211,6 +211,9 @@ export default defineComponent({
|
||||
let printCatecoryList:any = computed(()=>{
|
||||
return store.state.UserHabit.printType
|
||||
})
|
||||
let printboardList = computed(()=>{
|
||||
return store.state.UploadFilesModule.printboard
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
@@ -225,6 +228,7 @@ export default defineComponent({
|
||||
scene,
|
||||
openMenu,
|
||||
printCatecoryList,
|
||||
printboardList,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -253,9 +257,7 @@ export default defineComponent({
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
printboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.printboard
|
||||
}),
|
||||
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
:get-container="() => $refs.renew"
|
||||
v-model:visible="renewModel"
|
||||
:footer="null"
|
||||
width="130rem"
|
||||
width="110rem"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -49,90 +49,64 @@
|
||||
</div>
|
||||
<div class="renewContent">
|
||||
<div class="left">
|
||||
<div class="title">Unlock the Pro Advantage</div>
|
||||
<div class="video">
|
||||
<video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
|
||||
<div class="mask"></div>
|
||||
</div>
|
||||
<div class="title">{{ $t("Renew.Strengths") }}</div>
|
||||
<div class="content">
|
||||
<div class="benefits">
|
||||
<div>Benefits</div>
|
||||
<div class="contrast">
|
||||
<div>Free</div>
|
||||
<div>PRO</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
|
||||
<p class="info">
|
||||
{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||
/>
|
||||
<img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
|
||||
<p class="info">
|
||||
More accurate answers with multiple latest AI models
|
||||
{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||
/>
|
||||
<img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="title"></p>
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
|
||||
<p class="info">
|
||||
More accurate answers with multiple latest AI models
|
||||
{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||
/>
|
||||
<img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
|
||||
<p class="info">
|
||||
More accurate answers with multiple latest AI models
|
||||
{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="info">
|
||||
More accurate answers with multiple latest AI models
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +114,7 @@
|
||||
<div class="title">
|
||||
{{ $t("Renew.title") }}
|
||||
</div>
|
||||
<div class="info">Get started today for unlimited access!</div>
|
||||
<!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
|
||||
<div class="content">
|
||||
<div
|
||||
class="productItem"
|
||||
@@ -232,25 +206,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||||
Continue
|
||||
{{ $t("Renew.Continue") }}
|
||||
</div>
|
||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||
<label>
|
||||
<input type="checkbox" v-model="clause" />
|
||||
<!-- <input type="checkbox" v-model="clause" /> -->
|
||||
<span class="generalModelDescription"
|
||||
>{{ $t("upgradePlan.policy1")
|
||||
}}<a
|
||||
>{{ $t("upgradePlan.policy")}}
|
||||
<!-- <a
|
||||
href="https://code-create.com.hk/aida-terms-and-conditions/"
|
||||
target="_blank"
|
||||
>{{ $t("upgradePlan.policy2") }}</a
|
||||
>{{ $t("upgradePlan.policy3")
|
||||
}}<a
|
||||
>{{ $t("upgradePlan.policy3")}}
|
||||
<a
|
||||
href="https://code-create.com.hk/aida-subscription-agreement/"
|
||||
target="_blank"
|
||||
>{{ $t("upgradePlan.policy4") }}</a
|
||||
>. *</span
|
||||
> -->
|
||||
<!-- . * -->
|
||||
</span
|
||||
>
|
||||
</label>
|
||||
<label class="secure">
|
||||
<span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
|
||||
</label>
|
||||
<label class="payIcon">
|
||||
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
|
||||
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
|
||||
</label>
|
||||
</div>
|
||||
<!-- <div class="paySecure">
|
||||
<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
|
||||
@@ -315,7 +298,7 @@ export default defineComponent({
|
||||
activity: false, //活动打折
|
||||
type: {
|
||||
value: "Month",
|
||||
label: "Month",
|
||||
label: "Monthly",
|
||||
},
|
||||
PaymentType: "",
|
||||
promotionData: {
|
||||
@@ -332,7 +315,7 @@ export default defineComponent({
|
||||
typeValue: "year",
|
||||
type: {
|
||||
value: "Year",
|
||||
label: "Year",
|
||||
label: "Yearly",
|
||||
},
|
||||
PaymentType: "",
|
||||
promotionData: {
|
||||
@@ -410,23 +393,18 @@ export default defineComponent({
|
||||
renewData.current.PaymentType = str;
|
||||
};
|
||||
const payment = () => {
|
||||
if (!payMethodData.clause) {
|
||||
let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||
if (!labelDisclaimer.classList.contains("animation")) {
|
||||
labelDisclaimer.classList.add("animation");
|
||||
setTimeout(() => {
|
||||
labelDisclaimer.classList.remove("animation");
|
||||
}, 1000);
|
||||
}
|
||||
return;
|
||||
}
|
||||
// if (!payMethodData.clause) {
|
||||
// let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||
// if (!labelDisclaimer.classList.contains("animation")) {
|
||||
// labelDisclaimer.classList.add("animation");
|
||||
// setTimeout(() => {
|
||||
// labelDisclaimer.classList.remove("animation");
|
||||
// }, 1000);
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
if (!renewData.current.PaymentType)
|
||||
return message.info(t("Renew.PleaseSelectPayment"));
|
||||
// let data = {
|
||||
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
|
||||
// productName:'Subscription',
|
||||
// subscribeType,//yearly为年费，monthly为月费
|
||||
// }
|
||||
let url = window.location.origin + "/paySucceed";
|
||||
let data = {
|
||||
autoRenewal: renewData.current.PaymentType != "Alipay", //false为不自动续费
|
||||
@@ -565,6 +543,7 @@ export default defineComponent({
|
||||
font-size: 3.2rem;
|
||||
font-weight: 600;
|
||||
line-height: 4rem;
|
||||
position: relative;
|
||||
}
|
||||
> .info {
|
||||
text-align: center;
|
||||
@@ -572,85 +551,89 @@ export default defineComponent({
|
||||
font-weight: 400;
|
||||
margin-top: 0.8rem;
|
||||
font-size: 1.6rem;
|
||||
position: relative;
|
||||
}
|
||||
> .content {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
> .left {
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
background: #0f0f0f;
|
||||
color: #fff;
|
||||
padding: 4rem 3.2rem;
|
||||
position: relative;
|
||||
> .video{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
> video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
> .mask{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
opacity: 0.6;
|
||||
opacity: 1;
|
||||
// color: #fff;
|
||||
}
|
||||
> .content {
|
||||
> .benefits,
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
> .benefitsItem {
|
||||
display: flex;
|
||||
> .contrast {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
width: 8rem;
|
||||
text-align: center;
|
||||
}
|
||||
> div:nth-child(1) {
|
||||
margin-right: 2.4rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
opacity: 1;
|
||||
color: #38c793;
|
||||
text-shadow: 0 4px 27.1px #38c793b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .benefits {
|
||||
> div:nth-child(1) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
margin: 1rem 0;
|
||||
padding: 0 1.6rem;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
> .benefitsItem {
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 2.4rem;
|
||||
margin-bottom: 1.6rem;
|
||||
padding: 1.6rem;
|
||||
justify-content: center;
|
||||
> .describe {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> .icon {
|
||||
border: 1px solid #27272a;
|
||||
background: linear-gradient(#1d1d1d, #000);
|
||||
border-radius: 1.4rem;
|
||||
margin-right: 1.6rem;
|
||||
padding: 1.4rem;
|
||||
// border: 1px solid #27272a;
|
||||
// background: linear-gradient(#1d1d1d, #000);
|
||||
// border-radius: 1.4rem;
|
||||
// margin-right: 1.6rem;
|
||||
// padding: 1.4rem;
|
||||
> img {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
> .text {
|
||||
text-align: center;
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
> .title {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
> .info {
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
margin-top: 0.4rem;
|
||||
font-size: 1.6rem;
|
||||
opacity: 0.5;
|
||||
font-size: 1.2rem;
|
||||
// opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -658,7 +641,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rem 3.2rem;
|
||||
@@ -808,9 +791,14 @@ export default defineComponent({
|
||||
> .gallery_btn {
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
margin-bottom: .5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
> .payMethod_payAffirm_clause {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
label {
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
@@ -826,6 +814,30 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
> .secure{
|
||||
border: 1px solid #ededed;
|
||||
background: #f1fbf9;
|
||||
color: #1cb36c;
|
||||
padding: .4rem .8rem;
|
||||
border-radius: .5rem;
|
||||
margin-top: 4rem;
|
||||
> span{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
i{
|
||||
display: flex;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
> .payIcon{
|
||||
height: 2rem;
|
||||
margin-top: 1rem;
|
||||
img{
|
||||
margin: 0 .3rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.animation {
|
||||
animation: shake 0.3s linear;
|
||||
@keyframes shake {
|
||||
|
||||
@@ -257,6 +257,7 @@ export default defineComponent({
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
speed.speedState = false
|
||||
document.removeEventListener('click',openSpeed)
|
||||
}
|
||||
let scaleImage: any = ref(false);
|
||||
let isShowMark = ref(false)
|
||||
|
||||
@@ -164,7 +164,7 @@ export default defineComponent({
|
||||
}else if(eventData.type == 'think'){
|
||||
data.chatList[data.chatList.length-1].content.think+=eventData.content
|
||||
}else if(eventData.type == "tools_response"){
|
||||
let nameList = ['moodboard','printboard','sketchboard','generate_color_code','search_sketch_img']
|
||||
let nameList = ['moodboard','printboard','sketchboard','colorboard','search_sketch_img']
|
||||
let nameData = {
|
||||
moodboard:'moodBoard',
|
||||
printboard:'printBoard',
|
||||
@@ -173,7 +173,7 @@ export default defineComponent({
|
||||
let getData = ''
|
||||
if(nameList.indexOf(eventData.tools_name) > -1){
|
||||
if(data.chatList[data.chatList.length - 1].content.message)data.chatList.push({content:{message:''},role:'system'})
|
||||
if(eventData.tools_name == 'generate_color_code'){
|
||||
if(eventData.tools_name == 'colorboard'){
|
||||
data.chatList[data.chatList.length-1].content.color = JSON.parse(JSON.parse(event.data).content).receiveCollectionElementList
|
||||
getData = 'colorBoard'
|
||||
}else{
|
||||
|
||||
@@ -900,7 +900,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 24rem;
|
||||
.upload_centetn{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -185,6 +185,9 @@ export default defineComponent({
|
||||
let modalImg:any= computed(()=>{
|
||||
return store.state.UploadFilesModule.disposeMoodboard
|
||||
})
|
||||
let moodboarList=computed(()=>{
|
||||
return store.state.UploadFilesModule?.moodboard
|
||||
})
|
||||
let uploading:any = ref([])
|
||||
let edieShow:any = ref()
|
||||
let {t} = useI18n()
|
||||
@@ -205,6 +208,7 @@ export default defineComponent({
|
||||
uploading,
|
||||
edieShow,
|
||||
t,
|
||||
moodboarList,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -226,9 +230,7 @@ export default defineComponent({
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
moodb_:moodb.moodb_,
|
||||
moodboarList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule?.moodboard
|
||||
}),
|
||||
|
||||
};
|
||||
},
|
||||
// watcheffect(){
|
||||
|
||||
@@ -221,6 +221,9 @@ export default defineComponent({
|
||||
let printCatecoryList:any = computed(()=>{
|
||||
return store.state.UserHabit.printType
|
||||
})
|
||||
let printboardList = computed(()=>{
|
||||
return store.state.UploadFilesModule.printboard
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
@@ -235,6 +238,7 @@ export default defineComponent({
|
||||
scene,
|
||||
openMenu,
|
||||
printCatecoryList,
|
||||
printboardList,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -263,9 +267,7 @@ export default defineComponent({
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
printboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.printboard
|
||||
}),
|
||||
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
}
|
||||
@@ -607,6 +609,7 @@ export default defineComponent({
|
||||
}
|
||||
this.fileList.push(data)
|
||||
}
|
||||
console.log(this.fileList)
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
|
||||
},
|
||||
|
||||
@@ -109,6 +109,7 @@ export default defineComponent({
|
||||
font-size: 1.4rem;
|
||||
// width: 12rem;
|
||||
text-align: left;
|
||||
z-index: 99;
|
||||
> .item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -285,6 +285,7 @@ setup(props:any,{emit}) {
|
||||
}
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
document.removeEventListener('click',openSpeed)
|
||||
speed.speedState = false
|
||||
}
|
||||
let scaleImage: any = ref(false);
|
||||
|
||||
@@ -28,9 +28,6 @@
|
||||
</div>
|
||||
<!-- 有图状态 end-->
|
||||
</div>
|
||||
<div class="designPage_left_bottom" @click="setShowHide('domHidden')" >
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designPage_right">
|
||||
<div class="right_top">
|
||||
@@ -39,14 +36,14 @@
|
||||
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
|
||||
{{ $t('HomeView.Design') }}
|
||||
</div>
|
||||
<div class="generage_btn_box">
|
||||
<div class="generage_btn_box white">
|
||||
<div class="generage_btn started_btn" style="margin-left: 2rem;">
|
||||
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
|
||||
{{ $t('Header.Tools') }}
|
||||
</div>
|
||||
<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="content" v-show="speedState">
|
||||
<div v-for="item in speedList" :key="item.value" style="font-size: 1.6rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
<div v-for="item in speedList" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,33 +73,80 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="generalModel_state" v-show="likeDesignTools">
|
||||
<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
|
||||
<span>{{ $t('Header.Type') }} :</span>
|
||||
<a-select
|
||||
v-model:value="resultType"
|
||||
size="large"
|
||||
style="width: 15rem"
|
||||
placeholder="Please select"
|
||||
:options="resultTypeList"
|
||||
@change="changeResultType"
|
||||
>
|
||||
</a-select>
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="resultTypeList"
|
||||
@change="changeResultType"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'border-right':'2px solid rgba(0,0,0,.2)',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="resultType"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
Classify
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<div class="generalModel_state_item smail" style="margin-right: 1rem;">
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="[
|
||||
{
|
||||
label:'Unfold',
|
||||
value:true,
|
||||
},
|
||||
{
|
||||
label:'Merge',
|
||||
value:false,
|
||||
},
|
||||
]"
|
||||
@change="setUnfold"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'border-right':'2px solid rgba(0,0,0,.2)',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="isUnfold"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Unfold') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<!-- <div class="generalModel_state_item smail" style="margin-right: 1rem;">
|
||||
<span>{{ $t('Header.Unfold') }} :</span>
|
||||
<a-switch v-model:checked="isUnfold" @change="setUnfold" />
|
||||
</div>
|
||||
<div class="generalModel_state_item smail" style="margin-right: 0;">
|
||||
<span>{{ $t('Header.Size') }} :</span>
|
||||
<a-select
|
||||
v-model:value="widthValue.value"
|
||||
size="large"
|
||||
style="width: 15rem"
|
||||
placeholder="Please select"
|
||||
:options="widthList"
|
||||
@change="setSystemDesigner(500)"
|
||||
>
|
||||
</a-select>
|
||||
</div> -->
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="widthList"
|
||||
@change="setSystemDesigner(500)"
|
||||
:isBtnOpen='true'
|
||||
:style="{
|
||||
'border-radius':'0rem',
|
||||
'border':'none',
|
||||
'font-weight': '900',
|
||||
'line-height': '3rem',
|
||||
'height': '3rem',
|
||||
'background': 'rgba(0,0,0,0)',
|
||||
}"
|
||||
v-model:select="widthValue.value"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Size') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,8 +212,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designPage_left_bottom left" @click="setShowHide('domHidden')" >
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
|
||||
</div>
|
||||
<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
|
||||
|
||||
<div class="right_content_body">
|
||||
<div class="right_content_header">
|
||||
<div class="content_header_left">
|
||||
@@ -218,9 +269,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,6 +343,7 @@ import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { removeClass } from "element-plus/es/utils";
|
||||
import collectionModal from './collection.vue'
|
||||
import designTools from './tools.vue'
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: "homePage",
|
||||
@@ -306,6 +356,7 @@ export default defineComponent({
|
||||
DesignDetailcopy,
|
||||
editDesignType,
|
||||
designTools,
|
||||
selectMenu,
|
||||
},
|
||||
emits:['setTask'],
|
||||
activated() {
|
||||
@@ -436,6 +487,7 @@ export default defineComponent({
|
||||
}
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedState = false
|
||||
document.removeEventListener('click',openSpeed)
|
||||
speed.speedData = item
|
||||
}
|
||||
const openEditTools = ()=>{
|
||||
@@ -2002,35 +2054,7 @@ export default defineComponent({
|
||||
position: relative;
|
||||
|
||||
|
||||
.designPage_left_bottom{
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 7rem;
|
||||
background: #fff;
|
||||
border: 2px solid;
|
||||
border-right: none;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
top: 50%;
|
||||
transform: translate(-100%,-50%);
|
||||
left: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
transition: width .3s;
|
||||
&:hover{
|
||||
width: 4rem;
|
||||
}
|
||||
>span{
|
||||
transition: all .3s;
|
||||
transform: rotate(90deg);
|
||||
&.active{
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page_content_body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -2162,23 +2186,53 @@ export default defineComponent({
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
.designPage_left_bottom{
|
||||
border-radius: 0 2rem 2rem 0rem;
|
||||
left: 2rem;
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translate(100%, -50%);
|
||||
// top: calc(50% - 10.4rem / 2);
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 7rem;
|
||||
background: #fff;
|
||||
border: 2px solid;
|
||||
border-left: none;
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
left: 44rem;
|
||||
transform: translate(0, -50%);
|
||||
border-right: none;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
top: 50%;
|
||||
transform: translate(-100%,-50%);
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
transition: width .3s;
|
||||
&:hover{
|
||||
width: 4rem;
|
||||
}
|
||||
>span{
|
||||
transition: all .3s;
|
||||
transform: rotate(90deg);
|
||||
&.active{
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
border-radius: 0 2rem 2rem 0rem;
|
||||
left: 2rem;
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translate(100%, -50%);
|
||||
// top: calc(50% - 10.4rem / 2);
|
||||
border: 2px solid;
|
||||
border-left: none;
|
||||
flex-direction: column;
|
||||
|
||||
&.active{
|
||||
// left: 44rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_top {
|
||||
padding: 1rem 3.2rem 2rem 1.2rem;
|
||||
padding-right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
||||
@@ -2214,11 +2268,11 @@ export default defineComponent({
|
||||
.right_content_block_box{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right_content_block {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 0;
|
||||
flex-direction: column;
|
||||
&.recycleBin{
|
||||
|
||||
@@ -164,6 +164,7 @@ export default defineComponent({
|
||||
label:rv.workspaceVO?.positionEnum?.value,
|
||||
value:rv.workspaceVO?.positionEnum?.name
|
||||
},
|
||||
workspaceId:rv.workspaceVO?.id,
|
||||
positionList:[],
|
||||
publishData:{
|
||||
id:rv.portfolioDTO?.id?rv.portfolioDTO?.id:'',
|
||||
|
||||
@@ -107,6 +107,7 @@ export default defineComponent({
|
||||
value:rv.workspaceVO.positionEnum.name
|
||||
},
|
||||
positionList:[],
|
||||
workspaceId:rv.workspaceVO?.id,
|
||||
publishData:{
|
||||
id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
|
||||
portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',
|
||||
|
||||
@@ -196,6 +196,7 @@ export default defineComponent({
|
||||
styleId:data.show.style?data.selectObject.styleId:null,
|
||||
id:data.selectObject.id,
|
||||
workspace:{
|
||||
id:data.selectObject.workspaceId,
|
||||
sex:data.selectObject.sex,
|
||||
// sex:data.show.gender?data.selectObject.sex:null,
|
||||
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
||||
@@ -230,6 +231,7 @@ export default defineComponent({
|
||||
label:rv.workspaceVO?.positionEnum?.value,
|
||||
value:rv.workspaceVO?.positionEnum?.name
|
||||
},
|
||||
workspaceId:rv.workspaceVO?.id,
|
||||
positionList:[],
|
||||
publishData:{
|
||||
id:rv.portfolioDTO?.id?rv.portfolioDTO?.id:'',
|
||||
|
||||
@@ -83,6 +83,7 @@
|
||||
<download ref="download"></download>
|
||||
</div>
|
||||
<collection ref="collection" :isNext="false"></collection>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -234,7 +235,6 @@ export default defineComponent({
|
||||
|
||||
const openScaleImage = ()=>{
|
||||
let scaleImage:any = dataDom.scaleImage
|
||||
scaleImage.isLike = false
|
||||
scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
|
||||
}
|
||||
const setPrint = async (item:any)=>{
|
||||
@@ -468,6 +468,7 @@ export default defineComponent({
|
||||
top: 2rem;
|
||||
> i{
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
img{
|
||||
|
||||
@@ -482,6 +482,7 @@ export default defineComponent({
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
speed.speedState = false
|
||||
document.removeEventListener('click',openSpeed)
|
||||
}
|
||||
const setUploadDelete = (item:any,index:any)=>{
|
||||
let value = {
|
||||
|
||||
@@ -801,6 +801,7 @@ export default defineComponent({
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
speed.speedState = false
|
||||
document.removeEventListener('click',openSpeed)
|
||||
}
|
||||
return {
|
||||
upload,
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<div class="canvasBox" ref="canvasBox">
|
||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||
@canvasInit="canvasInit"
|
||||
:clothing-image-opts="{
|
||||
imageMode:'contains',
|
||||
}"
|
||||
|
||||
ref="editCanvas"></editCanvas>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
|
||||
@@ -56,11 +54,16 @@ export default defineComponent({
|
||||
data.canvasLoad = true
|
||||
}
|
||||
const canvasLoadAddImg = (url,id)=>{
|
||||
dataDom.editCanvas.addImageToLayer(url,{layerId:id,undoable:false})
|
||||
console.log(url,{layerId:id,undoable:false})
|
||||
dataDom.editCanvas.layers[0].id
|
||||
dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas,imageMode:'contains',undoable:false})
|
||||
}
|
||||
const canvasInit = (value)=>{
|
||||
// return
|
||||
canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
|
||||
console.log(value,123123)
|
||||
setTimeout(()=>{
|
||||
canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
|
||||
},1000)
|
||||
}
|
||||
const getCanvasData = ()=>{
|
||||
|
||||
|
||||
172
src/component/modules/selectMenu.vue
Normal file
172
src/component/modules/selectMenu.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent,watch, h, defineProps ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||||
import { message,Modal } from "ant-design-vue";
|
||||
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
|
||||
// import domTurnImg from '@/tool/domTurnImg'
|
||||
import { useI18n } from "vue-i18n";
|
||||
const props = defineProps({
|
||||
selectList:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
isBtnOpen:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
select:{
|
||||
type: [String,Boolean,Number,],
|
||||
default: ''
|
||||
},
|
||||
style:{
|
||||
type: Object,
|
||||
default:()=>{}
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:select','changeSelect','bentClick','change']);
|
||||
const selectMenu = reactive({
|
||||
speedState: false
|
||||
})
|
||||
|
||||
const openSpeed = (event?: MouseEvent) => {
|
||||
event?.stopPropagation()
|
||||
selectMenu.speedState = !selectMenu.speedState
|
||||
if(selectMenu.speedState){
|
||||
document.addEventListener('click',openSpeed)
|
||||
}else{
|
||||
document.removeEventListener('click',openSpeed)
|
||||
}
|
||||
}
|
||||
const setSpeed = (item: any) => {
|
||||
selectMenu.speedState = false
|
||||
emit('update:select', item.value)
|
||||
emit('change')
|
||||
document.removeEventListener('click', openSpeed)
|
||||
}
|
||||
const openEditTools = ()=>{
|
||||
emit('bentClick')
|
||||
}
|
||||
// 组件卸载时移除事件监听
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click',openSpeed)
|
||||
})
|
||||
|
||||
// 暴露给模板的响应式属性
|
||||
const { speedState } = toRefs(selectMenu)
|
||||
|
||||
defineExpose({})
|
||||
</script>
|
||||
<template>
|
||||
<div class="selectMenu white">
|
||||
<div class="btnBox" :style="style">
|
||||
<div class="" v-if="isBtnOpen" @click.stop="openSpeed" style="margin-left: 1rem;">
|
||||
<slot name="btnText">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="" v-else @click.stop="openEditTools()" style="margin-left: 1rem;">
|
||||
<slot name="btnText">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="content" :class="{active:isBtnOpen}" v-show="speedState">
|
||||
<div v-for="item in selectList" :key="item.value" :class="{active:item.value == select}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" >
|
||||
.selectMenu{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btnBox{
|
||||
color: #fff;
|
||||
background-color: #000000;
|
||||
cursor: pointer;
|
||||
zoom: 1;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
box-sizing: content-box;
|
||||
justify-content: center;
|
||||
padding: 0 2rem;
|
||||
line-height: 5.4rem;
|
||||
height: 5.4rem;
|
||||
border-radius: 4rem;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
&.white{
|
||||
.btnBox{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.fi-bs-magic-wand{
|
||||
margin-right:1rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
width: 4rem;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
&.fi-br-loading{
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
&.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.forbidden{
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-xiala{
|
||||
margin-left: 1rem;
|
||||
transition: all .3s;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.content{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
// width: calc(100% - 2rem);
|
||||
width: min-content;
|
||||
min-width: 8rem;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem* 1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
margin-top: .2rem;
|
||||
&.active{
|
||||
right: 2rem;
|
||||
}
|
||||
left: auto;
|
||||
>div{
|
||||
background: #cccccc;
|
||||
line-height: 2;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
padding: .4rem 1.2rem;
|
||||
&.active{
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
>div:hover{
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -140,6 +140,7 @@ export default {
|
||||
Payment:'付款',
|
||||
PurchasePoints:'购买',
|
||||
paymentmethod:'请选择付款方式',
|
||||
policy:'继续注册账号即表示您同意我们的使用条款与服务协议。',
|
||||
policy1:'我承认我已阅读并同意',
|
||||
policy2:'条款和条件',
|
||||
policy3:'(包括服务范围)及',
|
||||
@@ -557,6 +558,7 @@ export default {
|
||||
},
|
||||
DesignDetailAlter:{
|
||||
current:'当前使用',
|
||||
inProject:'项目使用',
|
||||
Upload:'上传',
|
||||
Library:'收藏',
|
||||
inputContent1:'输入名字进行搜索',
|
||||
@@ -779,6 +781,25 @@ export default {
|
||||
HKDYear:'HKD / 年',
|
||||
automatically:'是否自动续费',
|
||||
activity1:'限时优惠，仅限今日！',
|
||||
Strengths:'我们的优势',
|
||||
StrengthsTitle1:'无限的灵感创意',
|
||||
StrengthsTitle1_1:'',
|
||||
StrengthsInfo1:'灵感生成只需几分钟',
|
||||
StrengthsInfo1_1:'',
|
||||
StrengthsTitle2:'可持续且具成本效',
|
||||
StrengthsTitle2_1:'',
|
||||
StrengthsInfo2:'精简流程，减少浪费',
|
||||
StrengthsInfo2_1:'',
|
||||
StrengthsTitle3:'适用于所有级别的群体',
|
||||
StrengthsTitle3_1:'',
|
||||
StrengthsInfo3:'易操作简便且功能强大，',
|
||||
StrengthsInfo3_1:'适合各级别的设计师使用',
|
||||
StrengthsInfo3_2:'',
|
||||
StrengthsTitle4:'从灵感到成衣',
|
||||
StrengthsTitle4_1:'',
|
||||
StrengthsInfo4:'AiDA 全程助力',
|
||||
StrengthsInfo4_1:'你的时尚设计旅程',
|
||||
unlimited:'立即订阅!',
|
||||
},
|
||||
cancelRenewal:{
|
||||
cancelling:'您取消AiDA的原因是什么？',
|
||||
|
||||
@@ -140,6 +140,7 @@ export default {
|
||||
Payment:'Payment',
|
||||
PurchasePoints:'Purchase points',
|
||||
paymentmethod:'select a payment method',
|
||||
policy:'By continuing an account, you agree to our Terms & Conditions',
|
||||
policy1:'I acknowledge that I have read, understand, and agree with the ',
|
||||
policy2:'Terms and Conditions',
|
||||
policy3:' (including the Scope of service) and the ',
|
||||
@@ -557,6 +558,7 @@ export default {
|
||||
},
|
||||
DesignDetailAlter:{
|
||||
current:'Selected',
|
||||
inProject:'In-Project',
|
||||
Upload:'Upload',
|
||||
Library:'Library',
|
||||
inputContent1:'Please input',
|
||||
@@ -779,6 +781,25 @@ export default {
|
||||
HKDYear:'HKD / Year',
|
||||
automatically:'Whether to renew automatically',
|
||||
activity1:'Limited time offer, today only!',
|
||||
Strengths:'Our Core Strengths',
|
||||
StrengthsTitle1:'Unlimited',
|
||||
StrengthsTitle1_1:'creativity',
|
||||
StrengthsInfo1:'Generate ideas in minutes,',
|
||||
StrengthsInfo1_1:'not hours.',
|
||||
StrengthsTitle2:'Sustainable &',
|
||||
StrengthsTitle2_1:'Cost-efficient',
|
||||
StrengthsInfo2:'Streamline your process,',
|
||||
StrengthsInfo2_1:'reduce waste.',
|
||||
StrengthsTitle3:'AI design tool',
|
||||
StrengthsTitle3_1:'for all levels',
|
||||
StrengthsInfo3:'Easy to use with powerful AI features',
|
||||
StrengthsInfo3_1:'to make design accessible and',
|
||||
StrengthsInfo3_2:'efficient for everyone.',
|
||||
StrengthsTitle4:'From Idea',
|
||||
StrengthsTitle4_1:'to Garment',
|
||||
StrengthsInfo4:'Support your entire',
|
||||
StrengthsInfo4_1:'fashion design journey.',
|
||||
unlimited:'Subscribe Now!',
|
||||
},
|
||||
cancelRenewal:{
|
||||
cancelling:'What is your reason for cancelling AiDA?',
|
||||
|
||||
@@ -32,6 +32,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
userBrandDna:'',//用户品牌
|
||||
userBrandDnaImg:'',//用户品牌图片
|
||||
userBrandDnaName:'',//用户品牌名字
|
||||
workspaceId:-1,//worspaceId
|
||||
publishData:{
|
||||
id:'',
|
||||
portfolioDes:'',
|
||||
@@ -87,6 +88,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
userBrandDna:'',//用户品牌
|
||||
userBrandDnaImg:'',//用户品牌图片
|
||||
userBrandDnaName:'',//用户品牌名字
|
||||
workspaceId:-1,//worspaceId
|
||||
publishData:{
|
||||
id:'',
|
||||
portfolioDes:'',
|
||||
|
||||
@@ -125,7 +125,7 @@
|
||||
<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;">Upgrade to Pro</div>
|
||||
<div v-if="userDetail.systemUser != 0 || userDetail.systemUser == 3" @click="openUpgradeToPro" class="gallery_btn gallery_btn_radius" style="width: 100%;">Upgrade to Pro</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -751,6 +751,7 @@ export default defineComponent({
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
speed.speedState = false
|
||||
document.removeEventListener('click',openSpeed)
|
||||
}
|
||||
watch(()=>scene,(newVal,oldVal)=>{
|
||||
console.log(newVal)
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div class="loginPage">
|
||||
<div class="left">
|
||||
<!-- :isScroll="!isMask" -->
|
||||
<Works :autoscroll="true" :position="'login'"></Works>
|
||||
<div class="imgBox">
|
||||
<img src="@/assets/images/homePage/loginLeftImg1.png" alt="">
|
||||
<img src="@/assets/images/homePage/loginLeftImg2.png" alt="">
|
||||
</div>
|
||||
<!-- <Works :autoscroll="true" :position="'login'"></Works>
|
||||
<div class="mask" v-show="isMask" @click="() => (isMask = !isMask)">
|
||||
<div class="content">
|
||||
<div class="userNum">
|
||||
@@ -11,28 +14,27 @@
|
||||
</div>
|
||||
<div class="info">AI that millions trust, every single day</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="Text" v-show="!loginType">
|
||||
<div class="title">Join millions <br />using AI every day</div>
|
||||
<div class="title">Welcome to AiDA <br />Bloom Your Creativity</div>
|
||||
<div class="info">
|
||||
Enjoy secure, clutter-free AI support designed to help you grow, create, and
|
||||
succeed
|
||||
AiDA, a first-to-market technology that empowers fashion designers, based on their creative inspirations, to work with AI to create original designs.
|
||||
</div>
|
||||
</div>
|
||||
<div class="loginBox">
|
||||
<div class="selectType" v-show="!loginType">
|
||||
<div class="text">Continue as:</div>
|
||||
<div class="text">Continue with one of these：</div>
|
||||
<div class="typeList">
|
||||
<div class="gallery_btn white" @click="setLoginType('personal')">
|
||||
Personal User
|
||||
Individual
|
||||
</div>
|
||||
<div class="gallery_btn white" @click="setLoginType('school')">
|
||||
School/Education
|
||||
Enterprise
|
||||
</div>
|
||||
<div class="gallery_btn white" @click="setLoginType('enterprise')">
|
||||
Business
|
||||
Academic
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,6 +121,19 @@ export default defineComponent({
|
||||
width: 60%;
|
||||
background: #f7f8fa;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
> .imgBox{
|
||||
width: 70%;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> .mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user