lanecarford_front/src/views/Workshop/customize.vue

<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>