update scenarios page

src/components/ScenariosPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useMessage } from 'naive-ui'
-import { NButton, NCard, NInput, NModal } from 'naive-ui'
+import { NButton, NCard, NInput, NModal, NTag } from 'naive-ui'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -46,13 +46,24 @@ getScenarios()
     <div class="scenarios-container">
       <div class="scenario-block" @click="showAddScenarioModal = true">
         <div class="scenario-image-block scenario-image-plus">+</div>
+        <div class="scenario-content-block">
           <p class="scenario-title">Создать новый сценарий</p>
         </div>
+      </div>
 
       <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)"
         v-bind:key="scenario.id">
         <div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }"></div>
+
+        <div class="scenario-content-block">
           <p class="scenario-title">{{ scenario.name }}</p>
+          <p class="scenario-label">
+            <n-tag v-if="scenario.status == 'public'" :bordered="false" type="success"
+              class="status-block">Опубликовано</n-tag>
+            <n-tag v-if="scenario.status == 'draft'" :bordered="false" type="warning" class="status-block">В
+              разработке</n-tag>
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -89,33 +100,40 @@ getScenarios()
 }
 
 .scenario-block {
+  position: relative;
   margin: 10px;
   width: 160px;
+  height: 300px;
   cursor: pointer;
+  border-radius: 12px;
 
   /* background-color: #553333; */
+  background-color: #333;
+
+  border: 2px solid #333;
+}
+
+.scenario-content-block {
+  padding: 2px 10px;
 }
 
 .scenario-block:hover {
   color: #63e2b7;
+  border: 2px solid #63e2b7;
 }
 
 .scenario-image-block {
+  background-color: #111;
   height: 160px;
   border-radius: 10px;
 }
 
-.scenario-image-block:hover {
-  color: #63e2b7;
-  border: 2px solid #63e2b7;
-}
-
 .scenario-image-plus {
   font-size: 120px;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #333;
+  background-color: #111;
 }
 
 .scenario-image {
@@ -127,6 +145,12 @@ getScenarios()
   padding: 5px 0;
 }
 
+.status-block {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
 @media (width >=1024px) {
   .scenarios-container {
     height: calc(100vh - 70px);
@@ -134,11 +158,15 @@ getScenarios()
 
   .scenario-block {
     width: 250px;
+    height: 400px;
   }
 
   .scenario-image-block {
     height: 250px;
-    border-radius: 10px;
+  }
+
+  .scenario-content-block {
+    padding: 4px 10px;
   }
 }
 </style>