<script setup>
import { useRouter } from "vue-router"

const router = useRouter()

/** 返回默认示例页 */
function goHome() {
  router.push({ name: "ScreenHome" })
}
</script>

<template>
  <div class="screen-page screen-page--error">
    <div class="bilingual">
      <span class="bilingual__zh">页面不存在</span>
      <span class="bilingual__bo">ཤོག་ངོས་མི་འདུག</span>
    </div>
    <button type="button" class="error-btn" @click="goHome">
      <span class="error-btn__zh">返回首页</span>
      <span class="error-btn__bo">གཙོ་ངོས་ལ་ལོག</span>
    </button>
  </div>
</template>

<style scoped>
.screen-page--error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.error-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(24, 144, 255, 0.15);
  color: #e8eef5;
  cursor: pointer;
  font-size: 14px;
}

.error-btn:hover {
  background: rgba(24, 144, 255, 0.28);
}

.error-btn__bo {
  font-size: 12px;
  color: #9fb0c3;
}
</style>
