manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/work/index.vue

<template>
  <Page title="工作">
    <template v-slot:body>
      <div class="w-full h-full">
        <div class="workLayout" @click.stop>
          <div class="text-gray-950 text-center modulistImage" v-for="(item) in moduleList" :key="item.id"
            @click.stop="toModuleList(item)">
            <img :src="returnImageAddress(item)"  />
            <div class="modulistText">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </template>

    <template v-slot:footer>
      <Footer />
    </template>
  </Page>
</template>

<script setup>
import { ref } from "vue";
import { useLifecycle } from "@hooks/useCommon.js";
import { routingInfos } from "@utility/generalVariables.js";
import useInfoStore from "@store/useInfoStore"
import useRouterStore from "@store/useRouterStore.js";
import Footer from "@components/page/footer.vue";

const userInfo = useInfoStore()
const router = useRouterStore()
const moduleList = ref((userInfo.modularList || []).filter((item) => item.path != '/biReport'))

function toModuleList(item) {
  const jumpTo = routingInfos[item.path.replace('/', '')]
  router.navigateTo({
    pathName: 'moduleList',
    success: () => {
      router.emit('moduleListDetailParameter', {
        row: JSON.stringify(jumpTo)
      })
    }
  })
}

function returnImageAddress(rows) {
  const row = routingInfos[rows.path.replace('/', '')]
  return row?.moduleImage
}

useLifecycle({
  load: () => {
  }
});
</script>

<style lang="scss" scoped>
.workLayout {
  margin: 20px;
  padding-bottom: 20px;
  overflow: auto;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
}
.modulistImage {
  width: 140px;
  height: 140px;
  position: relative;
  margin-left: 18px;
  margin-top: 18px;
  img {
    width: 100%;
    height: 100%;
  }

  .modulistText {
    position: absolute;
    font-size: 18px;
    top: 20px;
    left:  16px;
  }
}
</style>