<template>
  <div class="chat-app-error-page">
    <div class="error-container">
      <div class="error-icon">
        <i class="iconfont icon-wifi"></i>
      </div>
      <div class="error-message">
        <span>您的网络好像波动了一下~</span>
      </div>
      <div class="reload-button" @click="handleReload">
        <span>重新加载</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, computed, nextTick } from 'vue'

const handleReload = () => {
  location.reload(true);
}

onMounted(() => {
  if (typeof plus !== 'undefined') {

  } else {
    document.addEventListener('plusready', () => {

    })
  }
})
</script>

<style scoped lang="scss">
.chat-app-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-position: bottom center;

  .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 80%;
    width: 320px;

    .error-icon {
      font-size: 48px;
      color: #ff6b6b;
      margin-bottom: 16px;
    }

    .error-message {
      font-size: 16px;
      color: #333333;
      margin-bottom: 24px;
      text-align: center;
    }

    .reload-button {
      padding: 12px 32px;
      background: $theme-primary;
      color: #ffffff;
      border-radius: 24px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        opacity: 0.9;
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}
</style>
