<template> <u-navbar title="工作台" placeholder border=true leftIcon=''></u-navbar> <view class="mabox" v-for="item in tablist" :key="item.name"> <view class="boxtitl"> {{item.name}} </view> <view class="minboxlist"> <view @click="gopathpage(ite.router)" v-for="ite in item.minilist" :key="ite.name"> <image mode="widthFix" :src="ite.icon"></image> <view>{{ite.name}}</view> </view> </view> </view> <!-- #ifdef APP --> <saomiao2></saomiao2> <!-- <saomiao></saomiao> <saomiao1></saomiao1> <saomiao2></saomiao2> <saomiao3></saomiao3> <saomiao4></saomiao4> --> <!-- #endif --> <tips ref="tip"></tips> <!-- <Tabber checkstate='home'></Tabber> --> </template> <script lang="ts" setup> import { onLoad, onShow, onHide, onUnload, onPullDownRefresh } from '@dcloudio/uni-app' import { getImageCache } from '@/utils/cacheimg.js' import { listtype } from '@/interfaces/home/index' import { reactive, toRefs, ref } from "vue"; const tip = ref(null) let details = reactive<listtype>({ tablist: [ { type: 1, name: '盘点任务', minilist: [ { icon: 'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png', name: '盘点任务', router: '/pagesTask/pages/dynamicCheck/dynamicCheck', }, ] }, ] }) function gopathpage(path : string) { uni.navigateTo({ url: path }) } onShow(() => { // updateApp() // print() }) onLoad(() => { }) onPullDownRefresh(() => { setTimeout(() => { // 关闭刷新动画 uni.stopPullDownRefresh() }, 1000) }) const { tablist } = toRefs(details) </script> <style lang="scss"> .mabox { display: flex; flex-direction: column; padding: 20upx 0; box-sizing: border-box; width: 686upx; margin: auto; background-color: #ffffff; margin-bottom: 20upx; margin-top: 10upx; border-radius: 10upx; box-shadow: 0rpx 2rpx 10rpx 0rpx #e2e2e380; .boxtitl { font-size: 34upx; font-weight: 500; margin-bottom: 10upx; // margin-left: 10upx; border-bottom: 1upx solid #EEEEEE; padding: 0upx 20upx; padding-bottom: 20upx; color: #092C4D; } .minboxlist { display: flex; flex-wrap: wrap; align-items: center; // justify-content: space-between; padding-top: 10upx; >view { width: 25%; display: flex; flex-direction: column; align-items: center; margin-bottom: 15upx; >image { width: 60upx; } >view { font-size: 26upx; } } } } </style>