<template>
  <div class="test-container">
    <h1>测试页面</h1>
    <p>这是一个用于测试的页面</p>
    <div class="test-content">
      <!-- 在这里添加您的测试内容 -->
      <div class="test-card">
        <h3>测试组件1</h3>
        <div class="test-box"></div>
      </div>
      <div class="test-card">
        <h3>测试组件2</h3>
        <div class="test-box"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 在这里添加您的测试代码
import { ref, onMounted } from 'vue';

const testValue = ref('测试值');

onMounted(() => {
  console.log('测试页面已加载');
});
</script>

<style scoped lang="scss">
// 引入变量
@import '@/styles/variables.scss';

.test-container {
  padding: 20px;
  
  h1 {
    margin-bottom: 20px;
    color: $primary-color;
  }
  
  .test-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    
    .test-card {
      width: 300px;
      padding: 20px;
      border-radius: $border-radius;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      
      h3 {
        margin-bottom: 15px;
        color: #444;
      }
      
      .test-box {
        height: 150px;
        background-color: #f5f5f5;
        border-radius: 6px;
      }
    }
  }
}
</style> 