This commit is contained in:
X1627315083
2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions

View File

@@ -1,10 +1,10 @@
<template>
<div class="color">
<div class="detailText">Palette</div>
<div class="detailText">Current color</div>
<div class="pallet">
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
</div>
<div class="detailText">New color</div>
<div class="detailText">Color pelette</div>
<div class="colorBox">
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
@@ -13,7 +13,7 @@
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
</div>
</div>
<div class="detailText">Upload Image</div>
<div class="detailText">Choose color from image</div>
<div class="uploadImage">
<upload @selectUplpadColor="selectUplpadColor"></upload>
</div>
@@ -246,18 +246,19 @@ export default defineComponent({
flex-direction: column;
overflow-y: auto;
> .detailText{
margin-bottom: 1rem;
margin-bottom: .5rem;
}
> .pallet{
margin-bottom: 4.5rem;
margin-bottom: 2rem;
}
> .colorBox{
margin-bottom: 3rem;
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> .colorBoxItem{
margin: 1rem 0;
// margin: 1rem 0;
margin-bottom: 1rem;
width: 32%;
height: 11rem;
border-radius: .5rem;

View File

@@ -272,7 +272,7 @@ export default defineComponent({
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {

View File

@@ -27,7 +27,7 @@
accept=".jpg,.png,.jpeg,.bmp"
>
<div class="upload_tip_block">
<i class="fi fi-rr-picture"></i>
<i class="fi fi-br-upload"></i>
</div>
</a-upload>
</div>

View File

@@ -2,7 +2,7 @@
<div class="detailLeft">
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
<print v-show="currentDetailType == 'print'"></print>
<color v-show="currentDetailType == 'color'"></color>
<color v-if="currentDetailType == 'color'"></color>
<element v-show="currentDetailType == 'element'"></element>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<div class="libraryList">
<div class="generalModel_state">
<div class="generalModel_state_item">
<div class="generalModel_state" v-if="type != 'element'">
<div class="generalModel_state_item" style="width: 40%;">
<a-select
v-model:value="designType"
:options="designTypeList"
@@ -18,8 +18,10 @@
></template>
</a-select>
</div>
<div class="generalModel_state_item">
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="generalModel_state_item" style="width: 35%;">
<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="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
@@ -84,6 +86,7 @@ export default defineComponent({
currentPage:1,
})
const init = ()=>{
console.log(123)
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0].value
getLibraryList()
@@ -207,13 +210,15 @@ export default defineComponent({
flex-direction: column;
> .generalModel_state{
width: 100%;
display: flex;
justify-content: space-between;
> .generalModel_state_item{
width: 100%;
margin: 0;
position: relative;
> .search_icon_block{
position: absolute;
right: 5px;
// position: absolute;
// right: 5px;
width: calc(6rem - 4px);
height: calc(6rem - 4px);
color: #fff;
@@ -227,7 +232,7 @@ export default defineComponent({
}
}
> .generalModel_state_item:last-child{
margin-top: 2rem;
// margin-top: 2rem;
}
}
> .libraryList_box{

View File

@@ -1,8 +1,7 @@
<template>
<div class="selectList">
<div class="switch_type_list">
<div class="switch_type_list" v-if="type != 'element'">
<div
v-if="type != 'element'"
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
@@ -28,7 +27,7 @@
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
@@ -39,7 +38,7 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
@@ -78,7 +77,7 @@ export default defineComponent({
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle: props.type == 'element'?'upload':'current',
selectTitle: props.type == 'element'?'library':'current',
printList:[]
})
const getDetailListDom = reactive({
@@ -97,7 +96,11 @@ export default defineComponent({
const selectImgItem = (data:any)=>{
emit('selectImgItem',data)
}
onMounted(()=>{
if(props.type == 'element'){
openLibrary()
}
})
return{
...toRefs(detailData),
...toRefs(getDetailListDom),