뷰티파이 뷰3 웹사이트 프론트 문제

게시물 수정 , 삭제는 로그인 필요

vue3 , vuetify 로 웹사이트 개발 중입니다 회원가입 창을 만드는 중인데

창 크기 조절을 도저히 못하겠어 질문드립니다ㅜㅜ 더 넓고 정중앙에 오도록 어떻게 수정해야 하나요...

첫번째가 피그마 도안이고 두번째가 현재 나오는 화면입니다..ㅜㅜ 피그마처럼 비슷하게라도 안쪽 상황이 나아졌으면 좋겠습니다..

<template>

    <div class="vh-900 d-flex align-center justify-center">

      <v-card class="pa-0 pb-00" elevation="20" max-width="800" rounded="lg" tile>

        <h3 class="text-10 mb-4 text-center">회원가입</h3>

        <v-divider style="margin-top: 10px" color="brown"></v-divider>

 

        <v-container fluid>

          <v-row>

            <v-col cols="12">

              <div

                class="text-caption text-medium-emphasis d-flex justify-space-between"

                style="font-size: 12px; margin-top: 10px"

              >

                아이디

              </div>

 

              <v-text-field

                style="margin-top: 3px; border-radius: 2px; height: 20px"

                density="dense"

                placeholder="아이디를 입력하세요"

                variant="solo-filled"

              >

              </v-text-field>

            </v-col>

          </v-row>

 

          <v-row>

            <v-col cols="12">

              <div

                class="text-caption text-medium-emphasis d-flex justify-space-between"

                style="font-size: 12px; margin-top: 2px"

              >

                비밀번호

              </div>

 

              <v-text-field

                :type="visible ? 'text' : 'password'"

                :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"

                style="margin-top: 3px; height: 20px"

                density="dense"

                placeholder="비밀번호를 입력하세요"

                variant="solo-filled"

                @click:append-inner="visible = !visible"

              >

              </v-text-field>

            </v-col>

          </v-row>

 

          <v-row>

            <v-col cols="12">

              <div

                class="text-caption text-medium-emphasis d-flex align-center justify-space-between"

                style="font-size: 12px; margin-top: 3px"

              >

                비밀번호 확인

              </div>

 

              <v-text-field

                :type="visible ? 'text' : 'password'"

                :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"

                style="font-size: 10px; margin-top: 3px; height: 20px"

                density="dense"

                placeholder="비밀번호를 다시 입력하세요"

                variant="solo-filled"

                @click:append-inner="visible = !visible"

              ></v-text-field>

 

              <div

                class="text-caption text-medium-emphasis d-flex align-center justify-space-between"

                style="font-size: 12px; margin-top: 20px"

              >

                이름

              </div>

 

              <v-text-field

                style="margin-top: 3px; height: 20px; border-radius: 8px"

                density="dense"

                placeholder="이름을 입력하세요"

                variant="solo-filled"

              >

              </v-text-field>

            </v-col>

          </v-row>

 

          <v-row>

            <v-col cols="12">

              <div

                class="text-caption text-medium-emphasis d-flex align-center justify-space-between"

                style="font-size: 12px; margin-top: 1px"

              >

                휴대전화

              </div>

 

              <v-text-field

                style="margin-top: 3px; height: 20px; border-radius: 8px"

                density="dense"

                placeholder="휴대전화 번호를 입력하세요"

                variant="solo-filled"

              ></v-text-field>

            </v-col>

          </v-row>

 

          <v-row>

            <v-col cols="12">

              <div

                class="text-caption text-medium-emphasis d-flex align-center justify-space-between"

                style="font-size: 12px; margin-top: 2px"

              >

                이메일

              </div>

 

              <v-text-field

                style="margin-top: 3px; height: 20px; border-radius: 8px"

                density="dense"

                placeholder="이메일 주소를 입력하세요"

                variant="solo-filled"

              ></v-text-field>

            </v-col>

          </v-row>

        </v-container>

 

        <v-btn

          class="mb-8"

          color="brown"

          dark

          block

          size="small"

          style="border-radius: 10px"

        >

          <span class="white--text" style="font-size: 12px"> 회원가입하기 </span>

        </v-btn>

 

        <v-card-text class="text-center">

          이미 계정이 있으신가요? <a href="#" class="text-brown">로그인</a>

        </v-card-text>

      </v-card>

    </div>

  </template>

 

  <script>

    export default {

      data() {

        return {

          visible: false,

        }

      },

    }

  </script>

 

  <style scoped>

    .v-text-field .v-input__control {

      font-size: 10px; /* 텍스트 필드 내 텍스트 크기 조정 */

      text-align: center; /* 텍스트 가운데 정렬 */

    }

  </style>