<template>
  <div class="app-container">
    <!-- Section 1 -->
    <div class="app-card">
      <h2 class="app-title">报价</h2>
      <el-row :gutter="10">
        <el-col :span="8" class="app-icon-container">
          <el-card shadow="always" class="app-icon-card" >
            <div class="app-icon" @click="handleClick('quoteMobile')">
              <img src="https://via.placeholder.com/50" alt="App1">
            </div>
            <div class="app-name">报价单</div>
          </el-card>
        </el-col>
<!--        <el-col :span="8" class="app-icon-container">-->
<!--          <el-card shadow="always" class="app-icon-card" @click="handleClick('App2')">-->
<!--            <div class="app-icon">-->
<!--              <img src="https://via.placeholder.com/50" alt="App2">-->
<!--            </div>-->
<!--            <div class="app-name">App2</div>-->
<!--          </el-card>-->
<!--        </el-col>-->
        <!-- Add more icons as needed for Section 1 -->
      </el-row>
    </div>

    <!-- Section 2 -->
<!--    <div class="app-card">-->
<!--      <h2 class="app-title">Section 2</h2>-->
<!--      <el-row :gutter="10">-->
<!--        <el-col :span="8" class="app-icon-container">-->
<!--          <el-card shadow="always" class="app-icon-card" @click="handleClick('App10')">-->
<!--            <div class="app-icon">-->
<!--              <img src="https://via.placeholder.com/50" alt="App10">-->
<!--            </div>-->
<!--            <div class="app-name">App10</div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--        <el-col :span="8" class="app-icon-container">-->
<!--          <el-card shadow="always" class="app-icon-card" @click="handleClick('App11')">-->
<!--            <div class="app-icon">-->
<!--              <img src="https://via.placeholder.com/50" alt="App11">-->
<!--            </div>-->
<!--            <div class="app-name">App11</div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--        &lt;!&ndash; Add more icons as needed for Section 2 &ndash;&gt;-->
<!--      </el-row>-->
<!--    </div>-->

<!--    &lt;!&ndash; Section 3 &ndash;&gt;-->
<!--    <div class="app-card">-->
<!--      <h2 class="app-title">Section 3</h2>-->
<!--      <el-row :gutter="10">-->
<!--        <el-col :span="8" class="app-icon-container">-->
<!--          <el-card shadow="always" class="app-icon-card" @click="handleClick('App19')">-->
<!--            <div class="app-icon">-->
<!--              <img src="https://via.placeholder.com/50" alt="App19">-->
<!--            </div>-->
<!--            <div class="app-name">App19</div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--        <el-col :span="8" class="app-icon-container">-->
<!--          <el-card shadow="always" class="app-icon-card" @click="handleClick('App20')">-->
<!--            <div class="app-icon">-->
<!--              <img src="https://via.placeholder.com/50" alt="App20">-->
<!--            </div>-->
<!--            <div class="app-name">App20</div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--        &lt;!&ndash; Add more icons as needed for Section 3 &ndash;&gt;-->
<!--      </el-row>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {

    };
  },
  created() {
    console.log("hello world")
  },
  methods: {
    handleClick(appName) {
      console.log(appName);
      this.$router.push('/' + appName + '/index');
      // 这里可以添加更多的处理逻辑，例如跳转到相应的应用页面
    }
  },
}
</script>

<style>
.app-container {
  padding: 10px;
}

.app-card {
  background-color: #e0f7fa;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
}

.app-title {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  text-align: center;
}

.app-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-icon-card {
  width: 80px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  border-radius: 10px;
  background-color: white;
}

.app-icon img {
  width: 50px;
  height: 50px;
}

.app-name {
  margin-top: 5px;
  font-size: 12px;
  color: #333;
  text-align: center;
}
</style>