up

src/components/GameTeamsPanel.vue

@@ -2,6 +2,7 @@
 import { NButton, NFlex } from 'naive-ui'
 
 import type { Application, Team } from '@/api/generated/crabs/evening_detective_server'
+import UiBlock from '@/components/UiBlock.vue'
 
 defineProps<{
   teams: Team[]
@@ -18,10 +19,10 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="team-block team-block-hover" @click="emit('add')">
+  <UiBlock class="team-block-hover" @click="emit('add')">
     <p class="place-image-plus">+</p>
-  </div>
-  <div v-for="team in teams" :key="team.ID" class="team-block">
+  </UiBlock>
+  <UiBlock v-for="team in teams" :key="team.ID">
     <div class="team-content-block">
       <n-flex justify="space-between">
         <div class="title-block">
@@ -66,24 +67,17 @@ const emit = defineEmits<{
         Выдать: {{ application.name }}
       </n-button>
     </div>
-  </div>
+  </UiBlock>
 </template>
 
 <style scoped>
-.team-block {
-  background-color: #222;
-  border: 1px solid #222;
-  border-radius: 10px;
-  margin: 10px 0;
-}
-
 .team-block-hover:hover {
   background-color: #333;
   cursor: pointer;
 }
 
 .team-content-block {
-  padding: 16px;
+  padding: 8px 16px;
 }
 
 .team-name-block {
@@ -91,13 +85,13 @@ const emit = defineEmits<{
 }
 
 .link-button {
-  margin: 6px 6px 0 0;
+  margin: 8px 8px 0 0;
 }
 
 .place-image-plus {
   font-size: 32px;
   margin: 0;
-  padding: 12px;
+  padding: 16px;
   text-align: center;
 }
 </style>