detail page port

components/slices/Content.vue

@@ -0,0 +1,57 @@
+<template>
+    <section
+        class="slices-content"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <prismic-rich-text class="body entry" :field="slice.primary.body" />
+    </section>
+</template>
+
+<script setup>
+import PrismicRichText from '@/components/prismic/RichText.vue'
+
+const props = defineProps({
+    slice: Object,
+})
+</script>
+
+<style lang="scss">
+.slices-content {
+    margin-top: desktop-vw(31px);
+    margin-bottom: desktop-vw(31px);
+
+    .body {
+        width: desktop-vw(640px);
+        margin: auto;
+
+        h2 {
+            text-align: center;
+            margin-bottom: desktop-vw(31px);
+            @include h5;
+        }
+        p,
+        a,
+        ul {
+            text-transform: none;
+        }
+        p {
+            text-align: justify;
+        }
+    }
+
+    @include mobile {
+        margin-top: mobile-vw(31px);
+        margin-bottom: mobile-vw(31px);
+
+        .body {
+            width: 100%;
+            padding: 0 var(--layout-margin);
+
+            h2 {
+                margin-bottom: mobile-vw(31px);
+            }
+        }
+    }
+}
+</style>