---
# System prepended metadata

title: 作業5 單一檔案元件 SFCs (Single File Components)

---

# 作業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)

