update main page

src/views/HomeView.vue

@@ -1,15 +1,69 @@
 <script setup lang="ts">
-import MainPage from '@/components/MainPage.vue';
+import { DoorFrontFilled } from '@vicons/material'
+import { DoorOpen } from '@vicons/fa'
+import { Key24Regular } from '@vicons/fluent'
+import { Icon } from '@vicons/utils'
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router'
+import { NIcon, useMessage } from 'naive-ui'
+import { h } from 'vue'
+
+const router = useRouter()
+
+const message = useMessage()
+
+const isFoundKey = ref(false)
+
+const keyColorClass = computed(() => {
+  return {
+    'gold-color': isFoundKey.value
+  }
+})
+
+
+const goToLogin = () => {
+  if (isFoundKey.value) {
+    router.push('/login')
+    return
+  }
+  message.create(
+    "Дверь закрыта, куда же подевался ключ?",
+    {
+      icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
+    }
+  )
+}
 </script>
 
 <!-- Главная страница -->
 <template>
   <header class="header">
-    <router-link to="/login" class="btn-login">Войти</router-link>
+    <p @click="goToLogin" class="btn-login">
+
+      <Icon v-if="isFoundKey" class="door-icon">
+        <DoorOpen />
+      </Icon>
+      <Icon v-else class="door-icon">
+        <DoorFrontFilled />
+      </Icon>
+
+      Войти
+    </p>
   </header>
 
   <main>
-    <MainPage />
+    <h1 class="font-text">
+      Вечерний детектив
+    </h1>
+    <h3 class="font-text">
+      Дело №0
+    </h3>
+    <p class="content-text">
+      Поиграем?
+      <Icon class="key-icon" :class="keyColorClass" @click="isFoundKey = !isFoundKey">
+        <Key24Regular />
+      </Icon>
+    </p>
   </main>
 </template>
 
@@ -26,6 +80,33 @@ import MainPage from '@/components/MainPage.vue';
   top: 0;
   right: 0;
   padding: 8px 14px;
-  color: #ffffff
+  color: #ffffff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.font-text {
+  font-family: font_old_typer;
+}
+
+.content-text {
+  position: relative;
+  top: 100px;
+  right: -500px;
+}
+
+.key-icon {
+  position: relative;
+  top: 3px;
+  cursor: pointer;
+}
+
+.door-icon {
+  position: relative;
+  top: 3px;
+}
+
+.gold-color {
+  color: gold;
 }
 </style>