rtk-wms-uniapp/pages/workbranch/warehouse/materialDisass/materialWorkBranch.vue

<template>
  <gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
    <template #gHeader>
      <view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goHome"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text"
        >功能列表</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
      </view>
    </template>
    <template #gBody>
      <view class="card-list-flexbox">
        <view class="card">
          <div class="card-panel" style="background-color: #55aa7f;" @click="handleNavigateTo('物料拆分')">
            <text class="font-icons">&#xe661;</text>
            <text>物料拆分</text>
          </div>
        </view>
        <view class="card">
          <div class="card-panel" style="background-color: #00a0e9;" @click="handleNavigateTo('物料合并')">
            <text class="font-icons">&#xe64d;</text>
            <text>物料合并</text>
          </div>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
import {
  defineComponent
} from 'vue'
export default defineComponent({
  setup() {
    const goHome = function() {
      uni.$goHome()
    }
    const handleNavigateTo = function(state) {
      switch (state) {
      case '物料拆分':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/materialDisass/materialSplit'
        })
        break
      case '物料合并':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/materialDisass/materialMerge'
        })
        break
      }
    }

    return {
      goHome,
      handleNavigateTo
    }
  }
})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.card-list-flexbox {
		margin-top: 100px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;

		.card {
			display: flex;
			justify-content: center;
			align-items: center;

			.card-panel {
				width: 85px;
				height: 85px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 8px;
				box-shadow: 1px 1px 2px 3px #e9e9e9;

				text:nth-of-type(2) {
					margin-top: 4px;
					font-size: 12px;
					font-weight: bold;
					color: white;
				}
			}
		}

	}

	.font-icons {
		font-size: 36px;
		color: white;
	}
</style>