Vent-App/pages/home/home.vue

<template name="home">
  <view>
    <!-- 其他页面内容 -->
    <Firstmodel :showColum="showColum"></Firstmodel>
  </view>
</template>

<script>
import Firstmodel from "./firstmodel.vue";
import { us, os } from "@/common/util/work.js";
import { mapActions } from "vuex";
import api from "@/api/api";
export default {
  components: {
    Firstmodel,
  },
  name: "home",
  watch: {},
  data() {
    return {
      usList: us.data,
      osList: os.data,
      msgCount: 0,
      showColum: {},
      dot: {
        mailHome: false,
      },
      currentTab: 0, // 当前选中的选项卡索引
    };
  },
  methods: {
    getShowColum() {
      new Promise((resolve, reject) => {
        api
          .getShowColum({})
          .then((response) => {
            if (response.data.code == 200) {
              var showlist = response.data.result;
              this.$store.commit("SET_SHOWCOLUM", showlist);
              this.showColum = showlist;
            } else {
              resolve(response);
            }
          })
          .catch((error) => {
            console.log("catch===>response", response);
            reject(error);
          });
      });
    },
  },
  created() {
    this.getShowColum();
  },
  onLoad() {},
};
</script>

<style scoped>
.cu-list.grid > .cu-item {
  padding: 0px 0px;
}
.line2-icon {
  width: 60px;
  height: 60px;
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #eee;
}

.tab-bar view {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.tab-bar view.active {
  background-color: #007bff;
  color: #fff;
}
</style>