|
|
|
@ -1,9 +1,9 @@ |
|
|
|
<template> |
|
|
|
<div v-if="showModal" class="z-10 modal h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50"> |
|
|
|
<div class="py-3 sm:max-w-xl sm:mx-auto"> |
|
|
|
<div class="relative px-4 py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10"> |
|
|
|
<div class="py-3 sm:max-w-xl sm:mx-auto h-screen md:h-auto"> |
|
|
|
<div class="relative px-4 pt-2 pb-4 md:py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10"> |
|
|
|
<div class="max-w-md mx-auto"> |
|
|
|
<div class="flex items-center space-x-5"> |
|
|
|
<div class="hidden md:flex items-center 5"> |
|
|
|
<div class="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono">A</div> |
|
|
|
<div class="block pl-2 font-semibold text-xl self-start text-gray-700"> |
|
|
|
<h2 class="leading-relaxed">Create an Appointment</h2> |
|
|
|
@ -12,7 +12,7 @@ |
|
|
|
</div> |
|
|
|
<div class="divide-y divide-gray-200"> |
|
|
|
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7"> |
|
|
|
<div class="flex items-center space-x-4"> |
|
|
|
<div class="flex flex-col md:flex-row items-center md:space-x-4"> |
|
|
|
<div class="flex flex-col"> |
|
|
|
<label class="leading-loose">Start</label> |
|
|
|
<DatetimePicker @change="(v) => start = v" class="focus-within:text-gray-600 text-gray-400" :init="false" :startFromMonday="false" :autoClose="false" :startDate="start"> |
|
|
|
|
