commit
This commit is contained in:
WangXiaoDong
301
src/component/Detail/DesignDetailEnd.vue
Normal file
301
src/component/Detail/DesignDetailEnd.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="detail_modal_body_result">
|
||||
|
||||
|
||||
<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
|
||||
<div class="upload_title result_apparel" v-show="type_ == 1">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Apparel</span>
|
||||
</div>
|
||||
<div v-show="type_ == 2" class="result_print">
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Print</span>
|
||||
</div>
|
||||
<div class="print_left">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>Placement</span>
|
||||
</div>
|
||||
<div class="print_right">
|
||||
<div class="habit_Overal_Single">
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !overalSingle }"
|
||||
>
|
||||
Overal
|
||||
</div>
|
||||
<a-switch v-model:checked="overalSingle" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: overalSingle }"
|
||||
>
|
||||
Single
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_System_Designer">
|
||||
<a-slider id="system_silder"
|
||||
v-model:value="systemDesignerPercentage"
|
||||
@afterChange="systemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
>
|
||||
</a-slider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result_apparel_print_img">
|
||||
<img v-show="type_==1" class="result_appare_img" src="" alt="">
|
||||
<img v-show="type_==2" class="result_print_img" src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="type_ == 2"></div>
|
||||
<div v-show="type_ == 3">
|
||||
<div class="result_color upload_title">
|
||||
<i class="color_edit fi fi-bs-comments"></i>
|
||||
<span>New Color</span>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
|
||||
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
|
||||
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
|
||||
</div>
|
||||
<div class="color_content_body">
|
||||
<div class="color_des">22</div>
|
||||
<div class="color_des">111</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent,computed,ref, h } from 'vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { Sketch} from '@ans1998/vue3-color'
|
||||
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
Draggable,Sketch,
|
||||
},
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
let type_ = ref(0);
|
||||
|
||||
|
||||
|
||||
//印花
|
||||
let overalSingle = ref()
|
||||
let systemDesignerPercentage = ref(30)
|
||||
|
||||
//颜色
|
||||
let colorList = ref([{},{},{},{},{},{},{},{}])
|
||||
return{
|
||||
overalSingle,
|
||||
systemDesignerPercentage,
|
||||
type_,
|
||||
colorList,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
//颜色
|
||||
selectIndex:0,//选中的文件索引
|
||||
getRGBA:{},
|
||||
selectColor:{},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//点击判断
|
||||
init(num){
|
||||
this.type_ = num
|
||||
this.colorList[this.selectIndex] = this.$parent.selectColor
|
||||
},
|
||||
|
||||
//印花
|
||||
systemDesigner(num) {
|
||||
console.log(num);
|
||||
},
|
||||
formatter(value) {
|
||||
return `${value}%`;
|
||||
},
|
||||
//颜色
|
||||
selectColorItem(index,color){
|
||||
let hex
|
||||
let parent = this.$parent
|
||||
if(color.rgba?.r){
|
||||
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
|
||||
}else{
|
||||
hex = '#FFFFFF'
|
||||
}
|
||||
this.selectIndex = index
|
||||
this.$parent.selectIndex = index
|
||||
this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
|
||||
this.$parent.tcxColor = ''
|
||||
this.$parent.pantongName = ''
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.detail_modal_body_result{
|
||||
width: 26%;
|
||||
i{
|
||||
font-size: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
.upload_title{
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
&.upload_title:nth-child(1){
|
||||
margin-top: 0;
|
||||
}
|
||||
span{
|
||||
margin-left: 1rem;
|
||||
font-size: 1.8rem;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
//模型和印花
|
||||
.result_apparel_print{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.result_apparel_print_img{
|
||||
flex: 1;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 35rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.result_print_img{
|
||||
transform: scale(.7);
|
||||
transform-origin: right top;
|
||||
}
|
||||
}
|
||||
}
|
||||
//印花
|
||||
.result_print{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.print_left{
|
||||
img{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.print_right{
|
||||
.habit_Overal_Single {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin: 2rem 0;
|
||||
transform: scale(.8);
|
||||
|
||||
// margin: 3rem 0;
|
||||
.habit_Overal_Single_text {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
&.active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
// font-weight: 900;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
:deep(.ant-switch) {
|
||||
margin: 0 1rem;
|
||||
background-color: #efefef;
|
||||
}
|
||||
:deep(.ant-switch-checked) {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
.habit_System_Designer {
|
||||
margin-top: 4rem;
|
||||
transform: scale(.8);
|
||||
|
||||
:deep(.ant-slider-track),
|
||||
:deep(.ant-slider-rail) {
|
||||
height: .6rem;
|
||||
background-color: #e1e1e1;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
|
||||
:deep(.ant-slider-handle) {
|
||||
background-color: #2d2e76 !important;
|
||||
border: none !important;
|
||||
}
|
||||
:deep(.ant-slider-handle:hover) {
|
||||
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
||||
}
|
||||
|
||||
// .habit_System_Designer_text_max {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// .habit_System_Designer_text {
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
//颜色
|
||||
.modal_img{
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 2rem;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
margin: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
.color_content{
|
||||
width: 7rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.color_content_body{
|
||||
.color_des{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.select_upload_color{
|
||||
border: 0.1rem solid #343579;
|
||||
}
|
||||
.upload_color{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user