<!-- 工具箱详情页面 -->
<template>
  <KlNavTab />
  <div class="toolbox-detail">
    <div class="content-card">
      <div class="header">
        <img src="~/assets/images/avatar.png" alt="头像" class="avatar" />
        <div class="user-info">
          <h2 class="title">工具箱使用详情</h2>
          <p class="nickname">用户昵称</p>
          <p class="time">2024-06-15 14:30</p>
        </div>
      </div>
      <div class="body">
        <p class="text">
          这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
          使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
  .toolbox-detail {
    height: 100%;
    background-color: #f5f7fa;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .content-card {
      width: 100%;
      max-width: 600px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;

      .header {
        display: flex;
        align-items: center;
        padding: 24px;
        gap: 16px;
        border-bottom: 1px solid #f0f0f0;

        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid #f0f0f0;
        }

        .user-info {
          flex: 1;

          .title {
            margin: 0 0 8px 0;
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
          }

          .nickname {
            margin: 0 0 4px 0;
            font-size: 14px;
            color: #666;
          }

          .time {
            margin: 0;
            font-size: 12px;
            color: #999;
          }
        }
      }

      .body {
        padding: 24px;

        .text {
          margin: 0;
          font-size: 14px;
          line-height: 1.6;
          color: #333;
        }
      }
    }
  }
</style>
