update

src/assets/main.css

@@ -46,3 +46,10 @@
   height: calc(100dvh - 100px);
   text-align: center;     /* центрирование текста */
 }
+
+@media (min-width: 1025px) {
+  .center-block-custom {
+    width: 700px;
+    margin: 0 auto;
+  }
+}

src/components/AdminWindow.vue

@@ -79,40 +79,23 @@ onMounted(async () => {
 
   <TeamQRCode :data="qrurl" :title="qrteam" />
 
-  <table>
+  <div class="center-block-custom content-block">
-    <thead>
+    <div class="team-header-block">Команды</div>
-      <tr>
+
-        <th>№</th>
+    <div class="team-block" v-for="team in teams.teams" :key="team.name">
-        <th>Название команды</th>
+      <div class="team-content-block">
-        <th>Поездки</th>
+        <div class="team-name-block">
-        <th>Приложения</th>
+          <a v-on:click="qrurl = team.url, qrteam = team.name">QR</a>
-        <th>Qr</th>
+          {{ team.name }}
-      </tr>
+        </div>
-    </thead>
+        <div>Поездки: {{ team.spendTime }}</div>
-    <tbody>
+      </div>
-      <tr v-for="(team, number) in teams.teams" :key="team.name">
+      <div v-for="application in team.applications" :key="application.id" class="link-button"
-        <td>
+        @click="apiGaveApplication(team.id, application.id)">
-          {{ number + 1 }}
+        Выдать: {{ application.name }}
-        </td>
+      </div>
-        <td class="team-name">{{ team.name }}
+    </div>
-          <a :href="team.url" target="_blank">[url]</a>
-        </td>
-        <td class="cell-center">{{ team.spendTime }}</td>
-        <td>
-          <div v-for="application in team.applications" :key="application.id">
-            {{ application.name }} <button class="link-button"
-              @click="apiGaveApplication(team.id, application.id)">Выдано</button>
-          </div>
-        </td>
-        <td class="cell-center">
-          <a v-on:click="qrurl = team.url, qrteam = team.name">QR</a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
 
-  <div class="form-custom form-block">
-    <div class="center-block-custom">
     <form @submit.prevent="addTeam">
       <div>
         <input class="input-custom" v-model="teamName" type="text" placeholder="Название команды">
@@ -122,7 +105,6 @@ onMounted(async () => {
       </div>
     </form>
   </div>
-  </div>
 
 </template>
 
@@ -135,57 +117,16 @@ onMounted(async () => {
   margin: 5px 10px 5px 0;
 }
 
-table {
-  width: 700px;
-  border-collapse: collapse;
-  margin: 30px auto;
-  border: 1px solid #444444;
-}
-
-th,
-td {
-  padding: 12px;
-  text-align: left;
-}
-
-th {
-  background-color: var(--main-color);
-  color: white;
-  font-weight: bold;
-}
-
-tr:nth-child(odd) {
-  background-color: rgb(239, 239, 239);
-}
-
-tr:nth-child(even) {
-  background-color: rgb(255, 255, 255);
-}
-
-tr:hover {
-  background-color: rgb(207, 207, 207);
-}
-
-.time {
-  white-space: nowrap;
-}
-
-.team-name {
-  font-weight: 600;
-}
-
 .link-button {
   /* Основные стили */
-  display: inline;
   border: none;
-  background: none;
+  color: white;
-  padding: 0;
+  background-color: var(--main-color);
+  padding: 15px;
   margin: 0;
   font: inherit;
   cursor: pointer;
-  color: var(--main-color);
   /* Стандартный цвет ссылки */
-  text-decoration: underline;
   font-weight: 600;
 
   /* Убираем стандартное оформление кнопки */
@@ -195,14 +136,15 @@ tr:hover {
 
   /* Дополнительные свойства для лучшего отображения */
   line-height: inherit;
-  text-align: left;
+  text-align: center;
 }
 
 /* Состояние при наведении */
 .link-button:hover {
-  color: var(--second-color);
+  color: #ccc;
   /* Немного темнее */
   text-decoration: none;
+  background-color: var(--second-color);
 }
 
 /* Состояние при активации (нажатии) */
@@ -220,11 +162,6 @@ tr:hover {
   /* Кастомный фокус */
 }
 
-.form-block {
-  width: 700px;
-  margin: 0 auto;
-}
-
 a {
   /* Основные стили */
   color: var(--second-color);
@@ -258,7 +195,27 @@ a {
   margin-bottom: 30px;
 }
 
-.cell-center {
+.content-block {
-  text-align: center;
+  padding: 10px;
+}
+
+.team-header-block {
+  font-weight: 700;
+  font-size: 30px;
+}
+
+.team-block {
+  border: solid 1px #003366;
+  border-radius: 5px;
+  margin: 15px 0;
+}
+
+.team-content-block {
+  padding: 10px;
+}
+
+.team-name-block {
+  font-weight: 600;
+  font-size: 20px;
 }
 </style>