<!-- =============================================================================
 # 企微专属拦截页 — 非企微环境展示，引导用户在企微中打开
 #============================================================================= -->
<template>
  <div class="wework-only">
    <div class="wework-only__card">
      <!-- 企微图标 -->
      <div class="wework-only__icon">
        <svg viewBox="0 0 1024 1024" width="80" height="80">
          <path
            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 664c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm64-160c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32s32 14.3 32 32v120c0 17.7-14.3 32-32 32z"
            fill="#07C160"
          />
          <path
            d="M685.6 354.4c-9.6-9.6-25.2-9.6-34.8 0L512 493.2 373.2 354.4c-9.6-9.6-25.2-9.6-34.8 0s-9.6 25.2 0 34.8L486.8 537.6c4.8 4.8 11.1 7.2 17.6 7.2s12.8-2.4 17.6-7.2l138.8-148.4c9.5-9.6 9.5-25.2-.2-34.8z"
            fill="#07C160"
            opacity="0.6"
          />
        </svg>
      </div>

      <!-- 提示文案 -->
      <h2 class="wework-only__title">请在企业微信中打开</h2>
      <p class="wework-only__desc">
        IT智能服务台仅支持在企业微信内使用，<br />
        请通过企业微信工作台进入。
      </p>

      <!-- 操作指引 -->
      <div class="wework-only__steps">
        <div class="wework-only__step">
          <span class="wework-only__step-num">1</span>
          <span>打开企业微信</span>
        </div>
        <div class="wework-only__step">
          <span class="wework-only__step-num">2</span>
          <span>进入「工作台」</span>
        </div>
        <div class="wework-only__step">
          <span class="wework-only__step-num">3</span>
          <span>找到「IT支持服务」</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wework-only {
  /* 全屏居中，适配移动端 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* 企微设计语言：浅色背景 */
  background: #f5f6f7;
  padding: 24px;
  box-sizing: border-box;
}

.wework-only__card {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 48px 32px;
  max-width: 360px;
  width: 100%;
  /* 轻微阴影 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.wework-only__icon {
  margin-bottom: 24px;
}

.wework-only__title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px;
}

.wework-only__desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 32px;
}

.wework-only__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  padding: 0 16px;
}

.wework-only__step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #333;
}

.wework-only__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #07C160;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
</style>
