Neue Bücherdetailseite

src/pages/buchdetailseite.vue

@@ -1,4 +1,4 @@
-<script setup>
+<!--<script setup>
 import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
 </script>
 
@@ -21,4 +21,163 @@ import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
 
 <style scoped lang="scss">
 
+</style>-->
+
+
+
+
+<script setup>
+import { ref } from "vue";
+import Fieberkurve from "@/components/Fieberkurve.vue";
+// import HarryPotterCover from "@images/harry_potter_stein_weisen_rowling.jpg";
+
+// Beispiel-Daten für das Buch
+const book = ref({
+  title: "Rich Dad Poor Dad",
+  subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
+  authors: [{ name: "Robert T. Kiyosaki" }],
+  rating: 4.5,
+  reviews: 11234,
+  blurb:
+    "Warum bleiben die Reichen reich und die Armen arm? Weil die Reichen ihren Kindern beibringen, wie sie mit Geld umgehen müssen, und die anderen nicht! Dieses Buch zeigt, wie man finanzielle Freiheit erreichen kann.",
+  genres: ["Finanzen", "Bildung", "Motivation"],
+  publishers: ["Plassen Verlag"],
+  pageCount: 240,
+  language: "Deutsch",
+  publishedDate: "2014-12",
+  isbn: "9783898798822",
+  format: "Taschenbuch",
+  coverUrl: "https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg",
+  purchaseLinks: [
+    {
+      name: "Amazon",
+      url: "https://www.amazon.de",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
+    },
+    {
+      name: "Thalia",
+      url: "https://www.thalia.de",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/8/87/Thalia_Logo.svg",
+    },
+    {
+      name: "Hugendubel",
+      url: "https://www.hugendubel.de",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/4/47/Hugendubel_Logo.svg",
+    },
+  ],
+});
+</script>
+
+<template>
+  <VContainer>
+    <!-- Hauptkarte für Buchdetails -->
+<!--    <VCard
+      title="Buchdetails: {{ book.title }}"
+      subtitle="{{ book.subtitle }}"
+      class="mb-6"
+    >-->
+    <VCard
+      title="Buchdetails"
+      class="mb-6"
+      >
+      <VRow>
+        <!-- Buchcover -->
+        <VCol cols="12" md="4" class="text-center">
+          <VImg
+            :src="book.coverUrl"
+            alt="Buchcover"
+            max-height="400px"
+            max-width="300px"
+          />
+        </VCol>
+
+        <!-- Buchinformationen -->
+        <VCol cols="12" md="8">
+          <h2 class="mb-1">{{ book.title }}</h2>
+          <h4 class="text-muted mb-4">{{ book.subtitle }}</h4>
+          <h5>von {{ book.authors.map(author => author.name).join(", ") }}</h5>
+
+
+          <!-- Statische Fieberkurve mit vordefinierten Werten -->
+          <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
+
+          <!-- Bewertung -->
+          <div class="d-flex align-center mb-3">
+            <VRating
+              v-model="book.rating"
+              readonly
+              length="5"
+              class="mr-2"
+              color="yellow"
+            />
+            <span>({{ book.reviews }} Bewertungen)</span>
+          </div>
+
+          <!-- Beschreibung -->
+          <p>{{ book.blurb }}</p>
+
+          <!-- Zusätzliche Details -->
+          <ul class="list-unstyled">
+            <li><strong>Genres:</strong> {{ book.genres.join(", ") }}</li>
+            <li><strong>Verlag:</strong> {{ book.publishers.join(", ") }}</li>
+            <li><strong>Seitenanzahl:</strong> {{ book.pageCount }}</li>
+            <li><strong>Sprache:</strong> {{ book.language }}</li>
+            <li><strong>Veröffentlicht:</strong> {{ book.publishedDate }}</li>
+            <li><strong>ISBN:</strong> {{ book.isbn }}</li>
+            <li><strong>Format:</strong> {{ book.format }}</li>
+          </ul>
+
+          <!-- Kaufmöglichkeiten -->
+          <div class="mt-4">
+            <h5>Kaufen bei:</h5>
+            <div class="d-flex flex-wrap">
+              <VBtn
+                v-for="link in book.purchaseLinks"
+                :key="link.name"
+                :href="link.url"
+                target="_blank"
+                class="ma-2"
+                outlined
+              >
+                <VImg :src="link.logo" max-width="24px" class="mr-2" /> {{ link.name }}
+              </VBtn>
+            </div>
+          </div>
+          <br>
+        </VCol>
+      </VRow>
+    </VCard>
+  </VContainer>
+</template>
+
+<style scoped>
+h2 {
+  font-size: 2rem !important;
+  font-weight: bold !important;
+}
+
+h4 {
+  font-size: 1.5rem !important;
+  margin-bottom: 1rem !important;
+}
+
+p {
+  font-size: 1rem !important;
+  line-height: 1.5 !important;
+}
+
+.VImg {
+  margin-right: 8px !important;
+}
+
+.VBtn {
+  display: flex !important;
+  align-items: center !important;
+  font-size: 0.9rem !important;
+}
+
+ul {
+  list-style-type: none !important;
+  padding: 0 !important;
+}
 </style>