Merge pull request #57 from traPtitech/Natsuki/RadioCard

traPtitech · Dec 18, 2024 · 99974e8 · 99974e8
2 parents a39f896 + 3c1ac84
commit 99974e8
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -22,6 +22,7 @@
     />
   </head>
   <body>
-    <div id="app"><script type="module" src="/src/main.ts"></script></div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/pages/registerView.vue b/src/pages/registerView.vue
@@ -0,0 +1,49 @@
+<template>
+  <div :class="$style.wrapper">
+    <div :class="$style.container">
+      <div :class="$style.itemA">A</div>
+      <div :class="$style.itemB">B</div>
+      <div :class="$style.itemC">C</div>
+    </div>
+  </div>
+  <radio-card
+    title="選択肢"
+    content="選択肢選択肢選択肢選択肢選択肢選択肢選択肢選択肢"
+    name="a"
+    value="a"
+  />
+</template>
+
+<script setup lang="ts">
+import RadioCard from '@/shared/components/RadioCard.vue';
+</script>
+
+<style lang="scss" module>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+}
+
+.container {
+  display: grid;
+  width: 1024px;
+  padding: 32px;
+  grid-template-rows: 200px 120px;
+  grid-template-columns: 160px 160px 160px 160px 160px 160px;
+  border: 1px solid red;
+}
+.itemA {
+  border: 1px solid orange;
+  grid-column: 1 / span 3;
+}
+.itemB {
+  border: 1px solid blue;
+  grid-column: 4 / span 3;
+}
+.itemC {
+  border: 1px solid green;
+  grid-column: 1 / span 2;
+  padding-top: 32px;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,5 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { createRouter, createWebHistory } from 'vue-router';
+import registerView from '@/pages/registerView.vue';
 
 export const routerHistory = createWebHistory();
 
@@ -9,6 +10,11 @@ const routes: RouteRecordRaw[] = [
     name: 'Dashboard',
     component: () => import('@/pages/DashBoard.vue'),
   },
+  {
+    path: '/register',
+    name: 'register',
+    component: registerView,
+  },
 ];
 
 export default createRouter({

diff --git a/src/shared/components/RadioCard.vue b/src/shared/components/RadioCard.vue
@@ -0,0 +1,120 @@
+<template>
+  <label>
+    <input
+      :class="$style.input"
+      type="radio"
+      :name="props.name"
+      :value="props.value"
+      @change="model = props.value"
+    />
+    <div :class="$style.container">
+      <div :class="$style.title_wrapper">
+        <div :class="$style.title">{{ props.title }}</div>
+        <div :class="$style.btn"></div>
+      </div>
+      <div :class="$style.content">
+        {{ props.content }}
+      </div>
+    </div>
+  </label>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string;
+  content: string;
+  name: string;
+  value: string;
+}>();
+
+const model = defineModel<string>();
+</script>
+
+<style lang="scss" module>
+.container {
+  box-shadow: inset 0 0 0 1px $color-secondary;
+  border-radius: 4px;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.container:hover {
+  background-color: $color-primary-hover;
+}
+
+.input:checked + .container {
+  box-shadow: inset 0 0 0 3px $color-primary;
+}
+
+.title_wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+.title {
+  color: $color-text-primary;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.content {
+  font-size: 16px;
+  text-align: left;
+  align-self: stretch;
+  color: $color-text-dimmed;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.input {
+  display: none;
+}
+
+.btn {
+  cursor: pointer;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.btn::before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: $color-container-secondary;
+  border: 2px solid $color-secondary;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  box-sizing: border-box;
+}
+
+.input:checked + .container .title_wrapper .btn::before {
+  background-color: $color-primary;
+  border: none;
+}
+
+.input:checked + .container .title_wrapper .btn::after {
+  content: '';
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background-color: $color-background;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 11;
+}
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 $color-primary: #5cb860;
-$color-primary-hover: #7fc782;
+$color-primary-hover: #eef7ee;
 $color-primary-disabled: #a9d0ab;
 
 $color-secondary: #e2e2e2;
@@ -11,12 +11,15 @@ $color-secondary-disabled: #c9cac9;
 $color-border-hover: #2b2b2b;
 $color-error: #ff4500;
 
-$color-text-primary: #2b2b2b;
+$color-text-primary: #1a1a1c;
 $color-text-primary-disabled: #7a7a7a;
 $color-text-secondary: #515151;
 $color-text-secondary-pale: #5151515d;
 $color-text-secondary-disabled: #939393;
 $color-text-white: #ffffff;
+$color-text-dimmed: #626264;
+
+$color-container-secondary: #f1f1f4;
 
 $color-background: #ffffff;
 $color-background-dim: #2b2b2baa;