<template>
    <div class="content">
      <div class="sub-title-area mb-110">
            <h2>로그인</h2>
            <div class="breadcrumb-list">
                <ul>
                    <!-- Bind the image source dynamically for homeicon -->
                    <li><img :src="homeicon" alt="Home Icon"></li>
                    <li><img :src="righticon" alt="Home Icon"></li>
                    <li>로그인</li>
                </ul>
            </div>
      </div>
        <form action="login" class="login-form">
            <dl>
                <dd class="mb-25">
                    <label for="id">아이디</label>
                    <input type="text" id="id" class="wfull" placeholder="아이디를 입력하세요.">
                </dd>
                
                <dd class="mb-10">
                    <label for="pw">비밀번호</label>
                    <input type="text" id="pw" class="wfull" placeholder="비밀번호를 입력하세요.">
                </dd>
                <dd class="check-area flex-end mb-25">
                    <input type="checkbox" class="margin-top">
                    <label for="save">아이디 저장</label>
                </dd>
            </dl>
            <!-- Bind the image source dynamically for loginicon -->
            <button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button>
        </form>
    </div>
</template>

<script>
export default {
  data() {
    return {
      // Define the image sources
      homeicon: 'client/resources/images/icon/home.png',
      loginicon: 'client/resources/images/icon/lock.png',
      righticon: 'client/resources/images/icon/right.png',
    };
  }
};
</script>
