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

修改页面detail和coll字体以及比例

Browse Source
This commit is contained in:
X1627315083
2024-01-10 14:09:44 +08:00
parent 59c5e59347
commit 46a02478b6
35 changed files with 1191 additions and 1305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -283,7 +283,9 @@ export default defineComponent({
if(this.driver__.driver){
driverObj__.moveNext()
}
// this.selectColor = color?.r ? {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex} : {}
if(color.r){
this.selectColor = {rgba:{r:color.r,g:color.g,b:color.b,a:color.a? color.a: 1},hex:hex}
}
},
//通过tcx获取颜色
@@ -523,11 +525,11 @@ export default defineComponent({
position: relative;
display: flex;
justify-content: space-between;
padding-top: 7rem;
padding-top: calc(7rem*1.2);
.modal_layout{
position: absolute;
top: 0;
left: calc(47% + 3rem);
left: calc(47% + 3rem*1.2);
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
@@ -537,9 +539,9 @@ export default defineComponent({
justify-content: space-between;
}
.modal_img{
width: 50rem;
width: calc(50rem*1.2);
// width: 40rem;
height: 5rem;
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
align-items: center;
@@ -547,9 +549,9 @@ export default defineComponent({
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
margin: 0 1rem 0 0;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) 0 0;
position: relative;
cursor: pointer;
border: 0.1rem solid #DCDCEC;
@@ -572,17 +574,17 @@ export default defineComponent({
background: #FFFFFF;
.upload_right_header{
padding: 0.4rem 0 1.6rem 0;
padding: calc(0.4rem*1.2) 0 calc(1.6rem*1.2) 0;
font-weight: bold;
line-height: 2.4rem;
line-height: calc(2.4rem*1.2);
font-size: var(--aida-fsize1-8);
color: #333333;
display: flex;
align-items: center;
.color_edit{
font-size: 2rem;
margin-right: 1rem;
font-size: calc(2rem*1.2);
margin-right: calc(1rem*1.2);
position: absolute;
left: 0;
}
@@ -597,12 +599,12 @@ export default defineComponent({
display: flex;
.right_content_line{
padding-left: 3rem;
padding-left: calc(3rem*1.2);
position: relative;
padding-right: 5rem;
padding-right: calc(5rem*1.2);
.upload_centetn{
overflow-x: hidden;
height: calc(100% - 4.4rem);
height: calc(100% - 4.4rem*1.2);
}
.upload_centetn::-webkit-scrollbar {
display: none;
@@ -613,8 +615,8 @@ export default defineComponent({
display: inline-block;
// width: 16.5rem;
// height: 16.5rem;
width: 12rem;
height: 12rem;
width: calc(12rem*1.2);
height: calc(12rem*1.2);
border: 1px solid #F5F5F5;
vertical-align: top;
@@ -641,11 +643,11 @@ export default defineComponent({
.delete_file_block{
display: none;
width: 100%;
height: 4rem;
height: calc(4rem*1.2);
background: rgba(0,0,0,0.2);
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #FFFFFF;
line-height: 4rem;
line-height: calc(4rem*1.2);
text-align: center;
position: absolute;
left: 0;
@@ -655,22 +657,22 @@ export default defineComponent({
}
.upload_img_icon{
width: 4.6rem;
width: calc(4.6rem*1.2);
}
.upload_color{
display: flex;
width: 12rem;
width: calc(12rem*1.2);
flex-wrap: wrap;
justify-content: space-between;
.upload_color_item{
width: 5rem;
height: 5rem;
width: calc(5rem*1.2);
height: calc(5rem*1.2);
position: relative;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.upload_color_item_bg{
width: 5rem;
height: 5rem;
width: calc(5rem*1.2);
height: calc(5rem*1.2);
}
img{
position: absolute;
@@ -689,11 +691,11 @@ export default defineComponent({
}
}
.color_setting_block{
width: 17.5rem;
width: calc(17.5rem*1.2);
margin: auto;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
border-radius: 1rem;
border-radius: calc(1rem*1.2);
overflow: hidden;
// box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
@@ -702,56 +704,56 @@ export default defineComponent({
}
.chrome_color{
width: 17.5rem;
width: calc(17.5rem*1.2);
// height: 16.5rem;
overflow: hidden;
.vc-chrome-saturation-wrap{
height: 100%;
width: 16rem;
height: 16rem;
max-height: 17rem;
max-width: 17rem;
margin: .7rem auto;
width: calc(16rem*1.2);
height: calc(16rem*1.2);
max-height: calc(17rem*1.2);
max-width: calc(17rem*1.2);
margin: calc(.7rem*1.2) auto;
padding-bottom: 0;
}
.vc-chrome-body{
padding: 0;
width: 90%;
margin: 0.5rem auto;
margin: calc(0.5rem*1.2) auto;
margin: 0 auto;
background: rgba(0,0,0,0);
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
// display: none;
.vc-chrome-fields-wrap{
margin-top: 5%;
padding: 0;
position: relative;
.vc-chrome-toggle-btn{
width: 3.2rem;
width: calc(3.2rem*1.2);
.vc-chrome-toggle-icon{
height: auto;
margin-right: -0.4rem;
margin-right: calc(-0.4rem*1.2);
margin-top: 0rem;
display: flex;
flex-direction: column;
align-items: center;
svg{
width: 2.4rem !important;
height: 2.4rem !important;
width: calc(2.4rem*1.2) !important;
height: calc(2.4rem*1.2) !important;
}
}
}
.vc-chrome-fields{
.vc-chrome-field{
padding-left: .6rem;
padding-left: calc(.6rem*1.2);
}
.vc-input__label{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
}
.vc-input__input{
font-size: 1.1rem;
height: 2.1rem;
font-size: calc(1.1rem*1.2);
height: calc(2.1rem*1.2);
}
}
.ant-upload-list{
@@ -762,23 +764,23 @@ export default defineComponent({
// 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-size: calc(1.5rem*1.2);
background-repeat: no-repeat;
background-position: 50%;
cursor: pointer;
margin: 0;
width: 2.2rem;
height: 2.2rem;
padding: .7rem;
width: calc(2.2rem*1.2);
height: calc(2.2rem*1.2);
padding: calc(.7rem*1.2);
border: 1px solid;
position: absolute;
bottom: -.5rem;
right: .5rem;
border-radius: .5rem;
bottom: calc(-.5rem*1.2);
right: calc(.5rem*1.2);
border-radius: calc(.5rem*1.2);
}
.vc-chrome-fields{
.vc-input__label{
margin-top: 1rem;
margin-top: calc(1rem*1.2);
}
}
.vc-chrome-fields:nth-child(2){
@@ -797,11 +799,11 @@ export default defineComponent({
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
margin-left: 2rem;
margin-left: calc(2rem*1.2);
width: auto;
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
width: calc(3rem*1.2);
height: calc(3rem*1.2);
border-radius: 50%;
}
}
@@ -813,15 +815,15 @@ export default defineComponent({
border-radius: 15px;
overflow: hidden;
}
height: 1rem;
height: calc(1rem*1.2);
.vc-hue-picker{
width: 1.4rem;
height: 1.4rem;
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
}
.vc-alpha-picker{
width: 1.4rem;
height: 1.4rem;
transform: translate(-.6rem,-.4rem);
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
}
}
.vc-chrome-alpha-wrap{
@@ -833,56 +835,56 @@ export default defineComponent({
}
}
.vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem;
height: 1rem;
width: calc(1rem*1.2);
height: calc(1rem*1.2);
}
}
.sileder_color{
margin-top:1.3rem;
margin-top:calc(1.3rem*1.2);
.vc-slider-swatches{
display:none
}
.vc-slider-hue-warp {
width: 16.5rem;
height: 2.4rem;
border-radius: 1.2rem;
width: calc(16.5rem*1.2);
height: calc(2.4rem*1.2);
border-radius: calc(1.2rem*1.2);
overflow: hidden;
.vc-hue-picker{
width: 1.4rem;
height: 1.4rem;
width: calc(1.4rem*1.2);
height: calc(1.4rem*1.2);
border-radius: 50%;
transform: translate(-0.7rem, -0.2rem);
transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
}
}
.vc-hue-pointer{
top: 0.5rem !important;
top: calc(0.5rem*1.2) !important;
}
}
.color_block{
// margin-top: 1rem;
// margin-top: calc(1rem;
// display: flex;
// justify-content: space-between;
// font-size: 1.6rem;
// font-size: calc(1.6rem;
width: 100%;
padding: 0 5%;
padding-bottom: 5%;
margin: 0.5rem auto;
margin: calc(0.5rem*1.2) auto;
display: flex;
justify-content: space-between;
align-items: center;
.color_right{
width: 11rem;
font-size: 1,2rem;
width: calc(11rem*1.2);
font-size: calc(1.2rem*1.2);
color: #666666;
.color_rgb_block{
display: flex;
.rgb_item{
margin-left: .2rem;
margin-left: calc(.2rem*1.2);
}
}
}
@@ -896,14 +898,14 @@ export default defineComponent({
align-items: center;
}
.color_HEX_block,.color_rgb_block{
padding: .2rem .5rem;
padding: calc(.2rem*1.2) calc(.5rem*1.2);
box-shadow: inset 0 0 0 1px #ccc;
border-radius: .4rem;
border-radius: calc(.4rem*1.2);
justify-content: space-around;
text-transform:uppercase;
.color_block_bg{
width: 1.5rem;
height: 1.5rem;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
// margin-right: .5rem;
display: flex;
justify-content: space-between;
@@ -919,13 +921,13 @@ export default defineComponent({
display: flex;
flex-direction: column;
.get_color_input{
width: 19.4rem;
height: 3.8rem;
width: calc(19.4rem*1.2);
height: calc(3.8rem*1.2);
background: #FFFFFF;
border: 0.1rem solid #DCDCEC;
padding: 1rem 1.3rem;
padding: calc(1rem*1.2) calc(1.3rem*1.2);
box-sizing: border-box;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
text-align: left;
&::placeholder {
@@ -934,20 +936,20 @@ export default defineComponent({
}
.get_color_button{
margin-top: 1.5rem;
padding: 0 2.2rem;
height: 3.2rem;
margin-top: calc(1.5rem*1.2);
padding: 0 calc(2.2rem*1.2);
height: calc(3.2rem*1.2);
background: #EFEEFF;
display: inline-block;
line-height: 3rem;
font-size: 1.2rem;
line-height: calc(3rem*1.2);
font-size: calc(1.2rem*1.2);
color: #343579;
vertical-align: middle;
cursor: pointer;
.icon-huoquduixiang{
margin-right: 0.5rem;
font-size: 2rem;
margin-right: calc(0.5rem*1.2);
font-size: calc(2rem*1.2);
color:#343579;
vertical-align: middle;
}
@@ -957,12 +959,12 @@ export default defineComponent({
}
}
.get_color_bg{
width: 18rem;
height: 18rem;
width: calc(18rem*1.2);
height: calc(18rem*1.2);
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 1.5rem;
margin-top: calc(1.5rem*1.2);
img{
opacity: 0;
position: absolute;
@@ -975,15 +977,15 @@ export default defineComponent({
}
.upload_item{
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
.ant-upload-picture-card-wrapper{
.ant-upload-list{
.ant-upload-select-picture-card{
// margin: 0 2rem 2rem 0;
margin: 0;
display: inline-block;
width: 12rem;
height: 12rem;
width: calc(12rem*1.2);
height: calc(12rem*1.2);
border: 1px solid #F5F5F5;
vertical-align: top;
i{

80
src/component/HomePage/Cropper.vue
View File

@@ -2,7 +2,7 @@
<a-modal class="modal_component cut_pricture_modal"
v-model:visible="cutPicuterModal"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -187,15 +187,15 @@ export default defineComponent({
.collection_title{
position: absolute;
width: calc(100% - 10rem);
top: 4rem;
width: calc(100% - 10rem*1.2);
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: var(--aida-fsize1-4);
@@ -207,32 +207,32 @@ export default defineComponent({
display: flex;
align-items: center;
position: absolute;
right: 2.1rem;
right: calc(2.1rem*1.2);
height: 100%;
.next_step_button{
padding: 0 1.2rem;
height: 3.2rem;
padding: 0 calc(1.2rem*1.2);
height: calc(3.2rem*1.2);
// background: linear-gradient(160deg, #AC2A3B, #292161);
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
border-radius: 1.6rem;
font-size: 1.4rem;
border-radius: calc(1.6rem*1.2);
font-size: calc(1.4rem*1.2);
color: #000;
line-height: 3.2rem;
margin-right: 1.6rem;
line-height: calc(3.2rem*1.2);
margin-right: calc(1.6rem*1.2);
white-space: nowrap;
cursor: pointer;
}
.header_cancel_button{
padding: 0 2.1rem;
height: 3.2rem;
padding: 0 calc(2.1rem*1.2);
height: calc(3.2rem*1.2);
background: #E4E5EB;
border-radius: 1.6rem;
font-size: 1.4rem;
border-radius: calc(1.6rem*1.2);
font-size: calc(1.4rem*1.2);
color: #030303;
line-height: 3.2rem;
line-height: calc(3.2rem*1.2);
white-space: nowrap;
cursor: pointer;
}
@@ -247,31 +247,31 @@ export default defineComponent({
justify-content: space-between;
.cut_picture_left{
width: 70.7rem;
width: calc(70.7rem*1.2);
height: 100%;
background: #fff;
border-radius: 2rem;
padding: 1.3rem 1.3rem 2rem;
border-radius: calc(2rem*1.2);
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
box-sizing: border-box;
.cut_picture_body{
width: 100%;
height: 40rem;
height: calc(40rem*1.2);
// height: 53rem;
background: yellow;
}
.cur_picture_opterate{
margin: 2.7rem auto 0;
border-radius: 1.6rem;
margin: calc(2.7rem*1.2) auto 0;
border-radius: calc(1.6rem*1.2);
display: flex;
overflow: hidden;
border: 1px solid #E2E2E4;
width: 24rem;
width: calc(24rem*1.2);
.cur_picture_opterate_item{
width: 4.7rem;
height: 4rem;
width: calc(4.7rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
@@ -283,20 +283,20 @@ export default defineComponent({
}
.operate_icon{
font-size: 1.8rem;
font-size: calc(1.8rem*1.2);
color: rgba(102, 102, 102, 1);
font-weight: bold;
}
.icon_font{
font-size: 2.5rem;
font-size: calc(2.5rem*1.2);
position: relative;
top: -0.3rem;
top: calc(-0.3rem*1.2);
user-select:none;
}
.icon-shuaxin{
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
}
&:last-child{
@@ -308,32 +308,32 @@ export default defineComponent({
.cut_picture_right{
// width: 39.2rem;
width: 52rem;
width: calc(52rem*1.2);
height: 100%;
background: #fff;
border-radius: 2rem;
border-radius: calc(2rem*1.2);
.cur_picture_right_header{
padding: 2rem;
padding: calc(2rem*1.2);
display: flex;
align-items: center;
font-size: var(--aida-fsize1-8);
font-weight: 400;
color: #030303;
line-height: 1.8rem;
line-height: calc(1.8rem*1.2);
font-weight: bold;
.review_logo{
font-size: 1.8rem;
font-size: calc(1.8rem*1.2);
color: #333;
margin-right: 1rem;
margin-right: calc(1rem*1.2);
}
}
.cut_picture_review_block{
width: 100%;
padding: 0 2rem;
height: calc(100% - 6.8rem);
padding: 0 calc(2rem*1.2);
height: calc(100% - 6.8rem*1.2);
.cut_picture_review_item{
width: 100%;
@@ -348,8 +348,8 @@ export default defineComponent({
top: 50%;
transform: scale(0.8) translate(-50%, -50%);
background: rgba(91,94,105,0.8);
box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3);
border-radius: 1rem;
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
border-radius: calc(1rem*1.2);
}
.cut_picture_review_block_sec{
@@ -360,7 +360,7 @@ export default defineComponent({
transform: scale(0.45) translate(-50%, -50%);
border-radius: 100%;
background: rgba(91,94,105,0.8);
box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3);
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
}
}

289
src/component/HomePage/Generate.vue
View File

@@ -757,22 +757,22 @@ export default defineComponent({
position: sticky;
top: 0;
background: #fff;
padding-top: 2.5rem;
padding-bottom: 2rem;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
z-index: 2;
}
.generate_checkbox {
div {
margin-right: 4rem;
margin-right: calc(4rem*1.2);
label {
display: flex;
cursor: pointer;
input {
margin-right: 0.5rem;
padding-left: 1.5rem;
margin-right: calc(0.5rem*1.2);
padding-left: calc(1.5rem*1.2);
}
span {
font-size: 1.2rem;
font-size: calc(1.2rem*1.2);
font-weight: 500;
}
}
@@ -780,25 +780,25 @@ export default defineComponent({
}
.printModel{
>div{
width: 13rem;
width: calc(13rem*1.2);
// display: flex;
display: block;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
margin: 0;
border: 2px solid;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 1rem;
padding: 0 calc(1rem*1.2);
text-align: center;
}
ul{
position: absolute;
width: 13rem;
width: calc(13rem*1.2);
text-align: center;
margin-top: .3rem;
border-radius: 1rem;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
li{
background: rgba(0,0,0,.2);
@@ -807,7 +807,7 @@ export default defineComponent({
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 1rem;
padding: 0 calc(1rem*1.2);
&.printModel_item:hover{
background: rgba(0,0,0,.4);
}
@@ -824,12 +824,12 @@ export default defineComponent({
flex: 1;
.generage_img_item {
cursor: pointer;
margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
position: relative;
&.active {
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
img {
transform: scale(0.9);
}
@@ -838,17 +838,17 @@ export default defineComponent({
}
}
img {
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
}
.delete_like_file_block{
top: 0.9rem;
right: 0.9rem;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
&.left{
left: .9rem;
left: calc(.9rem*1.2);
}
i{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
&.fi-rr-heart{
@@ -899,18 +899,18 @@ export default defineComponent({
.delete_file_block {
display: none;
width: 3.2rem;
height: 3.2rem;
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem;
border-radius: calc(0.4rem*1.2);
position: absolute;
top: 0.9rem;
right: 0.9rem;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: 3.2rem;
line-height: calc(3.2rem*1.2);
left: auto;
.icon-shanchu {
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
}
}
@@ -923,238 +923,5 @@ export default defineComponent({
}
}
}
.my_material_modal {
border-radius: 2rem;
.ant-modal-close {
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header {
display: none;
}
.ant-modal-body {
background: #f2f3fb;
height: 80vh;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.my_material_header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 6.6rem;
background: #f7f7f7;
padding: 0 3.4rem 0 3.1rem;
.my_material_title {
font-size: 1.8rem;
color: #030303;
font-weight: 500;
}
.my_material_header_right {
display: flex;
justify-content: space-between;
align-items: center;
.content_search_block {
margin-right: 5rem;
display: flex;
.search_input {
width: 30rem;
padding-left: 1.5rem;
height: 4rem;
line-height: 3.8rem;
background: #ffffff;
border: 0.1rem solid #f1f1f1;
font-size: 1.6rem;
font-weight: 400;
&::placeholder {
color: #c2c2c2;
}
}
.search_icon_block {
width: 6rem;
height: 4rem;
line-height: 4rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo {
font-size: 2rem;
color: #ffffff;
}
}
}
.icon_close {
color: rgba(174, 178, 183, 1);
font-size: 2.4rem;
cursor: pointer;
}
}
}
.my_material_content {
padding: 0 3rem 3.5rem 3rem;
height: calc(100% - 6.6rem);
position: relative;
.material_content_top {
padding: 1.3rem 0 2.1rem;
height: 7rem;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.material_content_top_title {
font-size: 2rem;
color: #030303;
}
.material_content_top_right {
display: flex;
align-items: center;
.select_block {
background: #ffffff;
color: #1a1a1a !important;
margin-right: 2.3rem;
.icon-xiala {
color: #1a1a1a !important;
}
}
.check_all_block {
display: flex;
align-items: center;
font-size: 1.6rem;
color: #64686d;
cursor: pointer;
&.check_all {
color: #1a1a1a;
}
.check_block {
width: 2.4rem;
height: 2.4rem;
background: #ebecf4;
border: 0.1rem solid #64686d;
padding: 0.3rem;
margin-right: 0.7rem;
.check_block_body {
width: 100%;
height: 100%;
background: #343579;
}
}
}
}
}
.material_content_body {
width: 100%;
height: calc(100% - 19rem);
overflow-y: auto;
position: relative;
.content_img_item {
display: inline-block;
vertical-align: top;
padding: 0 1.4rem;
margin-bottom: 2.8rem;
.content_img_item_block {
border: 0.1rem solid transparent;
width: 16.5rem;
height: 16.5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.select_item_img {
border-color: #343579;
}
.print_content_img {
width: 100%;
height: 100%;
}
.content_img {
max-width: 100%;
max-height: 100%;
}
}
.content_img_name {
width: 16.5rem;
height: 3.5rem;
line-height: 3.5rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
}
.no_data_block {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
&.loading_block {
background: rgba(0, 0, 0, 0.2);
}
}
.material_confirm {
width: 9.8rem;
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.4rem;
text-align: center;
margin: 0 auto;
color: #ffffff;
background: #343579;
cursor: pointer;
margin-top: 2rem;
}
.table_pagination {
position: absolute;
bottom: 3.5rem;
left: 0;
width: 100%;
text-align: center;
margin-top: 5rem;
}
}
}
</style>

120
src/component/HomePage/Material.vue
View File

@@ -372,18 +372,18 @@ export default defineComponent({
</script>
<style lang="less">
.my_material_modal{
height: 30rem;
height: calc(30rem*1.2);
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
flex: 1;
border-radius: 0;
&.my_material_modal::-webkit-scrollbar{display: none;}
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
width: calc(3.6rem*1.2);
height: calc(3.6rem*1.2);
position: absolute;
top: -1.8rem;
right: -1.8rem;
top: calc(-1.8rem*1.2);
right: calc(-1.8rem*1.2);
}
.ant-modal-header{
@@ -393,7 +393,7 @@ export default defineComponent({
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
min-height: 72rem;
min-height: calc(72rem*1.2);
overflow-y: hidden;
padding: 0;
}
@@ -405,8 +405,8 @@ export default defineComponent({
width: 100%;
height: auto;
padding: 0;
padding-top: 2.5rem;
padding-bottom: 2rem;
padding-top: calc(2.5rem*1.2);
padding-bottom: calc(2rem*1.2);
background-color: #fff;
position: sticky;
top: 0;
@@ -417,20 +417,20 @@ export default defineComponent({
align-items: center;
.content_search_block{
margin-right: 5rem;
margin-right: calc(5rem*1.2);
display: flex;
.search_input{
width: 15rem;
padding-left: 1.5rem;
// height: 4rem;
// line-height: 3.8rem;
width: calc(15rem*1.2);
padding-left: calc(1.5rem*1.2);
// height: 4rem*1.2);
// line-height: 3.8rem*1.2);
// background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
// font-size: 1.6rem;
font-size: 1.2rem;
border:calc( 0.1rem*1.2) solid #F1F1F1;
// font-size: 1.6rem*1.2);
font-size: calc(1.2rem*1.2);
font-weight: 400;
height: 3rem;
height: calc(3rem*1.2);
&::placeholder {
color: #C2C2C2;
@@ -438,15 +438,15 @@ export default defineComponent({
}
.search_icon_block{
width: 5rem;
height: 3rem;
line-height: 3rem;
width: calc(5rem*1.2);
height: calc(3rem*1.2);
line-height: calc(3rem*1.2);
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
font-size: calc(2rem*1.2);
color: #FFFFFF;
}
}
@@ -454,7 +454,7 @@ export default defineComponent({
.icon_close{
color: rgba(174, 178, 183, 1);
font-size: 2.4rem;
font-size: calc(2.4rem*1.2);
cursor: pointer;
}
}
@@ -463,22 +463,22 @@ export default defineComponent({
}
.my_material_content{
// padding: 0 3rem 3.5rem 3rem;
// padding: 0 3rem*1.2) 3.5rem*1.2) 3rem*1.2);
padding: 0;
// height: calc(100% - 6.6rem);
// height: calc(100% - 6.6rem*1.2));
height: auto;
position: relative;
.material_content_top{
padding: 1.3rem 0 2.1rem;
height: 7rem;
padding: calc(1.3rem*1.2) 0 calc(2.1rem*1.2);
height: calc(7rem*1.2);
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.material_content_top_title{
font-size: 2rem;
font-size: calc(2rem*1.2);
color: #030303;
}
@@ -489,7 +489,7 @@ export default defineComponent({
.select_block{
background: #FFFFFF;
color: #1A1A1A !important;
margin-right: 2.3rem;
margin-right: calc(2.3rem*1.2);
.icon-xiala{
color: #1A1A1A !important;
@@ -499,7 +499,7 @@ export default defineComponent({
.check_all_block{
display: flex;
align-items: center;
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #64686D;
cursor: pointer;
@@ -508,12 +508,12 @@ export default defineComponent({
}
.check_block{
width: 2.4rem;
height: 2.4rem;
width: calc(2.4rem*1.2);
height: calc(2.4rem*1.2);
background: #EBECF4;
border: 0.1rem solid #64686D;
padding: 0.3rem;
margin-right: 0.7rem;
border: calc(0.1rem*1.2) solid #64686D;
padding: calc(0.3rem*1.2);
margin-right:calc( 0.7rem*1.2);
.check_block_body{
width: 100%;
@@ -528,18 +528,18 @@ export default defineComponent({
.material_content_body{
width: 100%;
// height: calc(100% - 19rem);
// height: calc(100% - 19rem*1.2));
height: 100%;
overflow-y: auto;
position: relative;
height: 30rem;
height: calc(30rem*1.2);
&.material_content_body::-webkit-scrollbar{display: none;}
.content_img_item{
margin: 0 2rem 5rem 0;
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
@@ -550,30 +550,30 @@ export default defineComponent({
height: 100%;
}
&.moodb{
margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
}
.pin_block{
.ant-checkbox-wrapper{
height: 2.2rem;
height:calc(2.2rem*1.2);
align-items: center;
span{
font-size: 1.4rem;
line-height: 2.3rem;
font-size: calc(1.4rem*1.2);
line-height: calc(2.3rem*1.2);
}
.ant-checkbox-inner{
width: 1.6rem;
height: 1.6rem;
width:calc( 1.6rem*1.2);
height: calc(1.6rem*1.2);
}
.ant-checkbox-inner::after{
width: .571428571rem;
height: .914285714rem;
width: calc(.571428571rem*1.2);
height: calc(.914285714rem*1.2);
}
}
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
img {
}
@@ -587,21 +587,21 @@ export default defineComponent({
}
}
.content_img_name{
width: 16.5rem;
height: 3.5rem;
line-height: 3.5rem;
width: calc(16.5rem*1.2);
height: calc(3.5rem*1.2);
line-height: calc(3.5rem*1.2);
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
}
}
.material_content_list_loding{
text-align: center;
img{
height: 10rem;
height: calc(10rem*1.2);
}
}
@@ -624,25 +624,25 @@ export default defineComponent({
}
.material_confirm{
width: 9.8rem;
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.4rem;
width: calc(9.8rem*1.2);
height: calc(3.6rem*1.2);
line-height: calc(3.6rem*1.2);
font-size: calc(1.4rem*1.2);
text-align: center;
margin: 0 auto;
color: #FFFFFF;
background: #343579;
cursor: pointer;
margin-top: 2rem;
margin-top: calc(2rem*1.2);
}
.table_pagination{
position: absolute;
bottom: 3.5rem;
bottom: calc(3.5rem*1.2);
left: 0;
width: 100%;
text-align: center;
margin-top: 5rem;
margin-top: calc(5rem*1.2);
}
}
}

64
src/component/HomePage/MoodboardUpload.vue
View File

@@ -127,8 +127,8 @@
</div>
<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
<div class="modal_text">
<div>Layout of selected moodboard</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
<div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div>
<div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
@@ -505,11 +505,11 @@ export default defineComponent({
height: 100%;
display: flex;
.modal_left {
padding-top: 4rem;
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
// width: 50rem;
// width: 50rem*1.2);
.switch_type_list {
display: flex;
align-items: center;
@@ -518,14 +518,14 @@ export default defineComponent({
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem;
height: 4rem;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
margin-right: 8rem;
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
@@ -538,10 +538,10 @@ export default defineComponent({
content: "";
display: block;
background: #000;
height: .3rem;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: .6rem;
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
@@ -555,16 +555,16 @@ export default defineComponent({
}
.switch_icon {
font-size: 1.8rem;
margin-right: 0.8rem;
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
}
.moodboard_body {
padding-top: 2.5rem;
padding-top: calc(2.5rem*1.2);
flex: 1;
height: 30rem;
height: calc(30rem*1.2);
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
display: flex;
@@ -575,7 +575,7 @@ export default defineComponent({
.upload_img_body {
height: 100%;
overflow-y: auto;
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
}
@@ -584,19 +584,19 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: 1.6rem;
margin-right: 0.7rem;
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: 3rem;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
@@ -611,18 +611,18 @@ export default defineComponent({
}
.modal_layout{
.modal_img{
width: 40rem;
height: 5rem;
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
text-align: center;
margin: 0 1rem 1rem 0;
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
overflow: hidden;
@@ -651,19 +651,19 @@ export default defineComponent({
}
}
.modal_accomplish{
// margin-top: 2rem;
height: 30rem;
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex: 1;
flex-direction: column;
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img_max{
// flex: 1;
width: 57rem;
height: 35rem;
width: calc(57rem*1.2);
height: calc(35rem*1.2);
position: relative;
.mark_loading{
position: absolute;

109
src/component/HomePage/PrintboardUpload.vue
View File

@@ -221,7 +221,7 @@ export default defineComponent({
swtich_type:'upload',
indicator : h(LoadingOutlined, {
style: {
fontSize: '2.4rem',
fontSize: '2.4rem*1.2)',
},
spin: true,
}),
@@ -782,18 +782,13 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.printboard_upload_modal{
// padding: 1rem 1rem 1.8rem 1rem;
// padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
height: 100%;
display: flex;
.printboard_left_upload{
// width: calc(100% - 39.8rem);
// height: 100%;
// background: #fff;
// padding: 0.5rem 2.2rem 2rem 2.6rem;
// box-sizing: border-box;
display: flex;
flex-direction: column;
padding-top: 4rem;
padding-top: calc(4rem*1.2);
width: 47%;
.switch_type_list {
display: flex;
@@ -803,14 +798,14 @@ export default defineComponent({
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem;
height: 4rem;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
margin-right: 8rem;
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
@@ -823,10 +818,10 @@ export default defineComponent({
content: "";
display: block;
background: #000;
height: .3rem;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: .6rem;
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
@@ -840,8 +835,8 @@ export default defineComponent({
}
.switch_icon {
font-size: 1.8rem;
margin-right: 0.8rem;
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
}
@@ -849,30 +844,30 @@ export default defineComponent({
.printboard_body{
display: flex;
flex-direction: column;
// height: calc(100% - 5rem);
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: 2.5rem;
height: 30rem;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
&.printboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body{
height: calc(100% - 3rem);
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
margin: 0 2rem 5rem 0;
// margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
@@ -897,10 +892,10 @@ export default defineComponent({
transform: translate(-50%, -50%);
}
:deep(.ant-upload-select-picture-card) {
width: 6rem;
height: 6rem;
border: 0.3rem solid #ededed;
border-radius: 1rem;
width: calc(6rem*1.2);
height: calc(6rem*1.2);
border: calc(0.3rem*1.2) solid #ededed;
border-radius: calc(1rem*1.2);
margin: 0;
}
}
@@ -941,37 +936,37 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: 1.6rem;
margin-right: 0.7rem;
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.delete_like_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
border-radius: calc(0.4rem*1.2);
position: absolute;
top: 0.9rem;
right: 0.9rem;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: 3.2rem;
line-height: calc(3.2rem*1.2);
left: auto;
&.left{
left: .9rem;
left: calc(.9rem*1.2);
}
.icon-shanchu{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
}
i{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
&.fi-rr-heart{
@@ -984,7 +979,7 @@ export default defineComponent({
.modal_right{
flex: 1;
margin-left: 3rem;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
@@ -999,8 +994,8 @@ export default defineComponent({
}
.modal_layout{
.modal_img{
width: 40rem;
height: 5rem;
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: row;
@@ -1008,9 +1003,9 @@ export default defineComponent({
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
margin: 0 1rem 1rem 0;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
text-align: center;
@@ -1040,8 +1035,8 @@ export default defineComponent({
}
}
.modal_accomplish{
// margin-top: 2rem;
height: 30rem;
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
@@ -1057,8 +1052,8 @@ export default defineComponent({
display: none;
}
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.input_box{
input{
@@ -1074,10 +1069,10 @@ export default defineComponent({
position: relative;
align-content: flex-start;
.modal_imgItem{
margin: 0 2rem 5rem 0;
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
@@ -1093,7 +1088,7 @@ export default defineComponent({
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
img {
}

100
src/component/HomePage/SketchboardUpload.vue
View File

@@ -799,7 +799,7 @@ export default defineComponent({
height: 100%;
display: flex;
.modal_left {
padding-top: 4rem;
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
@@ -811,14 +811,14 @@ export default defineComponent({
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem;
height: 4rem;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem;
margin-right: 8rem;
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
@@ -831,10 +831,10 @@ export default defineComponent({
content: "";
display: block;
background: #000;
height: .3rem;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: .6rem;
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
@@ -848,16 +848,16 @@ export default defineComponent({
}
.switch_icon {
font-size: 1.8rem;
margin-right: 0.8rem;
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
}
.sketchboard_body {
// height: calc(100% - 5rem);
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: 2.5rem;
height: 30rem;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
display: flex;
@@ -866,9 +866,9 @@ export default defineComponent({
display: none;
}
.upload_img_body {
height: calc(100% - 3rem);
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
@@ -876,11 +876,11 @@ export default defineComponent({
.upload_file_item{
margin: 0 2rem 4rem 0;
// margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
@@ -898,10 +898,10 @@ export default defineComponent({
transform: translate(-50%, -50%);
}
:deep(.ant-upload-select-picture-card) {
width: 6rem;
height: 6rem;
border: 0.3rem solid #ededed;
border-radius: 1rem;
width: calc(6rem*1.2);
height: calc(6rem*1.2);
border: calc(0.3rem*1.2) solid #ededed;
border-radius: calc(1rem*1.2);
margin: 0;
}
.checked{
@@ -943,37 +943,37 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: 1.6rem;
margin-right: 0.7rem;
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.delete_like_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
border-radius: calc(0.4rem*1.2);
position: absolute;
top: 0.9rem;
right: 0.9rem;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: 3.2rem;
line-height: calc(3.2rem*1.2);
left: auto;
&.left{
left: .9rem;
left: calc(.9rem*1.2);
}
.icon-shanchu{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
}
i{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
&.fi-rr-heart{
@@ -987,7 +987,7 @@ export default defineComponent({
.modal_right{
flex: 1;
margin-left: 3rem;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
@@ -1002,8 +1002,8 @@ export default defineComponent({
}
.modal_layout{
.modal_img{
width: 40rem;
height: 5rem;
width: calc(40rem*1.2);
height: calc(5rem*1.2);
// overflow-x: hidden;
display: flex;
flex-direction: row;
@@ -1015,9 +1015,9 @@ export default defineComponent({
display: flex;
}
.modal_img_item{
width: 4rem;
height: 4rem;
margin: 0 1rem 1rem 0;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
text-align: center;
cursor: pointer;
@@ -1048,8 +1048,8 @@ export default defineComponent({
}
}
.modal_accomplish{
// margin-top: 2rem;
height: 30rem;
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
@@ -1063,8 +1063,8 @@ export default defineComponent({
display: none;
}
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
padding-top: calc(2rem*1.2);
padding-block:calc(2rem*1.2);
}
.input_box{
z-index: 1;
@@ -1082,10 +1082,10 @@ export default defineComponent({
align-content: flex-start;
position: relative;
.modal_imgItem{
margin: 0 2rem 4rem 0;
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
@@ -1100,7 +1100,7 @@ export default defineComponent({
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
// img {
// }

2
src/component/HomePage/affiche.vue
View File

@@ -103,7 +103,7 @@ export default defineComponent({
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
// background-color: #181818;
display: flex;
flex-direction: column;

58
src/component/HomePage/collectionModal.vue
View File

@@ -3,7 +3,7 @@
<a-modal class="modal_component collection_modal Guide_1_2"
v-model:visible="showCollectionModal"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -306,18 +306,18 @@ export default defineComponent({
position: absolute;
}
.collection_title{
top: 4rem;
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 2;
align-items: center;
width: 35rem;
width: calc(35rem*1.2);
justify-content: space-between;
.collection_progress{
width: 8rem;
height: 8rem;
width: calc(8rem*1.2);
height: calc(8rem*1.2);
>div{
width: 100% !important;
height: 100% !important;
@@ -328,7 +328,7 @@ export default defineComponent({
}
}
.collection_title_text{
// margin-right: 4rem;
// margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: var(--aida-fsize1-4);
@@ -338,17 +338,17 @@ export default defineComponent({
}
.collection_closeIcon{
top: 2rem;
right: 2rem;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
@@ -362,10 +362,10 @@ export default defineComponent({
.collection_page{
left: 50%;
transform: translateX(-50%);
bottom: 3rem;
bottom: calc(3rem*1.2);
display: flex;
.fi-rr-arrow-small-left{
margin-right: 10rem;
margin-right: calc(10rem*1.2);
}
.fi{
cursor: pointer;
@@ -385,36 +385,36 @@ export default defineComponent({
}
}
.header_icon_fanhui{
margin-right: 1rem;
font-size: 2rem;
margin-right: calc(1rem*1.2);
font-size: calc(2rem*1.2);
cursor: pointer;
}
.header_right_block{
display: flex;
align-items: center;
position: absolute;
right: 2.1rem;
right: calc(2.1rem*1.2);
height: 100%;
.next_step_button{
padding: 0 1.2rem;
height: 3.2rem;
padding: 0 calc(1.2rem*1.2);
height: calc(3.2rem*1.2);
background: #343579;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #FFFFFF;
line-height: 3.2rem;
margin-right: 1.6rem;
line-height: calc(3.2rem*1.2);
margin-right: calc(1.6rem*1.2);
white-space: nowrap;
cursor: pointer;
}
.header_cancel_button{
padding: 0 2.1rem;
height: 3.2rem;
padding: 0 calc(2.1rem*1.2);
height: calc(3.2rem*1.2);
background: #E4E5EB;
font-size: 1.4rem;
font-size: calc(1.4rem*1.2);
color: #030303;
line-height: 3.2rem;
line-height: calc(3.2rem*1.2);
white-space: nowrap;
cursor: pointer;
}
@@ -431,16 +431,16 @@ export default defineComponent({
// max-width: 1200px ;
// max-width: 1150px ;
.ant-modal-content{
border-radius: 1rem;
border-radius: calc(1rem*1.2);
overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
}
.ant-modal-body{
padding: 8rem 5rem !important;
padding: calc(8rem*1.2) calc(5rem*1.2) !important;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
}
//进度完成字体颜色
@@ -449,7 +449,7 @@ export default defineComponent({
}
.ant-progress-circle .ant-progress-text{
color:rgba(0, 0, 0, 0.55);
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
}
}
}

60
src/component/HomePage/layout.vue
View File

@@ -4,7 +4,7 @@
class="layout_modal"
v-model:visible="layout"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -653,10 +653,10 @@ export default defineComponent({
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
}
.ant-modal-content{
border-radius: 1rem;
border-radius: calc(1rem*1.2);
}
.layout_content {
@@ -665,34 +665,34 @@ export default defineComponent({
height: 100%;
.collection_title{
position: absolute;
top: 4rem;
top: calc(4rem*1.2);
display: flex;
font-size: 1.8rem;
font-size: calc(1.8rem*1.2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: 1.2rem;
font-size: calc(1.2rem*1.2);
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
position: absolute;
top: 2rem;
right: 2rem;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
@@ -705,7 +705,7 @@ export default defineComponent({
}
.layout_nav{
display: flex;
margin-top: 2rem;
margin-top: calc(2rem*1.2);
justify-content: center;
max-height: 13%;
overflow: hidden;
@@ -721,9 +721,9 @@ export default defineComponent({
overflow: hidden;
img{
object-fit: cover;
width:5rem;
width:calc(5rem*1.2);
cursor: pointer;
margin: 0 2rem;
margin: 0 calc(2rem*1.2);
max-height: 100%;
}
}
@@ -732,13 +732,13 @@ export default defineComponent({
.layout_centent{
display: flex;
// height: 55%;
height: 35rem;
width: 57rem;
height: calc(35rem*1.2);
width: calc(57rem*1.2);
// height: 60%;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
margin: 3rem auto;
margin: calc(3rem*1.2) auto;
overflow: hidden;
// padding: 3rem 0;
justify-content: space-between;
@@ -762,8 +762,8 @@ export default defineComponent({
li{
cursor: pointer;
// border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
z-index: 1049;
@@ -814,8 +814,8 @@ export default defineComponent({
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
.layout_translate{
@@ -827,8 +827,8 @@ export default defineComponent({
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0;
width: .8rem;
height: .8rem;
width: calc(.8rem*1.2);
height: calc(.8rem*1.2);
}
.layout_angle_tr{
right: 0%;
@@ -911,7 +911,7 @@ export default defineComponent({
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5rem;
left: calc(5rem*1.2);
overflow-x: hidden;
// background-color: #000;
width: 10%;
@@ -920,19 +920,19 @@ export default defineComponent({
display: none;
}
.layout_left_text{
font-size: 1.6rem;
margin-bottom: 1rem;
font-size: calc(1.6rem*1.2);
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
width: 100%;
height: 6rem;
height: calc(6rem*1.2);
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
@@ -941,7 +941,7 @@ export default defineComponent({
}
}
.submit_button {
margin: 2rem auto 0;
margin: calc(2rem*1.2) auto 0;
position: relative;
z-index: 2;
}

77
src/component/HomePage/layoutMobile.vue
View File

@@ -4,7 +4,7 @@
class="layout_modal"
v-model:visible="layout"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -706,46 +706,46 @@ export default defineComponent({
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
}
.ant-modal-content{
border-radius: 1rem;
border-radius: calc(1rem*1.2);
}
.layout_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
// padding-bottom: 2.9rem*1.2);
height: 100%;
.collection_title{
position: absolute;
top: 4rem;
top: calc(4rem*1.2);
display: flex;
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
margin-right: calc(4rem*1.2);
}
.collection_title_text_intro{
font-size: 1.2rem;
font-size: calc(1.2rem*1.2);
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
position: absolute;
top: 2rem;
right: 2rem;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
@@ -758,7 +758,7 @@ export default defineComponent({
}
.layout_nav{
display: flex;
margin-top: 2rem;
margin-top: calc(2rem*1.2);
justify-content: center;
max-height: 13%;
overflow: hidden;
@@ -774,9 +774,9 @@ export default defineComponent({
overflow: hidden;
img{
object-fit: cover;
width:5rem;
width:calc(5rem*1.2);
cursor: pointer;
margin: 0 2rem;
margin: 0 calc(2rem*1.2);
max-height: 100%;
}
}
@@ -785,16 +785,15 @@ export default defineComponent({
.layout_centent{
display: flex;
// height: 55%;
height: 35rem;
width: 57rem;
height: calc(35rem*1.2);
width: calc(57rem*1.2);
// height: 60%;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
width: 50%;
margin: 3rem auto;
margin: calc(3rem*1.2) auto;
overflow: hidden;
// padding: 3rem 0;
// padding: 3rem*1.2) 0;
justify-content: space-between;
position: relative;
user-select:none
@@ -816,8 +815,8 @@ export default defineComponent({
li{
cursor: pointer;
// border-radius: 50%;
width: 2rem;
height: 2rem;
width: calc(2rem*1.2);
height: calc(2rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
z-index: 1049;
@@ -868,8 +867,8 @@ export default defineComponent({
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 2rem;
height: 2rem;
width: calc(2rem*1.2);
height: calc(2rem*1.2);
border-radius: 50%;
}
.layout_translate{
@@ -881,8 +880,8 @@ export default defineComponent({
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0;
width: 2rem;
height: 2rem;
width: calc(2rem*1.2);
height: calc(2rem*1.2);
}
.layout_angle_tr{
right: 0%;
@@ -965,7 +964,7 @@ export default defineComponent({
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 5rem;
left: calc(5rem*1.2);
overflow-x: hidden;
// background-color: #000;
width: 10%;
@@ -975,18 +974,18 @@ export default defineComponent({
}
.layout_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
width: 100%;
height: 6rem;
height: calc(6rem*1.2);
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
@@ -998,7 +997,7 @@ export default defineComponent({
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 5rem;
right: calc(5rem*1.2);
// background-color: #000;
width: 8%;
height: 50%;
@@ -1007,18 +1006,18 @@ export default defineComponent({
}
.layout_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: 1rem;
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
width: 100%;
height: 6rem;
height: calc(6rem*1.2);
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
@@ -1027,13 +1026,13 @@ export default defineComponent({
}
.ant-slider{
margin: 0;
margin-top: 2rem;
padding: 0 1rem;
margin-top: calc(2rem*1.2);
padding: 0 calc(1rem*1.2);
.ant-slider-track,
.ant-slider-rail {
height: .6rem;
height: calc(.6rem*1.2);
background-color: #e1e1e1;
border-radius: 0.5rem;
border-radius: calc(0.5rem*1.2);
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
@@ -1054,7 +1053,7 @@ export default defineComponent({
}
.submit_button {
margin: 2rem auto 0;
margin: calc(2rem*1.2) auto 0;
position: relative;
z-index: 2;
}

38
src/component/HomePage/scaleImage.vue
View File

@@ -3,7 +3,7 @@
class="scaleImage_modal"
v-model:visible="scaleImage"
:footer="null"
width="65%"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -151,7 +151,7 @@ export default defineComponent({
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(100rem*.614);
height: calc(65rem*1.2);
// background-color: #181818;
display: flex;
flex-direction: column;
@@ -162,19 +162,19 @@ export default defineComponent({
.scaleImage_btn {
.collection_closeIcon{
position: absolute;
top: 2rem;
right: 2rem;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: 4rem;
height: 4rem;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
&.left{
left: 2rem;
left: calc(2rem*1.2);
}
.fi-rr-cross-small::before{
padding: .2rem;
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.22);
transition: .3s all;
@@ -197,16 +197,16 @@ export default defineComponent({
display: flex;
justify-content: center;
height: 75%;
margin-top: 5rem;
margin-top: calc(5rem*1.2);
img{
width: auto;
max-width: 50rem;
max-width: calc(50rem*1.2);
height: 100%;
}
}
.scaleImage_nav{
flex: 1;
margin: 2.5rem 0rem;
margin: calc(2.5rem*1.2) calc(0rem*1.2);
display: flex;
justify-content: center;
align-items: center;
@@ -224,8 +224,8 @@ export default defineComponent({
}
}
.nav_list{
margin: 0 2rem;
max-width: 60rem;
margin: 0 calc(2rem*1.2);
max-width: calc(60rem*1.2);
overflow-y: hidden;
&.nav_list::-webkit-scrollbar {
display: none;
@@ -235,22 +235,22 @@ export default defineComponent({
display: flex;
}
img{
max-width: 5rem;
max-height: 5rem;
max-width: calc(5rem*1.2);
max-height: calc(5rem*1.2);
object-fit: cover;
object-position: 50%,50%;
margin-left: 1rem;
border-radius: 1rem;
margin-left: calc(1rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
cursor: pointer;
padding: .1rem;
padding: calc(.1rem*1.2);
flex-shrink: 0;
&.active{
border: 2px solid #aaaaaa;
}
}
img:nth-child(1){
margin-left: 0rem;
margin-left: calc(0rem*1.2);
}
}
}