feat: tips

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

@@ -12,7 +12,7 @@
 		:keyboard="false"
 	>
 		<div class="image-clip-dialog-box">
-			<div class="header">
+			<div class="header" :class="{ 'is-product': data.isProduct }">
 				<div class="title">{{ data.title }}</div>
 				<div class="right">
 					<div class="submit" v-if="!data.isPreview" @click="onSubmit">
@@ -21,16 +21,19 @@
 					<button @click="onCancel">Cancel</button>
 				</div>
 			</div>
-			<div class="content">
-				<image-clip
-					ref="imageClipRef"
-					v-bind="$attrs"
-					:ratio="data.ratio"
-					:fixedBox="type !== 'apparel'"
-					:url="data.url"
-					:type="type"
-					@change="(v) => (data.preview_url = v)"
-				/>
+			<div class="content" :class="{ 'is-product': data.isProduct }">
+				<div class="crop-wrapper">
+					<div v-if="data.isProduct" class="tips">{{ tips }}</div>
+					<image-clip
+						ref="imageClipRef"
+						v-bind="$attrs"
+						:ratio="data.ratio"
+						:fixedBox="type !== 'apparel'"
+						:url="data.url"
+						:type="type"
+						@change="(v) => (data.preview_url = v)"
+					/>
+				</div>
 				<div
 					class="preview"
 					:class="{
@@ -55,16 +58,31 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { ref, computed } from "vue"
 import ImageClip from "./image-clip.vue"
 
-defineProps({
+const props = defineProps({
 	type: {
 		type: String,
 		default: () => false
 	}
 })
 
+const tips = computed(() => {
+	if (props.type === "cover") {
+		return "Align crown to top, mid-thigh to bottom for best results."
+	}
+	if (props.type === "mainProductImage") {
+		return "Align crown to top, foot base to bottom for best results."
+	}
+	if (props.type === "sketch") {
+		return "Align crown to top, foot base to bottom for best results."
+	}
+	if (props.type === "apparel") {
+		return "Trim whitespace and center your apparel sketch."
+	}
+})
+
 const data = reactive({
 	url: "",
 	title: "Crop Image",
@@ -126,6 +144,9 @@ defineExpose({
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 5rem;
+		&.is-product {
+			margin-bottom: 2.4rem;
+		}
 		> .title {
 			font-family: pingfang_heavy;
 			font-size: 2.4rem;
@@ -154,6 +175,15 @@ defineExpose({
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		&.is-product {
+			column-gap: 18.6rem;
+		}
+		.tips {
+			text-align: center;
+			color: #585858;
+			font-size: 1.4rem;
+			font-weight: 400;
+		}
 		> .image-clip {
 			flex: 1;
 			&.is-product {