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

- +
+
?
+ +
+
+
+ +
+
+
History
+
+
+
+
+
+
+
+
@@ -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; + } + } + } }