fix

src/components/ScenarioPage.vue

@@ -7,7 +7,6 @@ import { useRoute } from 'vue-router'
 import { getAuthClient } from '@/api/auth_client'
 import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
 import HeaderMenu from '@/components/HeaderMenu.vue'
-import IntroBlock from '@/components/IntroBlock.vue'
 
 const message = useMessage()
 const client = getAuthClient()
@@ -40,26 +39,23 @@ getScenario(Number(scenarioId))
 <template>
   <div class="center-block-custom">
     <div class="width700">
-      <div class="scenario-title">
-        {{ scenario.name }}
-      </div>
-      <img class="scenario-image" :src="scenario.image" />
-      <div class="scenario-description">
-        {{ scenario.description }}
-      </div>
-      <div class="scenario-author">
-        <n-tag :bordered="false" type="success" class="status-block"
-          >Автор: {{ scenario.author?.username }}</n-tag
-        >
-      </div>
-      <IntroBlock
-        v-if="
-          scenario.story?.introduction &&
-          (scenario.story.introduction.text || scenario.story.introduction.audio)
-        "
-        :introduction="scenario.story.introduction"
-        mode="show"
-      />
+      <section class="scenario-card">
+        <div class="scenario-heading">
+          <p class="scenario-kicker">ДЕЛО ИЗ КАТАЛОГА</p>
+          <h1 class="scenario-title">{{ scenario.name }}</h1>
+        </div>
+        <div class="scenario-image-frame">
+          <img class="scenario-image" :src="scenario.image" :alt="scenario.name" />
+        </div>
+        <div class="scenario-details">
+          <p class="scenario-description">{{ scenario.description }}</p>
+          <div class="scenario-author">
+            <n-tag :bordered="false" type="success" class="status-block">
+              Автор: {{ scenario.author?.username }}
+            </n-tag>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
 
@@ -67,19 +63,85 @@ getScenario(Number(scenarioId))
 </template>
 
 <style scoped>
+.center-block-custom {
+  height: calc(100dvh - 70px);
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden auto;
+  padding-bottom: 24px;
+}
+
+.scenario-card {
+  background-color: #222;
+  border: 1px solid #222;
+  border-radius: 10px;
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+
+.scenario-heading {
+  padding: 20px 20px 12px;
+}
+
+.scenario-kicker {
+  color: #777;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  margin-bottom: 8px;
+}
+
 .scenario-title {
-  font-size: 24px;
-  margin-bottom: 10px;
+  color: #eee;
+  font-size: 28px;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.scenario-image-frame {
+  aspect-ratio: 1;
+  background-color: #111;
+  margin: 0 20px;
 }
 
 .scenario-image {
-  margin-bottom: 10px;
-  max-width: 400px;
+  display: block;
+  height: 100%;
+  object-fit: contain;
   width: 100%;
 }
 
+.scenario-details {
+  padding: 16px 20px 20px;
+}
+
 .scenario-description {
   color: #aaa;
-  margin-bottom: 10px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.scenario-author {
+  margin-top: 12px;
+}
+
+.status-block {
+  height: auto;
+  line-height: 1.5;
+  max-width: 100%;
+  min-height: var(--n-height);
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+@media (width >=1024px) {
+  .scenario-image-frame {
+    margin: 0 40px;
+  }
+
+  .scenario-heading,
+  .scenario-details {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
 }
 </style>