JNBusiness/ruoyi-ui/src/views/mobile/index.vue

<template>
  <div class="app-container">
    <!-- Section 1 -->
    <div class="app-card">
      <p class="app-title">报价</p>
      <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="@/assets/logo/18.png" alt="报价单">
            </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">
      <p class="app-title">客户</p>
      <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('customerMobile')">
              <img src="@/assets/logo/103.png" alt="报价单">
            </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('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>-->
        <!-- Add more icons as needed for Section 2 -->
      </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")
  },
  mounted() {
    this.$store.dispatch('app/toggleSideBarHide', true);
    document.querySelector('.navbar').style.display = "none";
    document.querySelector('.tags-view-container').style.display = "none"
  },
  methods: {
    handleClick(appName) {
      console.log(appName);
      this.$router.push('/' + appName + '/index');
      // 这里可以添加更多的处理逻辑，例如跳转到相应的应用页面
    }
  },
}
</script>

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

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

.app-title {
  margin-bottom: 10px;
  font-size: 20px;
  color: gray;
  text-align: left;
}

.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>