Top画面を作成#2

kyutech-stairs · Nov 17, 2019 · ab048c3 · ab048c3
1 parent 6fa2199
commit ab048c3
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 30 deletions.
diff --git a/...b-front/vue-pwa/src/assets/blank_cell.svg → ...b-front/vue-pwa/public/img/blank_cell.svg b/...b-front/vue-pwa/src/assets/blank_cell.svg → ...b-front/vue-pwa/public/img/blank_cell.svg
diff --git a/app/web-front/vue-pwa/src/components/Wind.ts b/app/web-front/vue-pwa/src/components/Wind.ts
@@ -0,0 +1,3 @@
+export default {
+  wind: []
+}
diff --git a/app/web-front/vue-pwa/src/views/Setting.vue b/app/web-front/vue-pwa/src/views/Setting.vue
@@ -1,28 +1,35 @@
 <template>
   <div class="c-setting">
-
-    <div class="c-setting_dora">
-      <h3 class="c-setting_dora_title">ドラ</h3>
-      <a href="/input">
-        <div class="c-setting_dora-box">
-          <img class="c-setting_dora-image" src="../assets/blank_cell.svg" alt="dora">
+    <div class="c-setting_top">
+      <div class="c-setting_dora">
+        <h3 class="c-setting_dora_title">ドラ</h3>
+        <a href="/input">
+          <div class="c-setting_dora-box">
+            <img class="c-setting_dora-image" src="../../public/img/blank_cell.svg" alt="dora">
+          </div>
+        </a>
+      </div>
+      <div class="c-setting_wind">
+        <div class="c-setting_wind-own">
+          <h3 class="c-setting_wind-own_title">自風</h3>
+          <MyRadio class="c-setting_wind-own_select" v-model="sampleForm.radio" name="sample-radio" :options="options"></MyRadio>
         </div>
-      </a>
-    </div>
-
-    <div class="self">
-      <h3>自風</h3>
-      <MyRadio v-model="sampleForm.radio" name="sample-radio" :options="options"></MyRadio>
-    </div>
-    <div class="place">
-      <h3>場風</h3>
-      <MyRadio v-model="sampleForm.radio" name="sample-radio" :options="options"></MyRadio>
+        <div class="c-setting_wind-ground">
+          <h3 class="c-setting_wind-ground_title">場風</h3>
+          <MyRadio class="c-setting_wind-ground_select" v-model="sampleForm.radio" name="sample-radio" :options="options"></MyRadio>
+        </div>
+      </div>
     </div>
 
-    <div class="first-hai">
-      <h3>初期牌</h3>
+    <div class="c-setting_haipai">
+      <h3 class="c-setting_haipai-title">配牌</h3>
       <a href="/input">
-        <div class="first-hai-box">
+        <div class="c-setting_haipai-box">
+          <ul class="c-setting_haipai-list">
+            <li class="c-setting_haipai-list-item" v-for="item of items" v-bind:key="item.id">
+              <img class="c-setting_haipai-list-item-image" :src="item.hai" alt="">
+            </li>
+          </ul>
         </div>
       </a>
     </div>
@@ -43,6 +50,22 @@ export default {
       input: {
         selected: true,
       },
+      items: [
+        { id: 1, hai: '/img/blank_cell.svg' },
+        { id: 2, hai: '/img/blank_cell.svg' },
+        { id: 3, hai: '/img/blank_cell.svg' },
+        { id: 4, hai: '/img/blank_cell.svg' },
+        { id: 5, hai: '/img/blank_cell.svg' },
+        { id: 6, hai: '/img/blank_cell.svg' },
+        { id: 7, hai: '/img/blank_cell.svg' },
+        { id: 8, hai: '/img/blank_cell.svg' },
+        { id: 9, hai: '/img/blank_cell.svg' },
+        { id: 10, hai: '/img/blank_cell.svg' },
+        { id: 11, hai: '/img/blank_cell.svg' },
+        { id: 12, hai: '/img/blank_cell.svg' },
+        { id: 13, hai: '/img/blank_cell.svg' },
+        { id: 14, hai: '/img/blank_cell.svg' },
+      ],
       sampleForm: {
         text: '',
         radio: '',
@@ -80,7 +103,14 @@ export default {
 
 <style lang="scss" scoped>
 .c-setting{
+   font-size: 25px;
+  &_top{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 30px;
+  }
   &_dora{
+    display: inline-block;
     &_title{
       display: inline-block;
       vertical-align: middle;
@@ -103,17 +133,64 @@ export default {
       height: 100%;
     }
   }
-}
-.first-hai-box {
-  width: 1320px;
-  height: 177px;
-  opacity: 0.89;
-  border-radius: 10px;
-  -webkit-backdrop-filter: blur(30px);
-  backdrop-filter: blur(30px);
-  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.16);
-  border: solid 4px #e8e8e8;
-  background-color: #4e4e4e;
+  &_wind{
+    display: inline-block;
+    &-own{
+      margin-top: 5px;
+      margin-bottom: 10px;
+      &_title{
+        display: inline-block;
+        margin-right: 10px;
+      }
+      &_select{
+        display: inline-block;
+      }
+    }
+    &-ground{
+      &_title{
+        display: inline-block;
+        margin-right: 10px;
+      }
+      &_select{
+        display: inline-block;
+      }
+    }
+  }
+  &_haipai{
+    margin-top: 80px;
+    &-title{
+      display: inline-block;
+      height: 60px;
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+    &-box{
+      display: inline-block;
+      width: 85%;
+      height: 60px;
+      opacity: 0.89;
+      border-radius: 10px;
+      -webkit-backdrop-filter: blur(30px);
+      backdrop-filter: blur(30px);
+      box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.16);
+      border: solid 4px #e8e8e8;
+      background-color: #4e4e4e;
+    }
+    &-list{
+      height: 100%;
+      display: flex;
+      justify-content: space-around;
+      &-item{
+        margin-top: 5px;
+        list-style: none;
+        display: inline-block;
+        &-image{
+          height: 90%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
 }
 
 </style>