count-pass-app/subpages/spare/index.vue

<template>
  <view>
    <!-- 备件管理 -->
			<view class="datav-item">
				<view class="datav-item-header">
					<view class="datav-item-title">
						<view class="datav-item-title-name">备件管理</view>
					</view>
				</view>
				<view class="grid">
					<!-- 备件管理 九宫格菜单 -->
					<u-grid class="menu-list" :col="3">
						<u-grid-item v-for="(child, i) in menuList" :index="i" :key="i" @click="menuClick(child)">
							<uni-icons custom-prefix="elicon" :type="child.icon" size="30"></uni-icons>
							<view class="grid-text">{{child.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      menuList:[
        {
          icon:'el-icon-sold-out',
          name:"入库登记",
          to:'/subpages/spare/warehousing'
        },
        {
          icon:'el-icon-sell',
          name:"出库登记",
          to:'/subpages/spare/outdepot'
        },
        {
          icon:'el-icon-search',
          name:"库存查询",
          to:'/subpages/spare/stockquery'
        },
        {
          icon:'el-icon-receiving',
          name:"库存盘点",
          to:'/subpages/spare/stockcheck'
        },
      ]
    }
  },
  methods:{
    menuClick(child){
      uni.navigateTo({ url: child.to })
    },
  }
}
</script>

<style lang="scss" scoped>
// 九宫格菜单
	/deep/ .grid{
    width: 100%;
    padding: 24rpx;
    .u-grid-item{
      padding: 24rpx;
    }
    .grid-text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
      .datav-item {
				margin-bottom: 25rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				align-content: center;
				justify-content: flex-start;
				width: 100%;
				// border-top: 1px solid #e4e7ed;
				padding: 10rpx;

				.datav-item-header {
					width: 100%;
					position: relative;
					padding-left: 20rpx;
					margin-top: 10rpx;
					margin-bottom: 20rpx;

					.datav-item-title {
						width: 100%;
						font-size: 30rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-weight: 600;
						display: flex;
						flex-direction: row;
						align-items: center;
						align-content: center;
						justify-content: flex-start;

						.datav-item-title-name {
							flex: 1;
						}
					}
				}

				.datav-item-header:after {
					position: absolute;
					width: 8rpx;
					height: 55rpx;
					content: "";
					left: 0;
					top: 0;
					border-radius: 10rpx;
					background-color: #409EFF;
				}

				.device-list {
					width: 100%;
				}
			}
</style>