commit
This commit is contained in:
WangXiaoDong
952
src/component/Detail/DesignDetailAlter.vue
Normal file
952
src/component/Detail/DesignDetailAlter.vue
Normal file
@@ -0,0 +1,952 @@
|
||||
<template>
|
||||
<div class="detail_modal_body_select">
|
||||
<div v-show="type_ == 1 && select == true">
|
||||
<div class="detail_uploadLibrary">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-show="openClick == 1">
|
||||
<div v-show="openClick == 1" class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="moodboarList.length != 8"
|
||||
>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
:maxCount="8 - moodboarList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show=" moodboarList.length != 8"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-show="openClick == 2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-show="type_ == 2 && select == true">
|
||||
1111111111111111111111111
|
||||
</div>
|
||||
<div v-show="type_ == 3 && select == true">
|
||||
<div class="detail_color">
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Palette</span>
|
||||
</div>
|
||||
<div class="color_setting_block">
|
||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
|
||||
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
|
||||
<div class="color_block">
|
||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||
<div v-show="colorBlockHex">
|
||||
HEX
|
||||
</div>
|
||||
<div v-show="!colorBlockHex">
|
||||
RGBA
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_right">
|
||||
<div class="color_HEX_block" v-show="colorBlockHex">
|
||||
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
||||
<div>
|
||||
{{getSelectRGB(selectColor).hex}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_rgb_block" v-show="!colorBlockHex">
|
||||
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
||||
<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
|
||||
<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
|
||||
<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right_content_line right_content_line_upload">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Auto Recognize</span>
|
||||
</div>
|
||||
<div class="upload_centetn">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file) in colorFileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file.status !== 'done'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
||||
<div class="delete_file_block" @click="colorDeleteFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
v-show="colorFileList.length < 1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload_color">
|
||||
<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
|
||||
<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
|
||||
</div>
|
||||
<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
|
||||
<img src="#" :title="pantongNameList[index]">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Color Code</span>
|
||||
</div>
|
||||
<div class="get_color_block">
|
||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||
<div class="get_color_button" @click="getTcxColor()">
|
||||
<span class="icon iconfont icon-huoquduixiang"></span>
|
||||
<span class="get_color_des"></span>
|
||||
</div>
|
||||
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
|
||||
<img src="#" :title="pantongName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="detail_modal_body_result"></div> -->
|
||||
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent,computed,ref, h ,nextTick } 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'
|
||||
import DesignDetailEnd from './DesignDetailEnd.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
Draggable,Sketch,DesignDetailEnd
|
||||
},
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
let type_ = ref(1);
|
||||
let select = ref(false);
|
||||
let parentData = ref({
|
||||
})//父组件传过来的数据
|
||||
let openClick = ref(1);
|
||||
|
||||
|
||||
//颜色
|
||||
let selectColor = ref({
|
||||
rgba:{},
|
||||
}) //顔色选择器默认颜色
|
||||
let selectColorList = ref({
|
||||
})
|
||||
return{
|
||||
store,
|
||||
parentData,
|
||||
openClick,
|
||||
type_,
|
||||
select,
|
||||
selectColor,
|
||||
selectColorList,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal,oldVal){
|
||||
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
||||
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
|
||||
// console.log(DesignDetailEnd.selectIndex);
|
||||
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
|
||||
return (selectColor)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
||||
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
|
||||
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
|
||||
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
|
||||
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
designShowPrview:1, //展示图片预览步骤
|
||||
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
|
||||
|
||||
//颜色
|
||||
reviewColor:{}, //预览的颜色
|
||||
colorPickerVisible: true,
|
||||
colorBlockHex:true,
|
||||
getColorBg:false,
|
||||
pantongName:'',//潘通值
|
||||
pantongNameList:[],
|
||||
tcxColor:'',
|
||||
selectColorList: [],
|
||||
colorFileList: [],
|
||||
selectIndex:0,
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//点击判断
|
||||
init(num){
|
||||
this.type_ = num
|
||||
this.select = true
|
||||
this.selectColor = {
|
||||
rgba:{
|
||||
r:108,
|
||||
g:108,
|
||||
b:172,
|
||||
a:1
|
||||
},
|
||||
hex:'#6c6cac'
|
||||
}
|
||||
let DesignDetailEnd = this.$refs.DesignDetailEnd
|
||||
DesignDetailEnd.init(num)
|
||||
},
|
||||
//衣服
|
||||
open(num) {
|
||||
this.openClick = num;
|
||||
if(num ==2 ){
|
||||
}
|
||||
},
|
||||
|
||||
//印花
|
||||
|
||||
|
||||
|
||||
//颜色
|
||||
beforeUpload(file){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
//清除当前的颜色
|
||||
clearCurrentColor(){
|
||||
this.selectColor = {
|
||||
rgba:{}
|
||||
}
|
||||
this.colorFileList = []
|
||||
this.pantongName = ''
|
||||
this.pantongNameList = []
|
||||
this.tcxColor = ''
|
||||
},
|
||||
colorDeleteFile(index){
|
||||
this.colorFileList.splice(index, 1)
|
||||
this.selectColorList = []
|
||||
},
|
||||
setUplpadColor(color){
|
||||
this.selectColor = color
|
||||
},
|
||||
rgbaToHex(rgba) { // rgba转16进制
|
||||
let hex = '#';
|
||||
for (const i of rgba) {
|
||||
hex += Number(i).toString(16).padStart(2, '0');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
//通过HSV获取颜色
|
||||
getHsvColor(color){
|
||||
// let hsv = rgbToHsv(color)
|
||||
this.pantongName = ''
|
||||
// {params:{id:3}}
|
||||
// console.log(color);
|
||||
let colorList = []
|
||||
color.forEach((item,index)=>{
|
||||
let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
|
||||
colorList.push(arr)
|
||||
})
|
||||
|
||||
let hsvList = []
|
||||
colorList.forEach((item)=>{
|
||||
let hsv = rgbToHsv(item)
|
||||
if(hsvList.length == 0){
|
||||
}else{
|
||||
if(hsvList[0].h+5){
|
||||
}
|
||||
}
|
||||
|
||||
let obj = {
|
||||
h:Number(hsv[0]),
|
||||
s:Number(hsv[1]),
|
||||
v:Number(hsv[2]),
|
||||
}
|
||||
hsvList.push(obj)
|
||||
})
|
||||
// let data = []
|
||||
// Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
|
||||
// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
|
||||
// if(rv){
|
||||
// this.pantongName = rv.name
|
||||
// console.log(rv);
|
||||
// }
|
||||
// })
|
||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
|
||||
(rv) => {
|
||||
if(rv){
|
||||
rv.forEach(element => {
|
||||
this.pantongNameList.push(element.name)
|
||||
});
|
||||
console.log(rv);
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
//通过tcx获取颜色
|
||||
getTcxColor(){
|
||||
if(!this.tcxColor){
|
||||
return
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
||||
if(rv && rv.name){
|
||||
// let hex = this.rgbaToHex([color.r,color.g,color.b])
|
||||
let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
|
||||
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
|
||||
this.selectColor = this.reviewColor
|
||||
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
||||
this.pantongName = rv.name
|
||||
let colorList =this.colorList.filter((v) => Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
this.getColorBg = true
|
||||
}else{
|
||||
message.error("Can't find the TCX color")
|
||||
}
|
||||
})
|
||||
},
|
||||
setColorboardList(colorList){
|
||||
let newColorList = colorList.map((v)=>{
|
||||
let data = {
|
||||
id:'',
|
||||
name:'',
|
||||
rgbValue:v
|
||||
}
|
||||
return data
|
||||
})
|
||||
// this.store.commit('setColorboardList',newColorList)
|
||||
|
||||
},
|
||||
fileUploadChange(data){
|
||||
let file = data.file
|
||||
let fileData = file.originFileObj
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data_new = e.target.result;
|
||||
}
|
||||
file.imgUrl = data_new
|
||||
file.status = 'done'
|
||||
this.colorFileList.push(file)
|
||||
|
||||
setTimeout(()=>{
|
||||
const colorThief = new ColorThief();
|
||||
let colorImage = this.$refs.colorImage
|
||||
let domImg = colorImage[0];
|
||||
let color = colorThief.getColor(domImg)
|
||||
let colorHex = this.rgbaToHex(color)
|
||||
let selectColorList = [];
|
||||
let selectColor = colorThief.getPalette(domImg,7)
|
||||
selectColor = selectColor.join('&')
|
||||
selectColor = selectColor.split("&")
|
||||
let colorLi = []
|
||||
new Set(selectColor).forEach((item)=>{
|
||||
colorLi.push(item.split(","))
|
||||
})
|
||||
colorLi.forEach(element => {
|
||||
let colorLiHex = this.rgbaToHex(element)
|
||||
selectColorList.push(
|
||||
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
||||
)
|
||||
});
|
||||
this.selectColorList = selectColorList
|
||||
this.getHsvColor(selectColorList)
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||
},100)
|
||||
};
|
||||
// 转化为base64S
|
||||
reader.readAsDataURL(fileData)
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
.detail_modal_body_select{
|
||||
width: 20%;
|
||||
>div{
|
||||
height: 100%;
|
||||
}
|
||||
i{
|
||||
font-size: 1.8rem;
|
||||
display: block;
|
||||
}
|
||||
.detail_uploadLibrary{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.detail_color{
|
||||
// height: calc(100% - 5.4rem);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.right_content_line{
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
.upload_right_header{
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
&.upload_right_header:nth-child(1){
|
||||
margin-top: 0;
|
||||
}
|
||||
span{
|
||||
margin-left: 1rem;
|
||||
font-size: 1.8rem;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.upload_centetn{
|
||||
// overflow-x: hidden;
|
||||
}
|
||||
.upload_centetn::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.color_review_block{
|
||||
margin-right: 4rem;
|
||||
|
||||
.color_review_content{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
}
|
||||
|
||||
.pantong_name{
|
||||
margin-top: 1rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.clear_button{
|
||||
padding: 0 2.8rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
background: #EFEEFF;
|
||||
font-size: 1.2rem;
|
||||
font-family: Roboto;
|
||||
color: #343579;
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
// margin: 0 2rem 2rem 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
// width: 16.5rem;
|
||||
// height: 16.5rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
.upload_color{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
height: 2rem;
|
||||
.upload_color_item{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
.upload_color_item_bg{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
img{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
// .upload_color_item_text{
|
||||
// font-size: 12px;
|
||||
// line-height: 1;
|
||||
// text-align: center;
|
||||
// }
|
||||
div{
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_setting_block{
|
||||
// width: 16.5rem;
|
||||
width: 18rem;
|
||||
margin: auto;
|
||||
background: #f0eaee;
|
||||
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
// box-shadow: 2px 2px 8px #000;
|
||||
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
|
||||
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
|
||||
.sketch_color{
|
||||
box-shadow: none;
|
||||
width: 18rem;
|
||||
background: rgba(0,0,0,0);
|
||||
padding-top: 1rem !important;
|
||||
max-width: 170px;
|
||||
padding: 0;
|
||||
.vc-sketch{
|
||||
}
|
||||
.vc-sketch-saturation-wrap{
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
max-height: 170px;
|
||||
max-width: 170px;
|
||||
margin: auto;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.vc-sketch-presets{
|
||||
display: none;
|
||||
}
|
||||
.vc-botton-container{
|
||||
display: none;
|
||||
}
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.vc-sketch-field{
|
||||
display: none;
|
||||
.vc-input__input{
|
||||
text-align: center;
|
||||
padding: .4rem 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.vc-sketch-color-wrap{
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 0 1px #ccc;
|
||||
.vc-sketch-active-color{
|
||||
}
|
||||
.vc-sketch-active-color{
|
||||
display: none;
|
||||
}
|
||||
.vc-checkerboard{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-sketch-color-wrap{
|
||||
background-image: url(@../../../../assets/images/homePage/dropper.png);
|
||||
background-size: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
// .vc-sketch-color-wrap{
|
||||
// display: none;
|
||||
// }
|
||||
.vc-sketch-controls{
|
||||
width: 90%;
|
||||
margin: .5rem auto;
|
||||
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
|
||||
.vc-hue{
|
||||
border-radius: 15px;
|
||||
}
|
||||
.vc-alpha{
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.vc-sketch-alpha-wrap{
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chrome_color{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sileder_color{
|
||||
margin-top:1.3rem;
|
||||
|
||||
.vc-slider-swatches{
|
||||
display:none
|
||||
}
|
||||
.vc-slider-hue-warp {
|
||||
width: 16.5rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 1.2rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-hue-picker{
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-0.7rem, -0.2rem);
|
||||
}
|
||||
}
|
||||
.vc-hue-pointer{
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color_block{
|
||||
// margin-top: 1rem;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// font-size: 1.6rem;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
padding-bottom: 5%;
|
||||
margin: 0.5rem auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.color_right{
|
||||
width: 11rem;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
.color_rgb_block{
|
||||
display: flex;
|
||||
.rgb_item{
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_left{
|
||||
cursor: pointer;
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
.color_right,.color_left{
|
||||
>div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.color_HEX_block,.color_rgb_block{
|
||||
padding: .2rem .5rem;
|
||||
box-shadow: inset 0 0 0 1px #ccc;
|
||||
border-radius: .4rem;
|
||||
justify-content: space-around;
|
||||
text-transform:uppercase;
|
||||
.color_block_bg{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
// margin-right: .5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.color_block_bg{
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.get_color_block{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.get_color_input{
|
||||
width: 15rem;
|
||||
height: 2.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
padding: 1rem 1.3rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.4rem;
|
||||
text-align: left;
|
||||
|
||||
&::placeholder {
|
||||
color: #B7B7B7;
|
||||
}
|
||||
}
|
||||
|
||||
.get_color_button{
|
||||
padding: 0 .2rem;
|
||||
height: 2.8rem;
|
||||
background: #EFEEFF;
|
||||
display: inline-block;
|
||||
line-height: 3rem;
|
||||
font-size: 1.2rem;
|
||||
color: #343579;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
.icon-huoquduixiang{
|
||||
margin-right: 0.5rem;
|
||||
font-size: 2rem;
|
||||
color:#343579;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.get_color_des{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.get_color_bg{
|
||||
width: 18rem;
|
||||
height: 18rem;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 1.5rem;
|
||||
img{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_item{
|
||||
margin-bottom: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.ant-upload-picture-card-wrapper{
|
||||
.ant-upload-list{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.ant-upload-select-picture-card{
|
||||
// margin: 0 2rem 2rem 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
i{
|
||||
zoom: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user