From d4d104c6900d7f3ed5022186115744812c5192cf Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 16 Apr 2026 14:03:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20edit=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/seller/tips.png             | Bin 0 -> 686 bytes
 src/router/index.ts                           |   1 -
 .../BrandProfile/components/EditDetial.vue    |  55 ++
 .../EditDetail/components/Radio.vue           |  70 +++
 .../MyListings/EditDetail/index.vue           | 487 +++++++++++++-----
 5 files changed, 495 insertions(+), 118 deletions(-)
 create mode 100644 src/assets/images/seller/tips.png
 create mode 100644 src/views/SellerDashboard/BrandProfile/components/EditDetial.vue
 create mode 100644 src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue

diff --git a/src/assets/images/seller/tips.png b/src/assets/images/seller/tips.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c9f70a1f2d57beddf868bf85391de86c74b41b5
GIT binary patch
literal 686
zcmV;f0#W^mP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=0006hNkl<Zcmb_d$xXvR6#X+nQI0ObbPy^4DoCgRkg_NzpaPN#
z$Sq28u<0OF08~Iqa0xy~S$NO+Mnk;F2tR4$`Qw?tFGflb1cA5RZXXVZ!xff~BVT{T
z#+WtE-uC<bYBU-}MLbO2;cPbZ8;wRl#!>+g7VdVtNuD5kdazh59;~%r%AA^p_})O%
z^Wku4xM0-<&#+$k26ylHW<H-kW`w)Ma=Cm4qp^~!X0v$@#8LuU3+8-tn`n%Ezu%u^
z1W<EmGF9>knoi{pfS@s$KcBugjuv0oda!`L92aQ%&OPp2=lNS*^nw-R&IRuzF+e~m
z*`vSnn5*e`a?B!M_Zg_xEAnEJB=4vhgG7RvAO(O%AwCh8?sLJo(E=t3)7+$HQTxGQ
za4$6gJVQAKePY45!$TI0)CanW^>KLy#%(1cDc9<t+X((0_j<k8qPuY68gZi1K7;J>
z5bjw^HTZ~CX$m_T=3A+Vw2GDVs=lLuh#N%Qmzsd0ZR<9+sqZ(NO<QV$c3#GHZ9#l0
z(UF?qW~N19OqJ-eFyx<b3zxIPvRgvp2WSs&3gn;Awj<hhj=czJmy|bFH?OBx1>3!9
zAE#~Sr(HXpFw@hkps3yd8aQrGFB^j{7&moom-K17&&*`CBx&ENAPD7fkJ4&q%|Lh?
zXB{So-sKE<0`t)2S2*<DF<1dBWgeaWFlDb)P?veFO)*X5hy@BOK3lEUv}|sF18tm2
UzVHMLo&W#<07*qoM6N<$f`VHrEdT%j

literal 0
HcmV?d00001

diff --git a/src/router/index.ts b/src/router/index.ts
index 32d12dae..35bc7db2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -483,7 +483,6 @@ const routes: Array<RouteRecordRaw> = [
 		},
 		component: () => import("@/views/userManual.vue")
 	},
-
 	{
 		path: "/:catchAll(.*)",
 		redirect: "/404"
diff --git a/src/views/SellerDashboard/BrandProfile/components/EditDetial.vue b/src/views/SellerDashboard/BrandProfile/components/EditDetial.vue
new file mode 100644
index 00000000..ba45a8ac
--- /dev/null
+++ b/src/views/SellerDashboard/BrandProfile/components/EditDetial.vue
@@ -0,0 +1,55 @@
+<template>
+	<div class="edit-detail-wrapper">
+		<div class="edit-detail-header flex align-center space-between">
+			<div class="bread-crumb">导航</div>
+			<div class="operate-menu flex">
+				<div class="menu-btn flex align-center save">
+					<span>Save Draft</span>
+					<SvgIcon name="CSave" color="#000000" size="16" />
+				</div>
+				<div class="menu-btn flex align-center publish">
+					<span>Publish</span>
+					<SvgIcon name="CPublish" color="#ffffff" size="16" />
+				</div>
+			</div>
+		</div>
+    <div class="edit-detail-content"></div>
+	</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.c-svg {
+	width: initial;
+}
+.edit-detail-wrapper {
+	.menu-btn {
+		height: 6rem;
+		border: 0.15rem solid #000000;
+		border-radius: 4rem;
+		text-align: center;
+		line-height: 6rem;
+		padding: 0 2rem;
+		font-weight: 400;
+		font-size: 1.6rem;
+		column-gap: 0.8rem;
+    cursor: pointer;
+	}
+	.edit-detail-header {
+		width: 100%;
+		height: 6rem;
+    margin-bottom: 2rem;
+		.operate-menu {
+			column-gap: 2rem;
+			.publish {
+				background-color: #000000;
+				color: #ffffff;
+			}
+		}
+	}
+  .edit-detail-content{
+    padding-right: 6.4rem;
+  }
+}
+</style>
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue b/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
new file mode 100644
index 00000000..3b5129f2
--- /dev/null
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
@@ -0,0 +1,70 @@
+<template>
+	<div class="radio-button-group">
+		<button
+			v-for="item in options"
+			:key="item.key"
+			type="button"
+			:class="['radio-button', { 'is-active': modelValue === item.key }]"
+			@click="selectOption(item.key)"
+		>
+			{{ item.name }}
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Option {
+	name: string | number
+	value: string | number | boolean
+	key: string
+	optype: boolean
+}
+
+const props = defineProps<{
+	modelValue: string | number | boolean | null // v-model 绑定的值
+	options: Option[] // 按钮选项数组
+}>()
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: any): void
+}>()
+
+const selectOption = (value: any) => {
+	if (props.modelValue !== value) {
+		emit("update:modelValue", value)
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.radio-button-group {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.radio-button {
+	border: 1px solid #d9d9d9;
+	height: 3.2rem;
+	min-width: 8rem;
+	padding: 0 1.7rem;
+	color: #000;
+	cursor: pointer;
+	border-radius: 2rem;
+	outline: none;
+	background-color: #fff;
+	font-size: 1.2rem;
+	transition: all 0.2s ease;
+}
+
+.radio-button:hover {
+	border-color: #000;
+}
+
+.radio-button.is-active {
+	color: #fff;
+	background-color: #000;
+	border-color: #000;
+	font-family: pingfang_medium;
+}
+</style>
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/index.vue b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
index 72204ee6..9ca2e115 100644
--- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
@@ -14,16 +14,16 @@
 				<div class="operate-menu flex">
 					<div class="menu-btn flex align-center save">
 						<span>{{ $t("SellerListEdit.saveDraft") }}</span>
-						<SvgIcon name="CSave" color="#000000" size="16" />
+						<SvgIcon name="CSave" size="16" />
 					</div>
 					<div class="menu-btn flex align-center publish">
 						<span>{{ $t("SellerListEdit.publish") }}</span>
-						<SvgIcon name="CPublish" color="#ffffff" size="16" />
+						<SvgIcon name="CPublish" size="16" />
 					</div>
 				</div>
 			</template>
 		</seller-header>
-		<div class="edit-detail-content flex space-between">
+		<div class="edit-detail-content flex">
 			<div class="left">
 				<div class="main-image-container flex">
 					<div
@@ -32,25 +32,20 @@
 						:class="`main-image-item flex flex-col align-center ${type}`"
 					>
 						<div class="title" :class="{ required: type !== 'mainProductImage' }">
-							{{ $t(`SellerListEdit.${type}`) }}
+							{{ topImageTitleMap[type] }}
 						</div>
 						<div class="sketch-item flex flex-center" :class="type">
-							<div
-								v-show="selectList[currentIndex][type]"
-								class="crop-tool flex flex-center"
-							>
+							<div v-if="previewImageMap[type]" class="crop-tool flex flex-center">
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
 							<img
-								v-show="selectList[currentIndex][type]"
-								:src="selectList[currentIndex][type]"
+								v-if="previewImageMap[type]"
+								:src="previewImageMap[type]"
 								class="sketch-img"
+								:class="{ cover: type === 'cover' }"
 								alt=""
 							/>
-							<div
-								class="trigger flex flex-col align-center"
-								v-show="!selectList[currentIndex][type]"
-							>
+							<div v-else class="trigger flex flex-col align-center">
 								<template v-if="type === 'cover'">
 									<SvgIcon
 										class="trigger-icon"
@@ -63,10 +58,7 @@
 									</div>
 								</template>
 								<template v-else>
-									<img
-										src="@/assets/images/seller/image-placeholder.png"
-										class="trigger-img"
-									/>
+									<div class="trigger-img placeholder"></div>
 									<div class="trigger-tips">
 										{{ $t("SellerListEdit.productImageDesc") }}
 									</div>
@@ -92,17 +84,18 @@
 					<div class="product-image-list flex">
 						<div
 							v-for="(item, index) in prodImgList"
+							:key="index"
 							class="product-image-item flex flex-center"
 							:class="{ selected: item.selected }"
-							:key="index"
 							@click="handleSelectProdImg(index)"
 						>
 							<img
-								v-show="item.selected"
+								v-if="item.selected"
 								src="@/assets/images/seller/checked.png"
 								class="checked"
+								alt=""
 							/>
-							<img class="img-src" :src="item.url" />
+							<img class="img-src" :src="item.url" alt="" />
 							<div
 								v-if="item.selected && index === firstSelectedIndex"
 								class="main-pic"
@@ -127,7 +120,7 @@
 							:key="index"
 							class="sketch-element flex flex-center"
 						>
-							<img class="img-src" :src="item.url" />
+							<img class="img-src" :src="item.url" alt="" />
 							<div class="crop-tool flex flex-center">
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
@@ -141,9 +134,8 @@
 						<div class="form-item-label required">Product Name</div>
 						<div class="form-item-value product-name">
 							<a-input
-								v-model:value="selectList[currentIndex].productName"
+								v-model:value="currentListing.productName"
 								show-count
-								:rows="2"
 								placeholder="Enter product name"
 								:bordered="false"
 								:maxlength="60"
@@ -155,12 +147,59 @@
 						<div class="form-item-value price flex align-center">
 							<span>HK$</span>
 							<a-input
-								v-model:value="selectList[currentIndex].desc"
+								v-model:value="currentListing.price"
 								placeholder="0.00"
 								:bordered="false"
 							/>
 						</div>
 					</div>
+					<div class="form-item">
+						<div class="form-item-label required">Product Description</div>
+						<div class="form-item-value desc">
+							<a-textarea
+								v-model:value="currentListing.desc"
+								show-count
+								:rows="4"
+								placeholder="Enter product description"
+								:bordered="false"
+								:maxlength="500"
+							/>
+						</div>
+					</div>
+					<div class="form-item">
+						<div class="form-item-label required">Design for</div>
+						<div class="form-item-value no-border">
+							<Radio :options="genderOptions" v-model="currentListing.gender" />
+						</div>
+					</div>
+					<div class="form-item">
+						<div class="form-item-label with-tip">
+							<span class="required">Product Category</span>
+							<span class="help-text">select all that apply</span>
+						</div>
+						<div class="form-item-value no-border">
+							<Radio :options="categoryOptions" v-model="currentListing.category" />
+						</div>
+					</div>
+					<div class="license-note flex align-center">
+						<img src="@/assets/images/seller/tips.png" class="info-icon" />
+						<div class="note-copy">
+							By default, all sales follow the platform's licensing policy — buyers
+							will receive a usage license upon download.
+							<a href="javascript:void(0)">Learn more</a>
+						</div>
+					</div>
+				</div>
+				<div class="page-control flex align-center">
+					<a-pagination
+						v-model:current="currentPage"
+						:total="selectList.length"
+						:page-size="1"
+						showQuickJumper
+						showLessItems
+						responsive
+						:showSizeChanger="false"
+					/>
 				</div>
 			</div>
 		</div>
@@ -168,14 +207,55 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue"
+import { computed, ref, watch } from "vue"
 import SellerHeader from "../../seller-header.vue"
 import testImg from "@/assets/images/test.png"
-import { ElInput } from "element-plus"
+import Radio from "./components/Radio.vue"
+import { Https } from "@/tool/https"
+import { useStore } from "vuex"
 
-const topImageList = ["sketch", "mainProductImage", "cover"]
-const currentIndex = ref(0)
-const selectList = ref([
+const STORE = useStore()
+
+type CategoryOption = {
+	label: string
+	value: string
+}
+
+type ListingItem = {
+	sketch: string
+	mainProductImage: string
+	cover: string
+	productImage: string[]
+	apparelSketch: string[]
+	productName: string
+	price: string
+	desc: string
+	gender: string
+	category: string
+	prodImageList: Array<{
+		url: string
+		selected: boolean
+	}>
+}
+
+const topImageList = ["sketch", "mainProductImage", "cover"] as const
+const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
+	sketch: "Sketch",
+	mainProductImage: "Main Product Image",
+	cover: "Cover"
+}
+
+const genderOptions = STORE.state.UserHabit?.sex.value||[]
+
+const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
+	MALE: STORE.state.UserHabit?.MalePosition || [],
+	FEMALE: STORE.state.UserHabit?.FemalePosition || []
+}
+
+const currentPage = ref(1)
+const currentIndex = computed(() => currentPage.value - 1)
+
+const selectList = ref<ListingItem[]>([
 	{
 		sketch: testImg,
 		mainProductImage: "",
@@ -183,69 +263,105 @@ const selectList = ref([
 		productImage: [],
 		apparelSketch: [],
 		productName: "",
-		price: "",
+		price: "12",
+		desc: "",
+		gender: "FEMALE",
+		category: "",
+		prodImageList: [
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false }
+		]
+	},
+	{
+		sketch: testImg,
+		mainProductImage: "",
+		cover: "",
+		productImage: [],
+		apparelSketch: [],
+		productName: "",
+		price: "12",
 		desc: "",
 		gender: "",
-		category: ""
-	}
-])
-const prodImgList = ref([
-	{
-		url: testImg,
-		selected: false
+		category: "",
+		prodImageList: [
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false }
+		]
 	},
 	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
+		sketch: testImg,
+		mainProductImage: "",
+		cover: "",
+		productImage: [],
+		apparelSketch: [],
+		productName: "",
+		price: "12",
+		desc: "",
+		gender: "",
+		category: "",
+		prodImageList: [
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false }
+		]
 	}
 ])
 
+const prodImgList = computed(() => currentListing.value.prodImageList || [])
+
+const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
+const categoryOptions = computed(() => {
+	const gender = selectList.value[currentIndex.value].gender
+	return fallbackCategoryOptions[gender] || []
+})
+
+const currentListing = computed(() => selectList.value[currentIndex.value])
+
+const previewImageMap = computed(() => ({
+	sketch: currentListing.value.sketch,
+	mainProductImage: currentListing.value.mainProductImage,
+	cover:
+		currentListing.value.cover ||
+		currentListing.value.mainProductImage ||
+		currentListing.value.sketch
+}))
+
+const firstSelectedIndex = ref(null) //显示main标签的图片索引
 const selectedProdImgs = computed(() => {
 	return prodImgList.value.filter((item) => item.selected).length
 })
 
-const firstSelectedIndex = ref(-1)
-
 const handleSelectProdImg = (index: number) => {
-	const item = prodImgList.value[index]
-	item.selected = !item.selected
+	const target = prodImgList.value[index]
 
-	if (item.selected) {
-		if (firstSelectedIndex.value === -1) {
-			firstSelectedIndex.value = index
-			selectList.value[currentIndex.value].mainProductImage = item.url
-		}
-	} else if (firstSelectedIndex.value === index) {
-		selectList.value[currentIndex.value].mainProductImage = null
-		firstSelectedIndex.value = -1
+	const willSelect = !target.selected
+
+	target.selected = willSelect
+
+	if (willSelect && !currentListing.value.mainProductImage) {
+		currentListing.value.mainProductImage = target.url
+		firstSelectedIndex.value = index
+	}
+
+	if (!willSelect && currentListing.value.mainProductImage === target.url) {
+		firstSelectedIndex.value = null
+		currentListing.value.mainProductImage = ""
 	}
 }
-
-const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 </script>
 
 <style lang="less" scoped>
@@ -255,8 +371,13 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 }
 
 .edit-detail-wrapper {
-	overflow-y: auto;
-	// set the scollbar hidden
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	margin-top: -1rem;
+	overflow: hidden;
+
 	&::-webkit-scrollbar {
 		display: none;
 	}
@@ -268,15 +389,26 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 		text-align: center;
 		line-height: 6rem;
 		padding: 0 2rem;
-		font-weight: 400;
 		font-size: 1.6rem;
 		column-gap: 0.8rem;
 		cursor: pointer;
+		transition: all 0.25s ease;
+
+		&.save:hover {
+			background: #000;
+			color: #fff;
+		}
+
+		&.publish:hover {
+			background: #fff;
+			color: #000;
+		}
 	}
 
 	.edit-detail-header {
 		margin-bottom: 2rem;
 	}
+
 	.operate-menu {
 		column-gap: 2rem;
 
@@ -286,8 +418,18 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 		}
 	}
 }
