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>