feat: 裁剪

src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue

@@ -28,7 +28,7 @@
 						ref="imageClipRef"
 						v-bind="$attrs"
 						:ratio="data.ratio"
-						:fixedBox="type !== 'apparel'"
+						:fixedBox="data.isProduct ? type !== 'apparel' : false"
 						:url="data.url"
 						:type="type"
 						@change="(v) => (data.preview_url = v)"
@@ -47,7 +47,9 @@
 						<span class="icon"><svg-icon name="seller-preview" size="24" /></span>
 						<span class="label">Crop Preview</span>
 					</div>
-					<img :src="data.preview_url" />
+					<div class="preview-image">
+						<img :src="data.preview_url" />
+					</div>
 					<div class="submit" @click="onSubmit">
 						<svg-icon name="seller-dui" size="24" />
 					</div>
@@ -175,14 +177,21 @@ defineExpose({
 		display: flex;
 		align-items: center;
 		justify-content: center;
+
+		.crop-wrapper {
+			width: 100%;
+			.tips {
+				text-align: center;
+				color: #585858;
+				font-size: 1.4rem;
+				font-weight: 400;
+			}
+		}
 		&.is-product {
 			column-gap: 18.6rem;
-		}
-		.tips {
-			text-align: center;
-			color: #585858;
-			font-size: 1.4rem;
-			font-weight: 400;
+			.crop-wrapper {
+				width: initial;
+			}
 		}
 		> .image-clip {
 			flex: 1;
@@ -194,11 +203,13 @@ defineExpose({
 		> .preview {
 			margin-left: 6rem;
 			width: 28rem;
+			height: 100%;
 			display: flex;
 			flex-direction: column;
-			justify-content: center;
+			justify-content: flex-start;
 			align-items: center;
 			gap: 2.4rem;
+			min-height: 0;
 
 			> .title {
 				display: flex;
@@ -210,32 +221,42 @@ defineExpose({
 					font-size: 1.6rem;
 				}
 			}
-			> img {
+			> .preview-image {
+				width: 100%;
+				flex: 1;
+				min-height: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			> .preview-image > img {
 				width: 100%;
 				height: auto;
-				margin-bottom: 3rem;
+				max-height: 100%;
+			}
+			> .submit {
+				margin-top: auto;
+				flex-shrink: 0;
 			}
 			&.is-product {
 				margin-left: 0;
-				height: 100%;
-
-				justify-content: flex-start;
-				img {
+				> .preview-image > img {
 					width: 20.8rem;
 					height: 36.7rem;
-					margin-bottom: 0;
 					box-shadow: 4px 4px 16px 0px #0000000f;
 					border: 1px solid #ededed;
 				}
 				&.is-cover {
-					img {
+					> .preview-image > img {
 						// width: 29.7rem;
 						height: 37.5rem;
 					}
 				}
 				&.is-apparel {
-					img {
+					> .preview-image > img {
+						width: 100%;
 						height: auto;
+						max-height: 100%;
 					}
 				}
 			}