+
 .edit-detail-content {
-	padding-right: 6.4rem;
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	justify-content: space-between;
+
+	&::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+
 	.required {
 		&::after {
 			content: "*";
@@ -295,17 +437,23 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 			margin-left: 0.4rem;
 		}
 	}
+
 	.left {
+		// flex: 1;
+		// min-width: 0;
+
 		.main-image-container {
-			column-gap: 3.6rem;
+			// max-width: 80.2rem;
+
 			.main-image-item {
+				flex-shrink: 0;
+
 				.title {
-					font-weight: 400;
-					font-style: bold;
 					font-size: 1.4rem;
 					margin-bottom: 0.8rem;
 					text-align: center;
 				}
+
 				.sketch-item {
 					width: 11.6rem;
 					height: 20.4rem;
@@ -313,62 +461,77 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 					border-radius: 1rem;
 					position: relative;
 					background-color: #f6f6f6;
+					overflow: hidden;
+
 					&.cover {
-						width: 16.17rem;
-						// border-style: dashed;
+						width: 16.2rem;
+						background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
 						border: none;
-						background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='13%2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 					}
+
 					.crop-tool {
 						position: absolute;
-						top: 0.4rem;
-						right: 0.4rem;
+						top: 0.8rem;
+						right: 0.8rem;
 						width: 2rem;
 						height: 2rem;
 						border-radius: 50%;
-						cursor: pointer;
 						background-color: #000000;
+						z-index: 1;
+						cursor: pointer;
 					}
+
 					.sketch-img {
-						// width: 100%;
 						height: 100%;
 					}
+
 					.trigger {
 						row-gap: 1.2rem;
 						cursor: pointer;
 						height: 100%;
-						padding-top: 6.8rem;
-						.trigger-img {
+						padding: 6rem 2rem 0;
+
+						.placeholder {
 							width: 2.4rem;
 							height: 2.4rem;
+							border-radius: 0.6rem;
+							background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
 						}
+
 						.trigger-tips {
 							font-size: 1.2rem;
-							width: 9rem;
 							text-align: center;
 							color: #585858;
+							line-height: 1.3;
 						}
 					}
 				}
 			}
 		}
+
 		.product-image-list-container {
 			margin-top: 3rem;
+
 			.title {
-				font-weight: 400;
-				font-style: bold;
 				font-size: 1.4rem;
 				margin-bottom: 1.2rem;
+
+				.main-title {
+					font-weight: 400;
+					font-style: bold;
+				}
+
 				.sub-title {
 					font-size: 1.2rem;
 					color: #999;
 				}
+
 				.title-right {
 					color: #585858;
 					font-size: 1.4rem;
-					font-weight: 400;
 				}
 			}
+
 			.product-image-list {
 				overflow-x: auto;
 				overflow-y: hidden;
@@ -376,19 +539,18 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 				max-width: 80.2rem;
 				padding-bottom: 1.2rem;
 
-				//滚动条高度0.8rem，背景色#D9D9D9,滚动条圆角0.4rem，小方块为黑色
 				&::-webkit-scrollbar {
 					height: 0.8rem;
 				}
+
 				&::-webkit-scrollbar-track {
 					background: #d9d9d9;
 					border-radius: 0.8rem;
-					height: 0.8rem;
 				}
+
 				&::-webkit-scrollbar-thumb {
 					background: #000000;
 					border-radius: 0.8rem;
-					height: 0.8rem;
 				}
 
 				.product-image-item {
@@ -398,6 +560,9 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 					border: 0.15rem solid #c7c7c7;
 					position: relative;
 					cursor: pointer;
+					overflow: hidden;
+					flex-shrink: 0;
+
 					&::after {
 						position: absolute;
 						top: 0;
@@ -409,22 +574,28 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 						opacity: 0.7;
 						border-radius: 1rem;
 					}
+
 					&.selected {
-						// border-color: #000000;
+						border-color: #000;
+
 						&::after {
 							display: none;
 						}
 					}
+
 					.checked {
 						width: 2rem;
 						height: 2rem;
 						position: absolute;
 						top: 0.8rem;
 						right: 0.8rem;
+						z-index: 1;
 					}
+
 					.img-src {
 						height: 100%;
 					}
+
 					.main-pic {
 						position: absolute;
 						height: 2.4rem;
@@ -433,8 +604,7 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 						right: 0.8rem;
 						bottom: 0.8rem;
 						z-index: 1;
-						background: #000000cc;
-						font-weight: 400;
+						background: rgba(0, 0, 0, 0.8);
 						color: #fff;
 						font-size: 1.4rem;
 						border-radius: 1.2rem;
@@ -443,34 +613,46 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 				}
 			}
 		}
+
 		.apparel-container {
 			margin-top: 3rem;
+
 			.title {
-				font-weight: 400;
-				font-style: bold;
 				font-size: 1.4rem;
 				margin-bottom: 0.8rem;
+
 				.main-title {
+					font-weight: 400;
+					font-style: bold;
+
 					&::after {
 						content: "*";
 						color: #df2b2c;
 					}
 				}
+
 				.sub-title {
 					font-size: 1.2rem;
 					color: #999;
 				}
 			}
+
 			.sketch-list-container {
 				column-gap: 1rem;
+				flex-wrap: wrap;
+
 				.sketch-element {
 					width: 10rem;
+					height: 14.6rem;
 					border: 0.15rem solid #c7c7c7;
 					border-radius: 1.2rem;
 					position: relative;
+					overflow: hidden;
+
 					.img-src {
-						width: 100%;
+						height: 100%;
 					}
+
 					.crop-tool {
 						position: absolute;
 						top: 0.4rem;
@@ -478,24 +660,40 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 						width: 2rem;
 						height: 2rem;
 						border-radius: 50%;
-						cursor: pointer;
 						background-color: #000000;
 					}
 				}
 			}
 		}
 	}
+
 	.right {
 		width: 55.2rem;
+		flex-shrink: 0;
+
 		.form-container {
 			row-gap: 3rem;
+
 			.form-item {
 				.form-item-label {
 					font-size: 1.4rem;
 					font-weight: 400;
 					font-style: bold;
 					margin-bottom: 0.6rem;
+					line-height: 1.5;
+
+					&.with-tip {
+						display: flex;
+						align-items: center;
+						column-gap: 0.8rem;
+					}
+
+					.help-text {
+						font-size: 1rem;
+						color: #999;
+					}
 				}
+
 				.form-item-value {
 					border: 0.16rem solid #d1d1d1;
 					border-radius: 1.2rem;
@@ -503,32 +701,87 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 					padding: 1.6rem;
 					box-sizing: border-box;
 					font-size: 1.2rem;
-					font-weight: 400;
 					color: #000;
+
+					&.no-border {
+						border: none;
+						padding: 0;
+					}
+
 					&.price {
 						column-gap: 0.6rem;
 					}
 
-					:deep(.ant-input) {
+					:deep(.ant-input),
+					:deep(.ant-input-affix-wrapper),
+					:deep(.ant-input-textarea textarea) {
 						border: none;
 						padding: 0;
 						font-size: 1.2rem;
-						font-weight: 400;
+						color: #000;
+						box-shadow: none;
 					}
-					:deep(.ant-input-affix-wrapper) {
-						padding: 0;
-						font-weight: 400;
-						input {
-							font-size: 1.2rem;
-						}
+
+					:deep(.ant-input) {
+						line-height: 1.5;
 					}
+
 					:deep(.ant-input-show-count-suffix) {
 						color: #df2c2c;
 						font-size: 1rem;
 					}
+
+					:deep(textarea.ant-input) {
+						resize: none;
+						min-height: 5.4rem;
+						padding-bottom: 1.8rem;
+						line-height: 1.5;
+					}
+
+					:deep(.ant-input-textarea-show-count) {
+						position: relative;
+						&::after {
+							float: none;
+							position: absolute;
+							color: #df2c2c;
+							bottom: 0;
+							right: 1.6rem;
+						}
+					}
 				}
 			}
 		}
+
+		.license-note {
+			padding: 1.6rem;
+			column-gap: 1.6rem;
+			background: #f7f7f7;
+			border-radius: 0.8rem;
+
+			.info-icon {
+				width: 2.4rem;
+				height: 2.4rem;
+				flex-shrink: 0;
+			}
+
+			.note-copy {
+				font-size: 1.2rem;
+				line-height: 1.5;
+				color: #000;
+				font-weight: 400;
+				font-style: medium;
+
+				a {
+					color: #0080ed;
+					text-decoration: underline;
+					margin-left: 0.4rem;
+				}
+			}
+		}
+		.page-control {
+			justify-content: flex-end;
+			margin-top: 4rem;
+		}
 	}
 }
 </style>