we have winds !

frontend/src/views/Betaparty.vue

 <template>
   <div class="about">
-    <h1>This is minimal page</h1>
-    <hand/>
+    <hand class="player-hand"/>
+    <div class="winds">
+      <img :src="this.topWindGlyph" class="player-wind top-wind">
+      <img :src="this.rightWindGlyph" class="player-wind right-wind">
+      <img :src="this.bottomWindGlyph" class="player-wind bottom-wind">
+      <img :src="this.leftWindGlyph" class="player-wind left-wind">
+    </div>
   </div>
 </template>
 
@@ -15,11 +20,80 @@ export default {
     data(){ //data must be a function 
     return{
         id: 10,
+        topWindGlyph: null,
+        rightWindGlyph: null,
+        bottomWindGlyph: null,
+        leftWindGlyph: null,
         }
+    },
+    mounted() {
+      this.topWindGlyph = require('@/assets/img/mahjong-tiles/Black/Pei.svg')
+      this.rightWindGlyph = require('@/assets/img/mahjong-tiles/Black/Shaa.svg')
+      this.bottomWindGlyph = require('@/assets/img/mahjong-tiles/Black/Nan.svg')
+      this.leftWindGlyph = require('@/assets/img/mahjong-tiles/Black/Ton.svg')
     }
 }
 </script>
 
 
 <style>
+.player-hand{
+  position: absolute;
+  bottom: 9%;
+  left: 200px;
+}
+
+.winds{
+  width:276px;
+  height:276px;
+  position: absolute;
+  top: 50%;
+  margin-top: -138px;
+  left: 560px;
+}
+
+.winds::after {
+  content: "";
+  background: url('../assets/img/mahjong-tiles/Black/Ton.svg');
+  height: 276px;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;   
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.player-wind {
+  width: 74px;
+  height: 100px;
+  position: absolute;
+  left: 101px;
+  right: 101px;
+  top: 88px;
+  bottom: 88px;
+
+}
+
+.top-wind{
+  top: 0;
+  bottom: 176px;
+}
+.right-wind{
+  right: 0;
+  left: 202px;
+}
+.bottom-wind{
+  bottom: 0;
+  top: 176px;
+}
+.left-wind{
+  left: 0;
+  right: 202px;
+}
+
 </style>
\ No newline at end of file