commit
This commit is contained in:
WangXiaoDong
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- designDetailShow -->
|
||||
<a-modal class="design_detail_modal_component"
|
||||
v-model:visible="designDetailShow"
|
||||
:footer="null"
|
||||
@@ -7,49 +8,85 @@
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
|
||||
>
|
||||
<template #closeIcon>
|
||||
<!-- <template #closeIcon>
|
||||
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
|
||||
</template>
|
||||
</template> -->
|
||||
<div class="design_title_text">
|
||||
<div>Details</div>
|
||||
<div class="design_title_text_intro">edit the details of your design</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
|
||||
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
|
||||
<!-- <div class="design_centent">
|
||||
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
|
||||
<div class="detail_modal_body_left" @click="showDesignImgDetail()">
|
||||
|
||||
<div class="detail_modal_body_img" @click="showDesignImgDetail()">
|
||||
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
|
||||
<img class="detial_img" :src="designItemDetail.designItemUrl">
|
||||
<div>
|
||||
<!-- 全屏 -->
|
||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||
<!-- 编辑 -->
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
<!-- 层 -->
|
||||
<i class="fi fi-rr-copy"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail_modal_body_right">
|
||||
<div class="detail_modal_body_category">
|
||||
<div class="detail_modal_right_top scroll_style">
|
||||
<div class="clothes_detail_item">
|
||||
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
|
||||
<div class="clothes_item_content">
|
||||
<Draggable :list="designItemDetail.clothes" item-key="id" :animation="100">
|
||||
<template #item="{ element,index }">
|
||||
<div class="clothes_item_img_block" @click="clothesDetail(element,index)">
|
||||
<img class="clothes_item_img" :src="element.path">
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
|
||||
</div>
|
||||
<div class="clothes_detail_item clothes_detail_item_apparel">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Apparel</div>
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
</div>
|
||||
<img src="" alt="" class="centent" @click="openCurrent(1)">
|
||||
</div>
|
||||
<div class="clothes_detail_item clothes_detail_item_print">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Print</div>
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
</div>
|
||||
<i class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
|
||||
</div>
|
||||
<div class="clothes_detail_item clothes_detail_item_color">
|
||||
<div class="clothes_item_header">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<div>Current Print</div>
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
</div>
|
||||
<div class="img_block_item centent" @click="openCurrent(3)">
|
||||
<div class="color_item">
|
||||
<div class="color_content" :style="{background:`#6c6cac`}"></div>
|
||||
<div class="color_content_body">
|
||||
<div class="color_des">222</div>
|
||||
<div class="color_des">111</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clothes_detail_item" v-show="designItemDetail.others && designItemDetail.others.length">
|
||||
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Others</div>
|
||||
<div class="clothes_item_content others_clothes_item_content">
|
||||
<div class="clothes_item_img_block" v-for="(element,index) in designItemDetail.others" :key="element.path" @click="othersDetail(element,index)">
|
||||
<img class="clothes_item_img" :src="element.path">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="detail_modal_right_bottom">
|
||||
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
|
||||
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
|
||||
|
||||
</div>
|
||||
<div class="design_detail_perview" v-show="designShowPrview == 2">
|
||||
<div class="design_detail_perview_content" >
|
||||
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
|
||||
@@ -83,6 +120,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref } from 'vue'
|
||||
import ElementReplace from '@/component/Detail/ElementReplace.vue'
|
||||
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -92,6 +130,7 @@ export default defineComponent({
|
||||
ElementReplace,
|
||||
AccessoryReplace,
|
||||
Draggable,
|
||||
DesignDetailAlter
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@@ -101,23 +140,50 @@ export default defineComponent({
|
||||
index:0,
|
||||
collectionList:[],
|
||||
type:'',
|
||||
|
||||
})//父组件传过来的数据
|
||||
return{
|
||||
designItemDetail,
|
||||
store,
|
||||
parentData
|
||||
parentData,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
loadingShow:false,
|
||||
designDetailShow:false,
|
||||
designDetailShow:true,
|
||||
designShowPrview:1, //展示图片预览步骤
|
||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
||||
imgListr:[
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
|
||||
id: 4,
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openCurrent(num: Number) {
|
||||
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
|
||||
DesignDetailAlter.init(num)
|
||||
|
||||
if(num ==2 ){
|
||||
}
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
if(this.designShowPrview == 1){
|
||||
this.designDetailShow = false
|
||||
@@ -127,7 +193,7 @@ export default defineComponent({
|
||||
this.designShowPrview = 1
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
showDesignDetailModal(data:any){
|
||||
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
|
||||
this.parentData = data
|
||||
@@ -273,7 +339,35 @@ export default defineComponent({
|
||||
<style lang="less">
|
||||
.design_detail_modal_component{
|
||||
color: #000;
|
||||
|
||||
max-width: 1150px ;
|
||||
.design_title_text{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
.design_title_text_intro{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-content{
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.ant-modal-header{
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: 4rem 5rem 0rem!important;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: 65rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
@@ -286,26 +380,29 @@ export default defineComponent({
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
height: 80vh;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.design_closeIcon{
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
.fi-rr-cross-small::before{
|
||||
padding: .2rem;
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.turn_button{
|
||||
width: 3.6rem;
|
||||
@@ -335,78 +432,111 @@ export default defineComponent({
|
||||
|
||||
|
||||
.design_detail_modal_body{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem 1rem 2.5rem;
|
||||
// padding: 1.5rem 1rem 2.5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.detail_modal_body_left{
|
||||
width: 43.3rem;
|
||||
.detail_modal_body_img{
|
||||
// width: 43.3rem;
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
.detial_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
div{
|
||||
i{
|
||||
position: absolute;
|
||||
&.fi-bs-expand-arrows-alt{
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.fi-rr-edit{
|
||||
left: 0;
|
||||
top: 20px;
|
||||
}
|
||||
&.fi-rr-copy{
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail_modal_body_right{
|
||||
width: calc(100% - 44rem);
|
||||
.detail_modal_body_category{
|
||||
width: 17%;
|
||||
height: 100%;
|
||||
|
||||
.detail_modal_right_top{
|
||||
width: 100%;
|
||||
height: calc(100% - 3.9rem);
|
||||
height: calc(100% - 3.9rem);
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
|
||||
.clothes_detail_item{
|
||||
padding-left: 1.5rem;
|
||||
.centent{
|
||||
cursor: pointer;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.clothes_item_header{
|
||||
height: 6.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
// height: 6.4rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
color: #000000;
|
||||
|
||||
justify-content: space-between;
|
||||
.icon-dangqianweizhi{
|
||||
font-size: 1.8rem;
|
||||
color: #000000;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
i{
|
||||
font-size: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.clothes_item_content{
|
||||
padding:0 0.5rem 2.3rem;
|
||||
border-bottom: 0.1rem solid #F2F3FB;
|
||||
|
||||
&.others_clothes_item_content{
|
||||
border-bottom:none
|
||||
}
|
||||
|
||||
.clothes_item_img_block{
|
||||
width: 20.5rem;
|
||||
height: 20.5rem;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 21.3rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.clothes_item_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.color_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ebe9e9;
|
||||
.color_content{
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.color_content_body{
|
||||
.color_des{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&.clothes_detail_item_print{
|
||||
.fi-rr-picture{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
zoom: 3;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -439,6 +569,60 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail_modal_body_select{
|
||||
width: 20%;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: space-around;
|
||||
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
// margin-right: 2.2rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.design_detail_perview{
|
||||
@@ -526,4 +710,4 @@ export default defineComponent({
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user