<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 左侧内容 -->
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>IBMS后台管理框架</h2>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
      </el-col>

      <!-- 右侧技术选型 -->
      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="12">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li v-for="(item, index) in backendTech" :key="index">{{ item }}</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li v-for="(item, index) in frontendTech" :key="index">{{ item }}</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-divider />

    <!-- 其他内容 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <h2>更新日志</h2>
        <ol class="update-log">
          <li v-for="(log, index) in updateLogs" :key="index">{{ log }}</li>
        </ol>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue';

const version = ref('3.8.9');

// 后端技术列表
const backendTech = [
  'SpringBoot',
  'Spring Security',
  'JWT',
  'MyBatis',
  'Druid',
  'Fastjson',
  '...'
];

// 前端技术列表
const frontendTech = [
  'Vue',
  'Vuex',
  'Element-ui',
  'Axios',
  'Sass',
  'Quill',
  '...'
];

// 更新日志
const updateLogs = [
  '修复了一些已知问题',
  '优化了性能',
  '新增了用户管理模块',
  '...'
];
</script>

<style scoped lang="scss">
.home {
  background: #f0f4f8;
  color: #333;
  font-family: 'Roboto', sans-serif;
  min-height: auto;
  padding: 20px;

  h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  p {
    font-size: 16px;
    margin-top: 10px;

    b {
      color: #409eff;
      font-weight: bold;
    }
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
  }

  ul {
    list-style-type: none;
    padding: 0;

    li {
      font-size: 14px;
      line-height: 24px;
      position: relative;
      padding-left: 20px;

      &::before {
        content: '•';
        position: absolute;
        left: 0;
        color: #409eff;
        font-size: 16px;
      }
    }
  }

  .update-log {
    ol {
      padding-left: 20px;

      li {
        font-size: 14px;
        line-height: 24px;
        position: relative;

        &::before {
          content: counter(list-item) '.';
          position: absolute;
          left: -20px;
          color: #409eff;
          font-weight: bold;
        }
      }
    }
  }

  .el-divider {
    background-color: #ddd;
    margin: 30px 0;
  }
}
</style>
