# 作業5 單一檔案元件 SFCs (Single File Components) 總共4個元件 ![](https://hackmd.io/_uploads/r1BRoqJ83.png) ## 1 ![](https://hackmd.io/_uploads/Sydf3qk82.png) ``` <template> <h1 class="jaaEvK" data-encore-id="type">登入到 Spotify</h1> <br> </template> <script> export default { name: "loginnew" } </script> <style scoped> .jaaEvK { text-align: center; justify-content: center; align-items: center; box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin-block: 0px; font-size: 2rem; font-weight: 700; font-family: var(--font-family,CircularSpTitle,CircularSpTitle-Tall,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva,var(--fallback-fonts,sans-serif)); color: inherit; } </style> ``` ## 2 ![](https://hackmd.io/_uploads/BJT9h5kL2.png) ``` <template> <div class="credentials"> <span id="email-label">電郵地址或用戶名稱</span> <label for="email"> <input type="text" id="email" placeholder="電郵地址或用戶名稱"> </label> <span id="password-label">密碼</span> <label> <input type="password" id="password" placeholder="密碼"> </label> <a href="https://accounts.spotify.com/en/password-reset?flow_id=e7a22513-1961-43f7-b049-b507394d9aa5%3A1682456236" id="forgot">忘記密碼?</a> <label for="remember-label"> <input type="checkbox" id="remember-label" checked="checked"><span class="checkmark">記住我</span> </label> <button id="log-in" class="a">登入</button> </div> </template> <script> export default { name: "login" } </script> <style scoped> .credentials { //background-color: lightpink; display: flex; flex-wrap: wrap; width: 450px; margin: auto; align-items: center; } #email-label { width: 100%; font-size: 14px; padding: 4px 0; font-weight: bold; } #email { width: 435px; padding: 12px 8px; border: 1px solid gray; height: 1.5rem; border-radius: 4px; margin-bottom: 8px; font-size: 16px; } #password-label { width: 100%; font-size: 14px; padding: 4px 0; font-weight: bold; } #password { width: 435px; padding: 12px 8px; border: 1px solid gray; border-radius: 4px; margin-bottom: 8px; font-size: 16px; } label { cursor: default; } #log-in { background-color: #1ed760; color: #6a6a6a; border: 1px solid gray; border-radius: 500px; } .a { margin: 10px auto; text-align: center; justify-content: center; align-items: center; width: 450px; height: 50px; display: flex; font-weight: 600; letter-spacing: 0.1rem; } </style> ``` ## 3 ![](https://hackmd.io/_uploads/B1qphqJI2.png) ``` <template> <button id="google" class="app-buttons" onclick="clickGoogle()"> <img src="google.png" alt="google-icon" class="icons"> <span> 以 GOOGLE 帳戶繼續</span> </button> </template> <script> </script> <style scoped> .app-buttons { margin: 10px auto; text-align: center; justify-content: center; align-items: center; width: 450px; height: 50px; display: flex; font-weight: 600; letter-spacing: 0.1rem; } .icons { width: 16px; } #google { background-color: white; color: #6a6a6a; border: 1px solid gray; border-radius: 500px; } </style> ``` ## 4 ![](https://hackmd.io/_uploads/ryaeT51I2.png) ``` <template> <div class="footer"> <hr id="footer-hr"> <span id="account">未註冊帳戶?</span> <button id="sign-up" onclick="sign_up()">註冊</button> </div> </template> <script> export default { name: "signup" } </script> <style scoped> .footer { display: flex; flex-flow: column; align-items: center; } #footer-hr { width: 450px; margin: 20px auto; } #account { //background-color: pink; text-align: center; font-weight: 600; padding: 16px; font-size: 20px; } #sign-up { background-color: white; width: 450px; color: #6a6a6a; font-weight: bold; font-size: 15px; height: 45px; border: 1px solid gray; border-radius: 500px; letter-spacing: 0.1rem; } </style> ``` ## HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` ## 執行結果 ![](https://hackmd.io/_uploads/rkwL6q1I3.png)