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

84
src/assets/style/style.css
View File

@@ -6,10 +6,10 @@ body,
height: 100%;
font-family: 'Roboto', sans-serif;
overflow: hidden;
--aida-fsize2: 2.2rem;
--aida-fsize1-8: 1.8rem;
--aida-fsize1-6: 1.6rem;
--aida-fsize1-4: 1.4rem;
--aida-fsize2: calc(2.2rem*1.2);
--aida-fsize1-8: calc(1.8rem*1.2);
--aida-fsize1-6: calc(1.6rem*1.2);
--aida-fsize1-4: calc(1.4rem*1.2);
}
input {
outline: none;
@@ -99,10 +99,10 @@ li {
padding: 0 1rem;
}
.started_btn {
padding: 0.4rem 1.8rem;
padding: calc(0.4rem*1.2) calc(1.8rem*1.2);
display: inline-block;
border-radius: 2rem;
font-size: 1.2rem;
border-radius: calc(2rem*1.2);
font-size: calc(1.2rem*1.2);
color: #fff;
background-color: #39215b;
cursor: pointer;
@@ -593,7 +593,7 @@ li {
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
align-items: center;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
}
.collection_modal .design_title_text .design_title_text_intro,
.design_detail_modal_component .design_title_text .design_title_text_intro,
@@ -608,24 +608,24 @@ li {
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
.library_page .ant-upload.ant-upload-select-picture-card {
background: #FFFFFF;
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;
}
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
font-size: 3.2rem;
font-size: calc(3.2rem*1.2);
color: #B7B7B7;
}
.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text {
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #B7B7B7;
}
.collection_modal .ant-upload-list-picture-card-container,
@@ -706,19 +706,19 @@ i {
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;
}
.collection_modal_body .input_box input,
.design_detail_modal_component .input_box input,
.library_page .input_box input {
border-radius: 0.5rem;
border-radius: calc(0.5rem*1.2);
width: 70%;
border: 1px solid rgba(0, 0, 0, 0.15);
padding-left: 1.5rem;
border: 0.1rem solid #F1F1F1;
font-size: 1.6rem;
padding-left: calc(1.5rem*1.2);
border: calc(0.1rem*1.2) solid #F1F1F1;
font-size: calc(1.6rem*1.2);
font-weight: 400;
}
.collection_modal_body .input_box inputinput:-moz-placeholder,
@@ -740,8 +740,8 @@ i {
.design_detail_modal_component .input_box span,
.library_page .input_box span {
position: absolute;
bottom: 0rem;
font-size: 1.2rem;
bottom: calc(0rem*1.2);
font-size: calc(1.2rem*1.2);
color: red;
opacity: 0;
transform: scale(0.7);
@@ -772,10 +772,10 @@ i {
.collection_modal_body .upload_item .upload_file_item,
.design_detail_modal_component .upload_item .upload_file_item,
.library_page .upload_item .upload_file_item {
margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(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;
@@ -785,7 +785,7 @@ i {
.design_detail_modal_component .upload_item .upload_file_item.active,
.library_page .upload_item .upload_file_item.active {
opacity: 0.5;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
}
.collection_modal_body .upload_item .upload_file_item.active .delete_file_block,
@@ -817,10 +817,10 @@ i {
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.library_page .upload_item .upload_file_item :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;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content,
@@ -853,11 +853,11 @@ i {
display: none;
width: 100%;
cursor: pointer;
height: 3rem;
height: calc(3rem*1.2);
background: rgba(0, 0, 0, 0.2);
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #ffffff;
line-height: 3rem;
line-height: calc(3rem*1.2);
text-align: center;
position: absolute;
left: 0;
@@ -866,33 +866,33 @@ i {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
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;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #fff;
}
.collection_modal_body .upload_item .upload_file_item .upload_img_icon,
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
.library_page .upload_item .upload_file_item .upload_img_icon {
width: 4.6rem;
width: calc(4.6rem*1.2);
}
.cut_pricture_modal .ant-modal-content {
border-radius: 1rem;
}
.cut_pricture_modal .ant-modal-body {
height: calc(100rem*0.614);
height: calc(65rem*1.2);
padding: 8rem 5rem !important;
overflow-y: hidden;
}

94
src/assets/style/style.less
View File

@@ -6,10 +6,10 @@ html,body,#app{
font-family: 'Roboto', sans-serif;
overflow: hidden;
// --antd-wave-shadow-color: #341e57;
--aida-fsize2: 2.2rem;
--aida-fsize1-8: 1.8rem;
--aida-fsize1-6: 1.6rem;
--aida-fsize1-4: 1.4rem;
--aida-fsize2: calc(2.2rem*1.2);
--aida-fsize1-8: calc(1.8rem*1.2);
--aida-fsize1-6: calc(1.6rem*1.2);
--aida-fsize1-4: calc(1.4rem*1.2);
}
input{
outline:none
@@ -109,10 +109,10 @@ ul,li{
}
//started公共按钮样式
.started_btn{
padding: .4rem 1.8rem;
padding: calc(.4rem*1.2) calc(1.8rem*1.2);
display: inline-block;
border-radius: 2rem;
font-size: 1.2rem;
border-radius: calc(2rem*1.2);
font-size: calc(1.2rem*1.2);
color: #fff;
background-color: #39215b;
cursor: pointer;
@@ -695,12 +695,6 @@ ul,li{
margin-top: 4rem;
}
}
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
.ant-modal-content{
// transform: scale(1.2);
// transform-origin: center !important;
}
}
//collection 弹窗
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
@@ -712,7 +706,7 @@ ul,li{
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
margin-bottom: calc(2rem*1.2);
.design_title_text_intro{
font-size: var(--aida-fsize1-4);
font-weight: 400;
@@ -721,20 +715,20 @@ ul,li{
}
.ant-upload.ant-upload-select-picture-card{
background: #FFFFFF;
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;
.upload_tip_block{
.icon-jiahao{
font-size: 3.2rem;
font-size: calc(3.2rem*1.2);
color: #B7B7B7;
}
}
.ant-upload-text{
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #B7B7B7;
}
}
@@ -814,16 +808,16 @@ i{
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;
input{
border-radius: .5rem;
border-radius: calc(.5rem*1.2);
width: 70%;
border: 1px solid rgba(0,0,0,.15);
padding-left: 1.5rem;
border: 0.1rem solid #F1F1F1;
font-size: 1.6rem;
padding-left: calc(1.5rem*1.2);
border: calc(0.1rem*1.2) solid #F1F1F1;
font-size: calc(1.6rem*1.2);
font-weight: 400;
&input:-moz-placeholder{
color: rgba(0,0,0,.15);
@@ -839,8 +833,8 @@ i{
}
span{
position: absolute;
bottom: 0rem;
font-size: 1.2rem;
bottom: calc(0rem*1.2);
font-size: calc(1.2rem*1.2);
color: red;
opacity: 0;
transform: scale(.7);
@@ -866,12 +860,12 @@ i{
display: flex;
flex-wrap: wrap;
.upload_file_item {
margin: 0 2rem 2rem 0;
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
display: inline-block;
// width: 16.5rem;
// height: 16.5rem;
width: 10rem;
height: 10rem;
// width: calc(16.5rem*1.2);
// height: calc(16.5rem*1.2);
width: calc(10rem*1.2);
height: calc(10rem*1.2);
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
@@ -880,7 +874,7 @@ i{
&.active {
opacity: 0.5;
// border: 2px solid;
border-radius: 1rem;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
.delete_file_block{
pointer-events:none;
@@ -904,10 +898,10 @@ i{
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;
}
.upload_file_item_content {
@@ -934,28 +928,28 @@ i{
display: none;
width: 100%;
cursor: pointer;
height: 3rem;
height: calc(3rem*1.2);
background: rgba(0, 0, 0, 0.2);
font-size: 1.6rem;
font-size: calc(1.6rem*1.2);
color: #ffffff;
line-height: 3rem;
line-height: calc(3rem*1.2);
text-align: center;
position: absolute;
left: 0;
bottom: 0;
&.rightTop {
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;
}
}
@@ -963,7 +957,7 @@ i{
}
.upload_img_icon {
width: 4.6rem;
width: calc(4.6rem*1.2);
}
}
}
@@ -975,7 +969,7 @@ i{
border-radius: 1rem;
}
.ant-modal-body{
height: calc(100rem*.614);
height: calc(65rem*1.2);
padding: 8rem 5rem !important;
overflow-y: hidden;
}