aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-27-dist

Browse Source
This commit is contained in:
X1627315083
2023-11-27 16:36:09 +08:00
parent 6e39ebf5ed
commit d978b75286
7 changed files with 172 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/component/HomePage/ColorboardUpload.vue
View File

@@ -668,166 +668,171 @@ export default defineComponent({
}
}
}
.color_setting_block{
// width: 16.5rem;
width: auto;
background: #f0eaee;
.color_setting_block{
width: 17.5rem;
margin: auto;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
border-radius: 1rem;
overflow: hidden;
// box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
.chrome_color{
width: 16.5rem;
// height: 16.5rem;
overflow: hidden;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
.vc-chrome-saturation-wrap{
height: 100%;
width: 16rem;
height: 16rem;
max-height: 17rem;
max-width: 17rem;
margin: .7rem auto;
padding-bottom: 0;
}
.vc-chrome-body{
padding: 0;
width: 90%;
margin: 0.5rem auto;
margin: 0 auto;
.vc-chrome{
background: rgba(0,0,0,0);
margin-bottom: 2rem;
// display: none;
.vc-chrome-fields-wrap{
margin-top: 5%;
}
.chrome_color{
width: 17.5rem;
// height: 16.5rem;
overflow: hidden;
.vc-chrome-saturation-wrap{
height: 100%;
width: 16rem;
height: 16rem;
max-height: 17rem;
max-width: 17rem;
margin: .7rem auto;
padding-bottom: 0;
}
.vc-chrome-body{
padding: 0;
position: relative;
.vc-chrome-toggle-btn{
width: 3.2rem;
.vc-chrome-toggle-icon{
height: auto;
margin-right: -0.4rem;
margin-top: 0rem;
display: flex;
flex-direction: column;
align-items: center;
svg{
width: 2.4rem !important;
height: 2.4rem !important;
width: 90%;
margin: 0.5rem auto;
margin: 0 auto;
background: rgba(0,0,0,0);
margin-bottom: 1rem;
// display: none;
.vc-chrome-fields-wrap{
margin-top: 5%;
padding: 0;
position: relative;
.vc-chrome-toggle-btn{
width: 3.2rem;
.vc-chrome-toggle-icon{
height: auto;
margin-right: -0.4rem;
margin-top: 0rem;
display: flex;
flex-direction: column;
align-items: center;
svg{
width: 2.4rem !important;
height: 2.4rem !important;
}
}
}
.vc-chrome-fields{
.vc-chrome-field{
padding-left: .6rem;
}
.vc-input__label{
font-size: 1.6rem;
}
.vc-input__input{
font-size: 1.1rem;
height: 2.1rem;
}
}
.ant-upload-list{
}
.vc-sketch-color-wrap{
background-image: url(@../../../../assets/images/homePage/dropper.png);
// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
background-size: 1.5rem;
background-repeat: no-repeat;
background-position: 50%;
cursor: pointer;
margin: 0;
width: 2.2rem;
height: 2.2rem;
padding: .7rem;
border: 1px solid;
position: absolute;
bottom: -.5rem;
right: .5rem;
border-radius: .5rem;
}
.vc-chrome-fields{
.vc-input__label{
margin-top: 1rem;
}
}
}
.vc-chrome-fields{
.vc-chrome-field{
padding-left: .6rem;
.vc-chrome-controls{
align-items: center;
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
width: auto;
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
}
}
.vc-input__label{
font-size: 1.6rem;
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
.vc-hue{
border-radius: 15px;
}
.vc-alpha{
border-radius: 15px;
overflow: hidden;
}
height: 1rem;
.vc-hue-picker{
width: 1.4rem;
height: 1.4rem;
}
.vc-alpha-picker{
width: 1.4rem;
height: 1.4rem;
transform: translate(-.6rem,-.4rem);
}
}
.vc-input__input{
font-size: 1.1rem;
height: 2.1rem;
}
}
.ant-upload-list{
}
.vc-sketch-color-wrap{
background-image: url(@../../../../assets/images/homePage/dropper.png);
background-size: 1.5rem;
background-repeat: no-repeat;
background-position: 50%;
cursor: pointer;
margin: 0;
width: 2.2rem;
height: 2.2rem;
padding: .7rem;
border: 1px solid;
position: absolute;
bottom: -.5rem;
right: .5rem;
border-radius: .5rem;
}
.vc-chrome-fields{
.vc-input__label{
margin-top: 1rem;
.vc-chrome-hue-wrap{
margin-bottom: .5rem;
}
}
}
.vc-chrome-controls{
align-items: center;
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
width: auto;
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
}
}
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
.vc-hue{
border-radius: 15px;
}
.vc-alpha{
border-radius: 15px;
overflow: hidden;
}
height: 1rem;
.vc-hue-picker{
width: 1.4rem;
height: 1.4rem;
}
.vc-alpha-picker{
width: 1.4rem;
height: 1.4rem;
transform: translate(-.6rem,-.4rem);
}
}
.vc-chrome-hue-wrap{
margin-bottom: .5rem;
}
.vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem;
height: 1rem;
}
}
.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;
}
}
}
// .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;
.color_block{
// margin-top: 1rem;
// display: flex;
// justify-content: space-between;
// font-size: 1.6rem;
width: 100%;
padding: 0 5%;
padding-bottom: 5%;
@@ -837,7 +842,7 @@ export default defineComponent({
align-items: center;
.color_right{
width: 11rem;
font-size: 1.2rem;
font-size: 1,2rem;
color: #666666;
.color_rgb_block{
display: flex;
@@ -866,7 +871,6 @@ export default defineComponent({
height: 1.5rem;
// margin-right: .5rem;
display: flex;
background-color: rgba(0, 0, 0, 0);
justify-content: space-between;
}
}
@@ -874,9 +878,8 @@ export default defineComponent({
}
}
}
}
}
}
.get_color_block{
display: flex;
flex-direction: column;