diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
new file mode 100644
index 0000000..98131e7
--- /dev/null
+++ b/src/assets/icons/download.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/history.svg b/src/assets/icons/history.svg
new file mode 100644
index 0000000..66e5f25
--- /dev/null
+++ b/src/assets/icons/history.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/icons/send.svg b/src/assets/icons/send.svg
new file mode 100644
index 0000000..8814a0d
--- /dev/null
+++ b/src/assets/icons/send.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/xialajiantou.svg b/src/assets/icons/xialajiantou.svg
new file mode 100644
index 0000000..16c88d5
--- /dev/null
+++ b/src/assets/icons/xialajiantou.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/HeaderTitle.vue b/src/components/HeaderTitle.vue
index 51644be..eccc718 100644
--- a/src/components/HeaderTitle.vue
+++ b/src/components/HeaderTitle.vue
@@ -17,7 +17,7 @@
diff --git a/src/views/Workshop/customize/home.vue b/src/views/Workshop/customize/home.vue
index 25dcd1b..3797d62 100644
--- a/src/views/Workshop/customize/home.vue
+++ b/src/views/Workshop/customize/home.vue
@@ -5,7 +5,24 @@
Customize your Look!
Refine your Look
-
+
+
+

+
+
+
@@ -29,5 +46,96 @@
font-size: 3.74rem;
line-height: 124%;
}
+ > .input-box {
+ margin-top: 7.3rem;
+ width: 87.5rem;
+ height: 8.3rem;
+ border-radius: 0.5rem;
+ border: 0.4rem solid #000000;
+ box-sizing: content-box;
+ display: flex;
+ align-items: center;
+ > .help {
+ margin: 0 2.5rem;
+ width: 4.2rem;
+ height: 4.2rem;
+ border-radius: 50%;
+ border: 0.3rem solid #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 3rem;
+ }
+ > input {
+ width: 0;
+ flex: 1;
+ height: 100%;
+ font-family: satoshiRegular;
+ font-size: 3.4rem;
+ color: #000;
+ border: none;
+ &::placeholder {
+ color: #777;
+ }
+ }
+ > .send {
+ margin: 0 2.5rem;
+ --svg-icon-color: #000;
+ }
+ }
+ > .card {
+ margin-top: 6.9rem;
+ width: 79.8rem;
+ height: 107.4rem;
+ border-radius: 2rem;
+ box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
+ overflow: hidden;
+ > * {
+ position: absolute;
+ }
+ > img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ > .select-box {
+ top: 1.8rem;
+ left: 1.8rem;
+ width: 30.2rem;
+ height: 6.52rem;
+ border-radius: 0.91rem;
+ border: 0.24rem solid #000;
+ display: flex;
+ align-items: center;
+ >.icon{
+ margin: 0 1.8rem;
+ }
+ >.label{
+ flex: 1;
+ font-family: satoshiRegular;
+ font-size: 2.97rem;
+ color: #000;
+ }
+
+ }
+ > .icons {
+ bottom: 0.27rem;
+ right: 0;
+ height: 10rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ > div {
+ margin-right: 1.5rem;
+ width: 6.2rem;
+ height: 6.2rem;
+ border-radius: 1rem;
+ border: 0.2rem solid #000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
}