2023-10-20

src/assets/style/style.less

@@ -4,6 +4,7 @@ html,body,#app{
     padding: 0;
     height: 100%;
     font-family: 'Roboto', sans-serif;
+	overflow: hidden;
 	// --antd-wave-shadow-color: #341e57;
 }
 input{
@@ -107,7 +108,7 @@ ul,li{
 	padding: .5rem 2rem;
 	display: inline-block;
 	border-radius: 2rem;
-	font-size: 12px;
+	font-size: 1.2rem;
 	color: #fff;
 	background-color: #39215b;
 	cursor: pointer;
@@ -254,7 +255,7 @@ ul,li{
 	margin-top:.5rem;
 }
 //collection 弹窗
-.collection_modal,.design_detail_modal_component,.designOpenrtion_modal{
+.collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
 
     .ant-modal-body{
         overflow-y: hidden;
@@ -276,7 +277,7 @@ ul,li{
 		width: 6rem;
 		height: 6rem;
 		border: 0.3rem solid #ededed;
-		border-radius: 10px;
+		border-radius: 1rem;
 		margin: 0;
         .upload_tip_block{
             .icon-jiahao{
@@ -340,13 +341,19 @@ ul,li{
 		transform: translateX(-50%);
 		padding: .5rem 2rem;
 		border-radius: 2rem;
-		font-size: 12px;
+		font-size: 1.2rem;
 		display: inline-block;
 	}
 }
 
+.ant-upload{
+	font-size: 1.4rem;
+}
+i{
+	font-size: 1.4rem;
+}
 //设计input和上传按钮样式
-.collection_modal_body,.design_detail_modal_component{
+.collection_modal_body,.design_detail_modal_component,.library_page{
 	.input_box{
 		display: flex;
 		align-items: center;
@@ -357,7 +364,7 @@ ul,li{
 		padding-bottom: 2rem;
 		z-index: 2;
 		input{
-			font-size: 12px;
+			font-size: 1.2rem;
 			border-radius: .5rem;
 			width: 70%;
 			border: 1px solid rgba(0,0,0,.15);
@@ -377,6 +384,25 @@ ul,li{
 				color: rgba(0,0,0,.15);   
 			} 
 		}
+		span{
+			position: absolute;
+			bottom: 0rem;
+			font-size: 1.2rem;
+			color: red;
+			opacity: 0;
+			transform: scale(.7);
+			transform-origin: left bottom;
+		}
+		&.active{
+			input{
+				// color: rgb(255, 0, .7);
+				border: 1px solid rgb(255, 0, .7);
+				box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
+			}
+			span{
+				opacity: 1;
+			}
+		}
 		.generage_btn{
 			margin: 0 auto;
 		}
@@ -396,6 +422,22 @@ ul,li{
 			border: 1px solid #f5f5f5;
 			vertical-align: top;
 			position: relative;
+			cursor: pointer;
+
+			&.active {
+				opacity: 0.5;
+				// border: 2px solid;
+				border-radius: 1rem;
+				transform: scale(0.9);
+				.delete_file_block{
+					pointer-events:none;
+				}
+				.operate_file_block{
+					pointer-events:none;
+				}
+				img {
+				}
+			}
 			&.upload_component {
 				border: none;
 				display: flex;
@@ -412,7 +454,7 @@ ul,li{
 				width: 6rem;
 				height: 6rem;
 				border: 0.3rem solid #ededed;
-				border-radius: 10px;
+				border-radius: 1rem;
 				margin: 0;
 			}
 			.upload_file_item_content {
@@ -430,7 +472,9 @@ ul,li{
 				.upload_img {
 					display: block;
 					height: 100%;
-					width: 100%;
+					width: auto;
+					max-width: 100%;
+					object-fit: cover;
 				}
 
 				.delete_file_block {
@@ -446,6 +490,22 @@ ul,li{
 					position: absolute;
 					left: 0;
 					bottom: 0;
+					&.rightTop {
+                        width: 3.2rem;
+                        height: 3.2rem;
+                        background: rgba(0, 0, 0, 0.6);
+                        border-radius: 0.4rem;
+                        position: absolute;
+                        top: 0.9rem;
+                        right: 0.9rem;
+                        text-align: center;
+                        line-height: 3.2rem;
+                        left: auto;
+                        .icon-shanchu {
+                            font-size: 1.6rem;
+                            color: #fff;
+                        }
+                    }
 				}
 			}
 
@@ -459,7 +519,7 @@ ul,li{
 //剪裁弹窗
 .cut_pricture_modal{
 	.ant-modal-content{
-		border-radius: 10px;
+		border-radius: 1rem;
 	}
     .ant-modal-body{
         height: 65rem;