add background

src/components/TeamStoryPage.vue

@@ -81,6 +81,7 @@ async function getStory() {
   const oldCount = story.value.places.length
 
   story.value = {
+    background: res.story!.background,
     introduction: res.story!.introduction,
     places:
       res.story!.places?.map((item, i) => {
@@ -127,6 +128,7 @@ async function addAction(newCode: string) {
 }
 
 type AdvancedStory = {
+  background?: string
   introduction?: Introduction
   places: AdvancedPlace[]
   questions: Question[]
@@ -225,6 +227,12 @@ useSimplePolling(() => {
 </script>
 
 <template>
+  <div
+    v-if="story.background"
+    class="case-background"
+    :style="{ backgroundImage: `url(${JSON.stringify(story.background)})` }"
+    aria-hidden="true"
+  />
   <div class="center-block-custom bottom-margin smooth-scroll" ref="scrollContainer">
     <div class="width700">
       <GameInputForm
@@ -309,6 +317,15 @@ useSimplePolling(() => {
 </template>
 
 <style scoped>
+.case-background {
+  background-position: center;
+  background-size: cover;
+  inset: 70px 0 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: -1;
+}
+
 .bottom-margin {
   height: calc(100dvh - 70px - 76px);
 }