123123

src/views/Workshop/customize.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+</script>
+
+<template>
+	<header-title style-type="2" />
+	<div class="customize">
+		<div class="title">Customize your Look!</div>
+		<p class="tip">Refine your Look</p>
+		<div class="input-box">
+			<div class="help">?</div>
+			<input type="text" placeholder="Try: “Change background to Tokyo City”" />
+			<div class="send"><SvgIcon name="send" size="48" /></div>
+		</div>
+		<div class="card">
+			<img src="@/assets/images/workshop/posture/posture_1.png" />
+			<div class="select-box">
+				<div class="icon"><SvgIcon name="history" size="35" /></div>
+				<div class="label">History</div>
+				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
+			</div>
+			<div class="icons">
+				<div><SvgIcon name="love_0" size="35" /></div>
+				<div><SvgIcon name="reload" size="35" /></div>
+				<div><SvgIcon name="download" size="35" /></div>
+			</div>
+		</div>
+	</div>
+	<footer-navigation />
+</template>
+
+<style scoped lang="less">
+	
+	.customize {
+		width: 100%;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .title {
+			font-family: satoshiBold;
+			font-size: 8.4rem;
+			text-align: center;
+			line-height: 124%;
+			margin-top: 3.6rem;
+		}
+		> .tip {
+			margin-top: 0.56rem;
+			font-family: satoshiRegular;
+			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;
+			border: 0.2rem solid #D9D9D9;
+			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;
+				}
+			}
+		}
+	}
+</style>