ログインページ見た目実装

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0" />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>

src/views/LoginView.vue

@@ -1,9 +1,61 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import BorderedButton from '@/components/Controls/BorderedButton.vue'
+import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
+</script>
 
 <template>
-  <div>
-    <h1>Login</h1>
+  <div
+    style="height: calc(100vh - 56px)"
+    class="flex items-center justify-center bg-background-secondary"
+  >
+    <div class="w-200 rounded-2xl bg-background-primary px-14 py-10">
+      <h1 class="mb-5 h-9 font-primary text-28px font-medium text-[#1E1E1E]">ログイン</h1>
+      <div class="flex h-44 items-start">
+        <div class="flex w-82 flex-col p-2.5">
+          <button class="service_button">
+            <img src="@/assets/service_icons/github.svg" class="mr-2.5 h-5" />
+            <p class="service_text">GitHub でログイン</p>
+          </button>
+          <button class="service_button">
+            <img src="@/assets/service_icons/google.svg" class="mr-2.5 h-5" />
+            <p class="service_text">Google でログイン</p>
+          </button>
+          <button class="service_button">
+            <img src="@/assets/service_icons/traq.svg" class="mr-2.5 h-5" />
+            <p class="service_text">traQ でログイン</p>
+          </button>
+        </div>
+        <div class="mx-4 h-full border-r border-border-secondary"></div>
+        <div class="flex w-82 flex-col p-2.5">
+          <input placeholder="メールアドレス" class="input" />
+          <input placeholder="パスワード" class="input" />
+          <div class="mb-3 flex h-10">
+            <PrimaryButton class="mr-3 h-full w-37 rounded-lg" text="ログイン" />
+            <BorderedButton class="h-full w-37 rounded-lg" text="新規登録" />
+          </div>
+          <router-link to="" class="h-4 text-12px font-normal text-[#3A3A3A] underline">
+            パスワードを忘れた場合</router-link
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .service_button {
+    @apply mb-3 flex h-10 w-full items-center justify-center rounded-lg border border-border-secondary;
+  }
+  .service_text {
+    @apply font-primary text-14px font-medium text-[#3A3A3A];
+  }
+  .input {
+    @apply mb-3 flex h-8 w-full items-center justify-center rounded-sm border border-border-secondary pl-3;
+  }
+}
+</style>

tailwind.config.js

@@ -17,22 +17,33 @@ export default {
       'text-tertiary': '#9a9a9a',
       'text-inv-primary': '#f0f0f0',
       'status-error': '#e02a2a',
-      'red': '#ff0000',
-      'white': '#ffffff',
+      red: '#ff0000',
+      white: '#ffffff'
     },
     fontFamily: {
-      primary: ['Open Sans', 'Noto Sans JP', 'sans-serif']
+      primary: ['Noto Sans JP', 'Open Sans', 'sans-serif']
     },
     extend: {
       spacing: {
-        '1.625': '0.40625rem',
-        '1.75': '0.4375rem',
-        '4.5': '1.125rem',
-        '7.5': '1.875rem',
-        '11.5': '2.875rem',
-        '27': '6.75rem',
-        '50': '12.5rem',
-        '62.5': '15.625rem'
+        1.625: '0.40625rem',
+        1.75: '0.4375rem',
+        4.5: '1.125rem',
+        7.5: '1.875rem',
+        11.5: '2.875rem',
+        27: '6.75rem',
+        37: '9.25rem',
+        50: '12.5rem',
+        58: '14.5rem',
+        62.5: '15.625rem',
+        82: '20.5rem',
+        78: '19.5rem',
+        172: '43rem',
+        200: '50rem'
+      },
+      fontSize: {
+        '12px': '12px',
+        '14px': '14px',
+        '28px': '28px'
       }
     }
   },