Item detail.vue
<template>
<div class="border-0 grid grid-cols-10 grid-rows-10 gap-2">
<div class="row-span-10 col-span-5 border-2 border-black text-center">
(Product picture)
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="row-span-5 col-span-5 border-2 border-black text-center">
(Product information)
</div>
<div class="row-span-5 col-span-2 "></div>
<div class="row-span-5 col-span-3 border-2 border-black text-center">
(Add to Cart - Button)
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
New_user.vue
<template>
<div class="flex justify-center items-center h-screen w-full bg-green-200">
<div class="w-1/2 bg-white rounded shadow-2xl p-8 m-4">
<h1 class="block w-full text-center text-gray-800 text-2xl font-bold mb-6">New User Register Page</h1>
<form action="/" method="post">
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="first_name">First Name</label>
<input class="border py-2 px-3 text-grey-800" type="text" name="first_name" id="first_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="last_name">Last Name</label>
<input class="border py-2 px-3 text-grey-800" type="text" name="last_name" id="last_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="email">Email</label>
<input class="border py-2 px-3 text-grey-800" type="email" name="email" id="email">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="lineid">Line ID</label>
<input class="border py-2 px-3 text-grey-800" type="text" name="lineid" id="lineid">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 font-bold text-lg text-gray-900" for="password">Password</label>
<input class="border py-2 px-3 text-grey-800" type="password" name="password" id="password">
</div>
<button class="block bg-green-300 hover:bg-teal-600 text-gray-600 uppercase text-lg mx-auto p-4 rounded" type="submit">Register</button>
</form>
<a class="block w-full text-center no-underline mt-4 text-sm text-gray-700 hover:text-gray-900" href="/login">Already have an account?</a>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
About.vue
<template>
<div>
<h2>About</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis maiores excepturi iste consectetur ratione expedita sed soluta culpa aliquid saepe voluptates, molestiae dolorem enim sunt porro non quibusdam id sint!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis maiores excepturi iste consectetur ratione expedita sed soluta culpa aliquid saepe voluptates, molestiae dolorem enim sunt porro non quibusdam id sint!</p>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
h2 {
margin-bottom: 20px;
font-size: 36px;
}
p {
margin: 20px 0;
}
</style>
ความคิดเห็น
แสดงความคิดเห็น