<template>
  <div class="detail-page">
    <div class="nav-bar">
      <div class="nav-left" @click="goBack">
      <van-icon size="20" name="arrow-left"></van-icon>
      </div>
      <div class="nav-title">问题描述详情</div>
      <div class="nav-right"></div>
    </div>

    <div class="article-content">

      <h1 class="article-h1">Introduction</h1>

      <p class="article-p">
        The world of cryptocurrency can be both exciting and overwhelming for beginners. With high potential rewards come significant risks, but a well-thought-out strategy can help you navigate this volatile market with confidence. In this guide, we'll explore the top five crypto investment strategies to help you get started.
      </p>

      <div class="article-img-wrapper">
        <img
          src="https://images.unsplash.com/photo-1621416894569-0f39ed31d247?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
          alt="Crypto Strategy"
          class="article-img"
        />
      </div>

      <h2 class="article-h2">Diversify Your Portfolio</h2>

      <p class="article-p">
        One of the cardinal rules of investing is diversification, and it applies equally to crypto. Putting all your money into one coin might seem tempting, especially if it's trending, but it exposes you to high risk. Here's how you can diversify effectively:
      </p>

    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { onMounted } from 'vue';

const router = useRouter();
const route = useRoute(); // 用于获取参数，比如文章ID

const goBack = () => {
  router.back();
};

onMounted(() => {
  // 实际开发中，这里可以根据 route.query.id 或 route.params.id 去请求后台接口获取文章内容
  console.log('当前文章ID:', route.query.id);
});
</script>

<style scoped>
/* 页面容器 */
.detail-page {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  /* 防止刘海屏遮挡 */
  padding-bottom: 40px;
}

/* 导航栏 (复用之前的样式，保持一致) */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  position: sticky; /* 吸顶 */
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #f5f5f5; /* 详情页一般加个浅底边框区分 */
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
}
.nav-left, .nav-right { width: 24px; display: flex; align-items: center;}

/* 文章主体容器 */
.article-content {
  padding: 20px 20px; /* 375px 设计稿下，左右20px边距很舒服 */
}

/* 一级标题样式 */
.article-h1 {
  font-size: 20px; /* 略大一点 */
  font-weight: 700;
  color: #222; /* 接近纯黑 */
  margin-bottom: 16px;
  line-height: 1.4;
}

/* 二级标题样式 */
.article-h2 {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-top: 30px; /* 标题上方留白多一点 */
  margin-bottom: 12px;
  line-height: 1.4;
}

/* 正文段落样式 - 核心还原点 */
.article-p {
  font-size: 15px; /* 移动端阅读标准字号 */
  color: #555; /* 深灰色，不刺眼 */
  line-height: 1.6; /* 黄金行高，易于阅读 */
  text-align: justify; /* 两端对齐，英文排版必备，还原图示的整齐边缘 */
  margin-bottom: 20px;
}

/* 图片容器 */
.article-img-wrapper {
  width: 100%;
  margin: 20px 0;
  border-radius: 8px; /* 圆角 */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 轻微投影增加质感 */
}

.article-img {
  width: 100%;
  height: auto;
  display: block; /* 消除img底部默认间隙 */
}
</style>