<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <h1><i class="el-icon-cloudy-and-sunny"></i> 云服务器价格计算器</h1>
          <el-menu mode="horizontal" router :default-active="'/awsSearch'" class="menu" background-color="#3498db" text-color="#fff" active-text-color="#ffd04b">
            <!-- <el-menu-item index="/"><i class="el-icon-s-finance"></i> 价格计算器</el-menu-item> -->
            <el-menu-item index="/awsSearch"><i class="el-icon-search"></i>AWS报价</el-menu-item>
            <el-menu-item index="/awsSearchDiscount"><i class="el-icon-search"></i>AWS折扣</el-menu-item>
            <!-- <el-menu-item index="/compare"><i class="el-icon-data-analysis"></i> 价格对比</el-menu-item> -->
          </el-menu>
        </div>
      </el-header>
      <el-main class="main-content">
        <div class="sun-rays"></div>
        <router-view></router-view>
      </el-main>
      <el-footer class="footer">
        <p>云服务器价格计算器 &copy; 2023</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
:root {
  --primary-color: #3498db;
  --secondary-color: #f39c12;
  --accent-color: #2ecc71;
  --background-color: #f8f9fa;
  --card-color: #ffffff;
  --text-color: #2c3e50;
}

#app {
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  background-color: var(--background-color);
  min-height: 100vh;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.header h1 {
  margin: 0;
  padding: 10px 0;
  font-size: 24px;
  display: flex;
  align-items: center;
}

.header h1 i {
  margin-right: 10px;
  color: var(--secondary-color);
}

.menu {
  border-bottom: none;
}

.main-content {
  padding: 30px 20px;
  background-color: var(--background-color);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 120px);
}

.sun-rays {
  position: absolute;
  top: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,208,75,0.2) 0%, rgba(255,208,75,0) 70%);
  border-radius: 50%;
  z-index: 0;
  opacity: 0.8;
}

.footer {
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
}

/* 全局卡片样式 */
.el-card {
  border-radius: 12px !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  overflow: hidden;
}

.el-card__header {
  background-color: var(--primary-color);
  color: white;
  padding: 15px 20px;
}

/* 全局按钮样式 */
.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-button--primary:hover {
  background-color: #2980b9 !important;
  border-color: #2980b9 !important;
}

.el-button--success {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* 表单样式 */
.el-form-item__label {
  font-weight: 600;
}

/* 设置表格样式 */
.el-table th {
  background-color: #ecf0f1 !important;
}

@media (max-width: 768px) {
  .header h1 {
    font-size: 20px;
  }

  .main-content {
    padding: 20px 10px;
  }
}
</style> 