minor css work for details page

This commit is contained in:
jmosrael@gmail.com
2024-05-04 05:30:28 +00:00
parent b3904e307e
commit 14c346b717

View File

@@ -1,32 +1,53 @@
<template> <template>
<div> <div class="game-title-box">
<h1>#{{ game.id }} - {{ game.title }}</h1> <h1>#{{ game.id }} - {{ game.title }}</h1>
</div> </div>
<div> <div class="gm-title-box">
<h2>GameMaster: {{ game.gamemaster }}</h2> <h2>GameMaster: {{ game.gamemaster }}</h2>
</div> </div>
<div> <div class="container">
<div class="d-flex flex-row justify-space-evenly">
<div class="result-box">
<h3>Payout</h3> <h3>Payout</h3>
<div>{{ game.payoutEB }} eb</div> <div>{{ game.payoutEB }} eb</div>
<div>{{ game.payoutIP }} IP</div> <div>{{ game.payoutIP }} IP</div>
<div>{{ game.payoutLoot }}</div> <div>{{ game.payoutLoot }}</div>
</div> </div>
<div> <div class="result-box">
<h3>Picks</h3> <h3>Picks</h3>
<div v-for="pick in picks"> <div v-for="pick in picks">
{{ pick.characterName }} {{ pick.characterName }}
</div> </div>
</div> </div>
<div> <div class="result-box">
<h3>Apps</h3> <h3>Apps</h3>
<div v-for="app in apps"> <div v-for="app in apps">
{{ app.characterName }} {{ app.characterName }}
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<style>
.game-title-box {
margin-top: 25px;
margin-left: 20px;
}
.gm-title-box {
margin-top: 5px;
margin-left: 20px;
}
.result-box {
margin: 10px;
margin-top: 40px;
}
</style>
<script setup lang="ts"> <script setup lang="ts">
import { watch, ref } from 'vue' import { watch, ref } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'